/* ==========================================================================
   ONYIA / Chinwike Onyia — chinwikeonyia.com site redesign
   Shared design system. Safe to paste into Kadence "Additional CSS"
   ALONGSIDE the theme's own stylesheet — nothing here replaces Kadence.

   Every rule is scoped under .onyia-site so it can only ever affect content
   inside that wrapper. Wrap whatever you paste into a Custom HTML block like:
     <div class="onyia-site"> ...content... </div>
   This prevents collisions with Kadence's (or any plugin's) own use of
   generic class names like .container, .card, .btn, .grid.

   See IMPLEMENTATION-NOTES.md and WORDPRESS-SETUP-GUIDE.md for the full
   port-over plan.
   ========================================================================== */

:root{
  /* Global custom properties — safe to leave unscoped, they have no visual
     effect on their own until referenced by a scoped rule below. */
  --navy:#0A1B3D;
  --navy-deep:#060F26;
  --blue:#1B4F91;
  --teal:#12857A;
  --teal-light:#1AA391;
  --purple:#5B2A86;
  --green:#1E8A5F;
  --gold:#C68A1E;
  --gold-deep:#9C6B12;
  --ink:#0A1B3D;
  --muted:#5A6A85;
  --paper:#F5F7FB;
  --line:#E3E8F1;
  --maxw:1160px;
}

/* Optional, genuinely global, non-visual — safe to keep even though it isn't
   scoped: it only changes scroll animation, never appearance or layout. */
html{scroll-behavior:smooth;}

.onyia-site, .onyia-site *{box-sizing:border-box;}
.onyia-site{
  font-family:'Segoe UI', Helvetica, Arial, sans-serif;
  color:var(--ink); background:#fff; line-height:1.5;
}
.onyia-site img{max-width:100%; display:block;}
.onyia-site a{color:inherit; text-decoration:none;}
.onyia-site .container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.onyia-site section{padding:76px 0;}
.onyia-site h1, .onyia-site h2, .onyia-site h3, .onyia-site h4{
  margin:0 0 14px 0; font-weight:800; letter-spacing:.2px;
}
.onyia-site h2{font-size:34px;}
.onyia-site h3{font-size:21px;}
.onyia-site p{margin:0 0 14px 0; color:var(--muted); font-size:16px;}
.onyia-site .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800;
  letter-spacing:2.5px; color:var(--teal); text-transform:uppercase; margin-bottom:12px;
}
.onyia-site .eyebrow .dot{width:7px;height:7px;border-radius:50%; background:var(--gold);}
.onyia-site .center{text-align:center;}
.onyia-site .lead{font-size:18px; max-width:680px;}
.onyia-site .mx-auto{margin-left:auto; margin-right:auto;}

/* ---------------- BUTTONS ---------------- */
.onyia-site .btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:8px;
  font-weight:700; font-size:14.5px; letter-spacing:.3px; cursor:pointer; border:2px solid transparent;
}
.onyia-site .btn-gold{ background:var(--gold); color:var(--navy-deep); }
.onyia-site .btn-gold:hover{ background:var(--gold-deep); }
.onyia-site .btn-outline{ border-color:rgba(255,255,255,0.55); color:#fff; }
.onyia-site .btn-outline-navy{ border-color:var(--navy); color:var(--navy); }
.onyia-site .btn-teal{ background:var(--teal); color:#fff; }

/* ---------------- HEADER / NAV ---------------- */
/* NOTE: on the live WordPress site, Kadence's own Header Builder replaces
   this block entirely (see WORDPRESS-SETUP-GUIDE.md Step 2) — kept here only
   so the standalone prototype files still preview correctly on their own. */
.onyia-site header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.96);
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px);
}
.onyia-site .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto; }
.onyia-site .logo{ font-weight:800; font-size:19px; color:var(--navy); display:flex; align-items:center; gap:8px;}
.onyia-site .logo .mark{ color:var(--gold); }
.onyia-site nav.links{ display:flex; align-items:center; gap:28px; }
.onyia-site nav.links a{ font-size:14px; font-weight:700; color:var(--navy); opacity:.75; }
.onyia-site nav.links a.active, .onyia-site nav.links a:hover{ opacity:1; color:var(--teal); }
.onyia-site .nav-cta{ display:flex; align-items:center; gap:14px; }
.onyia-site .nav-cta .btn{ padding:10px 20px; }

/* ---------------- HERO ---------------- */
.onyia-site .hero{
  background:
    radial-gradient(700px 500px at 85% 20%, rgba(91,42,134,0.35), transparent 65%),
    radial-gradient(700px 500px at 10% 90%, rgba(18,133,122,0.20), transparent 60%),
    linear-gradient(135deg, var(--navy), var(--navy-deep));
  color:#fff; padding:96px 0 84px 0; position:relative; overflow:hidden;
}
.onyia-site .hero::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1.3px, transparent 1.3px);
  background-size:24px 24px; opacity:.6;
}
.onyia-site .hero .container{ position:relative; z-index:2; }
.onyia-site .hero h1{ font-size:48px; max-width:760px; color:#d8e0f2; }
.onyia-site .hero p.lead{ color:#d8e0f2; }
.onyia-site .hero-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.onyia-site .hero-strip{ padding:64px 0; }

/* ---------------- SECTIONS ---------------- */
.onyia-site .section-alt{ background:var(--paper); }
.onyia-site .grid{ display:grid; gap:24px; }
.onyia-site .grid-2{ grid-template-columns:1fr 1fr; }
.onyia-site .grid-3{ grid-template-columns:repeat(3,1fr); }
.onyia-site .grid-4{ grid-template-columns:repeat(4,1fr); }
.onyia-site .grid-5{ grid-template-columns:repeat(5,1fr); }
.onyia-site .grid-6{ grid-template-columns:repeat(6,1fr); }

/* ---------------- CARDS ---------------- */
.onyia-site .card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  box-shadow:0 6px 18px rgba(10,27,61,0.06);
}
.onyia-site .card h3{ color:var(--navy); }
.onyia-site .card .icon-badge{
  width:46px;height:46px;border-radius:12px; display:flex; align-items:center;justify-content:center;
  margin-bottom:14px;
}
.onyia-site .card .icon-badge svg{ width:24px;height:24px; }

/* pillar accent badges (Observe/Navigate/Yield/Improve/Adapt) */
.onyia-site .pillar-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  letter-spacing:.5px; padding:4px 10px; border-radius:999px; color:#fff;
}
.onyia-site .pillar-tag.observe{ background:var(--navy); }
.onyia-site .pillar-tag.navigate{ background:var(--blue); }
.onyia-site .pillar-tag.yield{ background:var(--purple); }
.onyia-site .pillar-tag.improve{ background:var(--gold-deep); }
.onyia-site .pillar-tag.adapt{ background:var(--teal); }

/* ---------------- BANNER SLOT (page-header brand graphic) ---------------- */
.onyia-site .banner-slot{
  position:relative; border-radius:18px; overflow:hidden; min-height:220px;
  background:linear-gradient(135deg,#0e2b5c,#0a1b3d);
  box-shadow:0 16px 40px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.08);
}
.onyia-site .banner-slot img{ width:100%; height:auto; display:block; }
.onyia-site .banner-fallback{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#9fb0d1; font-size:13px; padding:26px; gap:8px;
}
.onyia-site .banner-fallback code{ background:rgba(255,255,255,0.08); color:#fff; padding:3px 8px; border-radius:6px; font-size:12px; }
.onyia-site .banner-slot.missing .banner-fallback{ display:flex; }

/* ---------------- FOOTER ---------------- */
/* NOTE: on the live WordPress site, Kadence's own Footer Builder replaces
   this block entirely (see WORDPRESS-SETUP-GUIDE.md Step 2) — kept here only
   so the standalone prototype files still preview correctly on their own. */
.onyia-site footer.site{ background:var(--navy-deep); color:#c7d1e6; padding:56px 0 26px 0; }
.onyia-site footer.site h4{ color:#fff; font-size:14px; letter-spacing:1px; }
.onyia-site footer.site a{ font-size:14px; color:#9fb0d1; display:block; margin-bottom:9px; }
.onyia-site footer.site a:hover{ color:#fff; }
.onyia-site .foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.onyia-site .foot-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12);
  display:flex; justify-content:space-between; font-size:12.5px; color:#7c8bab; flex-wrap:wrap; gap:10px;
}
.onyia-site .social-row{ display:flex; gap:12px; margin-top:14px; }
.onyia-site .social-row a{ width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; margin-bottom:0;}
.onyia-site .social-row svg{ width:16px;height:16px; }

/* ---------------- MISC ---------------- */
.onyia-site .divider{ height:1px; background:var(--line); margin:8px 0 0 0; }
.onyia-site .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.onyia-site .stat{ text-align:center; }
.onyia-site .stat .num{ font-size:38px; font-weight:800; color:var(--navy); }
.onyia-site .stat .lbl{ font-size:13px; color:var(--muted); font-weight:600; }

@media (max-width:900px){
  .onyia-site nav.links{ display:none; }
  .onyia-site .grid-2, .onyia-site .grid-3, .onyia-site .grid-4, .onyia-site .grid-5, .onyia-site .grid-6{ grid-template-columns:1fr 1fr; }
  .onyia-site .foot-grid{ grid-template-columns:1fr 1fr; }
  .onyia-site .hero h1{ font-size:34px; }
}