/* ============================================================
   The Seven Noahide Laws — torahtech.co/7
   Program theme. Loads AFTER shared.css and tt-brand.css,
   which supply the Torah Tech tokens, chrome and primitives.
   ============================================================ */

:root {
  /* Semantic aliases onto the Torah Tech brand tokens */
  --ink:          var(--tt-ink);
  --ink-soft:     var(--tt-ink-soft);
  --muted:        var(--tt-ink-muted);
  --line:         var(--tt-line);
  --line-soft:    #f1f5fa;
  --surface:      var(--tt-surface);
  --surface-2:    var(--tt-surface-2);
  --bg-grain:     var(--tt-surface-2);
  --accent:       var(--tt-blue);
  --accent-deep:  var(--tt-navy);
  --accent-soft:  #cfdcf0;
  --good:         #16a34a;
  --font-display: var(--tt-font-display);
  --font-body:    var(--tt-font-body);
  --font-hebrew:  var(--tt-font-hebrew);
  --radius:       var(--tt-radius);
  --radius-sm:    var(--tt-radius-sm);
  --shadow:       var(--tt-shadow-card);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

/* ── Chrome ──────────────────────────────────────────────────── */
.sv-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 10px clamp(12px, 4vw, 28px);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.sv-home { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
.sv-kicker { font: 700 .62rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); }
.sv-home > span:last-child { font: 600 .95rem/1.2 var(--font-display); color: var(--ink); }
.sv-spacer { flex: 1; }
.sv-barlink { font: 600 .78rem/1 var(--font-body); color: var(--accent-deep); text-decoration: none; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; transition: background .15s, transform .1s, border-color .15s; }
.sv-barlink:hover { background: var(--surface-2); transform: translateY(-1px); border-color: var(--accent-soft); }

/* ── Page ────────────────────────────────────────────────────── */
.sv-wrap { max-width: 820px; margin: 0 auto; padding: 34px clamp(16px, 5vw, 28px) 20px; }

/* ── The seven ───────────────────────────────────────────────── */
.sv-list { display: grid; gap: 12px; }
.sv-law {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.sv-law:hover { border-color: var(--accent-soft); box-shadow: var(--shadow); }
.sv-law > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px;
  padding: 16px clamp(14px, 3vw, 20px);
}
.sv-law > summary::-webkit-details-marker { display: none; }
.sv-law > summary::after {
  content: '+'; flex: none; color: var(--accent-deep); font-size: 1.3rem; line-height: 1;
  transition: transform .18s;
}
.sv-law[open] > summary::after { content: '\2013'; }
.sv-law-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .92rem/1 var(--font-display); color: var(--accent-deep);
  border: 1px solid var(--accent-soft); background: var(--bg-grain);
}
.sv-law[open] .sv-law-num { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.sv-law-head { flex: 1; min-width: 0; }
.sv-law-he { display: block; font-family: var(--font-hebrew); direction: rtl; text-align: right; font-size: 1.35rem; color: var(--ink); line-height: 1.45; }
.sv-law-en { display: block; font: 600 .95rem/1.4 var(--font-body); color: var(--ink); margin-top: 2px; }
.sv-law-tr { display: block; font-size: .76rem; color: var(--muted); font-style: italic; margin-top: 2px; }
.sv-tag {
  display: inline-block; font: 700 .54rem/1 var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 7px; border-radius: 999px; margin-top: 6px;
}
.sv-tag.neg { background: rgba(28,71,165,.10); color: var(--accent-deep); }
.sv-tag.pos { background: rgba(22,163,74,.13); color: var(--good); }
.sv-law-body { padding: 0 clamp(14px, 3vw, 20px) 18px; border-top: 1px solid var(--line-soft); margin-top: 2px; padding-top: 15px; }
.sv-law-summary { font-size: .95rem; line-height: 1.6; color: var(--ink); margin: 0 0 12px; font-weight: 500; }
.sv-law-detail { font-size: .9rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.sv-law-src { font-size: .78rem; color: var(--muted); border-left: 3px solid var(--accent-soft); padding-left: 12px; line-height: 1.6; }
.sv-law-src .sv-he-inline { font-family: var(--font-hebrew); font-size: 1.15em; direction: rtl; unicode-bidi: isolate; }

/* ── The derivation ──────────────────────────────────────────── */
.sv-drasha { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(18px, 4vw, 30px); }
.sv-verse {
  direction: rtl; text-align: center; font-family: var(--font-hebrew);
  font-size: clamp(1.5rem, 4.6vw, 2rem); line-height: 2.1; color: var(--ink);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
}
.sv-part {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: inherit; padding: 2px 8px; border-radius: 8px;
  border-bottom: 2px solid var(--accent-soft);
  transition: background .15s, color .15s, border-color .15s;
}
.sv-part:hover { background: rgba(94,144,227,.16); }
.sv-part.on { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
.sv-part:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.sv-drasha-out {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  min-height: 132px;
}
.sv-out-gloss { font-size: .8rem; color: var(--muted); font-style: italic; }
.sv-out-arrow { color: var(--accent-deep); font-size: 1.1rem; margin: 8px 0; }
.sv-out-law { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sv-out-law-he { font-family: var(--font-hebrew); direction: rtl; font-size: 1.5rem; color: var(--ink); }
.sv-out-law-en { font: 600 .95rem/1.4 var(--font-body); color: var(--accent-deep); }
.sv-out-proof { font-size: .87rem; line-height: 1.65; color: var(--ink-soft); margin-top: 10px; }
.sv-hint { text-align: center; color: var(--muted); font-size: .84rem; }

/* ── Generic sections ────────────────────────────────────────── */
.sv-section { margin: 52px 0 0; }
.sv-section > h2 { font: 700 clamp(1.35rem, 4vw, 1.75rem)/1.22 var(--font-display); color: var(--accent-deep); letter-spacing: -.5px; margin: 0 0 12px; text-align: center; }
.sv-section > h2::after { content: ''; display: block; width: 60px; height: 2px; background: var(--accent); margin: 14px auto 0; }
.sv-section-sub { text-align: center; color: var(--muted); font-size: .92rem; max-width: 56ch; margin: 14px auto 24px; line-height: 1.6; }
.sv-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: clamp(16px, 3.5vw, 26px); }
.sv-prose { font-size: .94rem; line-height: 1.75; color: var(--ink-soft); }
.sv-prose p { margin: 0 0 14px; }
.sv-prose p:last-child { margin: 0; }
.sv-prose strong { color: var(--accent-deep); font-weight: 700; }
.sv-he-inline { font-family: var(--font-hebrew); font-size: 1.15em; direction: rtl; unicode-bidi: isolate; }

/* source quote block */
.sv-quote { border-radius: var(--radius); background: var(--tt-grad-deep); padding: clamp(18px, 3.8vw, 28px); box-shadow: 0 14px 36px rgba(12,35,80,.22); }
.sv-quote-he { font-family: var(--font-hebrew); direction: rtl; text-align: right; font-size: 1.35rem; line-height: 1.95; color: #fff; }
.sv-quote-en { font-size: .92rem; line-height: 1.7; color: rgba(255,255,255,.82); margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.sv-quote-cite { font: 700 .58rem/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--tt-ice); margin-top: 14px; }

/* disputed list */
.sv-disputed { display: grid; gap: 10px; }
.sv-disputed-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.sv-disputed-who { font: 600 .86rem/1.4 var(--font-body); color: var(--ink); flex: none; }
.sv-disputed-he { font-family: var(--font-hebrew); direction: rtl; font-size: 1.15rem; color: var(--accent-deep); flex: none; }
.sv-disputed-add { font-size: .86rem; color: var(--ink-soft); line-height: 1.55; flex: 1; min-width: 160px; }

/* FAQ */
.sv-faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.sv-faq summary {
  cursor: pointer; list-style: none; padding: 14px 16px;
  font: 600 .93rem/1.45 var(--font-body); color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background .15s;
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary:hover { background: var(--surface-2); }
.sv-faq summary::after { content: '+'; flex: none; color: var(--accent-deep); font-size: 1.2rem; line-height: 1; }
.sv-faq details[open] summary::after { content: '\2013'; }
.sv-faq-body { padding: 0 16px 15px; font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }
.sv-faq-body p { margin: 0 0 10px; }
.sv-faq-body p:last-child { margin: 0; }

/* related + footer */
.sv-related { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sv-related a {
  display: block; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 20px 22px; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sv-related a:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow-lift); border-color: var(--accent-soft); }
.sv-rel-he { font-family: var(--font-hebrew); direction: rtl; font-size: 1.35rem; color: var(--accent-deep); }
.sv-rel-en { font: 700 .58rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-deep); margin-top: 4px; }
.sv-rel-note { font-size: .8rem; color: var(--muted); margin-top: 5px; line-height: 1.5; }
@media (max-width: 520px) { .sv-related { grid-template-columns: 1fr; } }

/* credits strip, above the shared footer */
.sv-credits {
  max-width: 820px; margin: 0 auto; padding: 26px clamp(16px, 5vw, 28px) 40px;
  border-top: 1px solid var(--line); text-align: center;
  color: var(--muted); font-size: .8rem; line-height: 1.75;
}
.sv-credits a { color: var(--accent); }
.sv-credits p { margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .sv-law, .sv-related a, .sv-barlink { transition: none; }
  .sv-related a:hover, .sv-barlink:hover { transform: none; }
}