/*
Theme Name: OHIAERIFAMILY Theme
Theme URI: https://ohiaerifamily.org
Author: Ikenna Brian Ohiaeri
Description: Custom theme for OHIAERIFAMILY — A window into Igbo culture.
Version: 1.0
Text Domain: ohiaerifamily
*/
 :root{
      --bg: #fafafa;
      --fg: #111827;
      --muted: #4b5563;
      --border: #e5e7eb;

      --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-800:#065f46;
      --emerald-900:#064e3b; --emerald-950:#022c22;

      --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-500:#f59e0b;

      --radius-xl: 1.25rem; --radius-2xl: 1.5rem;
    }

    html{box-sizing:border-box}
    *,*::before,*::after{box-sizing:inherit}

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--fg);
      background:var(--bg);
      line-height:1.6;
    }

    a{color:inherit}
    img{max-width:100%; display:block}

    .container{max-width:72rem; margin-inline:auto; padding:0 1rem}

    .sr-only{
      position:absolute; width:1px; height:1px; padding:0;
      margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
      border:0
    }

    .btn{
      display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
      padding:.65rem 1rem; border-radius:.75rem; border:1px solid transparent;
      font-weight:600; cursor:pointer; text-decoration:none;
    }
    .btn-primary{background:var(--emerald-900); color:#fff}
    .btn-primary:hover{background:#0a6b52}
    .btn-amber{background:var(--amber-500); color:#111827}
    .btn-amber:hover{filter:brightness(0.95)}
    .btn-outline{border:1px solid var(--border); background:#fff}
    .btn.no-wrap{white-space:nowrap}

    header.topbar{
      position:sticky; top:0; z-index:40;
      background:#fff; backdrop-filter:saturate(180%) blur(6px);
      border-bottom:1px solid var(--border);
    }

    header .brand{display:flex; align-items:center; gap:.75rem}
    .brand-mark{
      width:36px; height:36px; border-radius:999px;
      background:var(--emerald-900); color:#fff;
      display:grid; place-items:center; font-weight:700;
    }

    nav.primary{display:none}
    @media (min-width:768px){
      nav.primary{display:flex; gap:1rem; font-size:.95rem}
    }
    nav.primary a{padding:.5rem .25rem}
    nav.primary a:hover{color:var(--emerald-800)}

    /* HERO */
    .hero{
      position:relative;
      color:#fff;
      background:linear-gradient(135deg, var(--emerald-950), var(--emerald-900) 40%, #0b5e4a);
    }

    .hero .wrap{display:grid; gap:1.25rem; grid-template-columns:1fr}
    @media (min-width:1024px){
      .hero .wrap{
        grid-template-columns:7fr 5fr;
        gap:1.5rem;
        align-items:center;
      }
    }

    /* ✅ Reduced top padding so heading sits closer to the top */
    .hero .hero-inner{ padding:1.5rem 1rem 2rem; }
    @media (min-width:1024px){
      .hero .hero-inner{ padding:1.75rem 1rem 2.25rem; }
    }

    .uli{position:absolute; inset:0; opacity:.1; pointer-events:none}
    .uli path{stroke:currentColor; fill:none}

    /* Sections + cards */
    section{scroll-margin-top:80px}
    .section-head small{
      letter-spacing:.1em; text-transform:uppercase;
      color:var(--emerald-800); font-weight:700;
    }

    .grid{display:grid; gap:1rem}
    @media (min-width:640px){
      .grid.sm-2{grid-template-columns:repeat(2, minmax(0,1fr))}
    }
    @media (min-width:1024px){
      .grid.lg-3{grid-template-columns:repeat(3, minmax(0,1fr))}
    }

    .card{
      background:#fff; border:1px solid var(--border);
      border-radius:var(--radius-2xl); padding:1rem;
    }
    .muted{color:#6b7280}

    /* Newsletter (fix: button never squashed) */
    .newsletter{
      display:flex;
      flex-direction:column;
      gap:.5rem;
      align-items:stretch;
    }

    .newsletter .field{
      flex:1 1 auto;
      min-width:12rem;
    }

    .newsletter .submit{
      flex:0 0 auto;
      white-space:nowrap;
      min-width:9.5rem;
    }

    @media (min-width:640px){
      .newsletter{
        flex-direction:row;
        align-items:center;
        flex-wrap:nowrap;
      }
      .newsletter .field{max-width:22rem;}
    }

    input[type=email], input[type=text], textarea{
      width:100%;
      padding:.7rem .85rem;
      border:1px solid var(--border);
      border-radius:.6rem;
      font:inherit;
    }

    /* ===== FEATURED PROVERBS – SPOTLIGHT CARD ===== */
    .featured{
      position:relative;
      border-radius:1.75rem;
      padding:1.25rem;
      color:var(--fg);
      background:
        radial-gradient(520px 220px at 15% 10%, rgba(16,185,129,.20), transparent 55%),
        radial-gradient(420px 200px at 90% 0%, rgba(245,158,11,.16), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(236,253,245,.86));
      border:1px solid rgba(255,255,255,.40);
      box-shadow:
        0 30px 70px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.35);
      backdrop-filter: blur(10px);
    }

    .featured::before{
      content:"";
      position:absolute; inset:0;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(135deg, rgba(16,185,129,.90), rgba(245,158,11,.55), rgba(16,185,129,.35));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
    }

    .featured::after{
      content:"";
      position:absolute; inset:0;
      border-radius:inherit;
      background:
        repeating-linear-gradient(
          135deg,
          rgba(6,95,70,.06) 0px,
          rgba(6,95,70,.06) 1px,
          transparent 1px,
          transparent 10px
        );
      opacity:.35;
      pointer-events:none;
    }

    .featured .chip{
      display:inline-flex; align-items:center; gap:.35rem;
      background:rgba(6,95,70,.10);
      border:1px solid rgba(6,95,70,.25);
      color:#065f46;
      padding:.25rem .6rem;
      border-radius:999px;
      font-weight:800;
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      position:relative;
      z-index:1;
    }

    .featured .chip::before{
      content:"";
      display:inline-block;
      width:.5rem; height:.5rem;
      border-radius:999px;
      margin-right:.15rem;
      background:linear-gradient(135deg, rgba(16,185,129,.9), rgba(245,158,11,.7));
    }

    .accent{
      position:relative;
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      background:#fafafa;
      padding:1rem;
    }

    .featured .accent{
      background:linear-gradient(135deg, #ffffff, #ecfdf5);
      border:1px solid rgba(6,95,70,.18);
      position:relative;
      z-index:1;
    }

    .featured h3{color:#022c22; position:relative; z-index:1;}
    .featured p{color:#065f46; position:relative; z-index:1;}

    /* ===== FEATURED WISDOM v2 (Audio Chapters) ===== */
    .fw2-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:1rem;
      margin-top:1rem;
    }
    @media (min-width:900px){
      .fw2-grid{
        grid-template-columns:1.1fr .9fr;
        align-items:start;
      }
    }

    .fw2-now{padding:1rem; border-radius:1.25rem}
    .fw2-now-label{font-weight:900; color:#065f46; letter-spacing:.02em}
    .fw2-now-igbo{margin-top:.5rem; font-size:1.15rem; font-weight:900; color:#022c22}
    .fw2-now-en{margin-top:.25rem; font-size:.95rem; color:#065f46; font-style:italic}

    .fw2-controls{display:flex; flex-direction:column; gap:.5rem}
    .fw2-status{margin:0; font-size:.85rem; color:#065f46; font-weight:700}

    .fw2-list{margin-top:1rem; display:grid; gap:.5rem}
    .fw2-item{
      border:1px solid rgba(6,95,70,.14);
      border-radius:1rem;
      background:rgba(255,255,255,.8);
      overflow:hidden;
    }

    .fw2-item-btn{
      width:100%;
      display:flex;
      gap:.75rem;
      align-items:flex-start;
      padding:.75rem .85rem;
      border:0;
      background:transparent;
      text-align:left;
      cursor:pointer;
    }

    .fw2-item-btn:focus-visible{
      outline:3px solid rgba(16,185,129,.45);
      outline-offset:2px;
      border-radius:.85rem;
    }

    .fw2-time{flex:0 0 auto; font-weight:900; color:#065f46; min-width:3.25rem}
    .fw2-text{display:flex; flex-direction:column; gap:.15rem}
    .fw2-igbo{font-weight:900; color:#022c22}
    .fw2-en{color:#065f46; font-style:italic}

    .fw2-item.is-active{
      background:linear-gradient(135deg, rgba(16,185,129,.14), rgba(245,158,11,.10));
      border-color:rgba(16,185,129,.35);
    }
    .fw2-item.is-active .fw2-time{color:#022c22}

    audio{
      width:min(360px, 100%);
      border-radius:.75rem;
      box-shadow:0 8px 18px rgba(2,44,34,.25);
    }

    html, body{overflow-x:hidden}
    .container{padding:0 .875rem}
    .wrap > *{min-width:0}
    h1, h2, h3, p, a, button{overflow-wrap:anywhere; word-break:break-word; hyphens:auto}
    input, textarea, select{font-size:16px}

    footer{border-top:1px solid var(--border)}