/* ============================================================================
   Zvika HaNaturopath — Design System v3.5.1  ·  Webinar foundation bundle
   v3.5.1 (18/07) — mobile promo bar is now 2 lines (full sentence + CTA on its own line); --promo-h grows to 58px on mobile so all derived offsets shift down and never overlap the hero. Link as ?v=351.
   v3.5.0 (18/07) — breaker eyebrow bars (.breaker-in .eyebrow::before/::after)
   were rgba(255,255,255,.16) — technically present but invisible against the
   dark scrim, unlike the bright-lime bars everywhere else (e.g. "מה שאומרים
   עלינו בגוגל"). Now uses --eyebrow-on-forest, the same bright-green token
   already used for eyebrows on the forest background. Link as ?v=350.
   v3.4.9 (18/07) — NAV mobile: "מאמרים מקצועיים" is now a direct link to /articles/
   (the <label>+checkbox became an <a href="/articles/">) — no accordion/dropdown on
   mobile. Clean look: removed the inter-item dividers and the collapsed-panel hairline.
   Desktop dropdown of the 3 curated articles is unchanged (hover/focus). ?v=349.
   v3.4.8 (18/07) — promo "לחצו כאן" now matches the sentence font (no underline);
   "צרו קשר" frame removed (.nav-cta unstyled) — both are plain links now. ?v=348.
   v3.4.7 (18/07) — promo "לחצו כאן" is a subtle underline, not a boxed frame. ?v=347.
   v3.4.6 (18/07) — NAV polish: .promo-bar now matte muted-green (breaker-scrim
   tone, not the metallic radial) with bigger white text; "צרו קשר" gets .nav-cta
   (bordered rectangle, desktop only). Link as ?v=346.
   v3.4.5 (18/07) — NAV fix: .nav-sub-toggle neutralizes the WP theme's global
   label{display:block;border;margin} that leaked a stray line above the
   "מאמרים מקצועיים" dropdown. Link as ?v=345.
   v3.4.4 (18/07) — NAV round 3: (1) .promo-bar — forest announcement strip above
   the bar, scrolls away on scroll (tiny JS toggles body.hdr-scrolled); present only
   where a page includes .promo-bar (body:has sets --promo-h, all offsets follow).
   (2) .nav-item/.nav-sub dropdown (desktop hover/focus, mobile accordion, no JS).
   (3) .nav-soon — menu item hidden until its page ships (וידאו). Link as ?v=344.
   v3.4.3 (18/07) — NAV mobile hamburger: pure-CSS (.nav-toggle-cb + .nav-burger)
   drops .nav-links into a glass panel on ≤640 (all links + "בית" + full-width
   search inside); desktop bar unchanged. Link as ?v=343 on link-nav pages.
   v3.4.2 (18/07) — NAV fix: .nav-search-form min-width:0 (collapsed search no
   longer holds the input's phantom ~170px); .nav-search hidden on mobile so the
   loved 4-link row is preserved (search stays desktop-only for now). Link as ?v=342.
   v3.4.1 (18/07) — NAV round 2: desktop centers the logo+links cluster (link-navs
   only, via :has); tappable .nav-logo-link -> home; optional "בית" link (.nav-home,
   hidden on mobile); no-JS expanding search (.nav-search, magnifier + checkbox).
   Scarce navs (webinars) unaffected.
   v3.4.0 (17/07) — NAV: .nav is now a full-width glass TOP BAR (was a centered
   floating pill). Canonized .nav-logo/.nav-link/.nav-links (were duplicated only
   in homepage.css) + .nav-pad clearance utility + --nav-h/--nav-clear tokens +
   mobile shrink (no JS). One nav container for every page (link set is per-page;
   scarce navs keep .nav-scarce). Link as zv-ds.css?v=340 on EVERY page.
   v3.2.0 (14/07) — ATMOSPHERE: grain .022 -> .05 + multiply (it was there and
   doing nothing); full-bleed breaker + .food-wide (photography inside a section).
   v3.2.1 (14/07) — authored-line-break modifier for the breaker.
   v3.3.0 (14/07) — BREAKING RENAME .brk* -> .breaker*. `.brk` collided with
   `.row.brk` ("הפסקה" / lunch break) in the workshop agenda timeline — the same
   three letters meaning the opposite thing. A global design-system class must
   not carry a name that reads as something else. Link as zv-ds.css?v=330.
   Canonical tokens + utilities + signature components, assembled verbatim from
   the design-system skill (colors/typography/spacing/effects/utilities) + the
   sales-page component layer. Every webinar surface links THIS file.
   Source of truth: zvikaclinic.co.il/diabetes-workshop (v3.1 binding).
   ========================================================================== */

/* ── Fonts (self-hosted on server) — OSHC H1/H2 only · Heebo everything else ── */
@font-face{font-family:'OSHC';src:url('/wp-content/uploads/diabetes-workshop/assets/fonts/OpenSansHebrewCondensed-Regular.woff2') format('woff2'),url('/wp-content/uploads/diabetes-workshop/assets/fonts/OpenSansHebrewCondensed-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'OSHC';src:url('/wp-content/uploads/diabetes-workshop/assets/fonts/OpenSansHebrewCondensed-Bold.woff2') format('woff2'),url('/wp-content/uploads/diabetes-workshop/assets/fonts/OpenSansHebrewCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Heebo';src:url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-Regular.woff2') format('woff2'),url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Heebo';src:url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-Medium.woff2') format('woff2'),url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Heebo';src:url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-SemiBold.woff2') format('woff2'),url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Heebo';src:url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-Bold.woff2') format('woff2'),url('/wp-content/uploads/diabetes-workshop/assets/fonts/Heebo-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

/* ── Color tokens (hex fallback + OKLCH via @supports) ───────────────────── */
:root{
  --green:#1d8350; --green-d:#005732; --green-dd:#003820;
  --lime:#87b73a;
  --orange:#e45b00; --orange-d:#c54400;
  --gold:#eec96c;
  --cream:#f9f7ee; --cream-2:#f2eee3; --paper:#fdfcf7;
  --line:#dddbd2; --line-2:#cdcbc1;
  --ink:#1c2d23; --ink-soft:#3d4c43; --muted:#606d65;
  --forest-hi:#006b3d; --forest-lo:#00351e;
  --bg-forest:radial-gradient(125% 120% at 50% 0, var(--forest-hi), var(--forest-lo));
  --on-forest:#ffffff; --on-forest-soft:rgba(255,255,255,.82); --on-forest-dim:rgba(255,255,255,.6);
  --eyebrow-on-forest:#9ee88e;
  --glass-dark-bg:rgba(255,255,255,.06); --glass-dark-border:rgba(255,255,255,.16);
  --glass-bg:rgba(253,252,247,.9); --glass-border:rgba(0,87,50,.08);
  --tint-green:#e3f9e0;
  --grad-hero:linear-gradient(165deg,#ffffff 0%, var(--cream) 44%, #e5f6e2 100%);
  --grad-video:linear-gradient(160deg,#eef9ec, var(--cream-2));
  --grad-bonus:radial-gradient(130% 110% at 100% 0, #ef5f00, #ae3200);
  --lightbox-bg:rgba(9,26,17,.86);
  --color-brand:var(--green); --color-heading:var(--green-dd); --color-body:var(--ink-soft);
  --color-action:var(--orange); --color-action-hover:var(--orange-d); --color-emphasis:var(--gold);
  --color-error:#C71A00; --surface-page:var(--cream);
}
@supports (color: oklch(54% .12 156)){
  :root{
    --green:oklch(54% .12 156); --green-d:oklch(40% .10 158); --green-dd:oklch(30% .07 158);
    --lime:oklch(72% .16 128); --orange:oklch(64% .19 45); --orange-d:oklch(56% .18 44);
    --gold:oklch(85% .12 88); --cream:oklch(97.5% .012 95); --cream-2:oklch(95% .016 92);
    --paper:oklch(99% .006 95); --line:oklch(89% .012 95); --line-2:oklch(84% .014 95);
    --ink:oklch(28% .03 158); --ink-soft:oklch(40% .025 158); --muted:oklch(52% .02 158);
    --forest-hi:oklch(46% .12 158); --forest-lo:oklch(29% .07 159);
    --eyebrow-on-forest:oklch(86% .14 140);
    --glass-bg:oklch(99% .006 95 / .9); --glass-border:oklch(40% .08 158 / .08);
    --tint-green:oklch(96% .04 142);
    --grad-hero:linear-gradient(165deg,#ffffff 0%, var(--cream) 44%, oklch(95.5% .032 142) 100%);
    --grad-video:linear-gradient(160deg, oklch(97% .02 142), var(--cream-2));
    --grad-bonus:radial-gradient(130% 110% at 100% 0, oklch(66% .2 47), oklch(50% .17 40));
    --lightbox-bg:oklch(20% .03 158 / .86);
  }
}

/* ── Typography tokens ───────────────────────────────────────────────────── */
:root{
  --font-display:'OSHC', sans-serif; --font-base:'Heebo', sans-serif;
  --fs-h1:clamp(44px, 6vw, 66px); --fs-h1-hero:clamp(33px, 5vw, 58px);
  --fs-h2:clamp(31px, 4.8vw, 54px); --fs-h3:clamp(20px, 2.4vw, 26px);
  --fs-lead:clamp(19px, 2.4vw, 24px); --fs-body:clamp(18px, 2.3vw, 23px);
  --fs-body-ui:19px; --fs-eyebrow:17.5px; --fs-small:16px;
  --fs-num-display:clamp(44px, 6vw, 66px); --fs-price:clamp(56px, 9vw, 86px);
  --lh-heading:1.16; --lh-h3:1.3; --lh-body:1.7; --lh-lead:1.5;
  --ls-h1:-1px; --ls-eyebrow:2.4px;
}

/* ── Spacing tokens ──────────────────────────────────────────────────────── */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --space-section:clamp(72px, 11vw, 132px);
  --wrap-max:1120px;--wrap-narrow:760px;--wrap-pad:26px;
}

/* ── Effects tokens — shadows, radii, motion, blur ───────────────────────── */
:root{
  --shadow:0 24px 60px -30px rgba(0,87,50,.35); --shadow-sm:0 12px 34px -20px rgba(0,87,50,.28);
  --shadow-cta:0 18px 38px -14px rgba(228,91,0,.6); --shadow-cta-hover:0 26px 46px -16px rgba(228,91,0,.7);
  --shadow-inner-bezel:inset 0 1px 2px rgba(255,255,255,.45);
  --r-pill:99px; --r-card:clamp(22px, 2.6vw, 34px); --r-card-fixed:22px;
  --r-inner:16px; --r-el:12px; --r-media:14px;
  --promo-h:0px; --nav-h:60px; --nav-clear:calc(var(--promo-h) + var(--nav-h) + 20px); /* v3.4.4 — --promo-h is 0 unless a page carries .promo-bar (body:has sets it); clearance covers promo+bar */
  --bz:cubic-bezier(.22, 1, .36, 1); --bz2:cubic-bezier(.16, 1, .3, 1);
  --dur-fast:.3s; --dur-base:.45s; --dur-slow:.55s; --dur-reveal:.9s;
  --blur-glass:16px; --blur-lightbox:6px;
  --focus-ring:0 0 0 3px rgba(0,87,50,.3);
  /* Atmosphere (v3.2.0) — the forest scrim that sits over every breaker photo.
     This, not a duotone on the image, is what ties photography to the brand. */
  --breaker-scrim-top:rgba(30,62,46,.44); --breaker-scrim-bot:rgba(22,48,35,.8);
  --breaker-text-shadow:rgba(20,40,30,.55);
}
@supports (color: oklch(54% .12 156)){
  :root{
    --shadow:0 24px 60px -30px oklch(40% .08 158 / .35); --shadow-sm:0 12px 34px -20px oklch(40% .08 158 / .28);
    --shadow-cta:0 18px 38px -14px oklch(64% .19 45 / .6); --shadow-cta-hover:0 26px 46px -16px oklch(64% .19 45 / .7);
    --focus-ring:0 0 0 3px oklch(40% .10 158 / .3);
    --breaker-scrim-top:oklch(24% .05 159 / .44); --breaker-scrim-bot:oklch(19% .045 159 / .8);
    --breaker-text-shadow:oklch(20% .04 159 / .55);
  }
}

/* ── Global utilities — body, grain, headings, wrap, surfaces, eyebrow, reveal ─ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-base);color:var(--ink);background:var(--surface-page);line-height:var(--lh-body);font-size:var(--fs-body-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Paper grain. Was .022 with no blend mode — present but doing nothing. At .05
   with multiply the page stops reading as a file and starts reading as a
   material. This is the cheapest depth on the whole system: no image, no
   request, no layout. (v3.2.0) */
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-repeat:repeat;background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{text-wrap:balance;letter-spacing:0}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:var(--lh-heading);color:var(--color-heading)}
h1{font-size:var(--fs-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2)}
h3{font-family:var(--font-base);font-weight:600;line-height:var(--lh-h3);color:var(--color-heading);font-size:var(--fs-h3)}
p{margin-bottom:14px;color:var(--ink-soft)}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:64ch}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);direction:rtl}
.narrow{max-width:var(--wrap-narrow)}
section{padding:var(--space-section) 0;position:relative}
.bg-paper{background:var(--paper)}.bg-cream{background:var(--cream)}.bg-cream2{background:var(--cream-2)}
.bg-forest{background:var(--bg-forest);color:var(--on-forest)}
.bg-forest h1,.bg-forest h2,.bg-forest h3{color:var(--on-forest)}
.bg-forest .eyebrow{color:var(--eyebrow-on-forest)}
.bg-forest .eyebrow::before,.bg-forest .eyebrow.c::after{background:var(--eyebrow-on-forest)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--green);font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);margin-bottom:18px;text-transform:uppercase}
.eyebrow::before{content:'';width:26px;height:1.5px;background:var(--lime)}
.eyebrow.c::after{content:'';width:26px;height:1.5px;background:var(--lime)}
.rv{opacity:0;transform:translateY(36px);filter:blur(8px);transition:opacity var(--dur-reveal) var(--bz),transform var(--dur-reveal) var(--bz),filter var(--dur-reveal) var(--bz)}
.rv.in{opacity:1;transform:none;filter:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none;filter:none}}

/* ── Iconography — inline line icons, 1.5px stroke, currentColor ─────────── */
.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.125em}
.ibadge{width:50px;height:50px;border-radius:14px;background:oklch(54% .12 156 / .09);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:25px;margin-bottom:16px}

/* ── SIGNATURE · CTA button-in-button (orange = action only) ─────────────── */
.cta{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#fff;font-weight:700;font-size:20px;text-decoration:none;padding:13px 16px 13px 30px;border-radius:var(--r-pill);box-shadow:var(--shadow-cta);transition:transform var(--dur-slow) var(--bz),box-shadow var(--dur-slow) var(--bz),background var(--dur-fast);border:none;cursor:pointer;font-family:var(--font-base)}
.cta .knob{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform var(--dur-slow) var(--bz);flex:none}
.cta:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:var(--shadow-cta-hover)}
.cta:hover .knob{transform:translate(-5px,-1px) scale(1.07)}
.cta:active{transform:scale(.985)}
.cta-lg{font-size:23px;padding:16px 18px 16px 36px}.cta-lg .knob{width:46px;height:46px}
.cta-ghost{background:transparent;color:var(--green-d);border:1.5px solid var(--line-2);box-shadow:none}
.cta-ghost .knob{background:oklch(54% .12 156 / .1)}
.cta-ghost:hover{background:transparent;border-color:var(--green);color:var(--green);box-shadow:none}

/* ── SIGNATURE · countdown (paper cards, tabular) ───────────────────────── */
.count{display:inline-flex;gap:10px;direction:ltr}
.count .u{background:var(--paper);border:1px solid var(--line);min-width:72px;padding:11px 8px;border-radius:var(--r-media);text-align:center;box-shadow:var(--shadow-sm)}
.count .u b{display:block;font-size:30px;line-height:1;color:var(--green-dd);font-variant-numeric:tabular-nums}
.count .u span{font-size:15.5px;letter-spacing:1px;color:var(--muted)}

/* ── SIGNATURE · double-bezel frame (video / media) ─────────────────────── */
.bezel{background:var(--grad-video);padding:clamp(10px,1.5vw,16px);border-radius:var(--r-card);box-shadow:var(--shadow);border:1px solid var(--line)}
.bezel-core{border-radius:var(--r-inner);overflow:hidden;box-shadow:var(--shadow-inner-bezel);border:1px solid var(--line-2);background:#000}

/* ── SIGNATURE · glass nav / chip (allowed blur use #1) ─────────────────── */
/* ── Nav — full-width glass top bar (v3.4.0). Container shared by every page that carries a nav; the link/scarce set inside is per-page. Non-hero tops add .nav-pad to clear it. ── */
.nav{position:fixed;top:var(--promo-h);inset-inline:0;z-index:55;background:var(--glass-bg);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));border-bottom:1px solid var(--glass-border);box-shadow:0 10px 30px -26px rgba(0,87,50,.3);transition:top var(--dur-base) var(--bz)}
.nav-in{max-width:var(--wrap-max);margin-inline:auto;min-height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px clamp(16px,4vw,40px)}
.nav-logo{height:38px;width:auto;display:block;flex:none}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px)}
.nav-link{color:var(--green-dd);font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;white-space:nowrap;transition:color var(--dur-fast) var(--bz)}
.nav-link:hover{color:var(--green)}
.nav-logo-link{display:flex;align-items:center;flex:none;text-decoration:none;border-radius:var(--r-el);transition:opacity var(--dur-fast) var(--bz)}
.nav-logo-link:hover{opacity:.72}
/* Promo announcement bar (v3.4.4) — forest strip above the bar; scrolls away on scroll (tiny JS toggles body.hdr-scrolled). Only on pages that include .promo-bar; body:has sets --promo-h so every offset follows. */
body:has(.promo-bar){--promo-h:42px}
.promo-bar{position:fixed;top:0;inset-inline:0;z-index:56;height:var(--promo-h);background:linear-gradient(180deg,#25473a,#153326);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;font-size:15.5px;font-weight:700;padding:0 16px;overflow:hidden;transition:transform var(--dur-base) var(--bz);text-shadow:0 1px 2px rgba(0,0,0,.25)} /* v3.4.6 — matte muted-green (breaker-scrim tone, not the metallic radial); bigger white text */
.promo-bar .promo-eb{color:var(--lime);font-weight:800}
.promo-bar a{color:inherit;text-decoration:none;white-space:nowrap;transition:opacity var(--dur-fast) var(--bz)} /* v3.4.8 — same font/weight/color/shadow as the sentence (inherits from .promo-bar); no underline, no box */
.promo-bar a:hover{opacity:.82}
.promo-short{display:none}
body.hdr-scrolled .promo-bar{transform:translateY(-100%)}
body.hdr-scrolled .nav{top:0}
/* Dropdown submenu (v3.4.4; v3.4.9 mobile change) — desktop hover/focus reveal of 3 curated articles; the toggle is an <a href="/articles/"> so a click/tap always reaches the full index. Mobile: dropdown hidden entirely, the link goes straight to /articles/ (no accordion). No JS. */
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-bottom:3px;opacity:.6;transition:transform var(--dur-fast) var(--bz)}
.nav-sub-toggle{display:inline-flex;align-items:center;gap:6px;border:0;margin:0;background:none;box-shadow:none} /* v3.4.5 — the toggle is a <label>; neutralize the WP theme's global label{display:block;border;margin} so it renders like a nav link (killed the stray line above "מאמרים מקצועיים"). */
.nav-sub-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-sub{position:absolute;top:calc(100% + 14px);inset-inline-start:50%;transform:translateX(50%) translateY(8px);min-width:230px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-inner);box-shadow:0 24px 50px -22px rgba(0,87,50,.4);padding:8px;opacity:0;visibility:hidden;transition:.25s var(--bz);z-index:60}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateX(50%) translateY(0)}
.nav-item:hover .nav-caret{transform:rotate(225deg)}
.nav-sub a{display:block;padding:10px 12px;border-radius:9px;color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:600;line-height:1.35;white-space:normal}
.nav-sub a:hover{background:var(--cream);color:var(--green-d)}
.nav-sub a.all{color:var(--green);border-top:1px solid var(--line);margin-top:4px;border-radius:0 0 9px 9px}
.nav-soon{display:none} /* menu item prepared but hidden until its page exists (e.g. וידאו) */
/* Nav search (v3.4.1) — magnifier toggles an inline field via a pure-CSS checkbox, no JS. */
.nav-search{display:inline-flex;align-items:center;position:relative}
.nav-search-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* visually hidden, still Tab/Space focusable */
.nav-search-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;cursor:pointer;color:var(--green-dd);transition:background var(--dur-fast) var(--bz);flex:none}
.nav-search-btn:hover{background:rgba(0,87,50,.08)}
.nav-search-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.nav-search-cb:focus-visible + .nav-search-btn{box-shadow:var(--focus-ring)}
.nav-search-form{width:0;min-width:0;overflow:hidden;transition:width var(--dur-base) var(--bz);display:flex} /* min-width:0 stops the flex item from keeping the input's intrinsic ~170px when collapsed */
.nav-search-cb:checked ~ .nav-search-form{width:min(220px,54vw)}
.nav-search-form input{width:100%;min-width:0;border:1px solid var(--glass-border);background:var(--paper);border-radius:var(--r-pill);padding:8px 15px;font-size:15px;font-family:var(--font-base);color:var(--ink);outline:none}
.nav-search-form input:focus{border-color:var(--green)}
/* Hamburger (v3.4.3) — mobile only, pure-CSS checkbox toggle. Hidden on desktop. */
.nav-toggle-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none}
.nav-pad{padding-top:var(--nav-clear)} /* first section on non-hero pages (articles, index) clears the fixed bar */
/* Desktop: center the whole cluster (logo + links) for link-navs only; scarce navs & all mobile stay space-between. */
@media(min-width:641px){ .nav-in:has(.nav-links){justify-content:center;gap:clamp(24px,3vw,44px)} } /* v3.4.8 — .nav-cta frame removed; "צרו קשר" is a plain nav link like the rest (class kept in markup, unstyled) */
@media(max-width:640px){
  :root{--nav-h:52px}
  .nav-in{padding:7px 16px}
  .nav-logo{height:30px}
  /* burger button (start side, opposite the logo) */
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;flex:none}
  .nav-burger span{display:block;height:2px;width:23px;background:var(--green-dd);border-radius:2px;transition:transform var(--dur-fast) var(--bz),opacity var(--dur-fast) var(--bz)}
  .nav-toggle-cb:focus-visible ~ .nav-burger{box-shadow:var(--focus-ring);border-radius:8px}
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* links collapse into a drop-down glass panel below the bar */
  body:has(.promo-bar){--promo-h:58px} /* v3.5.1 — mobile promo = 2 lines; --promo-h grows so nav/hero/menu offsets all follow, no hero overlap */
  .promo-full{display:inline}.promo-short{display:none}
  .promo-bar{flex-direction:column;justify-content:center;gap:2px;font-size:13px;line-height:1.2;padding:0 12px;text-align:center}
  .nav-links{position:fixed;top:calc(var(--promo-h) + var(--nav-h));inset-inline:0;flex-direction:column;align-items:stretch;gap:0;background:var(--glass-bg);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));box-shadow:0 22px 40px -22px rgba(0,87,50,.4);padding:0 20px;max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--bz),padding var(--dur-base) var(--bz),top var(--dur-base) var(--bz)}
  body.hdr-scrolled .nav-links{top:var(--nav-h)} /* promo scrolled away → panel rides up with the bar */
  .nav-toggle-cb:checked ~ .nav-links{max-height:calc(100dvh - var(--nav-h));padding:6px 20px 18px;overflow:auto}
  .nav-link{font-size:17px;width:100%;padding:14px 2px;justify-content:space-between}
  .nav-home{display:block} /* "בית" shown inside the panel (room here, unlike the inline bar) */
  /* v3.4.9 — mobile: "מאמרים מקצועיים" is a direct link to /articles/ — dropdown hidden, no accordion */
  .nav-item{display:block;width:100%}
  .nav-sub{display:none}
  .nav-caret{display:none}
  /* search: full-width field inside the panel, always open (no extra toggle) */
  .nav-search{display:flex;width:100%;padding-top:14px;position:static}
  .nav-search-btn{display:none}
  .nav-search-form{width:100%}
  .nav-search-form input{width:100%;font-size:16px}
}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--glass-bg);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);border-radius:var(--r-pill);padding:9px 16px;font-weight:700;color:var(--green-dd)}

/* ── Cards — paper on light, dark-glass on forest (NO shadow on forest) ─── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card-fixed);padding:30px;box-shadow:var(--shadow-sm)}
.card-dark{background:var(--glass-dark-bg);border:1px solid var(--glass-dark-border);border-radius:var(--r-card-fixed);padding:24px}

/* ── Lightbox (allowed blur use #3) ─────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:80;background:var(--lightbox-bg);backdrop-filter:blur(var(--blur-lightbox));-webkit-backdrop-filter:blur(var(--blur-lightbox));display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:min(700px,94vw);max-height:92vh;border-radius:var(--r-inner);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}

/* ══════════════════════════════════════════════════════════════════════════
   SIGNATURE · ATMOSPHERE (v3.2.0)
   Colour blocks alone read as flat. Depth comes from three things: the grain
   above, a full-bleed photographic BREAKER between sections, and real
   photography INSIDE a section. Every page from here on carries at least one.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SIGNATURE · full-bleed breaker — a breathing station ─────────────────
   One image, one scrim, one line. NEVER a background for a paragraph.       */
.breaker{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:0;min-height:clamp(340px,56vh,560px)}
.breaker-media{position:absolute;inset:0;overflow:hidden}
/* The photo keeps its own colour. A full duotone (grayscale + brand blend)
   was tested side by side and drains exactly the warmth that makes a photo
   read as expensive. The brand tie comes from the scrim, not from repainting
   the image. */
.breaker-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.05);transform:scale(1.1);transition:transform 2.2s var(--bz)}
.breaker.in .breaker-media img{transform:scale(1)}
.breaker-scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--breaker-scrim-top),var(--breaker-scrim-bot))}
.breaker-in{position:relative;z-index:3;text-align:center;margin:0 auto;padding:56px 24px;max-width:24ch}
/* A breaker is one punch, not a paragraph. Long copy balloons the section —
   keep the line short enough to hold at the clamp() maximum. */
.breaker-in p{margin:0;color:#fff;font-weight:700;line-height:1.24;letter-spacing:-.4px;text-wrap:balance;font-size:clamp(27px,4.1vw,46px);text-shadow:0 2px 30px var(--breaker-text-shadow)}
.breaker-in p .hl{display:block;color:var(--gold)}
.breaker-in .eyebrow{justify-content:center;margin:0 auto 18px;color:var(--on-forest-soft)}
.breaker-in .eyebrow::before,.breaker-in .eyebrow::after{background:var(--eyebrow-on-forest)}
@media(max-width:680px){.breaker{min-height:clamp(300px,48vh,420px)}.breaker-in{padding:48px 20px}}

/* .breaker-lines — authored line breaks (v3.2.1).
   GOTCHA worth knowing before you touch .breaker-in: its `24ch` cap is measured
   against the CONTAINER's 18px body font, NOT the ~46px headline inside it. The
   real column is therefore only ~256px wide and every line gets 5-7 characters.
   That is fine for a 3-4 word line, but a longer line explodes into a tower.
   When you want the copy to break exactly where you wrote it, put <br> in the
   markup, add this class, and the column widens just enough that nothing wraps
   past your break. Counter-intuitively this makes the section SHORTER (445px vs
   475px on the live dusk breaker) — controlled breaks beat a squeezed column. */
.breaker-in.breaker-lines{max-width:min(88vw,520px)}
.breaker-in.breaker-lines p{text-wrap:initial}

/* ── SIGNATURE · real photography inside a section ───────────────────────── */
.food-wide{position:relative;margin:34px 0 0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.food-wide img{width:100%;height:auto;display:block;aspect-ratio:16/7;object-fit:cover;transform:scale(1.06);transition:transform 1.8s var(--bz)}
.food-wide.in img{transform:scale(1)}
@media(max-width:680px){.food-wide img{aspect-ratio:4/3}}