/*
Theme Name: Bombeke Foundation
Theme URI: https://bombeke.org/themes/bombeke-foundation/
Template: wens-haelo
Author: Bombeke Foundation
Author URI: https://bombeke.org/
Description: Bombeke Foundation is inspired by WENS Academy and a modern and versatile Full Site Editing (FSE) WordPress theme designed specifically for schools, colleges, training centers, and online learning platforms. As a child theme of WENS Haelo, it inherits the clean, responsive, and highly customizable structure of the parent theme while adding specialized templates such as Academy, Courses, and FAQ. These templates make it easy for educational institutions to showcase academic programs, provide detailed information about courses, and offer quick answers to student inquiries. With WENS Academy, users can build and customize every aspect of their website including headers, footers, and layouts directly through the WordPress Site Editor, without requiring any coding skills. Fully compatible with Gutenberg, this theme delivers block-based design flexibility, making it simple to create professional and visually appealing educational websites. The WENS Academy theme is lightweight, SEO-friendly, and translation ready, ensuring fast performance and accessibility across all devices. It is ideal for eLearning portals, coaching institutes, and universities, providing an elegant and functional foundation for delivering a seamless online learning experience.
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio
Text Domain: bombeke-foundation
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.8
Version: 1.0.13

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    --gold: #C9922B;
    --gold-light: #E8B455;
    --deep: #1A2E3B;
    --deep2: #233747;
    --cream: #FDF8F1;
    --cream2: #F5EDE0;
    --text: #2C1810;
    --muted: #7A6A5A;
    --white: #FFFFFF;
    --accent: #8B1A1A;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Jost', sans-serif;
    background: var(--cream);
    color: var(--text);
    overflow-x: hidden;
  }

  /* ── HERO BANNER ── */
  .hero {
    background: linear-gradient(135deg, var(--deep) 0%, var(--deep2) 60%, #2E4D35 100%);
    padding: 70px 40px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,146,43,0.18) 0%, transparent 70%);
  }
  .hero-cross {
    font-size: 1.6rem;
    color: var(--gold-light);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    margin-bottom: 14px;
    opacity: 0.85;
    position: relative;
  }
  .hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    position: relative;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--gold-light);
  }
  .hero-sub {
    margin-top: 18px;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    font-weight: 300;
    letter-spacing: 0.05em;
    position: relative;
  }
  .hero-divider {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 24px auto 0;
    position: relative;
  }

  /* ── LAYOUT ── */
  .page-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 80px;
  }

  .intro-block {
    background: var(--white);
    border-left: 4px solid var(--gold);
    margin: -24px auto 50px;
    max-width: 800px;
    padding: 28px 34px;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 4px 24px rgba(26,46,59,0.08);
    position: relative;
  }
  .intro-block p {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.8;
  }
  .intro-block p strong { color: var(--deep); }

  /* ── SECTION TITLES ── */
  .section-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
  }
  .section-label .badge {
    background: var(--gold);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 30px;
    white-space: nowrap;
  }
  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--gold-light), transparent);
  }
  .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 8px;
    line-height: 1.2;
  }

  /* ── OPTIONS GRID ── */
  .options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 60px;
  }
  @media(max-width: 680px) { .options-grid { grid-template-columns: 1fr; } }

  .option-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(26,46,59,0.09);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .option-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(26,46,59,0.14);
  }
  .card-header {
    padding: 20px 26px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .option-card:first-child .card-header { background: linear-gradient(135deg, var(--deep) 0%, var(--deep2) 100%); }
  .option-card:last-child .card-header { background: linear-gradient(135deg, #E65100 0%, #BF360C 100%); }

  .card-icon {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
  }
  .card-header h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.2;
  }
  .card-header small {
    color: rgba(255,255,255,0.65);
    font-size: 0.75rem;
    font-weight: 300;
    display: block;
    margin-top: 2px;
  }

  .card-body {
    padding: 26px 26px 28px;
  }

  /* Bank details table */
  .bank-table { width: 100%; border-collapse: collapse; }
  .bank-table tr { border-bottom: 1px solid var(--cream2); }
  .bank-table tr:last-child { border-bottom: none; }
  .bank-table td {
    padding: 9px 4px;
    font-size: 0.88rem;
    line-height: 1.5;
    vertical-align: top;
  }
  .bank-table td:first-child {
    color: var(--muted);
    font-weight: 500;
    width: 42%;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-right: 12px;
  }
  .bank-table td:last-child { color: var(--deep); font-weight: 400; }
  .bank-table .highlight { color: var(--deep); font-weight: 700; font-size: 0.95rem; }
  .bank-table .mono { font-family: 'Courier New', monospace; letter-spacing: 0.06em; }
  .account-chip {
    display: inline-block;
    background: var(--cream2);
    border: 1px solid rgba(201,146,43,0.3);
    border-radius: 6px;
    padding: 3px 9px;
    font-family: monospace;
    font-size: 0.88rem;
    margin: 2px 0;
    color: var(--deep);
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .account-chip span {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 4px;
    font-family: 'Jost', sans-serif;
  }
  .swift-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--deep), var(--deep2));
    color: var(--gold-light);
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 6px;
    margin-top: 2px;
  }

  /* Mobile money steps */
  .mm-steps { list-style: none; }
  .mm-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--cream2);
  }
  .mm-step:last-child { border-bottom: none; }
  .step-num {
    width: 30px; height: 30px;
    background: #E65100;
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  .step-text {
    font-size: 0.9rem;
    color: var(--text);
    padding-top: 5px;
    line-height: 1.5;
  }
  .step-code {
    display: inline-block;
    background: #FFF3E0;
    border: 2px solid #E65100;
    color: #E65100;
    font-family: monospace;
    font-size: 1rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 6px;
    letter-spacing: 0.1em;
  }

  /* ── APPRECIATION BANNER ── */
  .appreciation {
    background: linear-gradient(135deg, #2E4D35 0%, var(--deep) 100%);
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
  }
  .appreciation::before {
    content: '✦';
    position: absolute;
    font-size: 8rem;
    color: rgba(255,255,255,0.04);
    top: -20px; right: -10px;
  }
  .appreciation p {
    color: rgba(255,255,255,0.9);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
  }
  .appreciation p strong {
    color: var(--gold-light);
    font-style: normal;
    font-weight: 700;
  }

  /* ── 10 WAYS SECTION ── */
  .ways-header { margin-bottom: 36px; }
  .ways-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
  }
  @media(max-width: 620px) { .ways-grid { grid-template-columns: 1fr; } }

  .way-card {
    background: var(--white);
    border-radius: 14px;
    padding: 22px 22px 22px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 2px 14px rgba(26,46,59,0.06);
    border: 1px solid rgba(201,146,43,0.1);
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  .way-card:hover {
    border-color: rgba(201,146,43,0.4);
    box-shadow: 0 6px 24px rgba(26,46,59,0.1);
  }
  .way-num {
    min-width: 36px; height: 36px;
    background: var(--cream2);
    border: 2px solid var(--gold);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gold);
    flex-shrink: 0;
  }
  .way-content h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--deep);
    margin-bottom: 5px;
    line-height: 1.3;
  }
  .way-content p {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.6;
    font-weight: 300;
  }

  /* ── FOOTER CTA ── */
  .footer-cta {
    text-align: center;
    padding: 50px 24px;
    background: var(--cream2);
    border-radius: 20px;
    border: 1px solid rgba(201,146,43,0.2);
    margin-top: 20px;
  }
  .footer-cta p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 6px;
  }
  .footer-cta h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 20px;
  }
  .cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--white);
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 36px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(201,146,43,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(201,146,43,0.5);
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero h1, .hero-sub, .hero-cross { animation: fadeUp 0.7s ease both; }
  .hero h1 { animation-delay: 0.1s; }
  .hero-sub { animation-delay: 0.25s; }
  .intro-block { animation: fadeUp 0.6s 0.3s ease both; }