/* ===========================================================================
   hebcal.co.il — shared stylesheet for the hub family
   Pages: /index.html, /blog/index.html, /synagogues.html, /candle-wall.html

   This file is the SINGLE SOURCE OF TRUTH for the hub design system:
   brand tokens (:root), the hc-* component vocabulary, the HE/EN bilingual
   rules, the accessibility menu, dark mode and reduced-motion blocks.
   Edit here, not in the pages.

   NOT used by /today/ and /zohar/. Those are a separate, darker, serif-based
   design that redefines --gold and --rule to different values; linking this
   file into them would silently break their palette. See WEBSITE_HANDOFF.md.

   Cache-busted via the ?v= query on the <link> tags. Bump the date in all
   four pages when you change this file, then purge the Cloudflare cache.
   =========================================================================== */

/* ───────────────────────────────────────────────
   Hebcal — Official site (hebcal.co.il)
   Shares brand tokens with lib.hebcal.co.il + docs.hebcal.co.il/brand.html
   ─────────────────────────────────────────────── */

/* BRAND TOKENS — the one source of truth for the whole property.
   Mirrored verbatim into today/today.html and zohar/zohar.html, which keep
   their CSS inline so they still render if the stylesheet fails in the app's
   WebView. tools/verify-tokens.mjs fails the build if the three drift apart.

   Values follow docs.hebcal.co.il/brand.html, with one deliberate deviation
   noted on --gold-deep below. */
:root {
  --navy: #1a2744;
  --navy-deep: #111b35;
  --navy-light: #243358;   /* brand: elevated surfaces, hover states */
  --gold: #c9a84c;

  /* Brand specifies --gold-deep #a08232 and calls it "WCAG AA". It is not:
     3.38:1 on cream, and this token is used almost entirely for SMALL text
     (0.70–0.92rem — brand mark, eyebrows, TOC labels, footer, a11y menu), so
     it needs 4.5:1. The previous site value #b08f3e was worse still at 2.83,
     failing even the 3.0 large-text floor. #836d31 is the brand gold at its
     exact hue (44.2°) and saturation, darkened until it passes: 4.62 on cream,
     5.00 on white. It flips in dark mode below — a gold dark enough to read on
     cream cannot also read on navy. */
  --gold-deep: #836d31;
  --gold-light: #e8c97a;

  --cream: #f7f6f0;
  --cream-deep: #ede9d8;
  --white: #ffffff;
  --soft: #5b6a8b;         /* brand "muted" — body text in light mode */
  --soft-light: #8b97b3;   /* brand "soft" — meta. NB 2.70:1 on cream; fine for
                              decorative/meta, must not carry essential text. */
  --rule: rgba(26, 39, 68, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --success: #2e8056;      /* deliberately not brand #25d366, which is 1.9:1 on
                              cream; this is the AA-safe equivalent. */
  --success-bg: rgba(46, 128, 86, 0.1);

  /* Serif reserved for scripture: the Zohar's Aramaic and פירוש הסולם. Not for
     UI, headings or navigation — those are Heebo/Inter per brand. */
  --serif-sacred: "Frank Ruhl Libre", "David Libre", "Noto Serif Hebrew", serif;

  --a11y-font-scale: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: calc(17px * var(--a11y-font-scale, 1));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
}
html { scroll-behavior: smooth; }
html[data-lang="he"] body {
  font-family: "Heebo", system-ui, sans-serif;
}

/* ─── Lang visibility ─── */
html[data-lang="he"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="he"] { display: none; }

/* ─── Layout ─── */
.hc-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 16px 64px;
  position: relative;
}
@media (min-width: 720px) {
  .hc-page { padding: 56px 40px 96px; }
}

/* ─── Top bar (language toggle) ─── */
/* ── Site header ───────────────────────────────────────────────────────────
   Until now this was a brand label and a language toggle, and the brand was a
   <div>, so there was no way to reach /today/, /zohar/, /blog/ or the
   directory from the top of any page — and no way home. The only site-wide
   links were in the footer. This is the primary navigation for the whole
   property; the same four destinations appear in today/, zohar/ and the
   legacy posts so the site navigates the same way everywhere.
   ───────────────────────────────────────────────────────────────────────── */
.hc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 12px;
  flex-wrap: wrap;
}
.hc-topbar-end { display: flex; align-items: center; gap: 10px; flex: none; }

/* Nav. On narrow screens it drops to its own full-width row below the brand
   and scrolls horizontally rather than collapsing into a hamburger — four
   items do not justify hiding the site's only navigation behind a tap. */
.hc-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  order: 3;
  flex: 1 1 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hc-nav::-webkit-scrollbar { display: none; }
.hc-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--soft);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.hc-nav a:hover { color: var(--navy); background: rgba(26,39,68,0.05); }
.hc-nav a[aria-current="page"] { color: var(--navy); background: rgba(201,168,76,0.16); }
.hc-nav a[aria-current="page"]::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* On a phone the four Hebrew labels need ~430px in one row, which a 375px
   screen cannot give. Shrinking them to fit drops the tap target to 33px —
   under the 44px minimum — and a horizontal scroll hides destinations behind a
   gesture nobody is told about. A 2×2 grid keeps the full labels, keeps the
   tap targets, and shows all four at once. */
@media (max-width: 600px) {
  .hc-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    overflow-x: visible;
  }
  .hc-nav a {
    justify-content: center;
    text-align: center;
    font-size: 0.78rem;
    padding: 11px 8px;
    background: rgba(26,39,68,0.035);
    white-space: normal;
  }
  /* With five destinations the last one is orphaned in a 2-up grid; let it
     span the full width rather than sit alone in a half-width cell. Works for
     any odd count, so adding a sixth needs no change here. */
  .hc-nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-color-scheme: dark) {
  @media (max-width: 600px) {
    .hc-nav a { background: rgba(255,255,255,0.05); }
  }
}

/* The nav keeps its own full-width row at every size. It used to go inline
   beside the brand above 860px, but with five destinations it needs 548px and
   the brand + language toggle need another 273 — 821px inside an 880px
   container, so it could not fit at ANY width and the toggle silently wrapped
   to a second row on its own. Row 1 is brand + language, row 2 is navigation:
   predictable, and it survives a sixth destination. */

@media (prefers-color-scheme: dark) {
  .hc-nav { border-top-color: rgba(255,255,255,0.1); }
  .hc-nav a { color: rgba(255,255,255,0.62); }
  .hc-nav a:hover { color: var(--white); background: rgba(255,255,255,0.07); }
  .hc-nav a[aria-current="page"] { color: var(--white); background: rgba(201,168,76,0.2); }
}
/* Now an <a> to "/" — it was a <div>, so there was no way home from any page. */
.hc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-deep);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  flex: none;
}
a.hc-brand:hover { color: var(--navy); }
@media (prefers-color-scheme: dark) { a.hc-brand:hover { color: var(--white); } }
.hc-brand::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.18);
}
.hc-lang-toggle {
  display: inline-flex;
  background: rgba(26,39,68,0.04);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.hc-lang-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--soft);
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.15s ease;
}
.hc-lang-toggle button[aria-pressed="true"] {
  background: var(--gold);
  color: var(--navy-deep);
}
.hc-lang-toggle button:hover:not([aria-pressed="true"]) {
  color: var(--navy);
}

/* ─── Hero ─── */
.hc-hero {
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
  text-align: center;
}
@media (min-width: 720px) {
  .hc-hero { padding: 48px 0 48px; margin-bottom: 40px; }
}
.hc-hero-logo {
  display: block;
  margin: 0 auto 22px;
  width: 130px;
  height: 130px;
  max-width: 60%;
  object-fit: contain;
  filter: invert(1);
}
@media (min-width: 720px) {
  .hc-hero-logo { width: 170px; height: 170px; margin-bottom: 30px; }
}
.hc-eyebrow {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.08);
  border-radius: 999px;
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 22px;
  line-height: 1.4;
}
html[data-lang="he"] .hc-eyebrow {
  font-family: "Heebo", sans-serif;
  letter-spacing: 0.5px;
}
.hc-title {
  font-size: clamp(2rem, 8vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 auto 14px;
  color: var(--navy);
  max-width: 22ch;
}
.hc-subtitle {
  font-size: 1rem;
  color: var(--soft);
  max-width: 56ch;
  margin: 0 auto 20px;
  line-height: 1.55;
}
@media (min-width: 720px) {
  .hc-subtitle { font-size: 1.15rem; margin-bottom: 28px; }
}
.hc-hero-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  font-size: 0.85rem;
}
@media (min-width: 720px) {
  .hc-hero-meta { gap: 16px; font-size: 0.92rem; }
}
.hc-hero-meta strong {
  color: var(--navy);
  font-weight: 700;
}
.hc-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--soft); display: inline-block; }

/* ─── App store CTAs ─── */
.hc-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .hc-hero-cta { margin-top: 36px; gap: 14px; }
}
.hc-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform 0.15s ease, opacity 0.15s ease;
  direction: ltr;
  min-width: 0;
  flex: 0 1 auto;
}
@media (min-width: 480px) {
  .hc-store-btn { min-width: 170px; }
}
.hc-store-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.hc-store-btn-icon { flex-shrink: 0; }
.hc-store-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  text-align: left;
}
.hc-store-btn-text small {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0.88;
  margin-bottom: 1px;
  text-transform: uppercase;
}
.hc-store-btn-text strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* ─── Table of contents ─── */
.hc-toc {
  margin-bottom: 32px;
  padding: 14px 18px 16px;
  background: rgba(26, 39, 68, 0.04);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
@media (min-width: 720px) {
  .hc-toc { margin-bottom: 48px; padding: 18px 22px 20px; }
}
.hc-toc-label {
  color: var(--gold-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
html[data-lang="he"] .hc-toc-label {
  font-family: "Heebo", sans-serif;
  letter-spacing: 0.5px;
}
.hc-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-toc-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.hc-toc-list a:hover { border-bottom-color: var(--gold); }
.hc-toc-count {
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 600;
}
.hc-section[id] { scroll-margin-top: 16px; }

/* ─── Section ─── */
.hc-section { margin-bottom: 40px; }
@media (min-width: 720px) {
  .hc-section { margin-bottom: 56px; }
}
.hc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.hc-section h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 720px) {
  .hc-section h2 { font-size: 1.5rem; }
}
.hc-section-meta {
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 720px) {
  .hc-section-meta { font-size: 0.82rem; }
}
.hc-section-intro {
  color: var(--soft);
  font-size: 0.9rem;
  margin: -4px 0 20px;
  max-width: 64ch;
  line-height: 1.5;
}
@media (min-width: 720px) {
  .hc-section-intro { font-size: 0.96rem; margin-bottom: 24px; }
}

/* ─── Item grid ─── */
.hc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 560px) {
  .hc-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (min-width: 720px) {
  .hc-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ─── Article / link item ─── */
.hc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--navy);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  min-height: 56px;
}
a.hc-item {
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(26, 39, 68, 0.04);
}
a.hc-item::after {
  content: "›";
  color: var(--gold-deep);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  margin-inline-start: auto;
  opacity: 0.6;
  flex-shrink: 0;
  transform: translateY(-1px);
  direction: ltr;
}
html[dir="rtl"] a.hc-item::after { content: "‹"; }
a.hc-item:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.4);
}
a.hc-item:hover::after { opacity: 1; }
a.hc-item:active { transform: scale(0.98); }

.hc-item--soon {
  background: transparent;
  border: 1px solid transparent;
  color: var(--soft);
  cursor: default;
  box-shadow: none;
}
.hc-item--soon .hc-item-name { color: var(--soft); font-weight: 500; }
.hc-item--soon:hover { background: transparent; border-color: transparent; }

.hc-item-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.hc-item-name {
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  font-size: 0.98rem;
}
.hc-item-sub {
  font-size: 0.76rem;
  color: var(--soft);
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
html[data-lang="he"] .hc-item-sub { font-size: 0.8rem; }

/* ─── Pills ─── */
.hc-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-pill--soon {
  background: rgba(143,153,168,0.12);
  color: var(--soft);
  border: 1px solid rgba(143,153,168,0.2);
}
html[data-lang="he"] .hc-pill--soon { letter-spacing: 0; }
.hc-pill--new {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(46,128,86,0.25);
}

/* ═══════════════════════════════════════════════
   NEW COMPONENTS for the official site
   ═══════════════════════════════════════════════ */

/* ─── Subsection heading (tutorials inside Q&A) ─── */
.hc-subhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 12px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--gold);
}
.hc-subhead h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.3px;
  margin: 0;
}
.hc-subhead .hc-subhead-count {
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.hc-browse-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.hc-browse-all:hover { border-bottom-color: var(--gold); }
.hc-browse-all::after { content: "›"; font-size: 1.1rem; direction: ltr; }
html[dir="rtl"] .hc-browse-all::after { content: "‹"; }
@media (prefers-color-scheme: dark) {
  .hc-subhead h3 { color: rgba(255,255,255,0.9); }
  .hc-subhead .hc-subhead-count { color: rgba(255,255,255,0.5); }
  .hc-browse-all { color: var(--gold-light); }
}

/* ─── Feature cards (showcase: icon + name + description) ─── */
.hc-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) {
  .hc-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .hc-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.hc-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(26, 39, 68, 0.04);
  position: relative;
}
.hc-feature-badge {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  /* brand: gold gradient pairs with navy-dark text */
  color: var(--navy-deep); background: linear-gradient(180deg, var(--gold-light), var(--gold));
  padding: 3px 9px; border-radius: 999px; margin-bottom: 5px;
  box-shadow: 0 2px 6px rgba(201,168,76,0.35);
}
.hc-feature-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-deep);
  border: 1px solid rgba(201, 168, 76, 0.22);
}
.hc-feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hc-feature-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hc-feature-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.25;
}
.hc-feature-sub {
  font-size: 0.82rem;
  color: var(--soft);
  line-height: 1.45;
}
html[data-lang="he"] .hc-feature-sub { font-size: 0.86rem; }
a.hc-feature { text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
a.hc-feature:hover { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.4); transform: translateY(-1px); }
a.hc-feature:active { transform: scale(0.99); }
.hc-feature-guide { display: inline-block; margin-top: 5px; font-size: 0.78rem; font-weight: 700; color: var(--gold-deep); }
@media (prefers-color-scheme: dark) {
  .hc-feature-guide { color: var(--gold-light); }
  a.hc-feature:hover { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); }
}
.hc-more-note { margin-top: 18px; text-align: center; color: var(--soft); font-size: 0.92rem; line-height: 1.55; }
.hc-more-note strong { color: var(--navy); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .hc-more-note { color: rgba(255,255,255,0.6); }
  .hc-more-note strong { color: rgba(255,255,255,0.9); }
}

/* ─── FAQ accordion ─── */
.hc-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hc-faq-item {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(26, 39, 68, 0.04);
  overflow: hidden;
}
.hc-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.35;
}
.hc-faq-item summary::-webkit-details-marker { display: none; }
.hc-faq-item summary::after {
  content: "+";
  color: var(--gold-deep);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.hc-faq-item[open] summary::after { content: "\2212"; }
.hc-faq-item summary:hover { background: rgba(201, 168, 76, 0.06); }
.hc-faq-answer {
  padding: 0 16px 16px;
  color: var(--soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
html[data-lang="he"] .hc-faq-answer { font-size: 0.95rem; }
.hc-faq-answer ol, .hc-faq-answer ul {
  margin: 8px 0 0;
  padding-inline-start: 22px;
}
.hc-faq-answer li { margin-bottom: 5px; }
.hc-faq-answer strong { color: var(--navy); font-weight: 700; }

/* ─── Flagship CTA (Synagogues & Mikvas directory) ─── */
.hc-flagship {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
@media (min-width: 720px) {
  .hc-flagship { padding: 30px; }
}
.hc-flagship::before {
  content: "";
  position: absolute;
  inset-block-start: -40px;
  inset-inline-end: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hc-flagship-body { position: relative; z-index: 1; }
.hc-flagship h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--white);
}
@media (min-width: 720px) {
  .hc-flagship h3 { font-size: 1.35rem; }
}
.hc-flagship p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 60ch;
}
.hc-flagship-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.hc-flagship-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(201,168,76,0.16);
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 700;
}
.hc-flagship-step span:first-child {
  opacity: 0.7;
  font-size: 0.72rem;
}
.hc-flagship-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 11px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
  transition: transform 0.15s ease, background 0.15s ease;
}
.hc-flagship-cta:hover { transform: translateY(-1px); background: var(--gold-light); }
.hc-flagship-cta::after { content: "›"; font-size: 1.2rem; direction: ltr; }
html[dir="rtl"] .hc-flagship-cta::after { content: "‹"; }

/* ─── Footer ─── */
.hc-footer {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  color: var(--soft);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hc-footer-brand {
  font-weight: 800;
  color: var(--gold-deep);
  letter-spacing: 1px;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.hc-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.hc-footer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.hc-footer-link:hover { color: var(--gold-deep); }

/* ─── Accessibility (IS 5568 / WCAG 2.0 AA) ─── */
.hc-skip-link {
  position: absolute;
  inset-block-start: -200px;
  inset-inline-start: 8px;
  background: var(--navy-deep);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 9999;
  transition: inset-block-start 0.15s ease;
}
.hc-skip-link:focus,
.hc-skip-link:focus-visible {
  inset-block-start: 8px;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
*:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Floating accessibility toggle */
.hc-a11y-toggle {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--navy-deep);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 998;
  transition: transform 0.15s ease, background 0.15s ease;
}
.hc-a11y-toggle:hover { background: var(--navy); transform: scale(1.05); }
.hc-a11y-toggle svg { width: 26px; height: 26px; }

.hc-a11y-menu {
  position: fixed;
  inset-block-end: 76px;
  inset-inline-start: 16px;
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: 16px;
  z-index: 999;
}
.hc-a11y-menu[hidden] { display: none; }
.hc-a11y-menu-title {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--gold-deep);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.hc-a11y-actions { display: flex; flex-direction: column; gap: 6px; }
.hc-a11y-row { display: flex; gap: 6px; align-items: center; }
.hc-a11y-row > span { font-size: 0.82rem; font-weight: 600; flex: 1; }
.hc-a11y-btn {
  appearance: none;
  background: var(--cream);
  border: 1px solid var(--rule);
  color: var(--navy);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: center;
}
.hc-a11y-btn:hover { background: rgba(201, 168, 76, 0.1); border-color: rgba(201, 168, 76, 0.4); }
.hc-a11y-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold-deep); color: var(--navy-deep); }
.hc-a11y-btn--small { padding: 6px 10px; min-width: 36px; }
.hc-a11y-menu-link {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--gold-deep);
  text-decoration: underline;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* ─── Dark mode ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --rule: rgba(255,255,255,0.1);
    /* --gold-deep means "the gold that reads against the page", so it flips.
       The light value (#836d31) is only 3.41:1 on navy-deep and would fail the
       small-text usages that are NOT individually re-pointed to --gold-light
       below (.hc-brand, .hc-eyebrow, .hc-toc-label, .hc-footer-brand,
       .hc-a11y-menu-title, .hc-faq summary::after). At #e8c97a it is 10.61:1. */
    --gold-deep: #e8c97a;
  }
  html, body { background: var(--navy-deep); color: var(--white); }
  .hc-title { color: var(--white); }
  .hc-section h2 { color: var(--white); }
  .hc-subtitle { color: rgba(255,255,255,0.6); }
  .hc-hero-meta { color: rgba(255,255,255,0.72); }
  .hc-hero-meta strong { color: rgba(255,255,255,0.92); }
  .hc-section-meta { color: rgba(255,255,255,0.55); }
  .hc-section-intro { color: rgba(255,255,255,0.6); }
  .hc-item { color: rgba(255,255,255,0.85); }
  .hc-item-name { color: rgba(255,255,255,0.9); }
  .hc-item-sub { color: rgba(255,255,255,0.5); }
  a.hc-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); box-shadow: none; }
  a.hc-item::after { color: var(--gold-light); }
  a.hc-item:hover { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); }
  .hc-item--soon { background: transparent; border-color: transparent; color: rgba(255,255,255,0.4); }
  .hc-item--soon .hc-item-name { color: rgba(255,255,255,0.45); }
  .hc-pill--soon { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.1); }
  .hc-feature { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); box-shadow: none; }
  .hc-feature-name { color: rgba(255,255,255,0.9); }
  .hc-feature-sub { color: rgba(255,255,255,0.55); }
  .hc-feature-icon { background: rgba(201,168,76,0.16); color: var(--gold-light); border-color: rgba(201,168,76,0.3); }
  .hc-faq-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); box-shadow: none; }
  .hc-faq-item summary { color: rgba(255,255,255,0.9); }
  .hc-faq-item summary:hover { background: rgba(201,168,76,0.1); }
  .hc-faq-answer { color: rgba(255,255,255,0.6); }
  .hc-faq-answer strong { color: rgba(255,255,255,0.9); }
  .hc-lang-toggle { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
  .hc-lang-toggle button { color: rgba(255,255,255,0.5); }
  .hc-lang-toggle button:hover:not([aria-pressed="true"]) { color: rgba(255,255,255,0.85); }
  .hc-footer { color: rgba(255,255,255,0.5); }
  .hc-toc { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
  .hc-toc-list a { color: rgba(255,255,255,0.88); }
  .hc-toc-list a:hover { color: var(--white); }
  .hc-toc-count { color: rgba(255,255,255,0.5); }
  .hc-hero-logo { filter: none; }
  .hc-eyebrow { background: rgba(201, 168, 76, 0.12); border-color: rgba(201, 168, 76, 0.35); }
  .hc-a11y-menu { background: var(--navy); color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.1); }
  .hc-a11y-btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
  .hc-a11y-btn:hover { background: rgba(201, 168, 76, 0.15); border-color: rgba(201, 168, 76, 0.4); }
  .hc-a11y-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
  .hc-a11y-menu-link { color: var(--gold-light); }
}

/* ─── A11y mode overrides (must come last) ─── */
html.a11y-contrast {
  --navy: #000000;
  --navy-deep: #000000;
  --cream: #ffffff;
  --cream-deep: #ffffff;
  --soft: #1f1f1f;
  --soft-light: #2a2a2a;
  --rule: rgba(0, 0, 0, 0.7);
  --gold-deep: #4a3700;
}
html.a11y-contrast body { background: #ffffff !important; color: #000000 !important; }
html.a11y-contrast .hc-item-name,
html.a11y-contrast .hc-feature-name,
html.a11y-contrast .hc-faq-item summary,
html.a11y-contrast .hc-item-sub,
html.a11y-contrast .hc-feature-sub,
html.a11y-contrast .hc-faq-answer,
html.a11y-contrast .hc-subtitle,
html.a11y-contrast .hc-section-intro,
html.a11y-contrast .hc-section-meta,
html.a11y-contrast .hc-section h2,
html.a11y-contrast .hc-footer,
html.a11y-contrast .hc-hero-meta,
html.a11y-contrast .hc-toc-list a,
html.a11y-contrast .hc-toc-count { color: #000000 !important; }
html.a11y-contrast a.hc-item,
html.a11y-contrast .hc-feature,
html.a11y-contrast .hc-faq-item { background: #ffffff !important; border-color: #000000 !important; }
html.a11y-contrast .hc-item--soon,
html.a11y-contrast .hc-item--soon .hc-item-name { color: #444444 !important; }

html.a11y-highlight-links a:not(.hc-skip-link):not(.hc-store-btn):not(.hc-a11y-toggle):not(.hc-a11y-menu-link):not(.hc-flagship-cta) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 1px dotted currentColor;
  outline-offset: 2px;
}

html.a11y-no-motion,
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ─── Consent banner ─── */
.hc-consent {
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--navy-deep);
  color: var(--white);
  padding: 14px 20px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  border-top: 2px solid var(--gold);
  font-size: 0.9rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}
.hc-consent[hidden] { display: none; }
.hc-consent-text { flex: 1 1 300px; min-width: 0; line-height: 1.5; color: rgba(255,255,255,0.92); }
.hc-consent-text a { color: var(--gold-light); text-decoration: underline; }
.hc-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.hc-consent-btn {
  appearance: none;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--white);
  padding: 8px 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.hc-consent-btn:hover { background: rgba(201, 168, 76, 0.15); }
.hc-consent-btn--primary { background: var(--gold); color: var(--navy-deep); }
.hc-consent-btn--primary:hover { background: var(--gold-light); }
html.hc-consent-visible .hc-a11y-toggle { inset-block-end: calc(80px + 16px); }