/* ============================================================
   Central Church — shared mega navigation
   The single source of truth for the site nav bar.
   Mirrors the home-page nav: fixed + transparent over hero,
   solid on scroll, with a hover mega-menu and mobile drawer.
   Relies on the brand tokens defined on every page / brand.css.
   ============================================================ */

/* ---------- Nav shell ---------- */
header.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:84px; transition:height .3s ease; }
header.nav .brand{ display:flex; flex-direction:column; line-height:1; }
header.nav .brand b{ font-family:var(--ff-sans,var(--ff)); font-weight:800; letter-spacing:.18em; font-size:1.18rem; color:#fff; transition:color .3s ease; }
header.nav .brand span{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:5px; transition:color .3s ease; white-space:nowrap; }

.menu{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.menu > li{ list-style:none; position:static; }
.menu .mlink{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.7em .95em; font-family:var(--ff-sans,var(--ff)); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.9); background:none; border:0; cursor:pointer; white-space:nowrap; position:relative;
  transition:color .25s ease;
}
.menu .mlink::after{ content:""; position:absolute; left:.95em; right:.95em; bottom:.42em; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left; opacity:.9;
  transition:transform .32s cubic-bezier(.7,0,.2,1); }
.menu .mlink:hover{ color:#fff; }
.menu .mlink:hover::after, .menu .mlink.active::after{ transform:scaleX(1); }
.menu .caret{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7; transition:transform .3s ease; }
.menu .mlink.active .caret{ transform:rotate(225deg) translateY(3px); }

/* ---------- Mega menu ---------- */
.mega{
  position:absolute; left:0; right:0; top:100%; padding:0 var(--gut);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
  transition:opacity .3s ease, transform .38s cubic-bezier(.7,0,.2,1);
}
header.nav.open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mega-card{ max-width:1000px; margin:8px auto 0; background:#fff; border-radius:14px; padding:36px 40px;
  box-shadow:0 44px 90px -34px rgba(20,45,50,.5); }
.mega-pane{ display:none; grid-template-columns:288px 1fr; gap:40px; }
.mega-pane.on{ display:grid; }
.mega-feat{ display:flex; flex-direction:column; }
.mega-feat .fimg{ border-radius:9px; overflow:hidden; aspect-ratio:16/11; background:var(--paper-2); margin-bottom:18px; }
.mega-feat .fimg img{ width:100%; height:100%; object-fit:cover; }
.mega-feat h4{ font-family:var(--ff-sans,var(--ff)); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); font-weight:800; }
.mega-feat p{ color:var(--ink-soft); font-size:.92rem; margin:.7em 0 1.1em; line-height:1.5; }
.mega-feat .btn{ align-self:flex-start; }
.mega-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 34px; border-left:1px solid var(--line); padding-left:40px; align-content:start; }
.mcol h6{ font-family:var(--ff-sans,var(--ff)); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); font-weight:800; margin-bottom:12px; }
.mcol a{ display:block; padding:6px 0; font-size:.95rem; color:var(--ink-soft); font-weight:500; transition:color .2s ease, padding-left .2s ease; }
.mcol a:hover{ color:var(--ocean-deep); padding-left:5px; }
.mcol .sub{ font-size:.8rem; color:var(--ink-soft); opacity:.8; padding:2px 0 8px; }

/* ---------- CTA / hamburger ---------- */
header.nav .nav-cta{ display:flex; align-items:center; gap:14px; }
header.nav .nav-cta .give{
  padding:.7em 1.4em; border-radius:var(--r); border:1.5px solid rgba(255,255,255,.6); color:#fff;
  font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; transition:.2s ease;
}
header.nav .nav-cta .give:hover{ background:#fff; color:var(--ink); }
header.nav .hamb{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
header.nav .hamb span{ width:26px; height:2px; background:#fff; transition:.3s ease; }

/* ---------- Scrolled / solid state ---------- */
header.nav.solid{ background:rgba(255,255,255,.97); box-shadow:0 1px 0 var(--line); -webkit-backdrop-filter:saturate(1.4) blur(6px); backdrop-filter:saturate(1.4) blur(6px); }
header.nav.solid .nav-inner{ height:72px; }
header.nav.solid .brand b{ color:var(--ink); }
header.nav.solid .brand span{ color:var(--ocean); }
header.nav.solid .menu .mlink{ color:var(--ink-soft); }
header.nav.solid .menu .mlink:hover, header.nav.solid .menu .mlink.active{ color:var(--ocean-deep); }
header.nav.solid .nav-cta .give{ border-color:var(--ink); color:var(--ink); }
header.nav.solid .nav-cta .give:hover{ background:var(--ink); color:#fff; }
header.nav.solid .hamb span{ background:var(--ink); }

/* ---------- Mobile drawer ---------- */
.mobile{ position:fixed; inset:0; z-index:60; background:var(--ink); transform:translateX(100%); transition:transform .35s cubic-bezier(.7,0,.2,1); display:flex; flex-direction:column; padding:28px var(--gut); }
.mobile.open{ transform:translateX(0); }
.mobile-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.mobile-top b{ color:#fff; font-weight:800; letter-spacing:.18em; }
.mclose{ background:none; border:0; color:#fff; font-size:2rem; cursor:pointer; line-height:1; }
.mobile nav a{ display:block; color:#fff; font-family:var(--ff-disp,var(--ff)); font-size:1.7rem; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile nav small{ display:block; color:rgba(255,255,255,.4); font-family:var(--ff-sans,var(--ff)); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; margin-top:24px; margin-bottom:4px; }
.mobile .give-m{ margin-top:28px; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  header.nav .menu, header.nav .nav-cta .give, .mega{ display:none; }
  header.nav .hamb{ display:flex; }
}