/* Jost is self-hosted via @font-face in main.css (every page that links
   interior.css links main.css first) — no Google Fonts @import here. */

/* ============================================================
   River Dachs — Interior (2nd-tier) page styles
   ------------------------------------------------------------
   • Replaces the old dark .page-banner with a LIGHT-BLUE title
     band ("Option A"): breadcrumb + eyebrow + serif title + sub
     + fading hairline.
   • Light blue band = #EAF2F8 (matches approved mockup);
     "navy" = --teal-dark (footer). Sans font = Jost.
   • Contact Us nav button gets the navy surround on inner pages.
   Load AFTER main.css.
   ============================================================ */

/* ── Typography: Jost for sans (matches the approved mockup) ─ */
:root { --font-sans: 'Jost', system-ui, sans-serif; }

/* ── Light page-title band ───────────────────────────────── */
/* Themed via page-head-local tokens with the current light values as
   fallbacks, so light mode is unchanged; the dark block below swaps
   the band to navy. */
/* Compact title band (Option C): breadcrumb rides up close under the nav,
   eyebrow removed (it duplicated the title), tighter gaps + bottom padding —
   trims the band's height while keeping the title + subtitle. */
.page-head {
  background: var(--ph-band, #F2F7FB);
  padding: calc(var(--nav-h) + 1.1rem) 0 0.85rem;
  position: relative;
}
.page-head .container { position: relative; z-index: 1; }

.page-head__crumb {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ph-crumb, #8a98a2);
  margin-bottom: 0.9rem;
}
.page-head__crumb a { color: var(--ph-crumb, #8a98a2); opacity: 1; transition: color 0.2s; }
.page-head__crumb a:hover { color: var(--ph-accent, #2C7CB5); }
.page-head__crumb .sep { margin: 0 0.5rem; opacity: 0.55; }
.page-head__crumb .here { color: var(--ph-accent, #2C7CB5); font-weight: 400; }

/* Eyebrow removed in the compact band — it repeated the page title. */
.page-head__eyebrow { display: none; }
.page-head__title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ph-title, #16314B);
}
.page-head__sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--ph-sub, #5a6b77);
  max-width: 580px;
  margin-top: 0.6rem;
  line-height: 1.6;
}
.page-head__rule {
  height: 2px;
  background: linear-gradient(90deg, var(--ph-accent, #2C7CB5), rgba(44,124,181,0));
}

/* Dark-mode page-title band — navy surface, caramel accents. */
:root[data-theme="dark"] .page-head {
  --ph-band:   var(--c-surface-alt);
  --ph-crumb:  var(--c-muted);
  --ph-accent: var(--c-accent);
  --ph-title:  var(--c-heading);
  --ph-sub:    var(--c-muted);
}

/* ── Contact Us nav button — navy surround on inner pages ── */
.nav--static .nav__cta {
  border-color: var(--c-footer);
  color: var(--c-footer);
}
.nav--static .nav__cta:hover {
  background: var(--c-footer);
  border-color: var(--c-footer);
  color: var(--c-on-footer);
}
:root[data-theme="dark"] .nav--static .nav__cta {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
:root[data-theme="dark"] .nav--static .nav__cta:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

@media (max-width: 768px) {
  .page-head { padding: calc(var(--nav-h) + 0.9rem) 0 0.75rem; }
}