/* ============================================================
   TT Siddur — the Torah Tech look for the older siddur pages
   (Bentching, Al Hamichya, Selichot).

   Those pages were built on the gold "gang" theme. Their own
   stylesheets (siddur.css, bentch.css) are written entirely in
   colour and font variables, so this sheet, loaded LAST, gives
   those variables the program's blue palette and restyles the
   two branded pieces, the top bar and the hero, to match the
   Shacharit page. Same tokens as tools/siddur/shacharit/src/one.css.
   The variable names still say "gold": they are the accent slots.
   ============================================================ */

:root {
  --bg:        #ffffff;
  --bg-grain:  #f7f9fc;
  --surface:   #ffffff;
  --surface-2: #f7f9fc;
  --ink:       #26303f;
  --ink-soft:  #4a5565;
  --muted:     #636B77;
  --line:      #e3eaf5;
  --line-soft: #eef3fa;
  --gold:      #1C47A5;   /* solid accent: white text on it passes AA */
  --gold-deep: #2F62C0;   /* accent used as small text on white (5.8:1) */
  --gold-soft: #cfdcf0;
  --accent:      #1C47A5;
  --accent-deep: #123071;
  --accent-soft: #9cc0f5;
  --navy:      #1C47A5;
  --rose:      #5E90E3;
  --cyan:      #00C8DC;
  --ice:       #7BE0EC;
  --grad-header: linear-gradient(135deg, #3B69C1, #1C47A5);
  --grad-hero: linear-gradient(135deg, #091836 0%, #123071 45%, #1C47A5 100%);
  --shadow:    0 6px 24px rgba(28,71,165,.10);
  --shadow-lg: 0 24px 60px -24px rgba(12,35,80,.32);
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-hebrew: 'Frank Ruhl Libre', 'Times New Roman', serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:        #0b1322;
  --bg-grain:  #121d33;
  --surface:   #141f38;
  --surface-2: #1a2744;
  --ink:       #e8eefa;
  --ink-soft:  #c3cde0;
  --muted:     #94a1b8;
  --line:      #22304f;
  --line-soft: #1a2744;
  --gold:      #3B69C1;   /* still carries white text (5.3:1) */
  --gold-deep: #9cc0f5;
  --gold-soft: #31436b;
  --accent:      #3B69C1;
  --accent-deep: #7BB3F0;
  --accent-soft: #31436b;
  --navy:      #9cc0f5;
  --rose:      #7BB3F0;
  --grad-header: linear-gradient(135deg, #1C47A5, #0C2350);
  --shadow:    0 6px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ── Base (these pages no longer need gang.css for it) ───────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; transition: background .3s;
}
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
::selection { background: color-mix(in srgb, var(--rose) 30%, transparent); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ── Top bar: the site header gradient ───────────────────────── */
.sd-bar {
  background: var(--grad-header); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0; box-shadow: 0 4px 18px rgba(12,35,80,.18);
  padding-top: max(10px, env(safe-area-inset-top));
}
.sd-bar :focus-visible { outline-color: #fff; }
.sd-bar .sd-brand { color: #fff; transition: opacity .15s; }
.sd-bar .sd-brand:hover { opacity: .85; }
.sd-bar .sd-brand > span:last-child { color: #fff; }
.sd-bar .sd-kicker { color: #fff; font-size: .58rem; }
.sd-bar .sd-icon {
  border-radius: 999px; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.14); color: #fff;
  min-width: 40px; min-height: 40px; font-family: var(--font-display);
  transition: background .15s, border-color .15s, transform .1s;
}
.sd-bar .sd-icon:hover { background: rgba(255,255,255,.26); border-color: #fff; transform: none; }
.sd-bar .sd-icon:active { transform: scale(.96); }
.sd-bar .sd-toggle.on { background: #fff; border-color: #fff; color: #1C47A5; }
.sd-bar .bn-seg { border-radius: 999px; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.14); padding: 3px; }
.sd-bar .bn-seg button { border-radius: 999px; color: rgba(255,255,255,.9); font-family: var(--font-display); padding: 8px 11px; }
.sd-bar .bn-seg button:hover { color: #fff; background: rgba(255,255,255,.16); }
.sd-bar .bn-seg button.on { background: #fff; color: #1C47A5; }

/* A phone bar has room for the nusach switch and two buttons: printing gives way. */
@media (max-width: 520px) {
  .sd-bar { gap: 5px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .sd-bar #bt-print { display: none; }
  .sd-bar .bn-seg { flex: none; }
  .sd-bar .bn-seg button { font-size: .72rem; padding: 8px 8px; }
  .sd-bar .sd-icon { min-width: 38px; min-height: 38px; padding: 6px 8px; }
  .sd-bar .sd-brand { min-width: 0; }
  .sd-bar .sd-brand > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 359px) { .sd-bar .sd-kicker { display: none; } }

/* ── Hero: the home page hero, edge to edge ──────────────────── */
.sd-page { padding-top: 0; }
.sd-hero {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  margin: 0 calc(50% - 50vw) 22px; padding: 30px 20px 34px;
  background: var(--grad-hero);
}
.sd-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 18% 22%, rgba(94,144,227,.34), transparent 46%), radial-gradient(circle at 84% 74%, rgba(0,200,220,.20), transparent 48%);
}
.sd-hero > * { position: relative; }
.sd-hero .sd-kicker { display: inline-flex; align-items: center; gap: 12px; font: 700 .7rem/1.4 var(--font-body); letter-spacing: .2em; color: var(--ice); }
.sd-hero .sd-kicker::before, .sd-hero .sd-kicker::after { content: ''; width: 26px; height: 1px; background: rgba(123,224,236,.5); }
.sd-hero .sd-title { color: #fff; font-weight: 700; font-size: clamp(2.5rem, 11vw, 3.9rem); line-height: 1.2; margin: 8px 0 2px; direction: rtl; }
.sd-hero .sd-subtitle { margin: 10px auto 0; max-width: 36ch; color: rgba(255,255,255,.84); font-size: .92rem; line-height: 1.5; }
.sd-hero .sd-rule { display: none; }
@media (max-width: 520px) { .sd-page { padding-top: 0; } }

/* ── Accents ─────────────────────────────────────────────────── */
.sd-piece-he, .sd-daynav-he, .sd-day-he { color: var(--navy); }
.sd-piece-en, .sd-drawer-label, .sd-toc-head { font-family: var(--font-body); }
.sd-icon, .sd-jazz-btn, .sd-rev-btn, .sd-post, .bn-pick, .bn-opt, .bn-chip, .bn-crosslink, .bn-cond-toggle, .bn-seg button { font-family: var(--font-display); }
.bn-banner { border-radius: 16px; box-shadow: var(--shadow); }
.bn-cond.on { border-inline-start-color: var(--cyan); }
.sd-rev { border-left-color: var(--cyan); }
.bn-crosslink { border-radius: 16px; box-shadow: var(--shadow); }
.bn-crosslink:hover { box-shadow: 0 18px 40px rgba(28,71,165,.14); }
.sd-day-card:hover { box-shadow: 0 18px 40px rgba(28,71,165,.14); }
.sd-drawer, .bn-scrim { background: rgba(9,24,54,.5); }
.sd-toc { box-shadow: 0 18px 50px rgba(12,35,80,.22); }

/* ── Selichot's sign-in card, in the same colours ────────────── */
.gate::before {
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(94,144,227,.20), transparent 55%),
    radial-gradient(900px 600px at 90% 100%, rgba(0,200,220,.12), transparent 55%);
}
.ss-wordmark { font-family: var(--font-display); color: var(--navy); }
.ss-kicker { color: var(--gold-deep); }

/* ── Print: ink on paper, no gradient blocks ─────────────────── */
@media print {
  body { background: #fff; }
  .sd-hero { margin: 0 0 12pt; padding: 0; background: none; color: #000; }
  .sd-hero::before { display: none; }
  .sd-hero .sd-kicker, .sd-hero .sd-title, .sd-hero .sd-subtitle { color: #000; }
  .sd-hero .sd-kicker::before, .sd-hero .sd-kicker::after { display: none; }
  .sd-piece-he { color: #000; }
}