/* ============================================================
   Theme-only additions — things WordPress needs that the static
   export did not. Everything else comes from assets/css/ds/*.css,
   which are verbatim copies of the export's own stylesheets.
   Keep this file SMALL: if something looks wrong, first check
   whether the export already styles it before adding a rule here.
   ============================================================ */

/* The export's header is position:fixed, so it reserves no flow space.
   Pages whose first section doesn't already pad for it (the way the home
   and about heroes do) get the clearance here instead. */
#main {
  padding-top: var(--header-height, 80px);
}

.fa-page--flush #main {
  padding-top: 0;
}

/* Mobile nav — the export handles this inside its React chrome; this is
   the theme's plain-markup equivalent. */
.fa-mobile-nav[hidden] {
  display: none;
}

.fa-mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--fa-mobile-nav-top, var(--header-height, 80px)));
  height: calc(100dvh - var(--fa-mobile-nav-top, var(--header-height, 80px)));
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 16px 24px max(32px, env(safe-area-inset-bottom));
  background: var(--surface-page, #fff);
  color: var(--fa-ink, #050e1e);
  border-top: 1px solid rgba(5, 14, 30, .12);
}

.fa-mobile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}

.fa-mobile-nav nav a,
.fa-mobile-nav summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  box-sizing: border-box;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  font: var(--fw-halbfett) 20px/1.3 var(--font-display);
  overflow-wrap: anywhere;
}

.fa-mobile-nav nav > a,
.fa-mobile-nav nav > details {
  border-bottom: 1px solid rgba(5, 14, 30, .12);
}

.fa-mobile-nav summary {
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.fa-mobile-nav summary::-webkit-details-marker { display: none; }
.fa-mobile-nav summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.fa-mobile-nav details[open] > summary::after { transform: rotate(225deg); }
.fa-mobile-nav details > div { padding-bottom: 12px; }
.fa-mobile-nav details a { min-height: 48px; font-size: 16px; }
.fa-mobile-nav > .fa-btn { width: 100%; min-height: 52px; flex-shrink: 0; }
.fa-mobile-nav a:focus-visible,
.fa-mobile-nav summary:focus-visible,
.fa-hamburger:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

html.fa-mobile-nav-open,
html.fa-mobile-nav-open body { overflow: hidden; }

@media (max-width: 1199px) {
  .fa-header.is-mobmenu-open {
    background: var(--surface-page, #fff) !important;
    mix-blend-mode: normal !important;
  }
  .fa-hamburger[aria-expanded="true"] { position: relative; }
  .fa-hamburger[aria-expanded="true"] svg { visibility: hidden; }
  .fa-hamburger[aria-expanded="true"]::before,
  .fa-hamburger[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .fa-hamburger[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }
}

@media (min-width: 1200px) {
  .fa-mobile-nav { display: none; }
}

/* WordPress prose fallback (blog posts, and any CPT single without its
   own layout yet). */
.fa-prose {
  padding-block: 80px;
  max-width: 760px;
}

.fa-prose img {
  max-width: 100%;
  height: auto;
}

/* Editor-entered copy arrives wrapped in <p> (ACF runs the_content filters
   on wysiwyg fields, and the inherited testimonial rows are one). The static
   export had no such wrapper, so the default paragraph margins would add
   22px inside the quote and push every section below it down the page.
   Applies to the blocks that take raw editor HTML, not to prose. */
.fa-proof__quote > p:first-child,
.ab-who__body > p:first-child {
  margin-top: 0;
}

.fa-proof__quote > p:last-child,
.ab-who__body > p:last-child {
  margin-bottom: 0;
}

/* Header nav: same weight before and after scrolling.

   The export difference-blends the whole fixed header on desktop
   (.fa-header.header--blend in ds/homepage.css). Inverting the glyphs also
   inverts their antialiased edges, so the nav paints visibly heavier than
   normal text -- and pure black rather than the ink colour.

   That only ever showed for the first 40px of a page, because this theme
   puts the frosted header on EVERY page (see assets/js/chrome.js), and
   .fa-page.is-glass already resets the blend. So the blend's whole remaining
   effect was a heavier nav at rest that thinned out the moment you scrolled.

   These rules are the un-blending half of the .is-glass block in
   ds/hero-alt.css, lifted out of it so it applies at rest too. The frosted
   background itself still only appears on scroll, which is the intended
   behaviour -- only the text stops changing. Colour stays driven by the
   scroll listener's data-theme, so the nav is still light on dark sections. */
@media (min-width: 1200px) {
  .fa-header.header--blend {
    mix-blend-mode: normal;
  }

  .fa-header[data-theme="light"].header--blend {
    --text-primary: var(--fa-ink);
  }

  .fa-header[data-theme="light"].header--blend .fa-logo__cut--light {
    opacity: 1;
  }

  .fa-header[data-theme="light"].header--blend .fa-logo__cut--dark {
    opacity: 0;
  }
}

/* The design's episode list is eight hard-coded rows and never hides one.
   The real list is 295, so a row outside the current topic or batch carries
   [hidden] -- and .pod-ep sets display:flex, which beats the browser's own
   [hidden] rule. Same for the "See more" button once nothing is left. */
.pod-ep[hidden],
.pod-eps__more[hidden],
/* Same trap in the member panel: .mp-articles sets display:flex, so a
   member with no credited articles would still show the heading over an
   empty grid. The export never hits this -- its article list is hard-coded
   and every panel gets the same two. */
.mp-articles[hidden] {
  display: none;
}

/* The player's two states are mutually exclusive; the design styles both but
   never says that only one shows at a time, because its own markup only ever
   rendered the expanded half. */
.pod-fab.is-collapsed .pod-fab__player,
.pod-fab.is-expanded .pod-fab__toggle {
  display: none;
}

/* Both icons ship in the play button and one carries [hidden] at a time, but
   .pod-fab__play svg{display:block} beats the browser's own [hidden] rule, so
   the button showed a play triangle AND pause bars at once. */
.pod-fab__play svg[hidden] {
  display: none;
}

/* Rich-text editor values may contain multiple paragraphs or lists. */
.fa-rich-copy > :first-child { margin-top: 0; }
.fa-rich-copy > :last-child { margin-bottom: 0; }
a.ot-tag { text-decoration: none; }
.fa-system-page { padding-top: 160px; padding-bottom: 96px; min-height: 65vh; }
.fa-system-page article { margin-top: 40px; }