/*
  CandiBrows — site chrome
  ================================================================
  This file adds ONLY what tokens.css does not already provide: the header,
  navigation, footer, skip link, and the reserved booking-embed slot. Page
  content uses the vendored tokens.css classes (.cb-container, .cb-section,
  .cb-split, .cb-btn, .cb-surface, .cb-inverse, .cb-rule, .cb-label, .cb-img).

  Every value below is a var(--cb-*) from assets/tokens.css, a 1px hairline, or
  0. Two categories of literal are used and both are justified in-line:

    1. Breakpoints 377 / 610 / 987 / 1597 — the Fibonacci breakpoint set
       (proportions.md section 3). Media queries cannot read custom properties.
    2. Widths 233px / 377px for the wordmark — Fibonacci steps on the nested
       phi ladder in proportions.md section 3 (987 -> 610/377 -> 233/144).
       Declared once as custom properties below.

  Do not hand-edit assets/tokens.css. It is vendored from candibrows-brand.
*/

:root {
  /*
    Wordmark widths. 144px is the brand minimum (BRAND.md section 6); 233 and
    377 are the next two Fibonacci steps up, taken from the nested phi ladder in
    proportions.md section 3. At the wordmark's 1260.56:114.22 aspect these
    render 13px / 21px / 34px tall — Fibonacci in both dimensions.
  */
  --cb-wordmark-sm: var(--cb-logo-min-width); /* 144px — the floor */
  --cb-wordmark-md: 233px;
  --cb-wordmark-lg: 377px;
}

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }

/* ================================================================
   SKIP LINK
   ================================================================ */

.skip-link {
  position: absolute;
  z-index: 2;
  top: var(--cb-space-21);
  left: var(--cb-space-21);
  transform: translateY(calc(-1 * var(--cb-space-144)));
  background: var(--cb-bg);
  color: var(--cb-text-heading);
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-body);
  line-height: var(--cb-leading-body);
  padding: var(--cb-space-13) var(--cb-space-21);
  border: var(--cb-hairline) solid var(--cb-rule-meaningful);
  border-radius: var(--cb-radius);
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

/* ================================================================
   HEADER — row 1: wordmark + primary CTA (or the menu button on mobile)

   The 34px padding and the 34px flex gap together satisfy the logo clear-space
   law (BRAND.md section 6: 34px minimum on all four sides). The .cb-logo
   utility in tokens.css is deliberately NOT used here — its own 34px margin
   would double the clear space against the header padding.
   ================================================================ */

.site-header {
  background: var(--cb-bg);
  border-bottom: var(--cb-hairline) solid var(--cb-rule-decorative);
}

.header-bar {
  max-width: var(--cb-container-full-bleed);
  margin-inline: auto;
  padding: var(--cb-space-34);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-34);
}

.site-wordmark { display: inline-flex; }

.site-wordmark img {
  display: block;
  width: var(--cb-wordmark-sm);
  height: auto;
}

/* Compact fill for the header CTA: the "Button, default" construction from
   proportions.md section 2 (13px / 34px padding) with the primary mauve fill.
   The full 21px / 55px primary padding is used for in-page CTAs. */
.nav-cta {
  display: none;
  padding: var(--cb-space-13) var(--cb-space-34);
  text-decoration: none;
  white-space: nowrap;
}

/* ================================================================
   MENU BUTTON — shown below the md (610px) breakpoint only
   ================================================================ */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-13);
  padding: var(--cb-space-13);
  background: transparent;
  border: var(--cb-hairline) solid var(--cb-mauve);
  border-radius: var(--cb-radius);
  color: var(--cb-mauve); /* 9.64:1 on warm ivory */
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-fine); /* 16px — the floor, not smaller */
  font-weight: var(--cb-weight-body-bold);
  line-height: var(--cb-leading-body);
  letter-spacing: var(--cb-label-tracking);
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:focus-visible {
  /* Matches the focus treatment already set in the vendored tokens.css. */
  outline: 2px solid var(--cb-focus);
  outline-offset: var(--cb-space-5);
}

/*
  Below the sm (377px) breakpoint the wordmark is already at its 144px floor, so
  the button's word is what has to give: it is clipped from view but stays in the
  accessibility tree, which keeps the button named "Menu" for assistive tech.
  Without this the header overflows by 6px at 320px.
*/
.nav-toggle-text {
  position: absolute;
  width: var(--cb-hairline);
  height: var(--cb-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-5);
}

.nav-toggle-bars i {
  display: block;
  width: var(--cb-space-21);
  border-top: var(--cb-hairline) solid currentColor;
}

/* ================================================================
   PRIMARY NAV — row 2, from the md (610px) breakpoint up
   ================================================================ */

.site-nav {
  display: none;
  border-top: var(--cb-hairline) solid var(--cb-rule-decorative);
}

.nav-inner {
  max-width: var(--cb-container-full-bleed);
  margin-inline: auto;
  padding: var(--cb-space-21) var(--cb-space-34);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cb-space-21);
  list-style: none;
  margin-block: 0;
}

.nav-inner a {
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-body);
  font-weight: var(--cb-weight-body);
  line-height: var(--cb-leading-body);
  color: var(--cb-text-heading); /* 9.64:1 on warm ivory */
  text-decoration: none;
}

.nav-inner a:hover,
.nav-inner a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--cb-rule-meaningful); /* 3.51:1 — meaningful rule */
  text-underline-offset: var(--cb-space-5);
}

/* ================================================================
   MOBILE NAV PANEL — below the md (610px) breakpoint

   Rendered open in the markup and closed by script.js on load, so the links
   remain reachable when JavaScript does not run.
   ================================================================ */

.mobile-nav {
  border-top: var(--cb-hairline) solid var(--cb-rule-decorative);
  padding: var(--cb-space-21) var(--cb-space-34) var(--cb-space-34);
}

.mobile-nav[hidden] { display: none; }

.mobile-nav ul {
  list-style: none;
  margin: 0 0 var(--cb-space-34);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-21);
}

.mobile-nav a {
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-body);
  line-height: var(--cb-leading-body);
  color: var(--cb-text-heading);
  text-decoration: none;
}

.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--cb-rule-meaningful);
  text-underline-offset: var(--cb-space-5);
}

.mobile-nav .cb-btn { text-decoration: none; }

/* ================================================================
   H1 AT THE NARROWEST WIDTH

   Below the md (610px) breakpoint the content column is 320px at a 362px
   viewport, and a single long word set at 76px Cormorant is wider than that —
   "complimentary" measures 453px and pushes the page into horizontal scroll.

   The fix steps H1 down to 47px, which is the adjacent step on the same phi
   scale (18 / 29 / 47 / 76 / 123). No new size is introduced, the 29px display
   floor is respected, and BRAND.md section 8 permits scale to adapt where the
   faces, the floors, the Fibonacci spacing and the phi ratios do not.

   Restored to 76px from 610px up, where the column can carry it.
   ================================================================ */

h1 { font-size: var(--cb-text-h2); }

/* ================================================================
   PAGE CONTENT HELPERS
   ================================================================ */

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-21);
  margin-top: var(--cb-space-34);
}

.page-actions .cb-btn { text-decoration: none; }

/* ================================================================
   PROOF STRIP — index.html, directly under the hero

   An equal-cell repeating grid, which is the one symmetric split the
   proportion law permits (proportions.md section 3). Bounded top and bottom by
   rose gold hairlines, because these rules carry meaning — they separate the
   proof from the hero — and blush at 1.34:1 may not.
   ================================================================ */

.proof-strip {
  list-style: none;
  margin: var(--cb-space-55) 0 0;
  padding: var(--cb-space-34) 0;
  display: grid;
  gap: var(--cb-space-21);
  grid-template-columns: 1fr;
  border-top: var(--cb-hairline) solid var(--cb-rule-meaningful);
  border-bottom: var(--cb-hairline) solid var(--cb-rule-meaningful);
}

/* The 89ch measure on p does not apply to li; cells are already narrow. */
.proof-strip li { max-width: none; }

/* ================================================================
   CARD GRID — the four service cards on index.html

   Two columns from the md breakpoint up, not four: at 987px a four-across grid
   leaves each cell near 220px, which is too narrow for a 29px Cormorant h3.
   ================================================================ */

.card-grid {
  display: grid;
  gap: var(--cb-space-34);
  grid-template-columns: 1fr;
}

.card-grid .cb-surface p:last-child { margin-bottom: 0; }

/* ================================================================
   SERVICE LIST — services.html and restoration.html

   One price line per service, per the price-discipline rule: stated as a fact,
   never argued. The short rule above it is 377px — Fibonacci, and narrow enough
   to read as a mark rather than as a divider.
   ================================================================ */

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cb-space-55);
}

.service-list > li > *:last-child { margin-bottom: 0; }

.price-line {
  max-width: var(--cb-wordmark-lg); /* 377px — F14 */
  margin: 0;
  padding-top: var(--cb-space-13);
  border-top: var(--cb-hairline) solid var(--cb-rule-meaningful);
  font-weight: var(--cb-weight-body-bold);
  color: var(--cb-text-heading); /* 9.64:1 on warm ivory */
}

/* ================================================================
   STEPS — consultation.html, what to expect

   Equal-cell repeating grid again. Each step uses .cb-label for its number and
   an h3 for its title, so no new type size is introduced.
   ================================================================ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cb-space-34);
  grid-template-columns: 1fr;
}

.steps li { max-width: none; }
.steps li > *:last-child { margin-bottom: 0; }

/* ================================================================
   GALLERY GRID — gallery.html

   Every cell is a 1:1 square crop (proportions.md section 4). One ratio across
   the whole grid is what keeps the rows aligned; square also suits the macro
   detail the shot list calls for.

   Images are not curated yet, so /assets/gallery/ is empty. Each slot carries
   its intended path and real alt text. Until the files land the blush field
   below is what shows, which is on-palette rather than broken-looking.
   ================================================================ */

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cb-space-34);
  grid-template-columns: 1fr;
}

.gallery-grid figure { margin: 0; }

.gallery-grid img { background: var(--cb-bg-surface); }

.gallery-grid figcaption {
  margin-top: var(--cb-space-13);
  font-size: var(--cb-text-fine); /* 16px — the floor, not smaller */
  line-height: var(--cb-leading-body);
}

/* ================================================================
   VIDEO EMBED — the ABC30 feature on restoration.html

   The frame is the brand's 1.618:1 landscape ratio. The station's player is
   natively 16:9 (1.778) and fits itself inside, which is the only way to carry
   a third-party embed without breaking the aspect-ratio law.
   ================================================================ */

.video-embed {
  display: block;
  width: 100%;
  aspect-ratio: var(--cb-ratio-landscape);
  border: 0;
}

/* ================================================================
   INVERSE BLOCKS — links and buttons on the deep mauve ground

   tokens.css sets .cb-inverse backgrounds and heading colours but stops short
   of interactive elements, which would otherwise inherit mauve-on-mauve.
   ================================================================ */

.cb-inverse a {
  color: var(--cb-text-inverse); /* 9.64:1 on deep mauve */
  text-decoration-color: currentColor;
}

.cb-inverse .cb-btn {
  border-color: var(--cb-text-inverse);
  color: var(--cb-text-inverse);
  text-decoration: none;
}

.cb-inverse .cb-btn--primary {
  background: var(--cb-text-inverse);
  color: var(--cb-bg-inverse); /* 9.64:1 reversed */
}

/* ================================================================
   BOOKING EMBED — reserved slot, consultation.html
   ================================================================ */

.booking-embed {
  min-height: var(--cb-container-reading); /* 610px — floor against the third-party widget's layout jump */
  margin: var(--cb-space-21) 0;
}

/* ================================================================
   FOOTER
   ================================================================ */

.site-footer {
  background: var(--cb-bg-inverse); /* deep mauve */
  color: var(--cb-text-inverse);    /* warm ivory — 9.64:1 */
  padding-block: var(--cb-space-89);
}

.site-footer a {
  color: var(--cb-text-inverse);
  text-decoration-color: currentColor;
}

.footer-monogram {
  display: block;
  width: var(--cb-space-89);
  height: auto;
  margin: 0 0 var(--cb-space-34);
}

.footer-block address {
  font-style: normal;
  margin: 0 0 var(--cb-space-21);
}

/* Also used for the studio contact block on consultation.html. */
.stack-list {
  list-style: none;
  margin: 0 0 var(--cb-space-21);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-13);
}

.footer-legal {
  margin-top: var(--cb-space-55);
  padding-top: var(--cb-space-21);
  border-top: var(--cb-hairline) solid var(--cb-rule-meaningful);
}

.footer-legal a {
  font-size: var(--cb-text-fine); /* 16px — quiet, and the floor */
  line-height: var(--cb-leading-body);
}

/* ================================================================
   BREAKPOINTS — md 610, lg 987 (Fibonacci, proportions.md section 3)
   ================================================================ */

@media (min-width: 377px) {
  .nav-toggle-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

@media (min-width: 610px) {
  .site-wordmark img { width: var(--cb-wordmark-md); }
  .nav-cta    { display: inline-block; }
  .nav-toggle { display: none; }
  .site-nav   { display: block; }
  .mobile-nav { display: none; }

  h1 { font-size: var(--cb-text-h1); } /* back to 76px — the column can hold it */

  .proof-strip   { grid-template-columns: repeat(2, 1fr); gap: var(--cb-space-34); }
  .card-grid     { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 987px) {
  .site-wordmark img { width: var(--cb-wordmark-lg); }
  .nav-inner    { gap: var(--cb-space-34); }
  .site-footer  { padding-block: var(--cb-space-144); }

  .proof-strip  { grid-template-columns: repeat(4, 1fr); }
  .steps        { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}