/* GKA [V1], Phase 4 (Marketing Site Skeleton).
   Site-specific layout rules layered on top of assets/css/style.css's
   shared tokens -- same relationship the LMS's own pages/lms.css has
   to its copy of style.css. Kept in a separate file rather than added
   to style.css itself because these rules describe THIS site's layout
   (a persistent nav+CTA group, a footer privacy note), not something
   the portal's chrome needs or should inherit automatically the next
   time style.css's shared copy is updated. */

/* .site-header .inner was designed for exactly two flex children
   (brand, nav-links) on the portal, where the CTA button is a separate
   element that only appears at the mobile breakpoint in place of the
   nav (see .nav-cta in style.css). This site wants a persistent,
   always-visible nav + CTA button together, so they're grouped under
   one wrapper here rather than changing what .site-header .inner's
   space-between means for the portal too. */
.nav-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .nav-group .nav-links { display: none; }
}

/* style.css's .eyebrow rule is scoped as .hero .eyebrow (a descendant
   selector, only styled inside a .hero container) -- 404.php/500.php
   use the same small-caps eyebrow label outside of any hero section,
   so it needs a standalone rule here rather than forcing those simple
   error pages to wrap their content in a .hero div just to inherit it. */
.eyebrow {
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.75rem; color: var(--gold-dark);
}

/* Same reasoning as .eyebrow above -- style.css's .actions rule is
   scoped .hero .actions, and 404.php/500.php use the same button-row
   layout outside of a hero. */
.actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.footer-privacy-note {
  font-size: 0.8rem;
  color: var(--charcoal-muted);
  max-width: 32rem;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 1.5rem;
}
/* GKA [V1]: this paragraph gained a link to /privacy-policy once that
   page existed -- underlined, inheriting the paragraph's own muted
   color rather than default link-blue, consistent with .footer-legal's
   identical treatment just below in markup. */
.footer-privacy-note a { color: inherit; text-decoration: underline; }

/* GKA [V1], Phase 5. A small spacing/text utility set -- same values
   as the portal's own pages/lms.css (not copied wholesale here, since
   most of that file is portal-specific chrome, but these three are
   generic enough that course.php ended up needing them anyway). Add
   more here as later phases need them, rather than reaching for a
   value that happens to already exist in the portal's copy and
   forgetting this site doesn't share that file at all. */
.text-muted { color: var(--charcoal-muted); font-size: 0.85rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
/* GKA [V1], Phase 6: same reasoning as .text-muted/.mt-1/.mt-2 above --
   used by get-involved.php's error list, only ever previously defined
   in the portal's own pages/lms.css. */
.error-list { margin: 0; padding-left: 1.1rem; }

/* --------------------------------------------------------------------
   Phase 7 (Signature Interactive Components) tokens.
   Marketing-site-only -- not added to the shared style.css, since
   "Matte Gold" appears nowhere in the portal's own UI. Kept in this
   layer for the same reason site.css exists at all: additions specific
   to this site shouldn't force a re-sync of the shared file the two
   sites otherwise keep byte-identical.

   The spec's own suggested value (#c7b08f) measures 1.99:1 on --cream
   -- well under even the 3:1 floor for large text, let alone 4.5:1 for
   normal text. Rather than silently swap in the existing --gold
   (#c29b0c, already established as this brand's *other* accent, with
   a distinctly different, more saturated character than what "Matte
   Gold" is going for), --matte-gold-text below keeps the same muted,
   desaturated bronze-gold hue the spec was reaching for, just darkened
   until it's actually legible: 5.07:1 on --cream, real margin above
   AA. --matte-gold keeps the spec's original value for genuinely
   decorative, non-text use only (the Curriculum Monograph Explorer's
   1px divider line) -- contrast ratios don't apply to a decorative
   divider, so there's no reason to darken it away from what the spec
   actually asked for there. */
:root {
  --matte-gold: #c7b08f;      /* decorative only -- lines, subtle fills. NEVER for text. */
  --matte-gold-text: #776955; /* text-safe -- 5.07:1 on --cream */
}

/* Small utilities needed by Phase 7's new pages. */
/* GKA [V1]. .footer-grid itself lives in the shared style.css (used by
   both this site and the portal) -- overridden here, marketing-site-
   only, rather than changed at the source, for the same reason
   .nav-group exists as a separate rule instead of changing what
   .site-header .inner means for the portal too. This site's footer
   grew a 4th column (Support) as more pages were added; the portal's
   own footer never had 4 columns' worth of content to begin with, so
   changing the shared rule directly would have been a change neither
   site actually asked for. */
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

.footer-legal {
  text-align: center;
  font-size: 0.8rem;
  color: var(--charcoal-muted);
  padding-bottom: 0.75rem;
}
.footer-legal a { color: inherit; text-decoration: underline; }

.text-center { text-align: center; }
.justify-center { justify-content: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ======================================================================
   Merit Matrix (philosophy.php) -- spec §06 must-have #1.
   "Render the headers in Cinzel, numbers in fine Matte Gold, and copy
   text blocks in dark charcoal. It gives the user a tactile sense of
   interacting with a permanent, physical charter." Border-only depth,
   0px corners, no shadows -- same "physical charter, not a software
   card" brief the rest of this brand already follows.
   ====================================================================== */
.merit-matrix-section { text-align: center; }
.merit-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--charcoal-15);
  border: 1px solid var(--charcoal-15);
  margin-top: 2rem;
  text-align: left;
}
.merit-panel {
  background: var(--cream);
  padding: 0;
}
.merit-panel summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.5rem;
  cursor: pointer;
  list-style: none; /* remove default marker in Firefox */
}
.merit-panel summary::-webkit-details-marker { display: none; } /* remove default marker in Chrome/Safari */
.merit-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--matte-gold-text);
  line-height: 1;
  flex-shrink: 0;
}
.merit-heading { display: flex; flex-direction: column; gap: 0.35rem; }
.merit-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.merit-summary { color: var(--charcoal-muted); font-size: 0.9rem; }
.merit-panel[open] summary .merit-title { color: var(--royal-blue-text); }
.merit-panel-body { padding: 0 1.5rem 1.5rem 1.5rem; border-top: 1px solid var(--charcoal-15); padding-top: 1rem; }

/* ======================================================================
   Curriculum Monograph Explorer (learning-model.php) -- spec §06
   must-have #2. Radio-driven, zero-JS stepper -- see learning-model.php's
   header comment for why <details> (used for the Merit Matrix above)
   wasn't the right mechanism here. Exactly 3 stages, hardcoded by ID
   rather than a generic N-stage loop, matching the 3 fixed stages
   hardcoded in learning-model.php itself.
   ====================================================================== */
.stepper-input { position: absolute; opacity: 0; pointer-events: none; }

.curriculum-explorer { text-align: center; }
.stepper { text-align: left; position: relative; }

.stepper-nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 2.5rem 0;
  padding-top: 1px;
}
/* The spec's "ultra-thin 1px horizontal line spanning the container" --
   purely decorative, so --matte-gold (not the text-safe darkened
   variant) is correct here. */
.stepper-nodes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--matte-gold);
}
.stepper-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.5rem;
  cursor: pointer;
  text-align: center;
  flex: 1;
}
.stepper-node-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--charcoal-15);
  background: var(--cream);
  font-family: var(--font-display);
  font-size: 0.9rem;
  margin-top: -2.5rem;
}
.stepper-node-label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--charcoal-muted);
}
.stepper-panel { display: none; }
.stepper-panel-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
  border: 1px solid var(--charcoal-15);
  background: #F1EFE8;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--charcoal-muted);
  margin-bottom: 1.5rem;
}

#stage-0:checked ~ .stepper-nodes label[for="stage-0"] .stepper-node-index,
#stage-1:checked ~ .stepper-nodes label[for="stage-1"] .stepper-node-index,
#stage-2:checked ~ .stepper-nodes label[for="stage-2"] .stepper-node-index {
  background: var(--royal-blue-text);
  color: var(--cream);
  border-color: var(--royal-blue-text);
}
#stage-0:checked ~ .stepper-nodes label[for="stage-0"] .stepper-node-label,
#stage-1:checked ~ .stepper-nodes label[for="stage-1"] .stepper-node-label,
#stage-2:checked ~ .stepper-nodes label[for="stage-2"] .stepper-node-label {
  color: var(--charcoal);
}
#stage-0:checked ~ .stepper-panels #panel-0,
#stage-1:checked ~ .stepper-panels #panel-1,
#stage-2:checked ~ .stepper-panels #panel-2 {
  display: block;
}

/* ======================================================================
   Endowment Impact Dashboard (endowment.php) -- spec §06 must-have #4.
   "Massive numbers set in Cinzel at a light weight (400)... authoritative
   primary brand blue. Avoid flashy, colorful interactive charts... clean
   columns, structured visual grids, and extensive padding to match The
   Financial Times aesthetic." No charting library, no SVG graphs --
   exactly what the spec asked to avoid -- just large type and space.
   ====================================================================== */
.endowment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--charcoal-15);
  border-left: 1px solid var(--charcoal-15);
}
.endowment-cell {
  border-right: 1px solid var(--charcoal-15);
  border-bottom: 1px solid var(--charcoal-15);
  padding: 3rem 2rem;
  text-align: center;
}
.endowment-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.5rem; /* clamp() fallback -- see style.css's .hero h1 comment for the pattern */
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--royal-blue);
  line-height: 1.1;
}
.endowment-label {
  margin-top: 0.75rem;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--charcoal-muted);
}

/* ======================================================================
   Search -- was the Command Palette's full-screen JS overlay (spec §06
   must-have #5) through Phase 7; replaced at the client's request with
   a plain page (search.php), prioritizing a lighter build over the
   overlay's instant-typing polish. .search-trigger is simplified
   accordingly: a real link now, visible unconditionally -- no more
   no-js/js gate, since there's nothing left that only works with
   JavaScript. .search-results and everything below it are unchanged
   from the overlay version and reused as-is on search.php: grouped-by-
   type result listing was never actually overlay-specific styling.
   ====================================================================== */
.search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--charcoal-15);
  background: transparent;
  color: var(--charcoal);
  text-decoration: none;
}
.search-trigger:hover { border-color: var(--royal-blue-text); color: var(--royal-blue-text); }

.search-form {
  display: flex;
  gap: 0.75rem;
  margin: 2rem 0;
}
.search-form input[type="search"] {
  flex: 1;
  border: 1px solid var(--charcoal-15);
  background: #fff;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
}
.search-form input[type="search"]:focus { outline: none; border-color: var(--royal-blue-text); }

.search-results { margin-top: 1rem; }
.search-status { color: var(--charcoal-muted); }
.search-group { margin-bottom: 2rem; }
.search-group-title {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  border-bottom: 1px solid var(--charcoal-15);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.search-group-list { list-style: none; margin: 0; padding: 0; }
.search-group-list li { border-bottom: 1px solid var(--charcoal-15); }
.search-group-list a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0;
  text-decoration: none;
  color: inherit;
}
.search-group-list a:hover .search-result-title { color: var(--royal-blue-text); }
.search-result-title { font-family: var(--font-display); font-size: 1.05rem; }
.search-result-blurb { font-size: 0.85rem; color: var(--charcoal-muted); }

/* ======================================================================
   Cookie-consent banner (spec §10, explicitly required) -- see
   partials/footer.php's comment for the full context on why this
   exists now when an earlier phase had reasoned it didn't need to.
   Fixed bottom bar, solid --cream fill (no glassmorphism, same
   principle as the rest of this brand), shown by default in markup so
   it degrades safely with JavaScript disabled (assets/js/main.js only
   ever hides it, never is required to show it).
   ====================================================================== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90; /* below .skip-link's 1000 (style.css) so a keyboard user's skip-to-content target is never covered by this */
  background: var(--cream);
  border-top: 1px solid var(--charcoal-15);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
}
.cookie-banner-inner p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--charcoal-muted);
  max-width: 42rem;
}

/* ======================================================================
   FAQ accordion (contact.php) -- same zero-JS <details>/<summary>
   mechanism as the Merit Matrix, simpler visual treatment (no numeral,
   no two-line summary) since a question is naturally a single line.
   ====================================================================== */
.faq-list { border-top: 1px solid var(--charcoal-15); margin-top: 1.5rem; }
.faq-item { border-bottom: 1px solid var(--charcoal-15); }
.faq-item summary {
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--royal-blue-text); }
.faq-answer { padding-bottom: 1.25rem; }