/* ═══════════════════════════════════════════════════════════════════════════════
   PM UNIVERSAL HEADER — css/pm-nav.css  (2026-09-10)
   The ONE stylesheet for the site header. index.html links it (its inline copy is gone)
   and js/pm-header.js injects it on every other public page, so a change here — font,
   colour, the logo/signature layout, the pill — lands everywhere at once.
   Caleb: "the header that we have on the landing page should be universal everywhere".
   Everything is scoped to #nav / .nav-* so inner pages' other <nav> elements are untouched.
   ═══════════════════════════════════════════════════════════════════════════════ */
#nav{
  /* CJK companion — see css/landing-type.css §0b; the fallback covers pages with no type system */
  --pmnav-cjk:var(--pmt-cjk,'Noto Sans SC');
  --pmnav-ink:#0F172A; --pmnav-sub:#64748B; --pmnav-blue:#2563EB;
  position:fixed; top:0; left:50%; right:auto; transform:translateX(-50%);
  width:100%; max-width:100%; z-index:200; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:68px;
  background:rgba(249,250,252,0.92);
  border:1px solid transparent;
  transition:max-width .34s cubic-bezier(.4,0,.2,1), top .34s cubic-bezier(.4,0,.2,1), height .34s ease, padding .34s ease, border-radius .34s ease, border-color .34s ease, box-shadow .34s ease, background .3s ease;
}
#nav *{box-sizing:border-box;}
#nav.scrolled{background:rgba(249,250,252,0.97);box-shadow:0 4px 24px rgba(37,99,235,0.08);}
#nav .nav-logo{display:flex;align-items:center;text-decoration:none;}
#nav .nav-logo img{height:48px;width:auto;}
#nav .nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;}
#nav .nav-links a{font-size:14px;font-weight:600;color:var(--sub,var(--pmnav-sub));text-decoration:none;transition:color .2s;}
#nav .nav-links a:hover{color:var(--ink,var(--pmnav-ink));}
/* The pill reads the page's --blue on the LANDING only, where the Page Colour skins set it
   (teal, gold…). Inner pages define --blue as all sorts of tints (education.html has #EAF6FC),
   which washed the pill out — so off the landing it is pinned to the header's own blue. */
/* Plain-class selector on purpose: the landing's Page Colour skins recolour the pill with
   `a.nav-cta{…!important}` (css/landing-teal.css etc.) and must keep winning. */
.nav-cta{
  background:var(--blue,#2563EB) !important; color:#fff !important;
  padding:9px 20px; border-radius:980px;
  font-size:14px !important; font-weight:700 !important;
  box-shadow:0 4px 14px rgba(37,99,235,0.3);
  transition:filter .2s, transform .15s, box-shadow .2s !important;
}
.nav-cta:hover{filter:brightness(1.1);transform:scale(1.04);box-shadow:0 6px 20px rgba(37,99,235,0.4);}
.nav-lock-soon{display:inline-block;vertical-align:1px;margin-left:6px;padding:1.5px 7px;border-radius:999px;background:rgba(100,116,139,.14);color:#64748B;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}

  /* ── AN-style nav: at the very top the menu is a compact floating
     PILL sitting INSIDE the hero photo (photo's rounded top corners visible around it);
     once you scroll it grows into the regular full-width bar. Inverts shared.css.
     BUTTER NOTES: height + background are CONSTANT (no layout/paint animation), the
     blurred shadows live on ::before/::after and crossfade via OPACITY (compositor),
     and all geometry moves on ONE ease-out curve — no per-frame blur repaints. ── */
  /* ═══ 2026-09-10 — HEADER BRAND, THREE MODES, switchable from the Edit panel (Caleb: "i want
     3 options … i want to be able to switch between these 3"). #nav[data-brand] is set from
     localStorage 'pm-brand-mode' by the inline script right after the brand markup (no flash) and
     by js/landing-edit-button.js when he picks one.
       (absent / "centre")  signature dead-centre of the bar, PM mark alone on the left — DEFAULT
       "sig-first"          signature on the left in the pill; the mark crossfades in on scroll
       "mark-first"         mark on the left in the pill; the signature crossfades in on scroll
       "sig-only"           signature on the left, always; the mark never shows in the header
     The brand link always holds both images in one grid cell (154px pinned width, opacity and
     transform only, same ease as the bar); the centred copy is a separate element. ═══ */
  #nav .nav-logo--swap{display:grid;align-items:center;justify-items:start;}
  #nav .nav-logo--swap > img{grid-area:1/1;display:block;width:auto;transition:opacity .45s cubic-bezier(.33,1,.68,1), transform .55s cubic-bezier(.33,1,.68,1);will-change:opacity,transform;}
  #nav .nav-logo--swap .nav-mark{height:48px;opacity:1;transform:translateY(0) scale(1);}
  #nav .nav-logo--swap .nav-wordmark{height:42px;opacity:0;transform:translateY(6px) scale(.96);pointer-events:none;}
  #nav .nav-centre-sig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:0;pointer-events:none;}
  #nav .nav-centre-sig img{display:block;height:42px;width:auto;}
  @media (max-width:760px){#nav .nav-centre-sig{display:none;}}
  /* sig-first: script at rest, mark on scroll */
  #nav[data-brand="sig-first"] .nav-centre-sig,#nav[data-brand="mark-first"] .nav-centre-sig,#nav[data-brand="sig-only"] .nav-centre-sig{display:none;}
  #nav[data-brand="sig-first"] .nav-logo--swap .nav-wordmark{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  #nav[data-brand="sig-first"] .nav-logo--swap .nav-mark{opacity:0;transform:translateY(6px) scale(.94);pointer-events:none;}
  #nav[data-brand="sig-first"].scrolled .nav-logo--swap .nav-wordmark{opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;}
  #nav[data-brand="sig-first"].scrolled .nav-logo--swap .nav-mark{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  /* mark-first: mark at rest, script on scroll */
  #nav[data-brand="mark-first"].scrolled .nav-logo--swap .nav-mark{opacity:0;transform:translateY(-6px) scale(.94);pointer-events:none;}
  #nav[data-brand="mark-first"].scrolled .nav-logo--swap .nav-wordmark{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  /* sig-only: script on the left in both forms, the mark stays hidden */
  #nav[data-brand="sig-only"] .nav-logo--swap .nav-wordmark{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  #nav[data-brand="sig-only"] .nav-logo--swap .nav-mark{opacity:0;transform:translateY(0) scale(.94);pointer-events:none;}
  @media (prefers-reduced-motion:reduce){ #nav .nav-logo--swap > img{transition:none;} }
  @media (min-width:761px){
    #nav{
      max-width:min(1080px, calc(100% - 96px)); top:26px; height:64px; padding:0 22px;
      border-radius:18px; border-color:rgba(228,236,252,0.95);
      background:rgba(253,254,255,0.97);
      box-shadow:none;
      transition:max-width .55s cubic-bezier(.33,1,.68,1), top .55s cubic-bezier(.33,1,.68,1),
                 padding .55s cubic-bezier(.33,1,.68,1), border-radius .55s cubic-bezier(.33,1,.68,1),
                 border-color .35s ease;
    }
    /* pill shadow (visible at top) */
    #nav::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
      box-shadow:0 14px 34px rgba(16,24,40,0.18);opacity:1;transition:opacity .45s ease;}
    /* bar shadow (visible when scrolled) */
    #nav::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
      box-shadow:0 4px 24px rgba(37,99,235,0.10);opacity:0;transition:opacity .45s ease;}
    #nav.scrolled{
      max-width:100%; top:0; height:64px; padding:0 5%;
      border-radius:0; border-color:transparent;
      background:rgba(253,254,255,0.97);
      box-shadow:none;
    }
    #nav.scrolled::after{opacity:0;}
    #nav.scrolled::before{opacity:1;}
  }

/* ── Hamburger + mobile drawer (was shared.css; identical rules, scoped) ── */
#nav .nav-hamburger{display:none;width:40px;height:40px;padding:0;margin:0;background:transparent;border:1px solid rgba(15,23,42,0.12);border-radius:12px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:background .2s ease,border-color .2s ease,transform .15s ease;-webkit-tap-highlight-color:transparent;}
#nav .nav-hamburger:active{transform:scale(0.96);}
#nav .nav-hamburger__bar{display:block;width:18px;height:1.8px;background:#0F172A;border-radius:2px;transition:transform .28s cubic-bezier(.6,.05,.3,1),opacity .2s ease;}
#nav .nav-hamburger.is-active .nav-hamburger__bar:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
#nav .nav-hamburger.is-active .nav-hamburger__bar:nth-child(2){opacity:0;}
#nav .nav-hamburger.is-active .nav-hamburger__bar:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}
/* ── Mobile menu — 2026-09-11, from the Adventure Nannies reference Caleb sent from his phone.
   A white panel drops from under the header, right-aligned items in the ink, groups expand in
   place, one full-width action in the header's own colour. The header stays above the dimmed
   page (#nav z 200 > menu z 150) and turns into the ×. ── */
.nav-mobile{position:fixed;inset:0;z-index:150;display:none;pointer-events:none;opacity:0;transition:opacity .22s ease;}
.nav-mobile.is-open{display:block;pointer-events:auto;opacity:1;}
.nav-mobile *{box-sizing:border-box;}
.nav-mobile__backdrop{position:absolute;inset:0;background:rgba(8,12,24,.5);border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.nav-mobile__panel{position:absolute;left:12px;right:12px;top:80px;bottom:auto;width:auto;height:auto;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow:auto;background:#fff;border-radius:24px;padding:22px 26px 22px;box-shadow:0 30px 70px -30px rgba(8,12,24,.55);transform:translateY(-10px) scale(.985);transform-origin:top center;opacity:0;transition:transform .3s cubic-bezier(.22,.9,.32,1),opacity .22s ease;}
.nav-mobile.is-open .nav-mobile__panel{transform:none;opacity:1;}
.nav-mobile__nav{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.nav-mobile__item{display:inline-flex;align-items:center;gap:8px;padding:9px 0;border:0;background:none;text-decoration:none;color:#123b42;font-family:inherit;font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.012em;text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.nav-mobile__item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;}
.nav-mobile__item[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-mobile__sub{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows .3s cubic-bezier(.22,.9,.32,1);}
.nav-mobile__sub.is-open{grid-template-rows:1fr;}
.nav-mobile__sub > div{overflow:hidden;min-height:0;display:flex;flex-direction:column;align-items:flex-end;gap:0;}
.nav-mobile__subitem{padding:8px 0;text-decoration:none;color:#123b42;opacity:.82;font-size:18px;font-weight:500;line-height:1.2;text-align:right;}
.nav-mobile__sub.is-open > div{padding:2px 0 8px;}
/* the unfinished surfaces stay listed but crossed out and dead (Caleb 2026-09-11: "put a cross through it … I don't want any of those pages showing as clickable") */
.nav-mobile__locked{padding:6px 0;font-size:18px;font-weight:500;line-height:1.2;color:#123b42;opacity:.42;text-decoration:line-through;text-decoration-thickness:1.5px;text-align:right;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none;}
.nav-mobile__item + .nav-mobile__locked{margin-top:6px;}
.nav-mobile__locked--top{font-size:23px;font-weight:600;padding:9px 0;margin-bottom:2px;}   /* About Us: crossed out at the head of the list until the page is ready (Caleb) */
.nav-mobile__cta{display:flex;align-items:center;justify-content:center;height:54px;margin-top:18px;border-radius:14px;color:#fff;text-decoration:none;}
.nav-mobile__cta.nav-cta{padding:0 20px;font-size:17px !important;border-radius:14px;}
.nav-mobile__cta:active{transform:scale(.985);}
/* ── Language row (2026-09-11): the translator, exactly as the desktop shows it — the round flag
   button — sitting in the drawer like the Preview pickers. #pmLang is moved here on phones by the drawer
   script (index.html adoptTools / pm-header.js adoptLang). Tapping the flag opens the same flag-card
   menu, as a card floating over the drawer at the panel's own top edge (fixed, so the panel's overflow
   can never clip it). The selected card wears a quiet navy ring here instead of the emerald glow
   (Caleb: "I don't really like the green shining … premium and well touched up for mobile").
   Desktop untouched: every rule is scoped to .nav-mobile__lang. ── */
.nav-mobile__lang{display:none;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(18,59,66,.08);}
.nav-mobile__lang:has(.pmlang){display:flex;}
.nav-mobile__lang .pmlang{position:static;margin-left:auto;}
.nav-mobile__lang .pmlang .pmlang__btn{width:40px;height:40px;background:#fff;border-color:rgba(15,23,42,.12);}
.nav-mobile__lang .pmlang .pmlang__btn:hover{transform:none;box-shadow:none;}
.nav-mobile__lang .pmlang .pmlang__btnflag{width:30px;height:30px;}
.nav-mobile__lang .pmlang.is-open .pmlang__btn{border-color:rgba(18,59,66,.35);box-shadow:0 0 0 3px rgba(18,59,66,.10);}
.nav-mobile__lang .pmlang .pmlang__menu{position:fixed !important;left:var(--pmnav-inset,12px) !important;right:var(--pmnav-inset,12px) !important;
  top:calc(10px + var(--pmnav-h,66px) + 12px) !important;bottom:auto !important;width:auto;min-width:0;max-width:none;z-index:12000;
  padding:16px;border-radius:22px;transform-origin:50% 0;}
.nav-mobile__lang .pmlang .pmlang__head{padding:0 4px 12px;color:#94A3B8;font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;}
.nav-mobile__lang .pmlang .pmlang__grid{grid-template-columns:repeat(2,1fr);gap:10px;}
.nav-mobile__lang .pmlang .pmlang__item{padding:16px 10px 14px;border-radius:18px;}
.nav-mobile__lang .pmlang .pmlang__item:hover{transform:none;box-shadow:none;background:#fff;border-color:#e5e9f0;}
.nav-mobile__lang .pmlang .pmlang__item:hover .pmlang__flag{transform:none;}
.nav-mobile__lang .pmlang .pmlang__item.is-active,.nav-mobile__lang .pmlang .pmlang__item.is-active:hover{border-color:rgba(18,59,66,.30);background:#f6f8fb;box-shadow:inset 0 0 0 1px rgba(18,59,66,.10);}
.nav-mobile__lang .pmlang .pmlang__item.is-active .pmlang__native{color:#123b42;}
.nav-mobile__lang .pmlang .pmlang__check{background:#123b42;box-shadow:none;}
.nav-mobile__tools{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(18,59,66,.08);}
.nav-mobile__tools-l{font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#94A3B8;margin-right:auto;}
.nav-mobile__tools #pmTypePhone,.nav-mobile__tools #pmThemePhone{display:inline-flex !important;margin:0 !important;}
body.nav-mobile-lock{overflow:hidden;}
/* the chat bubble (js/pm-help-fab.js, z-index 9000) sat over the open drawer's footer */
body.nav-mobile-lock .pm-fab{display:none;}
@media (max-width:760px){
  #nav .nav-links{display:none;}
  #nav .nav-hamburger{display:flex;}
  /* 2026-09-11 (Caleb, from the Adventure Nannies reference): at the very top only the
     signature and the hamburger sit on the photo; the moment you scroll, the header becomes
     a floating white pill inset from the edges. A soft white scrim behind the top state keeps
     the navy signature readable on any hero photo. */
  /* the four numbers Caleb tunes from his phone (js/landing-gap-tuner.js writes them on <html>) */
  :root{--pmnav-inset:26px;--pmnav-h:66px;--pmnav-r:6px;--pmnav-sig:42px;}   /* Caleb's lock from his phone, 2026-09-11 */
  #nav{background:transparent;border-color:transparent;box-shadow:none;height:68px;padding:0 20px;}
  #nav::before{content:'';position:absolute;left:0;right:0;top:0;height:150%;background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.5) 55%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:-1;transition:opacity .3s ease;}
  #nav.scrolled,#nav.is-menu{top:10px;width:calc(100% - var(--pmnav-inset) * 2);height:var(--pmnav-h);padding:0 12px 0 18px;border-radius:var(--pmnav-r);background:rgba(255,255,255,.97);border-color:rgba(228,236,252,.9);box-shadow:0 12px 32px -14px rgba(16,24,40,.3);}
  #nav.scrolled::before,#nav.is-menu::before{opacity:0;}
  #nav .nav-logo--swap .nav-wordmark{height:var(--pmnav-sig);}
  /* the signature sits dead-centre of the bar (Caleb 2026-09-11: "right into the center and middle") */
  #nav .nav-logo--swap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
  #nav{justify-content:flex-end;}   /* the hamburger is the only item left in flow — keep it on the right (a picker script gives it a 10px margin-left) */
  #nav .nav-hamburger{border:0;background:transparent;width:40px;height:40px;gap:6px;border-radius:10px;}
  #nav .nav-hamburger__bar{width:22px;height:2px;background:#123b42;}
  #nav .nav-hamburger.is-active .nav-hamburger__bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
  #nav .nav-hamburger.is-active .nav-hamburger__bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  /* the phone pickers moved into the menu's Preview row */
  #nav #pmTypePhone,#nav #pmThemePhone{display:none !important;}
  /* the menu panel follows the pill's inset and height */
  .nav-mobile__panel{left:var(--pmnav-inset);right:var(--pmnav-inset);top:calc(10px + var(--pmnav-h) + 12px);}
  /* (2026-09-11: the type picker is back in the Preview row — phones can flip Nunito ↔ Söhne) */
}

/* ── Inner pages only: the fixed pill floats over the top of the page, so the page body
   starts below it. js/pm-header.js stamps data-pm-header on <body> (not on the landing,
   whose hero is 100vh with the pill inside it). ── */
body[data-pm-header]{padding-top:96px !important;}
body[data-pm-header="bar"]{padding-top:80px !important;}   /* service pages: bar from the start (64px at top:0) */
body[data-pm-header] #nav .nav-cta{background:var(--pmnav-blue) !important;box-shadow:0 4px 14px rgba(37,99,235,0.3);}
/* the drawer's action pill sits outside #nav — same pin, or education.html's --blue (#EAF6FC) washes it out */
body[data-pm-header] .nav-mobile__cta.nav-cta{background:#2563EB !important;box-shadow:0 4px 14px rgba(37,99,235,0.3);}
body[data-pm-header] #nav .nav-links a{color:var(--pmnav-sub);}
body[data-pm-header] #nav .nav-links a:hover{color:var(--pmnav-ink);}
@media (max-width:760px){ body[data-pm-header]{padding-top:82px !important;} }