/* ============================================================
   LangFlame · פלטת הצבעים והכותר/פוטר המשותפים
   ------------------------------------------------------------
   הקובץ הזה מרכז את מה שהיה עד עכשיו משוכפל בכל עמוד: לוח
   הצבעים של האתר והכותר, הניווט והפוטר. הערכים זהים ל־
   site/app/globals.css (המקור לעמודי ה־Next.js) ול־:root
   שב־index.html, כדי שעמוד סטטי בתיקיית מדור (למשל zh/) יוכל
   להשתמש באותם משתנים ובאותו chrome בלי להעתיק אותם מחדש.

   עמודים קיימים לא שונו — הם עדיין נושאים את הסגנון שלהם
   בתוכם. מדור חדש פשוט מקשר לקובץ הזה לפני גיליון הסגנון שלו.
   ============================================================ */
:root{
  --ink:#182338; --ink2:#3d4658; --paper:#f6f4ef; --card:#ffffff;
  --azul:#245ba8; --azul-d:#183f74; --azul-l:#eaf1fb;
  --ochre:#d99a1f; --ochre-l:#fbf1da; --green:#2e7d54; --green-l:#e7f4ec;
  --line:#e7e2d6; --muted:#6a7183;
  --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Assistant',system-ui,sans-serif;
  --shadow:0 2px 10px rgba(24,40,74,.06); --shadow-h:0 6px 20px rgba(24,40,74,.12);
}

/* מצב כהה: כל בלוק מופיע פעמיים — פעם עם [data-theme="dark"],
   שזה מה שהמתג ב־styles/theme.js כותב, ופעם בתוך שאילתת המדיה
   מצומצמת ל־:not([data-theme="light"]) כדי שבחירה מפורשת באור
   תגבר על הגדרת מערכת ההפעלה. בלוק שמותנה רק בשאילתת המדיה
   משאיר את העמוד חצי כהה כשלוחצים על המתג במכונה בהירה. */

:root[data-theme="dark"]{
    --ink:#eceae2; --ink2:#c9c7bf; --paper:#191917; --card:#222220;
    --azul-l:#12233a;
    --ochre-l:#3a2d10; --green-l:#12301f;
    --line:#333330; --muted:#95938b;
    --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-h:0 6px 20px rgba(0,0,0,.5);
  }

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
    --ink:#eceae2; --ink2:#c9c7bf; --paper:#191917; --card:#222220;
    --azul-l:#12233a;
    --ochre-l:#3a2d10; --green-l:#12301f;
    --line:#333330; --muted:#95938b;
    --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-h:0 6px 20px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;font-size:18px}
a{color:var(--azul-d)}

:root[data-theme="dark"] a{color:#8ab6ee}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) a{color:#8ab6ee}}
.ltr{direction:ltr;unicode-bidi:isolate}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
main{padding:30px 0 90px}

/* ---------- כותר ---------- */
header.top{background:linear-gradient(135deg,var(--azul),var(--azul-d));color:#fff;box-shadow:var(--shadow)}
header.top .bar{max-width:980px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-weight:900;font-size:1.35rem;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}
.brand .flame{font-size:1.2rem}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{color:#fff;text-decoration:none;font-weight:600;font-size:.92rem;padding:7px 13px;border-radius:20px;transition:.15s}
nav.main a:hover{background:rgba(255,255,255,.18)}
nav.main a[aria-current="page"]{background:rgba(255,255,255,.22)}

/* ---------- פירורי לחם ---------- */
/* אותה מוסכמה שבתיקיות הקורסים (spanish-beginner/estilo.css),
   מותאמת לפלטה המשותפת. */
.crumbs{font-size:.9rem;color:var(--muted);margin:0 0 20px}
.crumbs a{color:var(--azul);text-decoration:none}

:root[data-theme="dark"] .crumbs a{color:#8ab6ee}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .crumbs a{color:#8ab6ee}}
.crumbs a:hover{text-decoration:underline}

/* ---------- פוטר ---------- */
footer.bottom{border-top:1px solid var(--line);background:var(--card)}
footer.bottom .inner{max-width:980px;margin:0 auto;padding:22px 20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
footer.bottom a{color:var(--muted);text-decoration:none;margin-inline-start:14px}
footer.bottom a:hover{color:var(--azul-d)}

:root[data-theme="dark"] footer.bottom a:hover{color:#8ab6ee}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) footer.bottom a:hover{color:#8ab6ee}}

/* שורת ייחוס למקורות נתונים חיצוניים (רישיונות). */
.credits{max-width:980px;margin:0 auto;padding:0 20px 22px;color:var(--muted);font-size:.8rem;line-height:1.6}
.credits a{color:var(--muted);text-decoration:underline}
.credits a:hover{color:var(--azul-d)}

:root[data-theme="dark"] .credits a:hover{color:#8ab6ee}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .credits a:hover{color:#8ab6ee}}

/* ---------- אריחים ותגיות מצב ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:16px 0}
.tile{position:relative;display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px;box-shadow:var(--shadow);transition:.15s;overflow:hidden}
.tile::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--azul);opacity:0;transition:.15s}
a.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:var(--azul)}
a.tile:hover::before{opacity:1}
.tile b{font-size:1.1rem}
.tile .d{display:block;color:var(--muted);font-size:.88rem;margin-top:5px}
.tile .tag{display:inline-block;font-size:.72rem;font-weight:800;border-radius:20px;padding:2px 10px;margin-top:9px}
.tag.free{background:var(--green-l);color:var(--green)}
.tag.pro{background:var(--ochre-l);color:#7a5a10}
.tag.soon{background:#eef0f4;color:var(--muted)}

:root[data-theme="dark"] .tag.free{color:#7fd9b8}
:root[data-theme="dark"] .tag.pro{color:#e8c07a}
:root[data-theme="dark"] .tag.soon{background:#2b2b28}

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .tag.free{color:#7fd9b8}
:root:not([data-theme="light"]) .tag.pro{color:#e8c07a}
:root:not([data-theme="light"]) .tag.soon{background:#2b2b28}
}
.tile.soon{opacity:.62}

/* ---------- כפתור השמעה ---------- */
/* אותו רכיב שבעמודי אוצר המילים (spanish-vocab-basic.html ואחרים),
   שם הוא מוגדר בתוך העמוד. כאן פעם אחת, לשימוש חוזר. */
.spk{border:none;background:var(--azul-l);color:var(--azul-d);border-radius:50%;
  width:24px;height:24px;font-size:.72rem;cursor:pointer;vertical-align:middle;
  margin-inline-start:5px;padding:0;flex:0 0 auto;line-height:1}
.spk:hover{background:#d5e4f7}
.spk[disabled]{opacity:.35;cursor:default}

:root[data-theme="dark"] .spk{color:#9cc8f0}
:root[data-theme="dark"] .spk:hover{background:#1b3555}

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .spk{color:#9cc8f0}
:root:not([data-theme="light"]) .spk:hover{background:#1b3555}
}

/* ---------- בורר שפה ---------- */
.langsel{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.langsel button{font:inherit;font-size:.85rem;font-weight:600;padding:5px 13px;border-radius:20px;
  cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);transition:.12s}
.langsel button:hover{border-color:var(--azul)}
.langsel button[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  a.tile:hover{transform:none}
}