/* Shared styles for the Dafyomi Advancement Forum "Yomis" pages */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&family=Source+Sans+3:wght@400;600&family=Frank+Ruhl+Libre:wght@400;500;700&family=Assistant:wght@400;600;700&display=swap");

:root{
  --bg:#f3f5f8; --surface:#ffffff; --ink:#15223b; --muted:#53607a;
  --line:#d9dfe9; --accent:#244c7c; --accent-ink:#ffffff; --memorial:#a87a24;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1626; --surface:#18223a; --ink:#e8ecf5; --muted:#a3afc6;
    --line:#2b3855; --accent:#8db6ea; --accent-ink:#0f1626; --memorial:#d9aa52;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top .wrap{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.top img{height:88px;width:auto;display:block}
.top span{font-size:.95rem;color:var(--muted)}

.hero{padding-block:72px 56px}
.hero h1{font:600 clamp(2.6rem,7vw,4.6rem)/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 20px}
.hero .sub{font:400 clamp(1.25rem,2.6vw,1.6rem)/1.4 var(--serif);color:var(--muted);max-width:34ch;margin:0 0 32px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);
  padding:14px 26px;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.hero small{display:block;margin-top:14px;color:var(--muted);font-size:.95rem}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:0;padding:0;
  border-block:1px solid var(--line)}
.facts div{padding:24px 20px;border-inline-start:1px solid var(--line)}
.facts div:first-child{border-inline-start:0;padding-inline-start:0}
.facts dt{font:600 2rem/1.1 var(--serif);margin:0 0 4px}
.facts dd{margin:0;color:var(--muted);font-size:.95rem;line-height:1.4}

.story{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:56px;padding-block:72px;align-items:start}
.story h2,.try h2{font:600 clamp(1.7rem,3.4vw,2.2rem)/1.2 var(--serif);margin:0 0 18px}
.story p{margin:0 0 1.1em;max-width:62ch}
.story strong{font-weight:600}
figure{margin:0;position:sticky;top:24px}
figure img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line);
  box-shadow:10px 10px 0 -1px var(--surface),10px 10px 0 0 var(--memorial)}
figcaption{margin-top:22px;font:italic 400 1.05rem var(--serif);color:var(--muted)}

.try{background:var(--surface);border-block:1px solid var(--line);padding:64px 0 72px}
.try p.lead{max-width:60ch;margin:0 0 32px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{display:flex;gap:16px;align-items:center;text-decoration:none;padding:18px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card img{width:64px;height:64px;object-fit:cover;border-radius:6px;flex:none}
.card b{display:block;font-weight:600;line-height:1.25}
.card em{display:block;font-style:normal;font-size:.9rem;color:var(--muted);margin-top:4px;line-height:1.35}
.card.primary{border-color:var(--accent);border-width:2px}

footer{padding:36px 0 48px;color:var(--muted);font-size:.9rem}

@media (max-width:760px){
  .story{grid-template-columns:1fr;gap:36px;padding-block:48px}
  figure{position:static;max-width:340px}
  .hero{padding-block:48px 40px}
  .facts div{border-inline-start:0;border-top:1px solid var(--line);padding-inline-start:0}
  .facts div:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Shared components for other Yomis pages ---------- */
.top a{display:flex;align-items:center;gap:14px;text-decoration:none}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:12px 24px}
.btn.ghost:hover{border-color:var(--accent)}
.story.single{grid-template-columns:minmax(0,1fr)}
.story a,.try .lead a{color:var(--accent);text-underline-offset:3px}
.story h2+p{margin-top:0}
.try.alt{background:var(--bg)}
.card.plain{padding:22px}
.card.plain b{font:600 1.2rem/1.25 var(--serif)}

.quote{padding:72px 0}
.quote blockquote{margin:0 auto;max-width:44rem;padding:6px 28px;border-inline-start:4px solid var(--memorial);
  font:400 1.3rem/1.95 "Frank Ruhl Libre",var(--serif)}
.quote h2{font:600 1.35rem/1.6 "Frank Ruhl Libre",var(--serif);margin:0 0 18px}
.quote p{margin:0 0 1em}
.quote cite{display:block;margin-top:20px;font:normal .95rem/1.5 var(--sans);color:var(--muted)}

.sitefoot {border-top:1px solid var(--line);text-align:center;padding:48px 0 56px}
.sitefootheb {border-top:1px solid var(--line);text-align:center;padding:48px 0 56px; font-family:"Arial"; font-size:1.1rem}
.sitenav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:28px 0 0;padding:0;list-style:none;font-size:.95rem}
.sitenav a{display:block;padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--muted)}
.sitenav a:hover{background:var(--surface);color:var(--ink)}

/* Inline audio player */
.btn svg{width:22px;height:22px;flex:none}
.player{margin-top:22px;max-width:480px}
.player[hidden]{display:none}
.player audio{width:100%;color-scheme:light dark}

/* ---------- Hebrew (RTL) pages: <html lang="he" dir="rtl"> ---------- */
html[lang="he"]{
  --serif:"Frank Ruhl Libre","Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Assistant","Source Sans 3",system-ui,"Segoe UI",Arial,sans-serif;
}
html[lang="he"] body{font-size:19px;line-height:1.7}
html[lang="he"] .hero h1{letter-spacing:0;font-weight:700;line-height:1.1}
html[lang="he"] .hero .sub{max-width:30ch;line-height:1.5}
html[lang="he"] .facts dt{font-weight:700}
html[lang="he"] .btn,html[lang="he"] .story strong{font-weight:700}
html[lang="he"] .btn svg{transform:scaleX(-1)}   /* speaker waves point toward the text */
html[lang="he"] figure img{box-shadow:-10px 10px 0 -1px var(--surface),-10px 10px 0 0 var(--memorial)}
html[lang="he"] figcaption{font-style:normal;font-size:1.1rem}
html[lang="he"] .card em{font-size:.95rem}
html[lang="he"] .player audio{direction:ltr}
html[lang="he"] .sitenav{font-size:1rem}