/* =====================================================================
   theme.css — העיצוב של כל אתר הקורס, בסגנון "המעבדה"
   כדי לשנות עיצוב לכל האתר: משנים רק את המשתנים בחלק 1.
   חלק 1א = מצב בהיר, חלק 1ב = מצב כהה (לפי הגדרת המחשב, כמו במעבדה).
   ===================================================================== */

/* ---------- 1א. משתני עיצוב — מצב בהיר ---------- */
:root {
  --t-bg:      #EEF2EC;   /* רקע העמוד */
  --t-grid:    #DCE4DB;   /* קווי המשבצות ברקע */
  --t-grid-size: 24px;    /* גודל משבצת (0px = בלי משבצות) */
  --t-card:    #FFFFFF;   /* רקע כרטיסים ותיבות */
  --t-line:    #C9D3CB;   /* קווי מסגרת */
  --t-ink:     #1C2B2F;   /* טקסט ראשי */
  --t-muted:   #546569;   /* טקסט משני */
  --t-accent:  #7C3AED;   /* צבע מוביל (סגול) */
  --t-accent2: #A855F7;   /* צבע שני (לגרדיאנט) */
  --t-accent-ink: #6D28D9;/* כותרות משנה וקישורים */
  --t-hover:   #E3EAE2;   /* רקע בריחוף על כפתור תפריט */
  --t-nav-bg:  rgba(238,242,236,.92); /* רקע פס התפריט */
  --t-code-bg: #12262B;   /* רקע קוד */
  --t-code-ink:#DDEBE6;   /* טקסט קוד */
  --t-img-bg:  #FFFFFF;   /* רקע מאחורי תמונות רכיבים */
  --t-shadow:  0 8px 24px rgba(0,0,0,.10);

  --t-radius:  16px;      /* עיגול פינות כרטיסים */
  --t-font:       "Assistant", "Segoe UI", Arial, sans-serif;
  --t-font-title: "Secular One", "Assistant", sans-serif;
  --t-font-code:  "JetBrains Mono", Consolas, monospace;
  --t-font-size:  18px;
}

/* ---------- 1ב. משתני עיצוב — מצב כהה ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-bg:      #111A1C;
    --t-grid:    #1A2629;
    --t-card:    #172326;
    --t-line:    #2C3E41;
    --t-ink:     #E4ECE8;
    --t-muted:   #9DB0AE;
    --t-accent-ink: #C4B5FD;
    --t-hover:   #22363A;
    --t-nav-bg:  rgba(17,26,28,.92);
    --t-code-bg: #0B1719;
    --t-shadow:  0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --t-bg:#111A1C; --t-grid:#1A2629; --t-card:#172326; --t-line:#2C3E41; --t-ink:#E4ECE8;
  --t-muted:#9DB0AE; --t-accent-ink:#C4B5FD; --t-hover:#22363A; --t-nav-bg:rgba(17,26,28,.92);
  --t-code-bg:#0B1719; --t-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* =====================================================================
   מכאן והלאה אין צורך לגעת — הכול נגזר מהמשתנים למעלה
   ===================================================================== */

/* 2. חיבור המשתנים הישנים של העמודים לערכת הצבעים החדשה */
:root, :root:not([data-theme="light"]) {
  --ink: var(--t-ink); --card: var(--t-card);
  --bg: var(--t-bg); --bg-light: var(--t-card); --surface: var(--t-card); --surface-2: var(--t-card);
  --soft: var(--t-card); --text: var(--t-ink); --muted: var(--t-muted); --line: var(--t-line);
  --accent: var(--t-accent-ink); --accent2: var(--t-accent);
}

/* 3. בסיס */
html { color-scheme: light dark; }
body {
  font-family: var(--t-font) !important;
  font-size: var(--t-font-size);
  color: var(--t-ink) !important;
  background-color: var(--t-bg) !important;
  background-image:
    linear-gradient(var(--t-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--t-grid) 1px, transparent 1px) !important;
  background-size: var(--t-grid-size) var(--t-grid-size) !important;
}
p, li { color: inherit; }
a { color: var(--t-accent-ink); }

h1, h2, h3, .page-head h1 {
  font-family: var(--t-font-title) !important;
  font-weight: 400 !important;
  line-height: 1.2;
}
h1 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t-ink) !important;
}
h2 { color: var(--t-ink); }
main h2 { color: var(--t-accent-ink); }

/* 4. פס התפריט העליון — העתק 1:1 של התפריט במעבדה (lab-nav.js) */
.topnav{position:sticky; top:0; z-index:50; background:var(--t-nav-bg); backdrop-filter:blur(6px); border-bottom:1px solid var(--t-line); font:400 18px/1.65 var(--t-font)}
.topnav .in{max-width:1080px; margin:0 auto; padding:4px 20px; display:flex; gap:6px 2px; align-items:center; flex-wrap:wrap; justify-content:space-between}
.topnav .in>.dd>summary,.topnav .in>a.lnk{padding-inline:8px !important}
.topnav .in>.brand,.topnav .in>a.shared{padding-inline:14px !important}
.topnav .brand{font-family:var(--t-font-title); order:-1; font-size:18px; color:#fff; text-decoration:none; background:linear-gradient(135deg,var(--t-accent),var(--t-accent2)); padding:6px 18px; border-radius:999px; box-shadow:0 2px 10px rgba(124,58,237,.35); white-space:nowrap}
.topnav .brand:hover{filter:brightness(.9)}
.topnav a.lnk{color:var(--t-ink); text-decoration:none; padding:6px 16px; border-radius:999px; font-weight:600; white-space:nowrap}
.topnav a.lnk:hover{background:var(--t-line)}
.topnav a.lnk[aria-current="page"]{background:var(--t-accent); color:#fff}
.topnav a.lnk.back{opacity:.8}
.topnav a.shared{font-weight:700; color:#fff; text-decoration:none; background:linear-gradient(135deg,var(--t-accent),var(--t-accent2)); padding:6px 18px; border-radius:999px; box-shadow:0 2px 10px rgba(124,58,237,.35); white-space:nowrap}
.topnav a.shared:hover{filter:brightness(.9)}
.topnav a.shared[aria-current="page"]{outline:2px solid var(--t-ink); outline-offset:2px}
#senMenu{margin-inline-start:auto}
.topnav .dd{position:relative}
.topnav .dd[open]::after{content:""; position:absolute; top:100%; inset-inline:0; height:10px}
.topnav .dd>summary{list-style:none; cursor:pointer; color:var(--t-ink); padding:6px 16px; border-radius:999px; font-weight:600; white-space:nowrap}
.topnav .dd>summary::-webkit-details-marker{display:none}
.topnav .dd>summary:hover{background:var(--t-line)}
.topnav .dd.cur>summary{background:var(--t-accent); color:#fff}
.topnav .ddm{position:absolute; top:calc(100% + 6px); inset-inline-start:0; background:var(--t-card); border:1px solid var(--t-line); border-radius:14px; padding:6px; display:flex; flex-direction:column; gap:2px; min-width:190px; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:10; max-height:calc(100vh - 90px); overflow-y:auto}
#senMenu .ddm,#crsMenu .ddm{inset-inline-start:auto; inset-inline-end:0}
.topnav .ddm a.lnk{display:block}
.topnav .ddh{font-size:12px; font-weight:700; color:var(--t-muted); padding:8px 16px 2px}
.topnav .ddh:first-child{padding-top:2px}

/* כותרות — כמו במעבדה */
h1{font-size:clamp(32px,5.5vw,52px) !important; margin-bottom:8px}
main h2, .page-head h2{font-size:26px !important}
.page-head h1{font-size:clamp(32px,5.5vw,52px) !important}

/* רוחב התוכן — כמו במעבדה */
main{max-width:1080px !important; margin:0 auto; padding:12px 20px 64px !important}
.crumb{max-width:1080px !important; padding:8px 20px 0 !important; margin:0 auto}
.crumb + main{padding-top:6px !important}

/* 5. כרטיסים ותיבות */
.card, .product-card, .category-grid a, .specs, .split .box, .step, .explain-card,
.joke-source, .joke-card, .version-link, .code-card, .composer, .mini, .task,
.upcoming-card, .kit-section, .lesson-row, .group-h .n, .action, .box, .q {
  background: var(--t-card) !important;
  border-color: var(--t-line) !important;
  color: var(--t-ink);
}
.card, .product-card, .category-grid a, .code-card, .explain-card {
  border-radius: var(--t-radius) !important;
}
.upcoming-card { background: transparent !important; }
a.card:hover, .product-card:hover, .category-grid a:hover {
  border-color: var(--t-accent) !important;
  transform: translateY(-3px);
}
.card h3, .product-card h2, .category-grid h2 {
  font-family: var(--t-font-title) !important;
  font-weight: 400 !important;
  color: var(--t-ink) !important;
}
.card p, .specs li, .category-grid p { color: var(--t-muted) !important; }
.specs li { border-color: var(--t-line) !important; }
.specs li b { color: var(--t-ink) !important; }

/* תמונות רכיבים — מסגרת לבנה מעוגלת כמו במעבדה */
.card .category-image, .product-card img, .category-grid img {
  background: var(--t-img-bg) !important;
  border-radius: 12px;
}
.card .category-image { padding: 6px; }

/* תגיות */
.badge, .tag, a.card.featured .tag, .chip.on, .badge-internal {
  background: rgba(124,58,237,.14) !important;
  color: var(--t-accent-ink) !important;
  border-color: rgba(124,58,237,.35) !important;
}
a.card.featured .tag { background: var(--t-accent) !important; color: #fff !important; }
a.card.featured { border-color: var(--t-accent) !important; }
.chip, .package-nav a { background: var(--t-card) !important; border-color: var(--t-line) !important; color: var(--t-ink) !important; }
.package-nav a.featured { border-color: var(--t-accent) !important; color: var(--t-accent-ink) !important; }

/* כפתורים */
.btn-primary, .publish, .buy-link, .study-hub-link a:hover {
  background: linear-gradient(135deg, var(--t-accent), var(--t-accent2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.btn-secondary, .study-hub-link a {
  color: var(--t-accent-ink) !important;
  border-color: var(--t-accent) !important;
  background: var(--t-card) !important;
}
.buy-link:hover { filter: brightness(.9); }

/* 6. קוד */
pre, code pre {
  background: var(--t-code-bg) !important;
  color: var(--t-code-ink) !important;
  border: 1px solid var(--t-line) !important;
  border-radius: 12px !important;
  font-family: var(--t-font-code) !important;
}

/* 7. טפסים וטבלאות */
input, textarea, select {
  background: var(--t-card) !important;
  color: var(--t-ink) !important;
  border-color: var(--t-line) !important;
  font-family: inherit;
}
th, td { border-color: var(--t-line) !important; }

/* 8. פירורי לחם ותחתית */
.crumb, .crumb a { color: var(--t-muted) !important; }
footer, .site-footer { border-top: 1px solid var(--t-line) !important; color: var(--t-muted) !important; }
.extra-section { border-top-color: var(--t-line) !important; }

/* 9. עמוד בית בסגנון המעבדה: hero, כותרת משנה, מונים, צעדים, כרטיסי קטגוריה */
.hero{display:grid; grid-template-columns:1fr 240px; gap:10px 28px; align-items:center}
.hero h1{margin-bottom:0}
.heroArt{width:100%; height:auto}
@media (max-width:760px){.hero{grid-template-columns:1fr}.heroArt{display:none}}
.tagline{margin:0 0 8px; font-size:clamp(20px,3vw,28px); font-weight:700; letter-spacing:.5px; background:linear-gradient(90deg,#c4a8ff,#7c4dff); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats{display:flex; gap:10px; flex-wrap:wrap}
.stats span{background:var(--t-card); border:1px solid var(--t-line); border-radius:999px; padding:3px 14px; font-size:15px; color:var(--t-muted)}
.stats b{font-family:var(--t-font-title); font-weight:400; color:var(--t-ink); font-size:18px; margin-inline-end:4px}
.hLed{animation:hBlink 1.2s steps(1) infinite}.hLed.b{animation-delay:.6s}
@keyframes hBlink{50%{opacity:.15}}
.steps{list-style:none; padding:0; margin:10px 0 14px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps li{display:flex; align-items:center; gap:10px; background:var(--t-card); border:1px solid var(--t-line); border-radius:12px; padding:8px 12px; font-size:15px; line-height:1.3}
.steps b{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--t-accent),var(--t-accent2)); font-family:var(--t-font-title); font-weight:400}
.grp{font-family:var(--t-font-title); font-weight:400; font-size:22px !important; margin:26px 0 10px; color:var(--t-ink) !important}
.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:10px auto 0}
.card.cat{padding:22px !important; text-align:center; text-decoration:none; display:block}
.card.cat img{width:100%; height:180px; object-fit:contain; background:#fff; border-radius:12px; display:block; margin-bottom:12px}
.card.cat strong{font-family:var(--t-font-title); font-weight:400; font-size:26px; display:block; color:var(--t-ink)}
.card.cat span{color:var(--t-muted); font-size:16px}
.fresh{max-width:900px; margin:22px auto 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center}
.fresh .fh{color:var(--t-muted); font-size:15px; margin-inline-end:4px}
.fresh a{text-decoration:none; color:var(--t-ink); background:var(--t-card); border:1px solid var(--t-line); border-radius:999px; padding:4px 14px; font-size:15px}
.fresh a:hover{border-color:var(--t-accent)}
.topnav a{margin:0 !important}
.topnav summary, .topnav a{font-size:18px}
*{box-sizing:border-box}
body{margin:0}
footer{text-align:center; padding:30px; font-size:.85rem}
.version-tag{display:block; margin-top:6px; font-size:.78rem; opacity:.85}
/* גלריות רכיבים — שורות ממורכזות */
main:has(.product-grid){max-width:1300px !important}
.product-grid{display:flex !important; flex-wrap:wrap; justify-content:center}
.product-grid .product-card{width:220px}
@media (max-width:780px){.product-grid .product-card{width:calc(50% - 6px)}}