/**
 * 46-stories-chrome.css — Stories chrome parity vs stories.vestfin.com
 *
 * Loads sitewide (via mu-plugin vestfin-perf-fixes.php) but every selector is
 * scoped under body.is-stories-chrome, so it is inert everywhere else.
 * Reference measurements taken 2026-07-23 on
 * https://stories.vestfin.com/box-spreads-in-practice/ at 1512x982 and 390x844:
 *   header 80px white, NO bottom border; Kadence container 1290px/24px pad
 *   (logo x=128 @1497vw); 80px body-bg gap between header and white article
 *   card (32px on mobile); card radius 4px 4px 0 0 + shadow
 *   rgba(0,0,0,.05) 0 15px 15px -10px; page bg rgb(245,244,241);
 *   entry-meta margins 12.8px.
 */

/* 1. Header: the live stories header has no bottom border (desktop + mobile).
      overrides.css already tried `.is-stories-chrome .navbar__wrapper
      { border-bottom: 0px; }` (~line 127) but the later sitewide
      `body:not(.home) .navbar__wrapper { border-bottom: 1px solid #cacfc8
      !important; }` (~line 3831, 2026-06-19) clobbers it. Needs !important +
      higher specificity (0,2,2) to win deterministically.
      NOTE: header horizontal gutter (logo x 142 vs live 128) is deliberately
      NOT touched — .navbar__wrapper__container._container belongs to the
      canonical gutter-system contract (gutter-system.css, separate
      workstream). */
body.is-stories-chrome nav .navbar__wrapper,
body.is-stories-chrome nav .mobile-navbar__top-bar {
  border-bottom: 0 !important;
}

/* 3. Mobile header: live is 80px tall (ours was 65px: 20+28+16+1px border).
      26 + 28px logo + 26 = 80. Theme uses !pt-[20px]/!pb-[16px] so these need
      !important to win. */
body.is-stories-chrome .mobile-navbar__top-bar {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

/* 4. Story articles only (hub page 7 is is-stories-chrome but not single-story
      and keeps its own hero/card layout): 80px page-bg gap between header and
      the white article card (Kadence content-vertical-padding), 32px on
      mobile. Background tone stays the existing overrides.css choice
      (#f4f4ef vs live #f5f4f1 — imperceptible, not worth an ID-specificity
      fight with `.is-stories-chrome #primary.content-area`). */
body.is-stories-chrome.single-story .content-area {
  padding-top: 80px;
}
@media (max-width: 767.98px) {
  body.is-stories-chrome.single-story .content-area {
    padding-top: 32px;
  }
}

/* 5. White article card: rounded top corners + soft shadow like live. */
body.is-stories-chrome.single-story .stories-body {
  border-radius: 4px 4px 0 0;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 15px 15px -10px;
}

/* 6. Byline block spacing: live entry-meta has 12.8px top/bottom margins
      (ours had 16px from my-4). */
body.is-stories-chrome.single-story .entry-meta {
  margin-top: 12.8px;
  margin-bottom: 12.8px;
}