/* Colors: navy/blue/teal from the current app icon (icon.svg); label colors from Ezrahim-App shared/design/tokens.json. */
:root {
  color-scheme: light dark;
  --bg: #f6f9fc;
  --surface: #ffffff;
  --text: #10233a;
  --muted: #44566b;
  --accent: #063c7a;
  --border: #d5dfea;
  --notice-bg: #fff4e0;
  --notice-text: #5c3d12;
  --chip-unverified-bg: #f6e8d2; --chip-unverified: #80551e;
  --chip-staff-bg: #ddefe4;      --chip-staff: #1e5039;
  --chip-official-bg: #dce9f7;   --chip-official: #063c7a;
  --chip-municipal-bg: #d6f0ef;  --chip-municipal: #0b5e61;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1622;
    --surface: #12202f;
    --text: #e4ecf5;
    --muted: #a9b8c8;
    --accent: #9cc8ef;
    --border: #24364a;
    --notice-bg: #33260f;
    --notice-text: #f6e2bd;
    --chip-unverified-bg: #4a3415; --chip-unverified: #f6e8d2;
    --chip-staff-bg: #1f4434;      --chip-staff: #cbebd8;
    --chip-official-bg: #1b3a5e;   --chip-official: #d6e6f8;
    --chip-municipal-bg: #134c4e;  --chip-municipal: #cfefee;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif;
}

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  background: var(--surface);
  color: var(--accent);
  padding: .5rem 1rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  z-index: 1;
}
.skip:focus { top: 1rem; }

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-weight: 700;
  font-size: 1.25rem;
}

.lang ul {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lang a {
  display: inline-block;
  min-height: 44px;
  padding: .5rem .75rem;
  border-radius: 8px;
  text-decoration: none;
}
.lang a:hover { text-decoration: underline; }
.lang a[aria-current="page"] {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600;
}

.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2rem;
  align-items: center;
  padding-block: 2.5rem 2rem;
}
.hero img { border-radius: 22%; box-shadow: 0 6px 24px rgb(0 0 0 / .12); }
.hero h1 { margin: 0 0 .25rem; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; color: var(--accent); }
.lead { margin: 0 0 1rem; font-size: 1.2rem; max-width: 40rem; }

.status {
  display: inline-block;
  margin: 0;
  padding: .375rem .875rem;
  border-radius: 12px;
  background: var(--notice-bg);
  color: var(--notice-text);
  font-weight: 600;
  font-size: .95rem;
}

section { padding-block: 1.5rem; }
h2 { font-size: 1.5rem; margin: 0 0 1rem; }
h3 { font-size: 1.125rem; margin: 0 0 .375rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cards li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
}
.cards p { margin: 0; color: var(--muted); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: .3rem .75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
}
.chip-unverified { background: var(--chip-unverified-bg); color: var(--chip-unverified); }
.chip-staff      { background: var(--chip-staff-bg);      color: var(--chip-staff); }
.chip-official   { background: var(--chip-official-bg);   color: var(--chip-official); }
.chip-municipal  { background: var(--chip-municipal-bg);  color: var(--chip-municipal); }

.list { margin: 0; padding-inline-start: 1.25rem; }
.list li + li { margin-top: .5rem; }

.emergency {
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
  font-weight: 600;
}

footer {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .95rem;
}
footer .wrap { padding-block: 1.5rem; }
footer ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
footer p { margin: 0; }

@media (max-width: 34rem) {
  .hero { grid-template-columns: 1fr; padding-block: 1.5rem; }
  .hero img { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}