/* ==========================================================================
   Shared components: header nav, footer.
   ========================================================================== */

/* -- Skip link -----------------------------------------------------------
   First focusable element in the document (see partials/header.html) — a
   keyboard user shouldn't have to tab through the full nav on every page
   load to reach content. Standard off-screen-until-focused pattern: sits
   at -100% top so it takes no visual space and can't be seen or tabbed
   past accidentally, then snaps into view above everything (including
   the header, hence the higher z-index) the moment it receives focus. */
.skip-link {
  position: fixed;
  top: -100%;
  left: 0;
  z-index: var(--z-tooltip); /* highest existing z-index step — needs to sit above the fixed header (--z-sticky-nav) */
  padding: var(--space-18) var(--space-27);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  border: 3px solid var(--color-action-primary);
}
.skip-link:focus {
  top: 0;
}
/* The skip link's target (see `tabindex="-1"` on <main id="main-content">
   in every page) needs to be programmatically focusable so the *next* Tab
   press continues from there instead of restarting from the top of the
   document — but <main> spans the full content width, and a default
   focus ring around that much area reads as a jarring, viewport-wide box
   rather than a helpful indicator. Suppressed here deliberately: nothing
   about this element is meant to be interacted with directly, only
   landed on, so there's no accessibility cost to hiding its own outline. */
#main-content:focus {
  outline: none;
}

/* -- Header ------------------------------------------------------------------
   Floating glass nav, confirmed via Figma MCP (get_design_context, node
   2825:725): NOT a full-bleed bar flush to the viewport top — a contained
   bar inset 70px from each side, floating 32px down from the top, width
   1140px at desktop (= the 1280px container's own content width once its
   70px edge-padding is subtracted either side — same number, not a second,
   conflicting measurement; see BRANDING.md §5's resolved note). Semi-
   transparent dark fill + backdrop-blur so it reads tinted by whatever
   scrolls underneath (black hero / orange star / blue-gray band).
   `.site-header` is the full-width fixed positioning wrapper (transparent,
   so clicks pass through its side margins); `.site-header__inner` is the
   actual visible bar. */
.site-header {
  position: fixed;
  top: 32px;
  left: 0;
  right: 0;
  z-index: var(--z-sticky-nav);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.site-header__inner {
  pointer-events: auto;
  position: relative;
  width: min(1140px, calc(100% - 140px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  padding-inline: var(--space-60);
  background: rgba(25, 25, 25, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header__logo img {
  /* Match Login (.btn--small + 3px secondary border ≈ 46px tall) so the
     wordmark and the right-side CTA read at the same visual weight. */
  height: 46px;
  width: auto;
  margin: 22px 0;
}
.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 37px; /* bound to the H3/section-header type-scale value (37px) in Figma, reused as a spacing value on this frame — not a general spacing token, hardcoded per Figma MCP evidence. Signed-off desktop value — kept exactly for ≥1400px; only the small-desktop tier below narrows it (see media query below). */
}
/* Small desktop (992–1399px): even after moving the hamburger breakpoint
   to 991px, the inline row's required width (~860px, measured via natural
   unwrapped link widths) is still ~8px tighter than the bar's available
   width right at the 992px floor (852px), so links still wrapped between
   992–1038px. Rather than move the breakpoint again to an arbitrary
   non-token value, trim the nav-list gap here only — large desktop's
   confirmed 37px Figma value above is untouched. */
@media (min-width: 992px) and (max-width: 1399px) {
  .site-header__nav-list { gap: var(--space-27); }
  /* Closes a ~3px shortfall right at the 992px floor (measured: nav-list
     needs 584px, only 581px available there with the 60px desktop
     padding) — reuses the small-desktop edge-padding token .container/
     .section already use for this tier instead of a header-specific
     number. */
  .site-header__inner { padding-inline: var(--container-edge-padding-small-desktop); }
}
/* Nav links centered in the bar, Login pinned to the right edge,
   independent of each other (confirmed, client request — supersedes the
   original Figma reference, which packed everything flush right).
   `.site-header__nav-wrapper` (a plain, non-semantic div — see
   partials/header.html) wraps <nav> and the Login link as two siblings,
   then `display: contents` here dissolves it as a layout box so its two
   children become direct grid items of `.site-header__inner` — this is
   what makes the setup *sustainable* for future nav items: Login is a
   real, independently-sized grid track (not display:none'd or
   absolutely-positioned out of flow), so the browser always computes the
   center column against Login's actual current width, automatically
   recalculating if links are ever added/removed from the <ul>. No
   hardcoded widths anywhere.

   Two earlier approaches were tried and abandoned before this:
   (1) `position: absolute; left: 50%; transform: translateX(-50%)` on
   <nav> — an absolutely positioned element with only `left` set computes
   shrink-to-fit width using the space available *before* the transform
   is applied (transforms are visual-only, not layout), so at left:50% it
   only got budgeted ~half the bar's width and silently wrapped the nav
   links. (2) Centering <nav> alone via grid while pinning Login via
   `position: absolute; right: 0` on the login item — this worked
   geometrically, but because Login was pulled out of grid flow entirely,
   the browser had no way to know it was there: <nav> centered against
   the bar's *full* width (logo vs. nothing), not the actual visible gap
   between logo and Login, so once Login's real width didn't match the
   logo's, the nav group visibly wasn't centered relative to Login and
   the logo — confirmed by screenshot. Both problems go away once Login
   is a real, sized grid participant instead of removed from flow. */
@media (min-width: 992px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Grid's overlap-avoidance (a 1fr column can't shrink below its own
       content's min-content size, so it grows past its "fair" 1fr share
       rather than collide) can still land the logo and nav flush against
       each other with zero visual breathing room (confirmed at exactly
       992px) even though nothing technically overlaps — gap guarantees a
       floor between tracks regardless of how tight either side's content
       forces it, factored into the same leftover-space math
       automatically. */
    gap: var(--space-40);
  }
  .site-header__logo { grid-column: 1; justify-self: start; }
  .site-header__nav-wrapper { display: contents; }
  .site-header__nav { grid-column: 2; justify-self: center; }
  .site-header__login { grid-column: 3; justify-self: end; }
}
/* Default/inactive links are muted; the current page's link is the one that
   goes to full primary-text white — confirmed via Figma MCP (the "Consulting"
   instance was text/primary-text while Insights/Case Studies/Contact Us were
   text/disabled-text on the Index page's header). This is the opposite of
   this file's earlier orange-for-active guess. */
.site-header__nav-link {
  color: var(--color-text-disabled);
}
.site-header__nav-link[aria-current="page"] {
  color: var(--color-text-primary);
}
/* Hover/focus fill confirmed via Figma MCP (node 1744:886, the "selected"
   state) — previously missing entirely, nav links had no interaction
   feedback. Same specificity as [aria-current="page"] above and declared
   after it, so hovering the current page's own link still goes orange
   (hover wins on source order) rather than staying stuck white. */
.site-header__nav-link:hover,
.site-header__nav-link:focus-visible {
  color: var(--color-text-link);
}
.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: var(--space-8);
  /* Content (24px bars + 8px padding each side) previously rendered a
     40×32px tap target — short of WCAG 2.5.5's 44×44px minimum, mainly on
     height. min-width/min-height guarantee the floor without changing
     the visible icon; align-items/justify-content re-center the bars
     inside the now-larger box. */
  min-width: 44px;
  min-height: 44px;
}
.site-header__menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
}

/* Breakpoint is 991px, not 767px (`md`) — confirmed: the inline nav row
   (logo + 4 links + bordered Login button) needs ~860px of bar width to
   fit on one line (measured via natural unwrapped widths), but the bar's
   own width formula (`min(1140px, calc(100% - 140px))`) only offers that
   much starting around 1040px. Below that — the entire 768–991px tablet
   tier plus the top of small desktop down to ~1040px — links wrapped to
   two lines ("Case Studies" → "Case" / "Studies"). Tightening padding/
   gaps alone doesn't close the gap even at the most cramped tablet-
   appropriate values (still ~80px short at 768px), so the dropdown nav
   (already correct) now takes over a tier earlier instead, matching the
   `lg` boundary the rest of this responsive pass uses. Once collapsed,
   the visible bar row is just logo + toggle, which fits comfortably at
   any width down to 991px without needing its own tier-specific padding. */
@media (max-width: 991px) {
  .site-header__inner {
    width: calc(100% - 32px);
    padding-inline: var(--container-edge-padding-mobile);
  }
  /* .site-header__nav-wrapper (not .site-header__nav) is the dropdown
     panel here — it's the element that actually holds both the link list
     and Login as DOM siblings (see partials/header.html), so making IT
     the positioned/stacked box is what keeps Login visually inside the
     dropdown, last, below the links — same visual result as the old
     single-<ul> structure, just reflecting where Login actually lives in
     the DOM now that desktop needs it separated out. */
  .site-header__nav-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-8);
    background: rgba(25, 25, 25, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-standard) var(--ease-out);
    display: flex;
    flex-direction: column;
  }
  .site-header.is-nav-open .site-header__nav-wrapper {
    max-height: 400px;
  }
  .site-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-18);
    padding: var(--space-40) var(--container-edge-padding-mobile) 0;
  }
  /* Login's own spacing in the stacked dropdown — was margin-left:40px
     as a same-row flex sibling of the plain links (desktop-only,
     see the ≥992px rule above); here it's a block sibling below the
     link list instead, so it gets its own top/side margins matching the
     list's own padding-inline instead. */
  .site-header__login {
    align-self: flex-start;
    margin: var(--space-18) var(--container-edge-padding-mobile) var(--space-40);
  }
  .site-header__menu-toggle {
    display: flex;
  }
}

/* -- Footer ------------------------------------------------------------------ */
.site-footer {
  background: transparent; /* lets body's pattern show through — same base color as bg-page */
  padding-block: var(--space-60);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-40);
}
.site-footer__icon-list {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* base.css's global `img { max-width: 100% }` reset only constrains width, not the icons' own fixed height:40px — left shrinkable, the icons squashed into ovals below ~360px instead of staying circular. Fixed size wins; the text label wraps instead, which degrades gracefully. */
  gap: var(--space-18);
}
/* 40×40px matches the visible icon design, but as a bare tap target
   that's short of WCAG 2.5.5's 44×44px minimum. min-width/min-height on
   the link (not the img) grow the tap area without changing the icon's
   own visual size — display:inline-flex + centering keeps the icon
   centered inside the larger invisible hit box. */
.site-footer__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.site-footer__icon-link img {
  width: 40px;
  height: 40px;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.site-footer__icon-link:hover img {
  opacity: 0.7;
}
.site-footer__copyright {
  color: var(--color-text-primary);
}

/* "Back to X" link at the top of a detail page (article/case-study
   detail templates). Shared across pages/insights/*.html and
   pages/case-studies/*.html — each loads a different page-specific
   stylesheet, so this lives here rather than being duplicated in both. */
.back-link {
  align-self: flex-start;
}
.back-link:hover,
.back-link:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   Long-form body copy — shared between Insights articles
   (css/insights.css .article-detail__body) and Case Study detail pages
   (css/case-studies.css .case-study-detail__body). Both are a single
   continuous write-up, so they share one prose treatment — reading width,
   paragraph/list rhythm, in-body heading spacing — instead of two
   independently-tuned copies that can drift apart. Applied as an
   additional class alongside each page's own __body class, which keeps
   its own display:flex/flex-direction — only the shared prose rules live
   here. 64rem (1024px) confirmed with the client: wide enough for Case
   Study's highlight-grid cards/quotes to have room, narrower than the
   full 1280px container so long-form text doesn't stretch edge-to-edge.
   margin-inline: auto centers this block within its parent flex column
   (.case-study-detail/.article-detail default to align-items: stretch, so
   without this a max-width narrower than the container just left-aligns
   the block instead of centering it — caught visually after this class
   shipped). */
.longform-body {
  max-width: 64rem;
  margin-inline: auto;
}
.longform-body h2,
.longform-body h3,
.longform-body h4 {
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.longform-body p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.longform-body ul {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-type: disc;
}
.longform-body ol {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-type: decimal;
}
.longform-body li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.longform-body li > ul,
.longform-body li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.longform-body br {
  content: "";
  display: block;
  margin-top: 0.75rem;
}