/* ============================================================
   PCG Corporate Navy site theme (Wave 2 rollout, 2026-07-06)
   Source of truth: the approved homepage system in src/index.html.
   Load order contract: this file is linked AFTER each page's inline
   CSS. Every rule here intentionally sets ALL properties that the
   legacy inline libs also set, so a cascade tie always resolves to
   the new theme. Selectors are scoped to the shared chrome (header,
   util strip, mobile nav, footer, cookie banner, buttons) and never
   to page-content components.
   /css/* is cached immutable for 1 year: bump the ?v= on every link
   when this file changes.
   ============================================================ */

@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/geist-400.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/geist-mono-400.woff2') format('woff2')}

:root{
  --navy:#003087; --navy-2:#00245F; --navy-3:#071A3B;
  --ink:#22303F; --ink-2:#33425B;
  --slate:#54617A; --slate-2:#6B7690;
  --red:#B30032; --red-2:#8E0027;
  --green:#178038; --blue:#3860BE;
  --white:#FFFFFF; --mist:#F6FAFF; --haze:#F4F7FC;
  --rule:#DBE3F0; --line:#E7EDF6;
  /* legacy token aliases: the old warm palette resolves to the navy system */
  --paper:#FFFFFF; --bone:#F6FAFF;
  --rule-soft:#E7EDF6;
  --accent:#B30032; --accent-2:#8E0027;
  --forest:#178038; --brick:#8E0027;
  --f-sans:'Geist','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --f-mono:'Geist Mono','Cascadia Code',Consolas,ui-monospace,monospace;
  --f-serif:'Geist','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(10,27,59,.06),0 18px 44px -22px rgba(10,27,59,.28);
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --focus-ring:#B30032;
}

html{background:var(--white)}
:focus-visible{outline:3px solid var(--focus-ring,#B30032);outline-offset:3px;border-radius:4px}

/* ---- layout harmonization: the homepage (the reference, which does not load this
       file) uses a 1240px wrap; the legacy inline libs used 1280px and styles.css
       1080px, so the shared chrome jumped sideways on navigation. Pin every page
       to the homepage's 1240px so header/footer/content edges are stable. ---- */
.wrap{max-width:1240px}

/* ---- buttons (complete-property so legacy .btn rules can't leak) ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;font-family:inherit;padding:14px 22px;border-radius:5px;border:1.5px solid transparent;cursor:pointer;transition:.16s ease;line-height:1;white-space:nowrap;text-decoration:none}
.btn .ar,.btn .arrow{transition:transform .16s ease}
.btn:hover .ar,.btn:hover .arrow{transform:translateX(3px)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-2);border-color:var(--red-2);color:#fff}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--rule)}
.btn-outline:hover{border-color:var(--navy);background:var(--mist);color:var(--navy)}
.btn-ondark{background:#fff;color:var(--navy);border-color:#fff}
.btn-ondark:hover{background:var(--mist);color:var(--navy);border-color:var(--mist)}
.btn-ghostdark{background:transparent;color:#EAF0FB;border-color:#3A4E76}
.btn-ghostdark:hover{border-color:#EAF0FB;background:transparent;color:#fff}
/* legacy variant names → navy-system looks */
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-2);border-color:var(--red-2);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--rule)}
.btn-ghost:hover{background:var(--mist);color:var(--navy);border-color:var(--navy)}
.btn-text{background:transparent;color:var(--navy);padding:11px 4px;border:none}
.btn-text:hover{color:var(--red);background:transparent}
.btn-on-dark{background:#fff;color:var(--navy);border-color:#fff}
.btn-on-dark:hover{background:var(--mist);color:var(--navy);border-color:var(--mist)}
.btn-ghost-on-dark{background:transparent;color:#EAF0FB;border-color:#3A4E76;font-weight:600}
.btn-ghost-on-dark:hover{background:transparent;color:#fff;border-color:#EAF0FB}
/* legacy prose-scoped hover rules forced light text for the old dark ghost-hover;
   the navy theme hovers LIGHT, so re-pin readable text at equal-or-higher specificity */
.prose-article a.btn-ghost:hover,.prose-cta a.btn-ghost:hover{color:var(--navy)}
.prose-article a.btn-text:hover,.prose-cta a.btn-text:hover{color:var(--red)}

/* ---- top utility strip ---- */
.util{background:var(--haze);border-bottom:1px solid var(--line)}
.util-inner{display:flex;justify-content:flex-end;align-items:center;min-height:36px;gap:14px}
.util a{font-size:12.5px;color:var(--slate);font-weight:500;text-decoration:none}
.util a:hover{color:var(--navy)}
.util-div{width:1px;height:12px;background:#000;opacity:.5}

/* ---- header ---- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
header.nav .inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:inline-flex;align-items:center;gap:0;text-decoration:none}
.pcg-logo{display:block;height:58px;width:auto}
/* pin the wordmark render: some legacy page libs set body-level font-feature-settings
   (meant for Geist) which SVG text inherits, subtly reshaping the Arial logo */
.pcg-logo text{font-feature-settings:normal;font-kerning:auto;letter-spacing:normal;word-spacing:normal}
nav.primary{display:flex;gap:30px;align-items:center}
nav.primary a{font-size:14.5px;color:var(--ink);font-weight:500;padding:0;text-decoration:none}
nav.primary a:hover{color:var(--navy)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-actions .login{font-size:14px;color:var(--navy);font-weight:500}
.nav-actions .login:hover{text-decoration:underline}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:6px;background:#fff;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:51}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
/* keep the legacy hamburger→X animation (site.js toggles aria-expanded) */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- mobile nav (site.js sets [hidden] AND data-open; mirror both states
       so legacy [data-open] rules can never restyle the open panel) ---- */
.mobile-nav{position:fixed;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;padding:10px 24px;z-index:59}
.mobile-nav[hidden]{display:none}
.mobile-nav[data-open="true"]{position:fixed;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;padding:10px 24px;z-index:59}
.mobile-nav a,.mobile-nav[data-open="true"] a{padding:13px 4px;font-size:15px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line);text-decoration:none}
.mobile-nav a:last-child,.mobile-nav[data-open="true"] a:last-child{border-bottom:none;color:var(--red);font-weight:600}
body.nav-open{overscroll-behavior-y:contain}

/* ---- cookie banner ---- */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--navy-3);color:#EAF0FB;padding:14px 24px;z-index:150;border-top:none;box-shadow:0 -8px 30px -10px rgba(0,0,0,.4)}
.cookie-banner[hidden]{display:none}
.cookie-content{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px}
.cookie-content p{margin:0;font-size:13px;line-height:1.5;color:#CBD9F0}
.cookie-content a{color:#fff;text-decoration:underline}
.cookie-actions .btn{padding:10px 18px;font-size:13px}

/* ---- footer (new fgrid markup from footer.njk) ---- */
footer{background:#fff;color:var(--slate);padding:64px 0 30px;border-top:1px solid var(--rule);flex:0 0 auto}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid var(--rule)}
.fbrand .pcg-logo{height:76px;margin-bottom:16px}
.fbrand p{font-size:13px;line-height:1.55;max-width:30ch;color:var(--slate)}
.fcontact{margin-top:14px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.55}
.fcontact a{color:var(--navy);font-weight:500;text-decoration:none}
.fcontact a:hover{text-decoration:underline}
.fcontact span{color:var(--slate)}
.fcol h6{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 14px;font-weight:500}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.fcol a{font-size:13.5px;color:var(--slate);text-decoration:none}
.fcol a:hover{color:var(--navy)}
.fdisc{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;padding:26px 0;border-bottom:1px solid var(--line)}
.fdisc .lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.fdisc p{font-size:12.5px;color:var(--slate);line-height:1.65;margin:0}
.fdisc a{color:var(--navy);text-decoration:underline}
details.fnote summary{cursor:pointer;list-style:none}
details.fnote summary::-webkit-details-marker{display:none}
.fnote-t{color:var(--slate-2)}
.fnotice{padding:26px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--slate);line-height:1.65}
.fbot{padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-family:var(--f-mono);font-size:11.5px;color:var(--slate);letter-spacing:.03em}
.fbot .loc{display:inline-flex;align-items:center;gap:9px}
.fbot .pin{width:6px;height:6px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px rgba(0,48,135,.14)}
.fbot a{color:var(--navy);text-decoration:underline}
/* collapsible footer sections (native <details>): open columns on desktop, tap-accordion on phones (<=640px). */
details.fcol{min-width:0}
details.fcol>summary{list-style:none;display:block;cursor:default;pointer-events:none}
details.fcol>summary::-webkit-details-marker{display:none}
.fchev{display:none;flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;color:var(--slate)}
@media (min-width:641px){details.fcol::details-content{content-visibility:visible;display:block}details.fcol>ul{display:flex}}

/* ---- shared section shells (homepage vocabulary, available sitewide) ---- */
section.blk{padding:88px 0}
.blk--haze{background:var(--haze)}
.sec-head{max-width:720px;margin-bottom:52px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);margin:16px 0 14px;letter-spacing:-.02em;color:var(--navy)}
.sec-head p{font-size:18px;color:var(--slate);line-height:1.5;max-width:56ch}

/* ---- responsive ---- */
@media (max-width:960px){
  nav.primary,.nav-actions,.util{display:none}
  .nav-toggle{display:flex;order:2}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
  .fbrand{grid-column:1/-1}
}
@media (max-width:640px){
  .pcg-logo{height:46px}
  /* compact mobile footer: brand spans, links pair 2-up, tighter rhythm (less scrolling) */
  footer{padding:44px 0 24px}
  .fgrid{grid-template-columns:1fr;gap:0;padding-bottom:18px}
  .fbrand{grid-column:1/-1;margin-bottom:20px}
  .fbrand .pcg-logo{height:56px;margin-bottom:12px}
  details.fcol{border-top:1px solid var(--rule)}
  details.fcol>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:5px 2px;cursor:pointer;pointer-events:auto}
  details.fcol>summary h6{margin:0}
  .fchev{display:block}
  details.fcol[open]>summary .fchev{transform:rotate(-135deg);color:var(--navy)}
  details.fcol>ul{gap:2px;padding:2px 2px 14px}
  details.fcol>ul a{display:inline-block;padding:9px 0;font-size:14px}
  .fcontact{margin-top:10px}
  .fnotice{padding:16px 0;font-size:11.5px;line-height:1.55}
  .fbot{flex-direction:column;align-items:flex-start;gap:8px;padding-top:16px}
  .fdisc{grid-template-columns:1fr;gap:22px}
  .cookie-content{flex-direction:column;align-items:flex-start;gap:12px}.cookie-actions{align-self:center}
  .mobile-nav,.mobile-nav[data-open="true"]{padding:8px 20px}
  .mobile-nav a,.mobile-nav[data-open="true"] a{font-size:15px;padding:13px 4px}
}
@media (prefers-reduced-motion:reduce){
  .btn .ar,.btn .arrow,.nav-toggle span,.fchev{transition:none}
}