/* Additions for the static website.
   The app's own compiled stylesheet does all the design work. This file only
   covers the handful of controls that were React components in the app and had
   to be rebuilt as plain HTML: the mobile menu, the hero search, and the
   places where a form was replaced by a link into the app. Everything here
   uses the app's own custom properties so the two stay in step. */

/* ---------------------------------------------------------------
   MOBILE DRAWER
   The app's menu is a Radix Sheet and cannot open without React.
   --------------------------------------------------------------- */
/* Sits UNDER the app's sticky header (which is z-40), not over it. Covering
   the header hides the very button used to close the drawer, which traps
   anyone who opens it on a phone. */
.ttl-drawer {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--background);
  overflow-y: auto;
  /* padding-top is set from the real header height by site.js */
  padding: 104px 20px 40px;
  animation: ttl-fade 0.14s ease-out;
}
.ttl-drawer[hidden] { display: none; }
@keyframes ttl-fade { from { opacity: 0 } to { opacity: 1 } }

.ttl-drawer nav { display: flex; flex-direction: column; }
.ttl-drawer a {
  font-family: var(--font-display, "Oswald", sans-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: var(--foreground);
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}
.ttl-drawer a:hover { color: var(--primary); }
.ttl-drawer a.ttl-drawer-cta {
  margin-top: 22px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: var(--primary);
  color: var(--primary-foreground);
  text-align: center;
  padding: 14px 18px;
}
body.ttl-nav-open { overflow: hidden; }

/* ---------------------------------------------------------------
   HERO SEARCH
   A real select and input, so the search works with no JavaScript at
   all — the form simply GETs the app's directory.
   --------------------------------------------------------------- */
.ttl-field {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input, var(--border));
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.ttl-field:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--ring, var(--primary));
}
.ttl-submit {
  height: 44px;
  padding: 0 22px;
  font-family: var(--font-display, "Oswald", sans-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  white-space: nowrap;
}
.ttl-submit:hover { background: var(--primary-hover, var(--primary)); }
.ttl-submit:active { transform: translateY(1px); }

/* ---------------------------------------------------------------
   HANDOFF LINKS
   Where a form used to be and the backend lives in the app.
   --------------------------------------------------------------- */
.ttl-handoff { margin-top: 18px; }
.ttl-handoff a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, "Oswald", sans-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  color: var(--primary-foreground);
  background: var(--primary);
  padding: 12px 20px;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
}
.ttl-handoff a:hover { background: var(--primary-hover, var(--primary)); }
.ttl-handoff a::after { content: "→"; }

/* ===============================================================
   FINISHING LAYER — spacing scale, type scale, detail tokens,
   restrained motion. Added on top of the app's own stylesheet.
   No new colours: every value below is an existing token or a
   transparency derived from one.
   =============================================================== */

:root {
  /* --- the one spacing scale ------------------------------------
     Everything on the site uses a value from this list. */
  --sp-3xs: 4px;
  --sp-2xs: 8px;
  --sp-xs: 12px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sp-2xl: 64px;

  /* Section rhythm: 64px on a phone, growing smoothly to 96px on a
     large screen. One token, every section, every page. */
  --sp-section: clamp(4rem, 2.5rem + 4.5vw, 6rem);
  --sp-section-hero: clamp(5rem, 3rem + 5.5vw, 7.5rem); /* 80 -> 120 */
  --sp-section-half: clamp(2rem, 1.25rem + 2.25vw, 3rem); /* 32 -> 48 */

  /* Side padding. One value site-wide so the text's left edge never
     moves from page to page. */
  --sp-gutter: clamp(1.25rem, 4vw, 2rem); /* 20 -> 32 */
  --shell-max: 72rem;
  --shell-narrow: 48rem;

  /* Two radii, nothing else. */
  --r: 8px;
  --r-sm: 4px;

  /* One hairline, one shadow. */
  --hairline: var(--border);
  --shadow-soft: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-lift: 0 6px 18px color-mix(in oklab, var(--ink) 10%, transparent);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

/* --- layout primitives ----------------------------------------- */
.ttl-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
/* A reading-width page keeps the same left edge as every other page:
   the column starts where the wide pages start, it just stops sooner. */
.ttl-shell.ttl-narrow { max-width: var(--shell-max); }
.ttl-shell.ttl-narrow > * { max-width: var(--shell-narrow); }
.ttl-section { padding-block: var(--sp-section); }
.ttl-section-hero { padding-block: var(--sp-section-hero); }
.ttl-section-half { padding-block: var(--sp-section-half); }
.ttl-block { margin-top: var(--sp-section); }
.ttl-block:first-child { margin-top: 0; }

/* --- type scale (ratio ~1.28, Oswald + Inter unchanged) --------- */
.display-1 {
  font-size: clamp(2.75rem, 1.9rem + 3.6vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
}
.display-2 {
  font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
}
.display-3 { font-size: 1.375rem; line-height: 1.2; }
h1, h2, h3, .display-1, .display-2, .display-3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Comfortable measure: paragraphs stop at ~72 characters. */
main p { max-width: 72ch; }
main p.max-w-prose, main p[class*="max-w-"] { max-width: 72ch; }

/* Page openings all share one shape. */
.ttl-pagehead { padding-block: var(--sp-section); }
.ttl-pagehead .eyebrow,
.ttl-pagehead > .text-xs { margin-bottom: var(--sp-xs); }
.ttl-pagehead h1 { margin-top: 0; }
.ttl-pagehead h1 + p { margin-top: var(--sp-md); }
/* Same breathing room under every page's opening headline. */
main h1 + p { margin-top: var(--sp-md); }
/* Blog, network, membership, schools, stories and trades had no <main> when
   their spacing was approved; keep their intro at its original mt-5 now that
   they have the landmark. */
main h1 + p.ttl-measure { margin-top: 1.25rem; }

/* --- header logo -------------------------------------------------
   The lockup sets its wordmark beside the mark instead of under it, so
   the type is a third of the image's height. It needs a little more room
   than the old two-line logo to read at the same size. Width is unchanged
   on a phone; the badge simply sits taller in the same bar. */
.ttl-logo { height: 56px; }
@media (min-width: 640px) { .ttl-logo { height: 64px; } }

/* --- details ---------------------------------------------------- */
.rounded-sm, .rounded-md { border-radius: var(--r-sm); }
.rounded-lg, .rounded-xl { border-radius: var(--r); }
.rounded-r-lg { border-radius: 0 var(--r) var(--r) 0; }
.shadow-sm, .shadow, .shadow-md { box-shadow: var(--shadow-soft); }
.border-border { border-color: var(--hairline); }
header.sticky .h-8 { height: 2.25rem; padding-inline: 0.875rem; }

/* --- interaction ------------------------------------------------ */
a, button, .ttl-field, .ttl-submit, summary {
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Cards that are links get a small lift, nothing more. */
a[class*="bg-card"][class*="border-border"]:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
/* Body links grow an underline instead of just changing colour. */
main p a:not([class*="bg-"]):hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- motion ------------------------------------------------------ */
.ttl-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  will-change: opacity, transform;
}
.ttl-reveal.is-in { opacity: 1; transform: none; }
img.ttl-fade { opacity: 0; transition: opacity 320ms var(--ease); }
img.ttl-fade.is-loaded { opacity: 1; }
header.sticky { transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
body.ttl-scrolled header.sticky {
  background-color: var(--background);
  box-shadow: 0 1px 0 var(--hairline), 0 8px 24px color-mix(in oklab, var(--ink) 7%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ttl-reveal { opacity: 1 !important; transform: none !important; }
  img.ttl-fade { opacity: 1 !important; }
}

/* Hero row: full 1152 column, text padded by the shared gutter so its
   left edge lines up with every other page. */
.ttl-shell-flush { width: 100%; max-width: var(--shell-max); margin-inline: auto; }
.ttl-hero-pad { padding: var(--sp-section-hero) var(--sp-gutter); }

.ttl-phrase { display: inline-block; }

/* ---------------------------------------------------------------
   ONE RHYTHM, ENFORCED
   Every top-level section on every page gets exactly the section
   token top and bottom, and no first/last child is allowed to add
   its own margin on top of it. This is what makes the gap between
   any two sections the same number everywhere on the site.
   --------------------------------------------------------------- */
main > section,
main > div > section { padding-block: var(--sp-section); }
main > section.ttl-section-hero,
main > div > section.ttl-section-hero { padding-block: var(--sp-section-hero); }
main > section.ttl-section-half,
main > div > section.ttl-section-half { padding-block: var(--sp-section-half); }

/* Stacked sections carry their rhythm as padding, never as margin. */
.ttl-block { margin-top: 0; }
main > section > *:first-child,
main > section > * > *:first-child,
main > div > section > *:first-child,
main > div > section > * > *:first-child { margin-top: 0; }
main > section > *:last-child,
main > section > * > *:last-child,
main > div > section > *:last-child,
main > div > section > * > *:last-child { margin-bottom: 0; }

/* FAQ accordion */
.ttl-faq { overflow: hidden; }
.ttl-faq + .ttl-faq { margin-top: 0.75rem; }
.ttl-faq > .ttl-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  transition: background-color 200ms var(--ttl-ease, ease), color 200ms var(--ttl-ease, ease);
}
.ttl-faq > .ttl-faq-q::-webkit-details-marker { display: none; }
/* The tokens are hex colours, so they are used directly — wrapping them in
   hsl() made the browser drop these declarations. */
.ttl-faq > .ttl-faq-q:hover { color: var(--primary); }
.ttl-faq > .ttl-faq-q:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.ttl-faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.3rem;
}
.ttl-faq-icon::before,
.ttl-faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 200ms var(--ttl-ease, ease), opacity 200ms var(--ttl-ease, ease);
}
.ttl-faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.ttl-faq[open] .ttl-faq-icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.ttl-faq-a { padding: 0 1.25rem 1.25rem; }
.ttl-faq[open] > .ttl-faq-q { color: var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .ttl-faq > .ttl-faq-q,
  .ttl-faq-icon::before,
  .ttl-faq-icon::after { transition: none; }
}

/* ===============================================================
   PAGE UTILITIES — buttons, cards, measure. Same tokens, no new hues.
   =============================================================== */
.ttl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  font-family: var(--font-display, "Oswald", sans-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ttl-btn-primary { background: var(--primary); color: var(--primary-foreground); }
.ttl-btn-primary:hover { background: var(--primary-hover, var(--primary)); transform: translateY(-1px); }
.ttl-btn-ghost { border-color: var(--border); color: var(--foreground); background: transparent; }
.ttl-btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.ttl-btn:active { transform: translateY(1px); }

.ttl-lift { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.ttl-lift:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.07); }

.ttl-measure { max-width: 68ch; }
.ttl-handoff-link {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.ttl-handoff-link:hover { border-bottom-color: var(--primary); }

/* --- accordions (the app's Radix markup, driven by site.js) ------ */
[data-acc-content] {
  overflow: hidden;
  height: 0;
  transition: height 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-acc-content][hidden] { display: block !important; height: 0; }
[data-acc-content] > .ttl-acc-inner { padding: 0 0 20px; color: var(--muted-foreground, inherit); }
[data-acc-content] > .ttl-acc-inner > p + p { margin-top: 0.75rem; }

/* --- zip results ------------------------------------------------ */
.ttl-results { border-top: 1px solid var(--border); padding-top: 20px; }
.ttl-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.ttl-results-grid {
  margin-top: 20px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ttl-result {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  background: var(--card);
  color: var(--card-foreground);
  padding: 20px;
  opacity: 0;
  transform: translateY(6px);
  animation: ttl-result-in 0.32s ease-out forwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ttl-result:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.07); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
@keyframes ttl-result-in { to { opacity: 1; transform: none; } }
.ttl-badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  margin: 6px 6px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .ttl-result, .ttl-lift, .ttl-btn, [data-acc-content] { animation: none !important; transition: none !important; opacity: 1; transform: none; }
}

/* Tablet header: the desktop nav needs more room than 768px gives it,
   so keep the mobile drawer in play until 1024px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  header nav[aria-label="Main"].md\:flex { display: none !important; }
  header .ttl-shell > div > .hidden.md\:flex { display: none !important; }
  header .ttl-shell [data-menu-toggle],
  header .ttl-shell button.md\:hidden { display: inline-flex !important; }
}