/* Navbar: the fixed site header and the mobile drawer it opens. At the top
   of a page the bar is a floating cream capsule; over the first 100px of
   scroll it grows into a full-width charcoal bar (navbar.js drives both).
   Markup: build/navbar.js. Desktop rules first, then phones/tablets, then
   the drawer. */

/* ------------------------------------------------------------ Bar geometry */

/* --navbar-progress runs 0 → 1 over the first 100px of scroll (navbar.js
   writes it every frame). Every size here interpolates with it, so the
   capsule widens, drops to the top edge, flattens and squares off in one
   continuous move. Each page's first section pads its top by
   --header-clearance (global.css) so it starts below the bar. */
.site-header {
  --navbar-progress: 0;
  /* The navbar's call orb is the only one on the site that rings: it's the
     one call button that is always on screen (see call-orb.css). */
  --call-orb-pulse: call-orb-pulse;
  /* The capsule at the top: inset from the window edges, capped at 1240px */
  --bar-inset: var(--gutter);
  --bar-w: min(1240px, 100% - 2 * var(--bar-inset));
  /* Height at the top (76px; 64px on phones) and once scrolled */
  --bar-h-top: var(--header-h);
  --bar-h-end: 64px;

  position: fixed;
  top: calc(var(--header-gap) * (1 - var(--navbar-progress)));
  left: 0;
  right: 0;
  z-index: 200;
  width: calc(var(--bar-w) + (100% - var(--bar-w)) * var(--navbar-progress));
  height: calc(var(--bar-h-top) + (var(--bar-h-end) - var(--bar-h-top)) * var(--navbar-progress));
  margin-inline: auto;
  /* Grows exactly as fast as the width, so the content row inside keeps its
     place and only the surface behind it spreads out to the edges. */
  padding-inline: calc((100% - var(--bar-w)) * var(--navbar-progress) / 2);
  /* A true capsule at the top (radius = half its height), square at the end */
  border-radius: calc(var(--bar-h-top) / 2 * (1 - var(--navbar-progress)));
}

/* -------------------------------------------------------- Surface + colors */

/* The bar's two flat looks, as tokens: solid cream at the top of the page,
   solid charcoal once it has scrolled 100px (.is-scrolled, toggled by
   navbar.js). Every colored rule below reads these, so the swap is one
   class, and the transitions turn it into a ~300ms cross-fade. */
.site-header {
  --nav-surface: var(--color-bg);
  --nav-ink: var(--color-ink);
  --nav-ink-soft: var(--color-ink-soft);
  --nav-fill: rgba(27, 27, 29, 0.05);
  --nav-fill-hover: rgba(27, 27, 29, 0.08);
  --nav-line: rgba(27, 27, 29, 0.08);
  --nav-active-bg: var(--color-bg-alt);
  --nav-active-ink: var(--color-ink);
  --nav-active-shadow: inset 0 0 0 1px var(--color-line);
  --nav-kicker: var(--color-ink-soft);
  /* Deep brass here: the bright brass ring is only ~1.8:1 on cream */
  --nav-focus: var(--color-accent-deep);
  --logo-accent: var(--color-accent-deep);

  background: var(--nav-surface);
  color: var(--nav-ink);
  transition:
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}

/* Scrolled past 100px: a full-width solid charcoal bar, cream type, brass
   accents. */
.site-header.is-scrolled {
  --nav-surface: var(--color-panel-deep);
  --nav-ink: var(--color-panel-ink);
  --nav-ink-soft: var(--color-panel-ink-soft);
  --nav-fill: rgba(241, 236, 225, 0.05);
  --nav-fill-hover: rgba(241, 236, 225, 0.09);
  --nav-line: var(--color-line-dark);
  --nav-active-bg: rgba(217, 164, 85, 0.1);
  --nav-active-ink: var(--color-accent-bright);
  --nav-active-shadow: inset 0 0 0 1px rgba(217, 164, 85, 0.6);
  --nav-kicker: var(--color-accent-bright);
  --nav-focus: var(--color-accent-bright);
  --logo-accent: var(--color-accent-bright);
}

/* Scrolled: a flat 1px brass line along the bottom edge */
.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-accent-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.site-header.is-scrolled::after {
  opacity: 1;
}

/* Keyboard focus: the global brass ring, deepened on the cream capsule so it
   stays clearly visible there (see --nav-focus above). */
.site-header :focus-visible {
  outline-color: var(--nav-focus);
}

/* ------------------------------------------------------------------ Layout */

/* Desktop row: logo | nav | call. Equal side columns keep the nav on the
   bar's true center line. The side padding sets the round logo mark (44px,
   left) and call orb (52px, right) concentric with the capsule's ends. */
.site-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 100%;
  padding-inline: 16px 12px;
}

/* --------------------------------------------------------------- Skip link */

/* "Skip to main content": the first stop for keyboard users, parked above
   the screen until it is focused, then shown over the navbar */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 400;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-panel-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* -------------------------------------------------------------------- Logo */

/* The logo itself is its own component (components/logo/); here it only
   takes the left column of the bar's grid. */
.site-header .logo {
  justify-self: start;
}

/* ------------------------------------------------------------- Desktop nav */

/* The links sit in an inset "track" pill. The current section is a filled
   pill inside it: raised white on the cream bar, brass-tinted once dark.
   Hover is a subtle fill. */
.main-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: var(--radius-pill);
  background: var(--nav-fill);
  box-shadow: inset 0 0 0 1px var(--nav-line);
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.main-nav-list a {
  display: block;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  color: var(--nav-ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.main-nav-list a:hover {
  background: var(--nav-fill-hover);
  color: var(--nav-ink);
}

.main-nav-list a[aria-current] {
  background: var(--nav-active-bg);
  box-shadow: var(--nav-active-shadow);
  color: var(--nav-active-ink);
}

/* ---------------------------------------------------------------- Call CTA */

/* The circular call CTA: callBlock() from build/markup.js, styled by
   components/call-orb/. The bar only places it, scales the orb with the bar
   (52px at the top, 46px once flattened), and colors its text per surface. */
.header-actions {
  display: flex;
  justify-self: end;
}

/* call-orb.css sizes the orb, its icon and its pulse from --orb-size */
.site-header .call-orb {
  --orb-size: calc(52px - 6px * var(--navbar-progress));
}

.site-header .call-block-kicker {
  color: var(--nav-kicker);
  opacity: 1;
  transition: color 0.3s var(--ease-out);
}

.site-header .call-block-number {
  color: var(--nav-ink);
  transition: color 0.3s var(--ease-out);
}

/* --------------------------------------------------------------- Hamburger */

/* A round button that mirrors the call orb at the other end of the bar.
   Hidden on desktop, where the nav links show instead. */
.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nav-fill);
  box-shadow: inset 0 0 0 1px var(--nav-line);
  color: var(--nav-ink);
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.nav-toggle:hover {
  background: var(--nav-fill-hover);
}

.nav-toggle .icon {
  width: 22px;
  height: 22px;
}

/* -------------------------------------------------- Phones + tablets layout */

/* Why 1120px: the desktop row needs ≈994px of bar — logo 229 + nav track
   459 + call block 172, plus 28px of padding and two 24px gaps, with the
   side columns kept equal so the nav stays centered — so it fits from a
   ≈1050px window (measured from the real Teko/Barlow glyph widths).
   Switching at 1120 leaves ~70px of slack for the wider fallback fonts
   shown while the web fonts load, so the row never wraps or overlaps.
   Below it: [hamburger] [logo] … [call]. */
@media (max-width: 1119px) {
  .site-header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }

  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-grid;
  }
}

/* Phones: a tighter capsule (side inset = its top gap), a smaller logo,
   and the call CTA becomes the orb alone — 44px, a full touch target.
   Tablets keep the number beside the orb: there's room, and it reassures. */
@media (max-width: 760px) {
  .site-header {
    --bar-inset: var(--header-gap);
    --bar-h-end: 56px;
  }

  /* Hamburger and orb (both 44px) concentric with the 64px capsule's ends */
  .site-header-inner {
    padding-inline: 10px;
  }

  /* 44px tall, so the logo stays a comfortable tap target */
  .site-header .logo {
    gap: 10px;
    min-height: 44px;
  }

  .site-header .logo-mark {
    width: 36px;
    height: 36px;
  }

  .site-header .logo-mark .icon {
    width: 17px;
    height: 17px;
  }

  .site-header .logo-text {
    font-size: 1.3rem;
  }

  .site-header .call-orb {
    --orb-size: 44px;
  }

  /* Hide the kicker + number visually; they stay the link's spoken name */
  .header-actions .call-block-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The narrowest phones (320–359px): drop the round mark so the row fits */
@media (max-width: 359px) {
  .site-header .logo-mark {
    display: none;
  }
}

/* ----------------------------------------------------------- Mobile drawer */

/* The drawer sits directly under <body>, not inside <header>: anything on
   the header that creates a containing block (a filter, a transform)
   would otherwise clip this fixed-position drawer to the header's box. */
.mobile-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  /* Clip the off-canvas panel so it can't add phantom width to the page
     and let phones swipe the whole site sideways. */
  overflow: hidden;
  /* Closed = hidden from screen readers and the Tab order. On close it
     stays visible until the panel has finished sliding out. */
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}

.mobile-nav-drawer.is-open {
  visibility: visible;
  transition-delay: 0s;
}

/* Closing: while the panel slides out it is still visible, so stop it (and
   its full-screen scrim) from swallowing taps meant for the page */
.mobile-nav-drawer:not(.is-open) {
  pointer-events: none;
}

/* Dimmed backdrop; a tap on it closes the drawer (navbar.js) */
.mobile-nav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 15, 0.62);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}

.mobile-nav-drawer.is-open .mobile-nav-scrim {
  opacity: 1;
}

/* The panel slides in from the LEFT: flat deep charcoal with a brass
   hairline edge. It scrolls on its own if a short screen can't fit it. */
.mobile-nav-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(86vw, 360px);
  padding: max(14px, env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--color-accent-line);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: var(--color-panel-deep);
  color: var(--color-panel-ink);
  transform: translateX(-100%);
  transition: transform 0.45s var(--ease-out);
}

.mobile-nav-drawer.is-open .mobile-nav-panel {
  transform: none;
}

/* Head row: the wordmark, and a round close button on the right */
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  margin-bottom: 14px;
}

.mobile-nav-head .logo-text {
  --logo-accent: var(--color-accent-bright);
  font-size: 1.5rem;
}

.mobile-nav-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(241, 236, 225, 0.06);
  box-shadow: inset 0 0 0 1px var(--color-line-dark);
  color: var(--color-panel-ink);
  cursor: pointer;
  transition: box-shadow 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.mobile-nav-close:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent-line);
  color: var(--color-accent-bright);
}

.mobile-nav-close .icon {
  width: 20px;
  height: 20px;
}

/* The links: big Anton rows split by hairlines; the current one in brass,
   and the chevron nudges right on hover. */
.mobile-nav-body {
  margin-bottom: 24px;
}

.mobile-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav-list li {
  border-bottom: 1px solid var(--color-line-dark);
}

.mobile-nav-list li:first-child {
  border-top: 1px solid var(--color-line-dark);
}

.mobile-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 4px;
  color: var(--color-panel-ink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}

.mobile-nav-list a .icon {
  width: 20px;
  height: 20px;
  color: var(--color-panel-ink-soft);
  transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.mobile-nav-list a:hover .icon {
  transform: translateX(3px);
  color: var(--color-accent-bright);
}

.mobile-nav-list a[aria-current],
.mobile-nav-list a[aria-current] .icon {
  color: var(--color-accent-bright);
}

/* Current page: a brass bar and an indent too, so it isn't marked by color
   alone (both survive high-contrast mode) */
.mobile-nav-list a[aria-current] {
  padding-left: 12px;
  border-left: 3px solid var(--color-accent-bright);
}

/* Call card: the big call orb + number, then "Request service". Pinned to
   the bottom of the panel on tall screens (margin-top: auto). */
.mobile-nav-call {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-lg);
  background: rgba(241, 236, 225, 0.04);
}

.mobile-nav-call .call-block-kicker {
  color: var(--color-accent-bright);
  opacity: 1;
}

/* The lg orb (76px), its gap and its Anton number all scale down a little
   on narrower phones, so orb + number always fit one line inside the card
   (at 320px: 56 + 14 + 116 = 186px of the card's 197px). */
.mobile-nav-call .call-block {
  column-gap: 14px;
  color: var(--color-panel-ink);
}

.mobile-nav-call .call-orb {
  --orb-size: clamp(56px, 17vw, 76px);
}

.mobile-nav-panel .mobile-nav-call .call-block .call-block-number {
  font-size: clamp(1.2rem, 6vw, 1.6rem);
}

/* Trust line under the card: two short facts with brass icons */
.mobile-nav-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-panel-ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
}

.mobile-nav-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mobile-nav-trust .icon {
  width: 16px;
  height: 16px;
  color: var(--color-accent-bright);
}

/* Staggered entrance: the links, then the call card and trust line, slide
   in from the left one after another. Reduced motion (global.css) zeroes
   the durations and delays, so everything simply appears in place. */
.mobile-nav-list li,
.mobile-nav-call,
.mobile-nav-trust {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.mobile-nav-drawer.is-open .mobile-nav-list li,
.mobile-nav-drawer.is-open .mobile-nav-call,
.mobile-nav-drawer.is-open .mobile-nav-trust {
  opacity: 1;
  transform: none;
}

.mobile-nav-drawer.is-open .mobile-nav-list li:nth-child(1) { transition-delay: 0.1s; }
.mobile-nav-drawer.is-open .mobile-nav-list li:nth-child(2) { transition-delay: 0.14s; }
.mobile-nav-drawer.is-open .mobile-nav-list li:nth-child(3) { transition-delay: 0.18s; }
.mobile-nav-drawer.is-open .mobile-nav-list li:nth-child(4) { transition-delay: 0.22s; }
.mobile-nav-drawer.is-open .mobile-nav-list li:nth-child(5) { transition-delay: 0.26s; }
.mobile-nav-drawer.is-open .mobile-nav-list li:nth-child(6) { transition-delay: 0.3s; }
.mobile-nav-drawer.is-open .mobile-nav-call { transition-delay: 0.32s; }
.mobile-nav-drawer.is-open .mobile-nav-trust { transition-delay: 0.36s; }

/* Desktop never shows the drawer (navbar.js also closes it if the window is
   widened past the breakpoint while it's open). */
@media (min-width: 1120px) {
  .mobile-nav-drawer {
    display: none;
  }
}

/* While the drawer is open the page behind it can't scroll (navbar.js adds
   .nav-locked to <html>). */
html.nav-locked,
html.nav-locked body {
  overflow: hidden;
}

/* Keep the scrollbar's gutter reserved while locked, so the page behind the
   scrim doesn't widen and shift sideways. html only: on body, with overflow
   hidden, it would reserve a second gutter inside the page. */
html.nav-locked {
  scrollbar-gutter: stable;
}

/* ------------------------------------------------------------ Environments */

/* Windows high-contrast mode drops backgrounds: outline the bar and the
   current link so both stay visible. */
@media (forced-colors: active) {
  .site-header {
    border: 1px solid CanvasText;
  }

  .main-nav-list a[aria-current] {
    outline: 2px solid CanvasText;
  }
}

/* Printing: the bar prints once at the top, without the menu button/drawer */
@media print {
  .site-header {
    position: absolute;
    box-shadow: none;
  }

  .nav-toggle,
  .mobile-nav-drawer {
    display: none;
  }
}