/* ============================================================
   FLIBBR CONTACT
   Conditional CSS for /contact/ (page-contact.php).
   Loaded only on the Contact page surface (functions.php
   conditional). All page-* chassis selectors inherit from
   page-chassis.css.

   v0.5.23 — initial lift (path-list, locations).
   v0.5.89 — INDEX redesign + INTAKE restructure:
     - Retired .paths-intro, .path-list, .path-row, .path-label,
       .path-body, .path-arrow (the v7 5-row markup is gone).
     - Path tiles used the .case-related chassis (base.css) +
       .recap-tail-paths.recap-tail-paths--2up consumer
       (also base.css, modifier shipped at v0.5.89). No CSS
       for the tile here — it was all in base.css.
     - Added intake surface rules: .intake-back, .intake .page-header
       overrides, .intake-form-section, .intake-form-intro,
       .intake-email-fallback, .locations-signoff.
     - .paths section wrapper retains a thin shell.

   v0.5.90 — INDEX paths redesign + page-header sub-copy merge:
     - .paths section retired entirely. Index paths now use the
       .links-rail pattern (assets/css/links-rail.css, lifted
       from About). contact-paths.php rebuilt; chassis no longer
       wraps in .case-related + .recap-tail-paths.
     - Page-header sub-copy collapsed: the .contact-email-line
       paragraph (rendered separately in the chassis at v0.5.89)
       merged into a single .page-header-supporting paragraph
       with the email as an inline link. Chassis partial
       updated. .contact-email-line class retired.
     - New rule: .page-header-supporting a — upright black with
       --ink underline, --accent on hover. Scoped to non-intake
       (intake's .page-header-supporting stays italic and
       doesn't render mailto inline, so no link rule needed).

   References:
     - flibbr-design-mockup-final-contact.html v9 lock
       (10 May 2026, afternoon) — index source
     - flibbr-design-mockup-final-contact-intake.html v1 lock
       (10 May 2026, with two doc patches) — intake source
   ============================================================ */

/* ----------------------------------------------------------
   PAGE-HEADER — index variant link styling
   v0.5.90: the email line was merged into .page-header-supporting
   at the chassis level, so the mailto <a> renders inline within
   the supporting paragraph. Style it upright black with --ink
   underline (visual anchor preserved).
   Scope: .page-header-supporting a applies to BOTH index and
   intake variants in principle, but intake's
   .page-header-supporting doesn't render mailto inline (per
   contact-chassis-page-header.php intake branch — the path-
   specific email lives in .intake-email-fallback below the
   form, not in the page-header). So the rule is effectively
   index-only without a body-class scope. If a future intake
   variant adds an inline link, this rule will style it
   consistently.
   ---------------------------------------------------------- */

.page-header-supporting a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: border-color var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-header-supporting a:hover { border-bottom-color: var(--accent); }

/* ----------------------------------------------------------
   INTAKE — escape hatch
   v0.5.89, lifted from intake canonical lines 1837-1851.
   ---------------------------------------------------------- */

.intake-back {
  margin: var(--s-7) 0 var(--s-3);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-quiet);
}
.intake-back a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--motion-duration-ui) var(--motion-ease-ui),
              color var(--motion-duration-ui) var(--motion-ease-ui);
}
.intake-back a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

/* ----------------------------------------------------------
   INTAKE — page-header overrides
   Body class .intake (added by flibbr_contact_intake_body_class
   in functions.php) opts into these. Index keeps the unmodified
   .page-header rules from page-chassis.css.
   v0.5.89, lifted from intake canonical lines 1856-1875.
   ---------------------------------------------------------- */

.intake .page-header {
  /* Reduce top padding-block — .intake-back already ate the top
     whitespace above the kicker. */
  padding-block: var(--s-3) var(--s-9);
}
.intake .page-header-kicker em {
  /* The path-name half of the kicker reads in the same metal
     weight as the kicker but italicised, signalling the path
     specificity without changing the type rhythm. */
  font-style: italic;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.intake .page-header-kicker .kicker-sep {
  margin: 0 0.5em;
  color: var(--ink-quiet);
}
.intake .page-header-headline {
  /* Match the index page-header headline scale; H1 stays the
     hero-display class, no further adjustment needed. */
}
.intake .page-header-supporting {
  /* Index uses .t-body (which adds top margin); intake's
     supporting paragraph sits closer to the H1, so we lean on
     the chassis defaults rather than .t-body's spacing. The
     intake chassis caller does not pass .t-body — see
     contact-chassis-page-header.php intake variant. */
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------
   INTAKE — form card + intro + email fallback
   v0.5.89: lifted from intake canonical (style block).
   v0.5.200: .intake-form-section band retired, replaced
   by .intake-form-card contained-card pattern. Mirrors
   .validation-report-gate on validation-room.css. See
   intake canonical v2 (18 May 2026) audit-trail block
   for full rationale.
   ---------------------------------------------------------- */

.intake-form-card {
  background: var(--paper-warm);
  padding: var(--s-7);
  margin-top: var(--s-7);
  max-width: 60ch;
}

.intake-form-intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--s-7);
}
.intake-form-intro p {
  margin: 0 0 var(--s-4);
}
.intake-form-intro p:last-child {
  margin-bottom: 0;
}
.intake-form-intro em {
  font-style: italic;
  color: var(--ink);
}

.intake-email-fallback {
  margin-top: var(--s-7);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.intake-email-fallback a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color var(--motion-duration-ui) var(--motion-ease-ui);
}
.intake-email-fallback a:hover {
  border-bottom-color: var(--accent);
}

/* ----------------------------------------------------------
   INTAKE — locations sign-off (replaces full grid on intakes)
   v0.5.89, lifted from intake canonical lines 1929-1945.
   ---------------------------------------------------------- */

.locations-signoff {
  text-align: center;
  padding-block: var(--s-9);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
}
.locations-signoff strong {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.locations-signoff .signoff-cities {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--ink);
}

/* ----------------------------------------------------------
   LOCATIONS — full grid (INDEX only). Same pattern as About v5.
   Unchanged from v0.5.88.
   ---------------------------------------------------------- */

.locations {
  padding-block: var(--s-9);
}

.locations-intro {
  margin-bottom: var(--s-7);
  display: flex; align-items: baseline; gap: var(--s-5);
  flex-wrap: wrap;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}

.locations-headline { margin: 0; }

.locations-supporting {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36ch;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}

@media (max-width: 880px) {
  .locations-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.location {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}

.location-label {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink);
}

.location-address {
  font-family: var(--sans); font-weight: 400;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.location-pending {
  font-family: var(--sans); font-style: italic;
  font-size: 13px; color: var(--ink-quiet);
}