/* Find Immigration Legal Help: one stylesheet, no external fonts or trackers. */

:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --ink: #1c2526;
  --muted: #55606a;
  --line: #dcd7cc;
  /* Each language has its own palette (see "Language palettes" below).
     Everything else is mixed from these two colors. */
  --brand-base: #2c3e8c;
  --accent-base: #ff7a59;
  --brand: var(--brand-base);
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in srgb, var(--brand-base) 9%, #ffffff);
  --accent: var(--accent-base);
  --accent-soft: color-mix(in srgb, var(--accent-base) 18%, #ffffff);
  --free: #1f6b3a;
  --free-soft: #e2f2e7;
  --low: #7a4b00;
  --low-soft: #fbefd9;
  --warn-soft: #fff4e0;
  --warn-line: #e3b55c;
  --focus: #f0a400;
  --radius: 12px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12181a;
    --surface: #1b2326;
    --ink: #eef2f2;
    --muted: #a9b4b8;
    --line: #2f3b3f;
    --brand: color-mix(in srgb, var(--brand-base) 50%, #ffffff);
    --brand-ink: #111111;
    --brand-soft: color-mix(in srgb, var(--brand-base) 30%, #151b1d);
    --accent-soft: color-mix(in srgb, var(--accent-base) 20%, #151b1d);
    --free: #8ed8a6;
    --free-soft: #1b3524;
    --low: #f0c27a;
    --low-soft: #3a2c14;
    --warn-soft: #2e2615;
    --warn-line: #8a6a2c;
    --shadow: none;
    color-scheme: dark;
  }
}

/* Language palettes. Inspired by each culture's art, textiles and landscapes,
   never by national flags (one language is spoken in many countries).
   All pass WCAG AA contrast for white text on the main color and for the
   main color on its light tint, in light and dark mode. */
:root[data-palette="es"] { --brand-base: #a8225a; --accent-base: #f5a524; } /* bougainvillea and marigold */
:root[data-palette="zh"] { --brand-base: #17675f; --accent-base: #d9a520; } /* jade and gold */
:root[data-palette="vi"] { --brand-base: #2d6e3e; --accent-base: #ec7aa3; } /* lotus leaf and lotus flower */
:root[data-palette="tl"] { --brand-base: #0b6694; --accent-base: #f6b93b; } /* ocean and mango */
:root[data-palette="ar"] { --brand-base: #8a5310; --accent-base: #1aa5a5; } /* brass and turquoise tile */
:root[data-palette="ht"] { --brand-base: #5b3aa8; --accent-base: #ffb020; } /* painted violet and sun */
:root[data-palette="fr"] { --brand-base: #7a2f6f; --accent-base: #e8a33d; } /* plum and apricot */
:root[data-palette="pt"] { --brand-base: #1d5aa0; --accent-base: #f2c14e; } /* azulejo blue and sunflower */
:root[data-palette="ru"] { --brand-base: #2f5f73; --accent-base: #e0b04a; } /* deep lake and birch gold */

/* Older browsers without color-mix: plain tints. */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root { --brand-soft: #eef1f8; --accent-soft: #fbf1e6; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic",
        "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 .75em; }
a { color: var(--brand); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }

/* Header */
.top {
  background: linear-gradient(100deg, var(--brand) 55%, color-mix(in srgb, var(--brand) 82%, var(--accent)));
  color: var(--brand-ink); border-bottom: 4px solid var(--accent);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand-mark { font-weight: 900; font-size: 1.5rem; letter-spacing: .08em; line-height: 1; }
.brand-mark::after {
  content: ""; display: inline-block; width: .32em; height: .32em; border-radius: 50%;
  background: var(--accent); margin-inline-start: .12em; vertical-align: baseline;
}
.brand-sub { font-size: .9rem; font-weight: 600; opacity: .92; }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 800; color: var(--brand); margin-bottom: .4em; }
.kicker::before {
  content: ""; display: inline-block; width: 28px; height: 4px; border-radius: 2px;
  background: var(--accent); vertical-align: middle; margin-inline-end: 10px;
}
.foot-brand { font-size: 1rem; }
.lang-pick { display: flex; align-items: center; gap: 6px; }
.lang-pick select {
  font: inherit; font-size: 1rem; padding: 8px 10px; border-radius: 8px;
  border: 2px solid rgb(255 255 255 / .6); background: var(--surface); color: var(--ink); min-height: 44px;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand-soft) 50%, var(--accent-soft) 100%);
  padding: 32px 0 28px; border-bottom: 1px solid var(--line);
}
.lead { font-size: 1.15rem; max-width: 46ch; }
.pick { margin-top: 18px; }
.pick-label { display: block; font-weight: 700; margin-bottom: 6px; }
.pick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pick-row select {
  flex: 1 1 260px; font: inherit; font-size: 1.1rem; padding: 12px; min-height: 52px;
  border: 2px solid var(--brand); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.free-note { margin-top: 14px; color: var(--muted); font-size: .95rem; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer; min-height: 48px; padding: 10px 20px;
  border-radius: 10px; border: 2px solid var(--brand); background: var(--surface); color: var(--brand);
}
.btn.primary { background: var(--brand); color: var(--brand-ink); font-size: 1.1rem; min-height: 52px; }
.btn:hover { filter: brightness(1.06); }

/* Scam warning */
.warn {
  margin-top: 24px; background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-inline-start: 6px solid var(--warn-line); border-radius: var(--radius); padding: 16px 18px;
}
.warn h2 { font-size: 1.15rem; }
.warn p { margin: 0; }

/* Results */
.results { margin-top: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.filters-title { font-weight: 700; margin-inline-end: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .95rem;
}
.chip input { width: 20px; height: 20px; accent-color: var(--brand); }
.chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.search {
  flex: 1 1 220px; font: inherit; font-size: 1rem; padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.legend { font-size: .9rem; margin: 8px 0 16px; line-height: 2; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.card h3 { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tag { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.tag.free { background: var(--free-soft); color: var(--free); border-color: transparent; }
.tag.low { background: var(--low-soft); color: var(--low); border-color: transparent; }
.tag.lang { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.where { color: var(--muted); margin: 0 0 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.actions a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  border-radius: 10px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; background: var(--bg);
}
.actions a.call { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.actions a[dir="ltr"] { unicode-bidi: isolate; }
.card details { margin-top: 8px; }
.card summary { cursor: pointer; color: var(--brand); font-weight: 600; min-height: 32px; }
.card ul { margin: 6px 0 0; padding-inline-start: 1.2em; }
.card li { margin-bottom: 4px; }
.small { font-size: .9rem; }
.empty { background: var(--surface); border: 1px dashed var(--line); padding: 16px; border-radius: var(--radius); }
.print-row { margin-top: 18px; }

/* More ways to get help */
.more, .tips { margin-top: 36px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.res {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.res h3 { font-size: 1.05rem; margin: 0; }
.res p { margin: 0; color: var(--muted); font-size: .95rem; }
.res a { font-weight: 600; margin-top: auto; }
/* The state's own lawyer referral service: full width, first. */
.res.state-ref { grid-column: 1 / -1; border: 2px solid var(--brand); background: var(--brand-soft); }
.res.state-ref a { margin-top: 0; }
.res.state-ref .ref-name { color: var(--ink); font-weight: 600; font-size: 1rem; }
.res.state-ref .ref-fee { color: var(--ink); }
.res.state-ref .actions { margin: 4px 0; }
.res.state-ref ul { margin: 0; padding-inline-start: 1.2em; color: var(--muted); }
.res.state-ref li { margin-bottom: 4px; }
.tips ul { padding-inline-start: 1.2em; }
.tips li { margin-bottom: 8px; }

.foot { margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid var(--line); font-size: .9rem; }

/* Right-to-left languages: phone numbers and web addresses stay left-to-right. */
[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (max-width: 520px) {
  body { font-size: 17px; }
  .hero { padding-top: 22px; }
  .btn.primary { width: 100%; }
  .actions a { flex: 1 1 auto; justify-content: center; }
}

@media print {
  .top, .hero, .warn, .filters, .print-row, .more, .skip, .legend { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { box-shadow: none; break-inside: avoid; border-color: #999; }
  .card details { display: block; }
  .actions a { border: none; padding: 0; min-height: 0; background: none; color: #000; }
  .actions a.web, .actions a.map { display: none; }
}
.card [dir="ltr"] { text-align: start; }

/* Dark mode header: a deep tint with the palette color as the wordmark. */
@media (prefers-color-scheme: dark) {
  .top { background: var(--brand-soft); color: var(--ink); }
  .brand-mark { color: var(--brand); }
}