/* ============================================================================
   Zvika HaNaturopath — articles.css v1.0.0
   Gap-filling layer for the static article pages: the /articles/ index grid and
   the individual article pages.

   Loads AFTER zv-ds.css?v=330 + webinar-landing.css?v=5 (same order as the
   homepage). Served from /wp-content/uploads/webinar/ds/articles.css?v=N —
   bump ?v= on EVERY edit or browsers serve a stale copy.

   Everything here is one of two things and nothing else:
     (a) a body-copy element zv-ds never styled at all. Audited 17/07/2026: the
         design system has ZERO rules for a, strong, em, ul, ol, li, blockquote,
         img, figure, iframe. It was built for landing pages, which have no prose.
         An article body is 90% those elements, so without this file `img` has no
         max-width:100% and a 927px-wide image blows straight out of a 760px
         column.
     (b) an articles-only component (.art-hero, .art-grid, .art-card, .art-rel).

   Iron laws honoured: orange is CTA-only (in-body links are green), 16px floor,
   tokens via var(--x), OKLCH inherited from zv-ds :root.
   ============================================================================ */


/* ── article header ───────────────────────────────────────────────────────────
   Side-by-side: title block + square poster. NOT a full-bleed cinematic hero.

   Why: every featured image on this site is a 1:1 social creative (1024–1254px)
   with the article title baked into the top of the artwork and, often, the logo
   baked into the bottom-left. Stretching that into a full-bleed 1920x600 band
   would upscale it past its pixels AND crop straight through both. Square is the
   only ratio that crops nothing, so the layout is built around the square rather
   than fighting it.

   The poster is deliberately kept smaller than the H1. The baked title then
   reads as cover art next to the real headline instead of competing with it as a
   second copy of the same sentence. ── */
.art-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(26px,4vw,54px);align-items:center}
@media(max-width:860px){.art-hero{grid-template-columns:1fr;gap:24px}}

/* --fs-h1-hero (clamp 33–58px), not --fs-h1 (clamp 44–66px): 66px is tuned for a
   short landing-page promise. Article titles here run to 54 characters
   ("איך לדעת בדקה אחת כמה שומן פנימי יש לך (מבחן פשוט)") and at 66px that wraps
   to four lines and pushes the poster off a laptop screen. */
.art-hero h1{font-size:var(--fs-h1-hero);margin:0 0 16px}

.art-hero-media{aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--cream-2)}
.art-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
/* The weekly poster is a link (it reads as a button: rounded, bordered, shadowed),
   so the anchor must fill the square or the img loses its height:100%.
   aria-hidden + tabindex=-1 in the markup: the title and CTA already carry the
   same href, so this must not become a third, nameless tab stop. */
.art-hero-media-link{display:block;width:100%;height:100%}
@media(max-width:860px){
  /* stacked: cap the square so it never eats a whole phone screen before the text */
  .art-hero-media{max-width:340px;margin-inline:auto}
}

.art-meta{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  color:var(--muted);font-size:var(--fs-small)}
.art-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:0 0 3px}
.art-meta time{font-variant-numeric:tabular-nums}


/* ── article body ─────────────────────────────────────────────────────────────
   Sits in .wrap.narrow (760px). --fs-body is the responsive body token that has
   existed in zv-ds since day one and was never used by a single page — body{}
   uses the fixed --fs-body-ui:19px instead. A long-form reading column is
   exactly what --fs-body was drawn for: at its 23px ceiling in a 760px column it
   lands at roughly 66 characters per line, inside the 60–75 comfort band. ── */
.article-body{font-size:var(--fs-body);line-height:var(--lh-body)}

/* zv-ds ships p{margin-bottom:14px}. At 14px on 23px/1.7 text the paragraph gap
   is thinner than the line gap inside a paragraph, so paragraphs visually fuse
   into one slab. 1.15em restores the beat. */
.article-body p{margin:0 0 1.15em;color:var(--ink-soft)}
.article-body>*:last-child{margin-bottom:0}

/* Headings are scoped DOWN. zv-ds h2 is clamp(31px,4.8vw,54px) — correct for a
   full-width section banner, absurd for a sub-heading inside a 760px reading
   column, where 54px is wider than the words it labels. These articles carry up
   to 26 headings each (passover-glycemic-balance), so the scale has to behave
   like a document, not a poster. */
.article-body h2{font-size:clamp(26px,3vw,34px);margin:1.7em 0 .5em;line-height:1.25}
.article-body h3{font-size:var(--fs-h3);margin:1.5em 0 .4em}
.article-body h2:first-child,.article-body h3:first-child{margin-top:0}

/* Links are GREEN, never orange — iron law 1 reserves orange for the CTA alone.
   Underline is kept (it is the only affordance in a wall of prose) but softened
   to 40% so 29 links across the corpus don't read as a rash. */
.article-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:oklch(54% .12 156/.4);
  transition:color var(--dur-fast) var(--bz),text-decoration-color var(--dur-fast) var(--bz)}
.article-body a:hover{color:var(--green-d);text-decoration-color:currentColor}

/* strong carries weight, not colour. 275 instances across 11 articles — colouring
   them would turn every page into confetti. Darkening to --ink against the
   --ink-soft body is the whole signal. */
.article-body strong{font-weight:700;color:var(--ink)}

.article-body ul,.article-body ol{margin:0 0 1.15em;padding-inline-start:1.5em}
.article-body li{margin-bottom:.5em}
.article-body li::marker{color:var(--green);font-weight:700}
.article-body li>ul,.article-body li>ol{margin:.5em 0 0}

/* blockquote does two unrelated jobs in this corpus and must survive both:
   a plain pull-quote, and a photo testimonial (an <img> nested inside the
   quote, in gum-diabetes). So: no text-only assumptions, no ::before glyph. */
.article-body blockquote{margin:1.6em 0;padding:20px 24px;background:var(--cream-2);
  border-inline-start:3px solid var(--green);border-radius:var(--r-el)}
.article-body blockquote>*:last-child{margin-bottom:0}
.article-body blockquote img{margin:0 0 10px}

/* THE one rule that matters most on this page. zv-ds has no global img{} at all;
   every img rule in the system is scoped to a component. In-body images here
   carry hard width attributes up to 927px, which is 167px wider than the column.
   Without max-width:100% they overflow horizontally on every article that has a
   picture, and the page scrolls sideways on a phone. */
.article-body img{max-width:100%;height:auto;display:block;border-radius:var(--r-media)}
.article-body p:has(>img){margin:1.6em 0}
.article-body img.aligncenter{margin-inline:auto}

/* The three calculators. Each iframe carries its own hard height attribute
   (900 / 1150 / 760) and an inline max-width:720px — both are deliberate and
   per-instance, so this only supplies the responsive width the inline style
   can't express. The inline max-width wins over this rule by specificity, which
   is the intended outcome. */
.article-body iframe{width:100%;border:0;display:block;margin:24px auto;
  border-radius:var(--r-media)}

/* WordPress emits <p> wrappers around bare images and iframes. Those p's are
   text-empty but content-full — this keeps their spacing sane without the build
   script having to unwrap them. */
.article-body p:has(>iframe){margin:1.6em 0}


/* ── breaker copy override ────────────────────────────────────────────────────
   Iron law 11: no page without atmosphere. Five of the eleven articles
   (coffee-acrylamide-paradox, visceral-fat, triglycerides-diet,
   resistant-starch, passover-glycemic-balance) contain zero images and are pure
   text from top to bottom — they need the breath more than any landing page
   does. Placed after the read, before "what next", which is the documented
   narrative beat for it. ── */
.art-breaker .breaker-in p{max-width:none}


/* ── index grid ───────────────────────────────────────────────────────────────
   1:1 thumbs. This is not a style preference: the sources are exactly square and
   carry baked-in titles at the top and a baked-in logo at the bottom, so any
   other ratio cover-crops one of them away. 1/1 on a 1/1 source crops zero. ── */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,30px);
  list-style:none;margin:0;padding:0}
@media(max-width:980px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.art-grid{grid-template-columns:1fr}}

.art-card{position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card-fixed);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--bz),box-shadow var(--dur-base) var(--bz)}
/* -4px lift + --shadow on hover: the documented card interaction (§5). */
.art-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

.art-card-thumb{aspect-ratio:1/1;overflow:hidden;background:var(--cream-2);
  border-bottom:1px solid var(--line)}
.art-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--bz)}
.art-card:hover .art-card-thumb img{transform:scale(1.03)}

.art-card-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;gap:10px}
.art-card h2{font-family:var(--font-base);font-weight:600;color:var(--color-heading);
  font-size:var(--fs-h3);line-height:var(--lh-h3);margin:0}
.art-card p{margin:0;color:var(--ink-soft);font-size:var(--fs-small);line-height:1.6;flex:1}

/* Stretched link: the whole card is the target, but the <a> still wraps only the
   title, so a screen reader announces the title as the link text rather than
   "link, card". */
.art-card a.art-card-link::after{content:'';position:absolute;inset:0;z-index:1}
.art-card a.art-card-link{color:inherit;text-decoration:none}
.art-card:focus-within{box-shadow:var(--focus-ring),var(--shadow)}
.art-card a.art-card-link:focus-visible{outline:none}

.art-card-meta{display:flex;align-items:center;gap:8px;color:var(--muted);
  font-size:var(--fs-small);margin-top:auto;padding-top:4px}
.art-card-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:0 0 3px}


/* ── related articles ─────────────────────────────────────────────────────── */
.art-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);
  list-style:none;margin:0;padding:0}
@media(max-width:780px){.art-rel{grid-template-columns:1fr}}
.art-rel .art-card-thumb{aspect-ratio:1/1}
.art-rel .art-card-body{padding:16px 18px 18px}
.art-rel .art-card h2{font-size:19px}


/* ── back link ───────────────────────────────────────────────────────────── */
.art-back{display:inline-flex;align-items:center;gap:8px;color:var(--green);
  font-weight:600;font-size:var(--fs-small);text-decoration:none;margin-bottom:18px}
.art-back:hover{color:var(--green-d)}
.art-back .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}


/* ── page hero (index) ────────────────────────────────────────────────────────
   Cinematic full-bleed header, replacing the plain "מאמרים" title block. The
   forest-at-dawn photo is atmo-forest from the brand's own atmosphere set (iron
   law 12: natural colour, no duotone) — the same shot the design system already
   uses as a breaker, so this reads as brand, not stock. The image is dark at the
   left/right edges (tree trunks) and luminous at the centre, so a bottom-weighted
   scrim carries the cream copy without fighting the light.

   Deliberately NOT an .rv reveal: this is above the fold, and starting it at
   opacity:0 would flash on first paint. It appears immediately; the grid below
   keeps the reveal. ── */
.art-pagehead{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;min-height:clamp(360px,52vh,520px)}
.art-pagehead-media{position:absolute;inset:0;z-index:-2}
.art-pagehead-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Bottom-heavy scrim in forest-green ink (not neutral black — iron law 4/5):
   strong under the copy, a light lift at top so the glass nav stays legible. */
.art-pagehead-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    oklch(20% .04 159/.82) 0%,
    oklch(22% .045 159/.26) 52%,
    oklch(20% .04 159/.42) 100%)}
.art-pagehead .wrap{width:100%;
  padding-top:clamp(96px,14vh,140px);padding-bottom:clamp(30px,5.5vh,58px)}
.art-pagehead-copy{max-width:680px}
/* Cream, not the green heading colour zv-ds gives h1 — the copy sits on a photo.
   OSHC display face is inherited from the base h1 rule. */
.art-pagehead h1{color:#fdfcf7;margin:0 0 10px;font-size:var(--fs-h1-hero);
  text-shadow:0 2px 24px oklch(20% .04 159/.55)}
.art-pagehead .byline{color:oklch(93% .02 145);font-size:var(--fs-lead);
  font-weight:500;margin:0;text-shadow:0 1px 14px oklch(20% .04 159/.6)}


/* ── article-page hero (reuses .art-pagehead) ─────────────────────────────────
   The single-article header is the SAME full-bleed banner + scrim as the index,
   just with a per-article topical photo (no baked-in title), the article title as
   H1, the "מאת צביקה ראובן" byline, and a date / reading-time row. This replaces
   the old side-by-side layout where the square social-poster (title baked in)
   competed with the H1. ── */
.art-pagehead .art-back{color:#fdfcf7;margin:0 0 16px;text-shadow:0 1px 10px oklch(20% .04 159/.6)}
.art-pagehead .art-back:hover{color:var(--lime)}
.art-pagehead .art-back .ic{stroke:currentColor}
/* Article titles run to ~54 chars, far longer than "מאמרים מקצועיים" — widen the
   copy column so they wrap to 2–3 lines instead of a narrow tower. */
.art-pagehead.is-article .art-pagehead-copy{max-width:760px}
.art-pagehead .art-meta{margin-top:15px;color:oklch(90% .02 145);
  text-shadow:0 1px 10px oklch(20% .04 159/.6)}
.art-pagehead .art-meta .sep{background:oklch(90% .02 145/.55)}


/* ── uniform article CTA + bio ─────────────────────────────────────────────── */
.art-cta{text-align:center;padding:clamp(28px,4vw,44px)}
.art-cta h2{font-size:clamp(26px,3vw,34px);margin:0 0 16px;color:var(--green-dd)}
.art-cta p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);
  margin:0 0 14px;text-align:start}
/* Symmetric gap around the orange button: zero the trailing paragraph's own
   margin so the ONLY space above the button is .cta's margin-top, then match it
   to the note's margin-top below. 30px above == 30px below. */
.art-cta p:has(+ .cta){margin-bottom:0}
.art-cta .cta{margin:30px auto 0}
/* p.art-cta-note (0,2,1) must out-specify .art-cta p (0,1,1) — otherwise the
   generic body-paragraph rule wins and the note loses its margin-top, size,
   colour and centring. */
.art-cta p.art-cta-note{font-size:var(--fs-small);color:var(--muted);margin:30px 0 0;text-align:center}
.art-cta-note a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.art-bio{margin:26px 0 0;padding:26px 4px 0;border-top:1px solid var(--line)}
.art-bio h3{font-size:var(--fs-h3);color:var(--green-dd);margin:0 0 10px}
.art-bio p{font-size:var(--fs-body);color:var(--ink-soft);margin:0 0 10px}
.art-bio ul{margin:0 0 12px;padding-inline-start:1.3em;list-style:disc}
.art-bio li{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.6;margin-bottom:8px}
.art-bio li::marker{color:var(--green)}
.art-bio-sign{color:var(--muted);font-style:normal}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .art-card,.art-card-thumb img,.article-body a{transition:none}
  .art-card:hover{transform:none}
  .art-card:hover .art-card-thumb img{transform:none}
}


/* ── article of the week (index) ──────────────────────────────────────────────
   Reuses .art-hero (side-by-side title + square poster, built 18/07 for the
   article-page header and never shipped once .art-pagehead replaced it there).
   One rotating slot above the grid so every reel funnels to a single, obvious
   read — the grid below stays the full archive, unchanged. h2 not h1: the page
   already has its H1 in .art-pagehead above. ── */
.art-week{padding:clamp(40px,6vw,64px) 0}
.art-week .art-hero{align-items:center}
.art-week-link{color:inherit;text-decoration:none}
.art-week-title{font-size:var(--fs-h1-hero);line-height:1.15;margin:0 0 16px}
.art-week-title a{color:inherit;text-decoration:none}
.art-week-title a:hover{color:var(--green)}
.art-week-excerpt{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.6;margin:0 0 20px}
.art-week .art-meta{margin-bottom:28px}

/* ── תוכן עניינים ─────────────────────────────────────────────────────────────
   נוסף 20.08.2026. מקופל כברירת מחדל בכל רוחב מסך (החלטת צביקה): רשימה פתוחה של
   11 שורות מעל ה-h2 הראשון דוחפת את שורת הפתיחה של המאמר מתחת לקיפול.

   details/summary = אפס JavaScript. העוגנים שבפנים נמצאים ב-DOM גם כשסגור, גוגל
   סורק אותם, ולחיצה על קישור חיצוני ל-#faq פותחת את הבלוק אוטומטית (הדפדפן חייב
   לפתוח details כדי להגיע ליעד עוגן שבתוכו).

   scroll-margin-top הוא כל הטריק: הבר העליון קבוע (position:fixed), ובלעדיו כל
   קפיצה לעוגן נוחתת כשהכותרת מוסתרת מתחתיו. --nav-clear כבר סופר promo+bar.
   html{scroll-behavior:smooth} כבר קיים ב-zv-ds, אז הגלילה החלקה מגיעה בחינם.  */

/* p[id] כלול בשביל פסקת המקורות, שנשארת פסקה ולא הופכת לכותרת.
   הכלל לא מוגבל ל-.article-body בכוונה: ב-tyg-index-1 כותרת המחשבון יושבת
   בסקשן משלה מחוץ לגוף, וסלקטור צר יותר היה משאיר אותה בלי מרווח מהבר הצף.
   articles.css נטען רק בעמודי מאמר, וכל h2/h3/p עם id שם הוא יעד עוגן. */
h2[id],h3[id],p[id],.art-anchor{scroll-margin-top:var(--nav-clear)}

/* כותרת המחשבון ב-tyg-index-1 יושבת 90px בתוך כרטיס, מתחת ל-eyebrow "מחשבון".
   נחיתה על הכותרת עצמה הייתה חותכת את ראש הכרטיס, ולכן העוגן מקבל את המרחק
   הזה בחזרה ונוחת על הכרטיס כולו. נמדד בדפדפן, לא הוערך. */
.tyg-calc__title[id]{scroll-margin-top:calc(var(--nav-clear) + 104px)}

.article-body>.art-toc:first-child{margin-top:0}
.art-toc{margin:1.9em 0;border:1px solid var(--line);border-radius:var(--r-card-fixed);
  background:var(--paper);box-shadow:var(--shadow-sm);overflow:hidden}

.art-toc summary{display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 20px;font-family:var(--font-display);font-size:var(--fs-body-ui);
  color:var(--green-dd);list-style:none;-webkit-tap-highlight-color:transparent}
.art-toc summary::-webkit-details-marker{display:none}
.art-toc summary:hover{background:var(--cream-2)}
.art-toc summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* החץ מצויר ב-CSS ומתהפך בפתיחה. margin-inline-start:auto דוחף אותו לקצה ההפוך,
   כלומר לשמאל ב-RTL. גבולות פיזיים בכוונה: border-inline-end מתהפך ב-RTL ויוצר חץ שמצביע הצידה
   במקום למעלה. חץ הוא צורה, לא טקסט, ואין לו כיוון קריאה. */
.art-toc summary::after{content:"";flex:0 0 auto;width:9px;height:9px;
  margin-inline-start:auto;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--dur-fast) var(--bz)}
.art-toc details[open] summary::after{transform:rotate(-135deg) translateY(3px)}

.art-toc .art-toc-list{margin:0;padding:6px 20px 16px;list-style:none;counter-reset:toc;
  border-top:1px solid var(--line)}
.art-toc-list li{margin:0;counter-increment:toc}
.art-toc-list a{display:flex;align-items:baseline;gap:11px;padding:8px 10px;
  margin-inline:-10px;border-radius:var(--r-el);
  font-size:var(--fs-body-ui);line-height:1.45;color:var(--ink-soft);
  text-decoration:none;transition:background var(--dur-fast) var(--bz),color var(--dur-fast) var(--bz)}
.art-toc-list a::before{content:counter(toc);flex:0 0 1.5em;
  font-size:var(--fs-small);font-weight:700;color:var(--line-2);
  font-variant-numeric:tabular-nums}
.art-toc-list a:hover{background:var(--cream-2);color:var(--green-d)}
.art-toc-list a:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* שורת המחשבון — זה מה שרוב הקוראים מחפשים, אז היא השורה הכי בולטת ברשימה.
   בלי תג: מאז 20.08 השם עצמו אחיד ומתחיל ב"מחשבון" בכל ארבעת המקומות, ותג
   היה חזרה מיותרת על אותה מילה באותה שורה.
   ירוק בלבד: כלל הברזל שומר את הכתום ל-CTA ולו בלבד. */
.art-toc-list .is-calc a{background:var(--tint-green);color:var(--green-d);font-weight:700}
.art-toc-list .is-calc a::before{color:var(--green)}
.art-toc-list .is-calc a:hover{background:#d3f2cf}

/* שורת המקורות — לא פרק אלא שורת ניווט, ולכן בלי מספר ומופרדת בקו דק. אחרת
   הכותרת אומרת "7 פרקים" והרשימה ממוספרת עד 8. */
.art-toc-list .is-sources{counter-increment:none}
.art-toc-list .is-sources a{color:var(--muted);font-size:var(--fs-small);
  margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.art-toc-list .is-sources a::before{content:none}
.art-toc-list .is-sources a:hover{background:transparent;color:var(--green-d);
  text-decoration:underline;text-underline-offset:3px}

/* שורת השאלות הנפוצות — מודגשת, בלי תג. */
.art-toc-list .is-faq a{color:var(--green-d);font-weight:700}
.art-toc-list .is-faq a::before{color:var(--green)}

@media(max-width:640px){
  .art-toc summary{padding:13px 16px;gap:8px}
  .art-toc .art-toc-list{padding:4px 16px 14px}
  .art-toc-list a{font-size:17px;padding:8px}
}