/* ==========================================================================
   Vadens — pre-launch home
   Design tokens follow the prose in stitch_meralo_immigration_support_guides/
   DESIGN.md, which agrees with both Stitch prompts. That file's YAML
   frontmatter is a Material-3 token dump and disagrees with its own prose;
   the prose wins.
   ========================================================================== */

@import url("./tokens.css");

/* --- Typeface. Atkinson Hyperlegible Next, SIL OFL, self-hosted. ---------
   One variable file per subset serves both 400 and 700. latin-ext only
   downloads once a glyph outside latin appears — i.e. only for Spanish. --- */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset -------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: hidden;
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* no jump as a mobile toolbar collapses */
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--secondary); }

h1 { font-size: var(--fs-page-title); line-height: var(--lh-page-title); font-weight: 700; }
h2 { font-size: var(--fs-page-title); line-height: var(--lh-page-title); font-weight: 700; }
h3 { font-size: var(--fs-lead);       line-height: var(--lh-lead);       font-weight: 700; }

/* --- Shared ------------------------------------------------------------- */

/* Every band — header, hero, urgent, guides, footer — uses the same frame, so
   left edges stay aligned the whole way down the page. Prose is capped
   separately at --measure inside it; the frame is never the reading width. */
.wrap {
  width: 100%;
  max-width: calc(var(--page) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-2); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Line icons, 1.5px stroke held constant at any rendered size. */
.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 24px; height: 24px; }
.icon path, .icon circle { vector-effect: non-scaling-stroke; }

/* --- Buttons ------------------------------------------------------------ */
/* Rectangular with a 12px radius. Never pill-shaped. May wrap to two lines. */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

/* Full-bleed is right on a phone and wrong on a monitor — a 1080px-wide button
   is not a button. Every .btn sits in a flex column, so align-self does it.
   The min-width keeps a short label (or a shorter English one next to its
   longer Spanish twin) from shrinking to a stub. */
@media (min-width: 640px) {
  .btn {
    width: auto;
    align-self: flex-start;
    min-width: min(320px, 100%);
  }
}

.btn--filled { background: var(--primary); color: #fff; }
.btn--filled:hover { background: #094e4a; }

.btn--outline { background: transparent; color: var(--secondary); border-color: var(--secondary); }
.btn--outline:hover { background: var(--tint-section); }

.btn--urgent { color: var(--time-text); border-color: var(--time-text); }
.btn--urgent:hover { background: var(--time-border); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--row);
}

.wordmark {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-page-title);
  line-height: var(--lh-page-title);
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.site-header__controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* Exit is the one control on the page someone may need in a hurry, so it must
   read as one word at every width. The header bar is exactly full at 320px and
   the label is a flex item, so it gets squeezed below its own text width; a
   Latin label ("Exit", "Salir") has no break opportunity inside the word and
   holds, but Chinese breaks between any two characters, so the two-character
   label split into a two-line, 52px-tall stack. nowrap keeps it on one line.
   The control then runs ~5px into the right gutter at 320px, which is exactly
   where the longer Spanish label already sits, and the page still does not
   scroll sideways — the negative margin-right absorbs it. */
.exit {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding-inline: var(--s-2);
  margin-right: calc(var(--s-2) * -1);
  color: var(--secondary);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius);
}
.exit:hover { background: var(--tint-section); }

.esc-note {
  padding: var(--s-2) var(--gutter);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  text-align: center;
}

/* Language control. Three live options — EN / ES / 中文. The option for the
   current page is a span; the other two are links.

   gap is 0 and the spacing lives inside .lang__opt as padding instead. Two of
   the three options are now real links, so each has to clear the 48px tap
   floor. Height is free — the header bar is already 56px tall — but width is
   not: three 48px-wide targets will not sit beside the wordmark and Exit at a
   320px viewport. Moving the 4px gap inside the options widens the hit area
   without widening the control. */
.lang {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  color: var(--muted);
  white-space: nowrap;
}
.lang__opt {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-1);
}
.lang__opt.is-on { color: var(--primary); font-weight: 700; text-decoration: underline; }
.lang--footer { gap: var(--s-2); color: var(--secondary); }
.lang--footer .icon { margin-right: var(--s-1); }

/* --- Hero --------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--pad-block);
}

/* The frame widens on a monitor; the reading line does not follow it. */
.hero h1, .hero .lead { max-width: var(--measure); }

/* Two buttons in the hero: stacked on a phone (each full-width, like the lone
   button was), side by side once there is room. .btn already handles its own
   width/min-width/align-self at each breakpoint — this only sets direction. */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
}

/* Ink, not muted: the subhead is how someone decides whether to keep reading,
   and muted is reserved for metadata. Weight alone carries the hierarchy. */
.hero .lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-top: calc(var(--s-4) - var(--s-8)); /* 32px flex gap → 16px here */
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  color: var(--muted);
}
.facts li + li::before { content: "\00b7"; margin-right: var(--s-2); }

/* --- Urgent entry point ------------------------------------------------- */
/* The only place the time-critical palette appears. No countdown, no timer,
   no animation, no red. */

.urgent {
  background: var(--time-tint);
  border-block: 1px solid var(--time-border);
  color: var(--time-text);
}

.urgent__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: clamp(var(--s-6), 3vw, var(--s-8));
}

.urgent__head { display: flex; gap: var(--s-3); max-width: var(--measure); }
.urgent__head .icon { margin-top: 3px; }
.urgent__head h2 {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  margin-bottom: var(--s-2);
}

.urgent__hotline-label {
  margin-top: var(--s-2);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  text-align: center;
}

.urgent__hotline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--row);
  color: var(--time-text);
  font-size: var(--fs-page-title);
  line-height: var(--lh-page-title);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}
.urgent__hotline .icon { width: 24px; height: 24px; }
.urgent__hotline:hover { background: var(--time-border); }

/* Once the band is wide enough that the number would sit alone on a line of
   its own whitespace, move it beside the text instead. Reading order is
   unchanged — the grid only repositions what the source already says. */
@media (min-width: 900px) {
  .urgent__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head hotline"
      "cta  hotline";
    align-items: start;
    column-gap: var(--s-8);
  }
  .urgent__head { grid-area: head; }
  .btn--urgent { grid-area: cta; justify-self: start; }
  .urgent__hotline-block { grid-area: hotline; align-self: center; }
  .urgent__hotline-label { margin-top: 0; text-align: right; }
  .urgent__hotline { justify-content: flex-end; }
}

/* --- Guides ------------------------------------------------------------- */

.guides {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--pad-block);
}

.chips {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--s-2);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.chips::-webkit-scrollbar { display: none; }

/* Once there is room, wrap instead of scrolling. A chip clipped at the edge of
   a wide column reads as breakage, and the horizontal scroll affordance is
   invisible without a touch screen. */
@media (min-width: 640px) {
  .chips {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* 48px, not the 40px in the Stitch export: the DNA sets a hard 48px floor on
   every tap target, for users with limited motor control or on a moving bus. */
.chip {
  flex: none;
  scroll-snap-align: start;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  background: transparent;
  color: var(--secondary);
  border: 1px solid var(--secondary);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.chip:hover { background: var(--tint-section); }
.chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}

.cards { display: grid; gap: var(--s-4); }

@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stretch the card to its grid row so two cards with different title lengths
   still square off at the bottom. */
.cards > li { display: flex; }

/* The filter in exit.js works by setting [hidden] on these <li>s. A class
   selector on the element beats the browser's own [hidden] rule, so the
   display above would quietly un-hide every filtered-out card without this. */
.cards > li[hidden] { display: none; }

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background-color .15s ease;
}
.card:hover { background: var(--surface-card); }

.card__cat {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
}
.card__title { color: var(--ink); }
/* auto, not a fixed margin: in a two-up row the footer sits on the bottom edge
   of the taller card instead of floating under a short title. Identical to a
   16px margin when the card is content-height, as it always is on mobile. */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-4);
}
.card__meta { color: var(--muted); font-size: var(--fs-helper); line-height: var(--lh-helper); }
.card__foot .icon { color: var(--secondary); }

.cards__empty { color: var(--muted); }
.cards__empty[hidden] { display: none; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  padding-block: var(--pad-block);
  background: var(--tint-section);
  border-top: 1px solid var(--border);
}

.wordmark--footer { margin-bottom: var(--s-2); }

.site-footer__tagline { color: var(--muted); max-width: var(--measure); }

.site-footer__nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-6);
}
.site-footer__nav a {
  display: flex;
  align-items: center;
  min-height: var(--row);
  color: var(--secondary);
  text-decoration: none;
}
.site-footer__nav a:hover { text-decoration: underline; }

.site-footer__end {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* A column of five links down the left of a 1080px footer is a lot of nothing.
   Row + wrap once there is room; the 48px tap floor still holds because the
   links keep their own min-height. */
@media (min-width: 640px) {
  .site-footer__nav {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--s-8);
  }
  .site-footer__nav a { min-height: var(--tap); }

  .site-footer__end {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-8);
  }
}

.site-footer__legal {
  color: var(--muted);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
}

/* --- Prose -------------------------------------------------------------- */
/* Long-form document pages: /privacy/, and the guide and /about/ routes
   still to be written. The reset above zeroes margins and strips list
   markers, which is right for the landing page's cards and chips and wrong
   for running text — so prose opts back in here rather than each page
   carrying its own <style> block. Constrained to --measure for line length. */

.prose {
  padding-block: var(--s-8) var(--s-16);
}

/* The cap goes on the children, not on .prose itself. .prose sits on a .wrap,
   and capping the frame would centre the whole block and pull its left edge
   away from the header, hero and footer above it. Same reason
   `.hero h1, .hero .lead` are capped individually rather than .hero being. */
.prose > * { max-width: var(--measure); }

.prose > * + * { margin-top: var(--s-6); }

.prose h2 {
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  margin-top: var(--s-12);
}

.prose h3 {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  margin-top: var(--s-8);
}

/* Markers come back, and the indent with them. */
.prose ul {
  list-style: disc;
  padding-left: var(--s-6);
}

.prose li + li { margin-top: var(--s-2); }

.prose .helper {
  color: var(--muted);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
}

/* --- Motion ------------------------------------------------------------- */
/* The motion policy is almost none. Honour the OS setting absolutely. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}