/* homepage.css v33 — gap-filling layer for zvikaclinic.co.il homepage-v2
   Loaded AFTER zv-ds.css + webinar-landing.css + articles.css. Every value derives
   from the shared tokens (var(--x)); nothing here duplicates zv-ds/webinar-landing
   rules — only new components those files don't define (per spec-homepage.md §3
   gap list + the atmospheric-layer breaker which already ships in zv-ds v3.3.0
   and needs no new CSS).
   v33 (18/07) — .article-card (single wide card) REMOVED — segment 4 now shows 3
   curated articles via .art-rel/.art-card (articles.css, now linked here too), the
   same component already used for "עוד מאמרים" on individual article pages. Eyebrow
   renamed המאמר של השבוע -> מאמרים מקצועיים, class="eyebrow c" (two bars, matching
   the reviews eyebrow). Link as homepage.css?v=33.
   v27 (18/07) — .cred-stats/.trust-strip/.presenter-cta moved OUT to
   webinar-landing.css (now shared with the about-me page); logo height there
   raised 60px -> 108px. */

/* ── nav links (G2) — .nav-in already provides the glass pill + gap.
   Color/weight/size matched to the diabetes-workshop floating nav (.nav-scarce):
   var(--green-dd), 700 — 24px here (vs its 25px) since 4 links need to share the pill. ── */
/* ── nav (G2) — MOVED TO zv-ds.css v3.4.0. .nav/.nav-in/.nav-logo/.nav-link/.nav-links
   + mobile shrink are now canonical in the design system (full-width top bar).
   Nothing nav-related lives here anymore; the wheel-hero clearance below reads --nav-h. ── */

/* ── hero — H1 above the toxin-name loop (distinct from the webinar .hero
   pattern, which assumes a full-bleed photo) ── */
/* Equal gaps at EVERY width, measured the way the EYE reads the title — from the
   body of the letters, NOT from the outermost ink.
   "מה הרעל שלך?" has one letter that pokes up (ל) and one that hangs down (ך).
   Aligning to those extremes is what broke the previous two attempts: the numbers
   came out equal while the page still looked bottom-heavy, because the eye reads
   the mass of the letters, and the ך tail hangs 0.235em into the gap below while
   the ל only adds 0.12em to the gap above — an invisible ~2:1 bias.
   Rasterised "מה הרעל שלך?" in OSHC at 200px and scanned the alpha rows
   (>=25% coverage = body). Relative to the baseline:
     ל top 0.760em | body top 0.640em | baseline 0 | ך bottom 0.235em
   And with line-height 1.04, relative to the LINE BOX top:
     body top = +0.255em      baseline = +0.895em      line box bottom = +1.040em
   Layout constants, measured live across 360→1600:
     hero box top .... 36px at every width (padding-top stops margin collapse)
     nav bottom ...... 68.4px (<=680) / 85.6px (>=700)   [nav is position:fixed]
   So with margin-top:-0.255em (box top lands on the body top) and padding-bottom:0:
     gap_above = 36 + padding-top - nav_bottom
     gap_below = .toxin-loop margin-top + 0.145em   (baseline sits 0.145em above the
                 line box bottom, so that slack is already part of the gap below)
   Both are driven from one --hero-gap; the loop subtracts the 0.145em slack back
   out. --h1-fs is shared so that em-sized correction can be expressed on the loop,
   whose own font-size is unrelated. Verified on 10 widths, delta <=0.4px. */
.wheel-hero{
  --nav-clear:calc(var(--nav-h) + var(--promo-h,0px) + var(--nav-fudge,1px));              /* v3.4.0: bar sits at top:0, so its bottom == --nav-h (auto-shrinks on mobile) */
  --hero-gap:clamp(34px,4.6vw,59px);
  --h1-fs:clamp(46px,8.5vw,84px);
  padding-top:calc(var(--nav-clear) + var(--hero-gap) - 36px + 0.255*var(--h1-fs))
}
/* mobile nav-clear now follows --nav-h automatically (52px at ≤640px) — no manual override needed */
@media(max-width:640px){.wheel-hero{--nav-fudge:3px}} /* real .nav box exceeds --nav-h by 1px desktop / 3px mobile (border+rounding) - measured live 18/07/2026 */
.wheel-hero .wrap{text-align:center}
/* Optical trim — pulls the box top onto the BODY of the letters (see the ratios in
   the .wheel-hero comment), so the gap set above is the gap the eye sees.
   -0.255em is a ratio of font-size, so this one value covers 46→84px.
   padding-bottom stays 0 on purpose: the bottom is corrected on .toxin-loop instead,
   because the needed correction is negative and padding cannot be. */
.wheel-hero h1{font-size:var(--h1-fs);line-height:1.04;letter-spacing:-1.5px;
  margin:-0.255em auto 0;padding-bottom:0}
/* ── toxin-name loop (hero) — replaces the archived wheel concept.
   No circle, no frame: just the name, fading in and out, one after another,
   forever, inside a thin near-black ring. Identical treatment on desktop and
   mobile. The circle is a fixed 1:1 box, so the page never jumps between a
   1-line name ("מלח") and a 3-line one ("חוסר שקט פנימי"). Font cap is set by
   the widest word ("אלכוהול") fitting the circle's inscribed square.
   Heebo Black (900) is NOT in zv-ds.css (which stops at 700) — declared here
   because it is currently homepage-only; promote to zv-ds if a 2nd page needs it. */
@font-face{font-family:'Heebo';src:url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}

/* margin-top subtracts the 0.145em of line box that sits below the baseline, so the
   gap the eye sees (baseline → top of the ring) equals --hero-gap exactly. The h1's
   margin-bottom is 0, so nothing collapses into this. */
.toxin-loop{--tox-a:#A85A24;--tox-b:#5c2b10;--tox-c:#241209;
  width:clamp(260px,56vw,500px);aspect-ratio:1;
  margin:calc(var(--hero-gap) - 0.145 * var(--h1-fs)) auto 0;
  border:2px solid var(--tox-c);border-radius:50%;
  display:grid;place-items:center}
.toxin-loop--video{overflow:hidden}
.toxin-loop--video video{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
#toxin{opacity:0;transition:opacity .55s var(--bz);will-change:opacity}
#toxin.in{opacity:1}
.tox-ln{display:block;font-family:'Heebo',sans-serif;font-weight:900;line-height:.95;letter-spacing:-1px;
  font-size:clamp(50px,9vw,108px);
  background:linear-gradient(170deg,var(--tox-a) 0%,var(--tox-b) 60%,var(--tox-c) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* one list, three jobs: screen readers, SEO, and the reduced-motion fallback */
.toxin-names{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;list-style:none}

/* v43 (08/08/2026) - the ring is a shortcut, not decoration: a click opens the
   article of the toxin on screen at that moment (routing table lives in the
   page's inline JS). Zvika ruled out a label, and orange is CTA-only, so the
   whole affordance is the cursor plus a small lift. */
.toxin-loop--video{cursor:pointer;transition:transform var(--dur-fast) var(--bz),box-shadow var(--dur-fast) var(--bz)}
.toxin-loop--video:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(36,18,9,.18)}
@media(hover:none){.toxin-loop--video:hover{transform:none;box-shadow:none}}

/* a focusable element that never becomes visible is a trap, so the ten names
   surface as a panel the moment a keyboard reaches them and vanish on blur.
   Mouse users never see this; nothing above shifts, the panel is fixed. */
.toxin-names:focus-within{position:fixed;top:calc(var(--promo-h,0px) + var(--nav-h) + 10px);left:50%;transform:translateX(-50%);
  width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;z-index:60;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:min(92vw,720px);
  background:var(--cream);border:2px solid var(--green-dd);border-radius:18px;padding:10px 14px;
  box-shadow:0 18px 44px -18px rgba(0,56,32,.45)}
.toxin-names:focus-within a{display:inline-block;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.toxin-names a:focus-visible{outline:2px solid var(--green-dd);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  /* the lift is motion too - the pointer alone carries the affordance here */
  .toxin-loop--video{transition:none}
  .toxin-loop--video:hover{transform:none}
}@media (prefers-reduced-motion: reduce){
  /* motion honoured: the moving loop goes away, the circle stays with the static
     poster (a still image is not animation). .toxin-names stays SR/SEO-only. */
  .toxin-loop--video video{display:none}
  .toxin-loop--video{background:url('/wp-content/uploads/homepage/toxin-loop-poster.jpg') center/cover no-repeat}
}
.wheel-msg{max-width:540px;margin:30px auto 0;color:var(--ink-soft);font-size:clamp(16px,2.1vw,19px);line-height:1.7}
.wheel-msg b{color:var(--green-dd)}

/* ── presenter/bio segment — 4 separate trust zones (segments.md סבב 9, SOL consult
   16.07). Was one merged card forcing 3 different trust-jobs (person / institutional
   proof / relevance) to compete for the same space — shrinking the logos to fit
   "fixed" clutter but stole room from credentials; enlarging them recreated the
   clutter. Split instead: identity → full-width trust strip → light expertise
   grid → CTA, each with its own visual weight. .stat is NOT reused here — that
   gold-highlighter component was disabled 12/07 ("no yellow lines"); the new
   .cred-stats uses green, not gold.
   .cred-stats / .presenter-body .lead / .trust-strip+.trust-grid+.trust-cell /
   .presenter-cta MOVED to webinar-landing.css (18/07/2026) — the about-me page
   now reuses the same "ניסיון מקצועי" strip, so per SSOT iron rule it went to
   the shared file instead of getting duplicated here. Logo height there is now
   108px (was 60px). ── */

/* zone 3 — expertise areas: light grid (shared background via dividers, not
   4 separate boxed cards), 2 columns on desktop, stacked on mobile. */
.areas-zone{padding-top:64px}
.areas-head{text-align:center;margin:0 0 30px}
.areas{display:grid;gap:15px}
@media(min-width:720px){.areas{grid-template-columns:1fr 1fr;column-gap:32px}}
.area{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.area .ic-badge{flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:oklch(54% .12 156 / .1);
  display:grid;place-items:center;margin-top:2px}
.area .ic-badge svg{width:19px;height:19px}
.area-h{font-weight:700;color:var(--green-dd);font-size:17px}
.area-c{color:var(--ink-soft);font-size:16px;line-height:1.55}
.exp-closing{font-size:16px;color:var(--ink-soft);line-height:1.65;margin:30px auto 0;max-width:65ch;text-align:center}

/* ── footer, מורחב-בטעם (19.07.2026) — מחליף את .foot-links הישן ── */

/* פוטר "שמיים ואופק" (אושר 19.07): תמונת AI (גבעות באור זהוב, שליש עליון קרם #f2eee3)
   + תפר קרם שנמס לשמיים. הכול דריסות CSS על הרקע/צבעים מ-webinar-landing.css — בלי שינוי HTML.
   לקח: הרקע חייב לשבת על footer עצמו (::before עם z-index:-1 נבלע מאחורי רקע אטום). */
footer{
  background:
    linear-gradient(to bottom, var(--cream-2) 0%, rgba(242,238,227,.55) 54px, rgba(242,238,227,0) 120px),
    url('/wp-content/uploads/webinar/ds/breakers/footer-sky-rolling-hills.webp') center bottom/cover no-repeat;
  color:var(--ink);
  font-weight:700;
}
footer img{filter:none}
footer .foot-btn{border-color:var(--green-d);color:var(--green-dd);background:rgba(253,252,247,.75)}
footer .foot-btn:hover{background:var(--green-dd);color:#fff}

.foot-info{margin:32px 0;font-size:15px;color:var(--ink);display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.foot-info a{color:inherit;text-decoration:none}
.foot-info a:hover{text-decoration:underline}

.foot-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:64px;margin:0 auto 40px;text-align:center}
@media (max-width:640px){.foot-cols{flex-direction:column;align-items:center;gap:32px}}

.foot-col{max-width:220px}
.foot-col h4{font-size:14px;margin:0 0 16px;color:var(--green-dd);letter-spacing:.5px}
.foot-col a{display:block;color:var(--ink);font-size:15px;margin-bottom:10px;text-decoration:none}
.foot-col a:hover{text-decoration:underline}

footer .foot-copy{margin-top:24px;color:var(--ink)}
.foot-disclaimer{max-width:760px;margin:32px auto 0;font-size:12px;line-height:1.7;color:var(--ink)}
/* הילה קרם עדינה מאחורי הטקסט באזור הדשא — מבטיחה קריאות בלי לשנות צבע */
footer .foot-copy,.foot-disclaimer,.foot-col a,.foot-col h4,.foot-info{text-shadow:0 0 10px rgba(242,238,227,.9),0 0 3px rgba(242,238,227,.8)}