/* ========== SHARED STYLES — Used by ALL pages ========== */
/* Edit this file to update branding/nav/footer across the entire site */

:root{
  --teal:#5ba8b2;
  --navy:#131e3d;
  --navy-deep:#0a1228;
  --taupe:#ad9b84;
  --taupe-light:#cec3b5;
  --paper:#f4f1ec;
  --sage:#d7d7c3;
  --ink:#111;
  --max:1200px;
}

/* ── Self-hosted web fonts (PR A2, pre-cutover perf round 2) ──────────────────────────
   Google Fonts' CSS was the top render-blocker on every page (two 3rd-party RTTs before
   first text). The latin subsets now ship from /assets/fonts/* (immutable cache rule):
   Inter + Playfair Display + Cormorant Garamond + Roboto as VARIABLE files (one file covers
   every weight the pages request — smaller than the per-weight set), Lato 300/400/700 and
   Righteous 400 static. font-display:swap = no FOIT. The same block is served to pages that
   do not load shared.css via /css/fonts.css (generated from the same manifest). */
@font-face{font-family:"Inter";font-style:normal;font-weight:300 900;font-display:swap;src:url("/assets/fonts/inter-normal-300-900-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url("/assets/fonts/playfair-italic-400-900-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("/assets/fonts/playfair-normal-400-900-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/lato-normal-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/lato-normal-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/lato-normal-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("/assets/fonts/cormorant-italic-300-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("/assets/fonts/cormorant-normal-300-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:300 700;font-display:swap;src:url("/assets/fonts/roboto-normal-300-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Righteous";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/righteous-normal-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  font-size:16px;
}
/* ── RELAY-16: conservative DARK layer for the main (light-by-design) site.
   Token-level inversion + key surfaces; page-local hardcoded colors get a
   Todd-pass punch list. The shop page defines its own full dual theme. ── */
html[data-theme="dark"] body{background:var(--navy-deep);color:var(--paper)}
html[data-theme="dark"] .wrap, html[data-theme="dark"] section{color:var(--paper)}
/* .theme-pinned = opt-out for components that carry their OWN theme tokens (light cards on
   pages whose surface never flips: learn.html .eco__node / .path / .cat-card / .lrn-journey__card).
   The two blanket rules below skip anything inside a pinned component; the component pins its
   own heading colour. :where() keeps the original specificity so page-level pins still win.
   (POLISH RELAY-02: the h3 rule painted cream titles onto light cards.) */
html[data-theme="dark"] h1:where(:not(.theme-pinned *)),html[data-theme="dark"] h2:where(:not(.theme-pinned *)),html[data-theme="dark"] h3:where(:not(.theme-pinned *)){color:var(--paper)}
html[data-theme="dark"] .card:where(:not(.theme-pinned):not(.theme-pinned *)),html[data-theme="dark"] [class*="card"]:where(:not(.theme-pinned):not(.theme-pinned *)){background:#112a42;color:var(--paper)}

/* ── iOS sideways-drift chain (PR C, 2026-10-16; the 2026-09-12 standard, now GLOBAL) ──
   Safari shrink-to-fit measures the widest box on the page, so any decoration or nowrap row
   poking past the right edge lets vertical scrolling drift sideways. The page-level chain is:
   viewport meta minimum-scale=1 (per page) + html/body overflow-x:clip (clip, not hidden — body
   must stay the scroll container) + overscroll-behavior-x:none (no horizontal rubber-band) +
   buttons that wrap instead of forcing a nowrap width. Previously only index/learn/coming-soon/
   self-hope carried it page-locally. ── */
html,body{overflow-x:clip;overscroll-behavior-x:none;max-width:100%}
@media (max-width:720px){
  button,.qph-btn,.qp-btn,.a-btn,.cta,a[class*="btn"],a[class*="button"]{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  /* uppercase pills / chips / CTA labels already wrap (no nowrap) — this only stops a long
     letter-spaced token from measuring wider than the viewport. */
  .pill,.chip,[class*="pill"],[class*="chip"],[class*="cta"]{overflow-wrap:anywhere;max-width:100%}
}
a{color:inherit;text-decoration:none}
/* PR A fix (image-stretch regression, 2026-10-16): width/height attributes are now on
   every <img> for CLS. Without height:auto the attribute HEIGHT wins wherever CSS sets only
   a width (homepage pillar icons, path cards, H.O.P.E. logo rendered stretched on the preview).
   Type-level selector = lowest specificity, so every class/descendant rule that sets a fixed
   img height (all audited: each pairs with object-fit or width:auto) still wins. */
img{max-width:100%;height:auto;display:block}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:0 auto;}

/* ========== NAV ========== */
.topBar{
  background:linear-gradient(180deg,#0c1530 0%,#0a1228 100%);
  padding:6px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}
.topBar a{
  color:#fff;
  font-size:14px;
  opacity:.9;
}
.topBar a:hover{opacity:1}

.nav{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg,#131e3d 0%,#0f1a35 100%);
  border-bottom:1px solid rgba(173,155,132,.16);
}
.nav .row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center}
.brand img{height:70px;width:auto;object-fit:contain}

.menu{
  display:flex;align-items:center;gap:28px;
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--teal);
}
.menu a{padding:6px 0;transition:opacity .15s}
.menu a:hover{opacity:.7}
.menu .cart{font-size:16px}

/* Hamburger (hidden on desktop) */
.hamburger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:101;
}
.hamburger span{
  display:block;
  width:26px;
  height:2px;
  background:var(--teal);
  margin:5px 0;
  transition:all .3s ease;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ========== FOOTER ========== */
footer{
  background:#111;
  color:#fff;
  padding:50px 0 0;
}
.footerGrid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
  align-items:start;
}
.footerCol{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footerCol:first-child{
  align-items:center;
  text-align:center;
}
.footerLogo{
  height:55px;
  width:auto;
  max-width:180px;
  margin-bottom:8px;
  object-fit:contain;
}
.footerTagline{
  font-size:13px;
  opacity:.6;
  line-height:1.5;
}
.footerCol h4{
  color:var(--teal);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.footerCol a{
  color:rgba(255,255,255,.7);
  font-size:14px;
  transition:color .2s;
}
.footerCol a:hover{
  color:var(--teal);
}
.footerSocial{
  display:flex;
  gap:14px;
}
.footerSocial a{
  font-size:16px;
  opacity:.7;
}
.footerSocial a:hover{opacity:1;color:var(--teal)}
.footerBottom{
  padding:20px 0;
  text-align:center;
  font-size:13px;
  opacity:.5;
}

/* ========== SHARED BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .15s ease;
  border:none;
}
.btn.taupe{
  background:linear-gradient(180deg,var(--taupe),#9a8a75);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.btn.taupe:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.dark{
  background:#0b0b0b;
  color:var(--taupe);
  border:1px solid rgba(255,255,255,.1);
}
.btn.dark:hover{background:#1a1a1a}
.btn.outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
}
.btn.outline:hover{background:rgba(255,255,255,.1)}

/* ========== MOBILE NAV & FOOTER ========== */
@media(max-width:900px){
  .hamburger{display:block}
  .menu{
    display:none !important;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:radial-gradient(circle at 50% 30%,rgba(19,30,61,.99) 0%,rgba(10,18,40,.99) 70%);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px;
    z-index:100;
    font-size:16px;
  }
  .menu.open{display:flex !important}
  .menu a{padding:12px 0;font-size:16px}
  .brand img{height:50px}
  .nav .row{
    flex-direction:column;
    gap:0;
    position:relative;
  }
  .brand{justify-content:center}
  .hamburger{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
  .topBar{padding:4px 16px;gap:12px}
  .topBar a{font-size:12px}

  /* Footer mobile */
  .footerGrid{
    grid-template-columns:1fr 1fr;
    gap:30px 20px;
  }
  .footerLogo{height:50px}
}
@media(max-width:500px){
  .footerGrid{
    grid-template-columns:1fr;
    gap:24px;
    text-align:center;
  }
  .footerCol{align-items:center}
  .footerSocial{justify-content:center}
}

/* ========== SITE-WIDE CONTACT MODAL ========== */
/* Self-contained, UNSCOPED (works on every page). Mirrors the course-page */
/* inquiry modal (body.qp-course .iba-inq-*) visual language. Prefix: qp-contact- */
.qp-contact-overlay{
  position:fixed;inset:0;
  background:rgba(8,14,28,.8);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;justify-content:center;
  z-index:10000;
  padding:20px;
  opacity:0;
  transition:opacity .3s ease;
}
.qp-contact-overlay.open{opacity:1}
.qp-contact-box{
  background:linear-gradient(170deg,rgba(16,28,52,.98) 0%,rgba(12,22,42,.99) 50%,rgba(14,26,48,.98) 100%);
  border:1px solid rgba(91,168,178,.12);
  border-radius:24px;
  max-width:520px;width:100%;
  max-height:calc(100vh - 60px);
  overflow-y:auto;overflow-x:hidden;
  padding:48px 40px 40px;
  position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 60px rgba(91,168,178,.06),inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(20px) scale(.97);
  transition:transform .3s ease;
}
.qp-contact-overlay.open .qp-contact-box{transform:translateY(0) scale(1)}
.qp-contact-glow{
  position:absolute;top:-1px;left:50%;
  transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,168,178,.6),transparent);
}
.qp-contact-close{
  position:absolute;top:16px;right:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);
  width:36px;height:36px;border-radius:50%;
  font-size:20px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.qp-contact-close:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
}
.qp-contact-header{text-align:center;margin-bottom:28px}
.qp-contact-kicker{
  font-family:Inter,sans-serif;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#5ba8b2;
  margin-bottom:12px;
}
.qp-contact-title{
  font-family:'Playfair Display',serif;
  font-size:32px;
  font-weight:400;
  color:#fff;
  line-height:1.2;
  margin:0 0 16px;
}
.qp-contact-sub{
  color:rgba(255,255,255,.65);
  font-size:14px;
  line-height:1.5;
  margin:0;
}
.qp-contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.qp-contact-input,
.qp-contact-textarea{
  width:100%;box-sizing:border-box;
  background:rgba(8,14,28,.6);
  border:1px solid rgba(91,168,178,.15);
  border-radius:10px;
  padding:14px 16px;
  color:#fff;
  font-family:Inter,sans-serif;
  font-size:14px;
  transition:border-color .2s,background .2s;
}
.qp-contact-textarea{
  min-height:110px;
  resize:vertical;
  line-height:1.5;
}
.qp-contact-input::placeholder,
.qp-contact-textarea::placeholder{
  color:rgba(255,255,255,.35);
}
.qp-contact-input:focus,
.qp-contact-textarea:focus{
  outline:none;
  border-color:rgba(91,168,178,.5);
  background:rgba(8,14,28,.8);
}
.qp-contact-input:-webkit-autofill,
.qp-contact-input:-webkit-autofill:hover,
.qp-contact-input:-webkit-autofill:focus,
.qp-contact-textarea:-webkit-autofill,
.qp-contact-textarea:-webkit-autofill:hover,
.qp-contact-textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(8,14,28,.85) inset;
  box-shadow:0 0 0 1000px rgba(8,14,28,.85) inset;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
.qp-contact-error{
  color:#e58a8a;
  background:rgba(232,93,93,.08);
  border-left:2px solid rgba(232,93,93,.5);
  padding:10px 14px;
  border-radius:0 8px 8px 0;
  font-size:13px;
  line-height:1.5;
  margin:0;
}
.qp-contact-submit{
  width:100%;
  background:var(--teal);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  transition:filter .15s ease,opacity .15s ease;
}
.qp-contact-submit:hover{filter:brightness(1.08)}
.qp-contact-submit.loading{opacity:.6;pointer-events:none}
.qp-contact-info{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;
  color:rgba(255,255,255,.6);
  text-align:center;
}
.qp-contact-info a{color:var(--teal);text-decoration:none}
.qp-contact-address{
  font-size:13px;
  color:rgba(255,255,255,.6);
  text-align:center;
}
.qp-contact-success{text-align:center}
.qp-contact-success-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(91,168,178,.1);
  border:1px solid rgba(91,168,178,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.qp-contact-success-title{
  font-family:'Playfair Display',serif;
  font-size:24px;
  font-weight:400;
  color:#fff;
  margin:0 0 10px;
}
.qp-contact-success-sub{
  color:rgba(255,255,255,.6);
  font-size:14px;
  line-height:1.5;
  margin:0 0 24px;
}
@media(max-width:520px){
  .qp-contact-box{padding:32px 22px 28px}
  .qp-contact-title{font-size:26px}
}

/* ── PR A (pre-cutover perf, C): js/shared.js fetches + injects the shared header AFTER
   DOMContentLoaded. Reserving its final height in the static HTML keeps the injection
   from pushing the page down (homepage CLS 0.12 came from this). Values are the measured
   strip + nav-bar totals at the header's own breakpoints (components/header.html: ≤500 /
   ≤900 / desktop). The nav bar is position:sticky, so the box stays in flow; min-height
   (not height) lets a taller variant grow instead of clipping. ── */
:root{--qp-header-h:124px}
@media (max-width:900px){:root{--qp-header-h:108px}}
@media (max-width:500px){:root{--qp-header-h:100px}}
#shared-header{min-height:var(--qp-header-h)}