/* ===== פורטל השתלת קרנית — design system =====
   Mobile-first, RTL Hebrew. Edit CSS variables below to re-theme.
   Palette: deep teal (vs. pterygium's steel blue) — same medical-portal feel,
   distinct identity. */

@font-face {
  font-family: 'Heebo';
  src: url('/assets/fonts/heebo-hebrew.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  src: url('/assets/fonts/heebo-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  --c-primary: #0e7280;
  --c-primary-dark: #094c56;
  --c-primary-light: #e6f4f6;
  --c-accent: #b25e09;
  --c-wa: #25d366;
  --c-wa-dark: #128c4a;
  --c-text: #1a2c30;
  --c-text-soft: #46626a;
  --c-bg: #ffffff;
  --c-bg-alt: #f3f9fa;
  --c-border: #d5e6e9;
  --font-scale: 1;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(14, 114, 128, 0.10);
  --maxw: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--font-scale));
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: 'Heebo', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  text-align: start;
  /* room for the fixed mobile CTA bar */
  padding-bottom: 64px;
}

img { max-width: 100%; height: auto; }
a { color: var(--c-primary); }
a:hover { color: var(--c-primary-dark); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -48px; inset-inline-end: 8px; z-index: 300;
  background: var(--c-primary); color: #fff; padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius); transition: top 0.15s;
}
.skip-link:focus { top: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.65rem 1.4rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
  font-size: 1rem; font-family: inherit; transition: background 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn-wa { background: var(--c-wa); color: #fff; }
.btn-wa:hover { background: var(--c-wa-dark); color: #fff; }
.btn-lg { padding: 0.85rem 1.8rem; font-size: 1.1rem; }
.btn-block { width: 100%; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--c-bg); border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 6px rgba(14, 114, 128, 0.06);
}
.header-inner {
  display: flex; align-items: center; gap: 1rem; min-height: 60px;
}
.logo {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.15rem; font-weight: 700; color: var(--c-primary-dark);
  text-decoration: none; margin-inline-end: auto;
}
.logo-eye { color: var(--c-primary); flex-shrink: 0; }
.header-phone {
  display: none; align-items: center; gap: 0.4rem;
  background: var(--c-primary); color: #fff; font-weight: 600;
  padding: 0.45rem 1rem; border-radius: 999px; text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { background: var(--c-primary-dark); color: #fff; }
.nav-toggle {
  background: none; border: 0; color: var(--c-primary-dark);
  padding: 0.4rem; cursor: pointer; border-radius: 6px;
}
/* Language menu — globe pill that opens a list of all site languages.
   Scoped tightly so it beats the generic `.site-nav a` rules. */
.lang-menu { position: relative; }
.lang-list {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 210;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.3rem; margin: 0; list-style: none;
  min-width: 150px;
}
.lang-list[hidden] { display: none; }
.lang-list li { margin: 0; }
.site-nav .lang-list a,
.lang-list a {
  display: block; padding: 0.45rem 0.75rem; border-radius: 6px;
  text-decoration: none; color: var(--c-text); font-weight: 500;
  font-size: 0.9rem; white-space: nowrap; text-align: start; background: transparent;
}
.site-nav .lang-list a:hover,
.lang-list a:hover { background: var(--c-primary-light); color: var(--c-primary); }
.site-nav .lang-list a.active,
.lang-list a.active { color: var(--c-primary-dark); font-weight: 700; background: var(--c-bg-alt); }
.lang-caret { opacity: 0.7; }
.lang-switch[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.site-nav .lang-item .lang-switch,
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  border: 1.5px solid var(--c-border); border-radius: 999px;
  padding: 0.32rem 0.85rem; color: var(--c-primary-dark);
  text-decoration: none; background: transparent;
  font-family: inherit; cursor: pointer;
}
.site-nav .lang-item .lang-switch:hover,
.lang-switch:hover {
  border-color: var(--c-primary); color: var(--c-primary); background: transparent;
}
.lang-switch svg { flex-shrink: 0; }
/* In the stacked mobile menu, give the pill breathing room and don't stretch it */
.site-nav .lang-item { margin-block-start: 0.9rem; padding-inline: 1.25rem; }
@media (min-width: 1000px) {
  .site-nav .lang-item { margin-block-start: 0; padding-inline: 0; margin-inline-start: 0.5rem; display: flex; align-items: center; }
}
.site-nav { display: none; }
.site-nav.open {
  display: block; position: absolute; top: 100%; inset-inline: 0;
  background: var(--c-bg); border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow);
}
.site-nav ul { list-style: none; margin: 0; padding: 0.5rem 0; }
.site-nav a {
  display: block; padding: 0.6rem 1.25rem; text-decoration: none;
  color: var(--c-text); font-weight: 500;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--c-primary); background: var(--c-primary-light); }

@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .nav-toggle { display: none; }
  .header-phone { display: inline-flex; }
  .site-nav { display: block; }
  .site-nav.open { position: static; border: 0; box-shadow: none; }
  .site-nav ul { display: flex; gap: 0.1rem; padding: 0; }
  .site-nav a { padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.95rem; }
  .mobile-cta { display: none; }
}

/* ===== Hero (homepage) ===== */
.hero {
  background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
  color: #fff; padding: 2.5rem 0 2.75rem;
}
/* Portrait WIDTH; the height follows the image's own aspect. Deliberately
   restrained: the only headshot in the archive is 325×500, so a much larger box
   would upscale and look soft — worst on the high-DPI screens most visitors
   use. When a ≥1200px headshot arrives, raise these two values; nothing else
   needs to change. */
.hero-inner { --hero-portrait: 90px; }
/* One element, repositioned by grid areas: beside the headline on a phone,
   opposite the text from 900px. Logical column order means RTL puts the text
   on the reading side and the portrait opposite it, automatically. */
.hero-inner {
  display: grid; column-gap: 1rem; align-items: center;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "portrait title"
    "sub      sub"
    "ctas     ctas"
    "trust    trust";
}
.hero-portrait {
  grid-area: portrait; align-self: center;
  /* Rounded rectangle in the image's OWN aspect — height:auto, no object-fit,
     so the whole 325×500 frame is shown: head intact, shoulders and suit
     visible. A circle cropped this to a square and threw both away, reading as
     a zoomed-in face rather than a portrait. Keeping the natural aspect also
     means a future headshot of any proportion displays uncropped. */
  width: var(--hero-portrait); height: auto;
  border-radius: 14px;
  /* soft ring + shadow: the photo's off-white studio background would otherwise
     read as a pasted rectangle against the teal gradient */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28), 0 10px 24px rgba(0, 0, 0, 0.3);
  background: #fff;
}
.hero h1 { grid-area: title; }
.hero-sub { grid-area: sub; }
.hero-ctas { grid-area: ctas; }
.hero-trust { grid-area: trust; }
.hero h1 { font-size: 1.7rem; line-height: 1.35; margin: 0 0 0.75rem; font-weight: 700; }
.hero-sub { font-size: 1.1rem; margin: 0 0 1.5rem; opacity: 0.92; max-width: 42em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; }
.hero-trust li {
  font-size: 0.9rem; opacity: 0.95; display: flex; align-items: center; gap: 0.4rem;
}
.hero-trust li::before { content: '✓'; font-weight: 700; color: #7fd6ac; }
@media (min-width: 700px) {
  .hero h1 { font-size: 2.2rem; }
}
/* Tablet and desktop: the portrait moves to its own column spanning the full
   block, on the side opposite the text. Uses the stylesheet's existing 700px
   breakpoint rather than inventing another one. */
@media (min-width: 700px) {
  .hero-inner {
    --hero-portrait: 130px;   /* → 200px tall at the source's 325:500 aspect */
    column-gap: 2.5rem;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title portrait"
      "sub   portrait"
      "ctas  portrait"
      "trust portrait";
  }
  .hero-portrait { align-self: center; }
}

/* ===== Article ===== */
.article-header {
  background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border);
  padding: 1.75rem 0;
}
.article-header h1 { margin: 0; font-size: 1.65rem; line-height: 1.3; color: var(--c-primary-dark); }
.article-meta { margin: 0.5rem 0 0; color: var(--c-text-soft); font-size: 0.92rem; }
.article-layout { padding: 1.5rem 0 2.5rem; }
.article-body { max-width: 46em; margin-inline: auto; }
.article-body h2 { font-size: 1.4rem; color: var(--c-primary-dark); margin: 2em 0 0.5em; line-height: 1.35; }
.article-body h3 { font-size: 1.15rem; color: var(--c-primary-dark); margin: 1.75em 0 0.5em; }
.article-body figure { margin: 1.5em auto; text-align: center; }
.article-body figure img { border-radius: var(--radius); box-shadow: var(--shadow); }
.article-body figcaption { font-size: 0.85rem; color: var(--c-text-soft); margin-top: 0.5em; }
.article-body table {
  border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: 0.95rem;
  display: block; overflow-x: auto;
}
.article-body th, .article-body td { border: 1px solid var(--c-border); padding: 0.5rem 0.75rem; }
.article-body th { background: var(--c-primary-light); }
.article-body blockquote {
  margin: 1.5em 0; padding: 0.75em 1.25em; border-inline-start: 4px solid var(--c-primary);
  background: var(--c-bg-alt); border-radius: 0 var(--radius) var(--radius) 0;
}

/* Illustrations (SVG diagrams). The embedded labels are small, so on narrow
   screens the figure itself pans horizontally rather than shrinking the
   diagram into illegibility — and the page never overflows. */
.article-body .illustration {
  margin: 1.75em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-body .illustration img {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.article-body .illustration figcaption {
  font-size: 0.85rem; color: var(--c-text-soft); margin-top: 0.5em; text-align: center;
}

/* Table of contents */
.toc {
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.toc-title { font-weight: 700; margin: 0 0 0.5rem; color: var(--c-primary-dark); }
.toc ol { margin: 0; padding-inline-start: 1.25rem; columns: 1; }
.toc li { margin-bottom: 0.25rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (min-width: 700px) { .toc ol { columns: 2; column-gap: 2rem; } }

/* FAQ */
.faq { margin: 2.5rem 0 1rem; }
.faq h2 { font-size: 1.4rem; color: var(--c-primary-dark); margin-bottom: 1rem; }
.faq-item {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  margin-bottom: 0.6rem; background: var(--c-bg-alt); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 0.9rem 1.1rem; font-weight: 600; color: var(--c-primary-dark);
  list-style: none; position: relative; padding-inline-end: 2.2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; inset-inline-end: 1.1rem; top: 50%;
  transform: translateY(-50%); font-size: 1.3rem; color: var(--c-primary);
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 1.1rem 1rem; color: var(--c-text-soft); }
.faq-answer p:first-child { margin-top: 0; }

/* In-article CTA */
.article-cta {
  background: var(--c-primary-light); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.5rem; margin: 2.5rem 0 1.5rem;
  text-align: center;
}
.article-cta-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 1rem; color: var(--c-primary-dark); }
.article-cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Author block */
/* First-person note from the surgeon, near the top of the homepage. Set apart
   from the encyclopedic body copy by a start-edge rule, so it reads as a voice
   rather than more article text. */
.surgeon-note {
  border-inline-start: 4px solid var(--c-primary);
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin: 1.75rem 0;
  font-size: 1.03rem;
}
.surgeon-note p { margin: 0; }

.author-block {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.25rem; margin: 1.5rem 0; background: var(--c-bg-alt);
}
/* object-position at the top edge: this is a round avatar by design, but the
   crop must never clip the crown of the head — it takes from the bottom. */
.author-photo { border-radius: 50%; object-fit: cover; object-position: 50% 0; flex-shrink: 0; }
.author-photo-placeholder {
  width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-light); color: var(--c-primary);
}
.author-reviewed { margin: 0; font-size: 0.85rem; color: var(--c-text-soft); }
.author-name { margin: 0.15rem 0; font-weight: 700; font-size: 1.1rem; color: var(--c-primary-dark); }
.author-creds { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; font-size: 0.9rem; color: var(--c-text-soft); }
.author-creds li { margin-bottom: 0.1rem; }
.author-more { font-size: 0.9rem; font-weight: 600; text-decoration: none; }

/* ===== Blog listing ===== */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.post-card {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; background: var(--c-bg); box-shadow: var(--shadow);
}
.post-card h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.post-card h2 a { text-decoration: none; color: var(--c-primary-dark); }
.post-card h2 a:hover { color: var(--c-primary); }
.post-card time { color: var(--c-text-soft); font-size: 0.85rem; }
.post-card p { margin: 0.5rem 0 0; color: var(--c-text-soft); }
@media (min-width: 700px) { .post-list { grid-template-columns: 1fr 1fr; } }

/* ===== Latest articles (homepage) ===== */
.latest { margin: 2.5rem 0 1rem; }
.latest h2 { font-size: 1.4rem; color: var(--c-primary-dark); margin-bottom: 1rem; }
.latest .post-card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.latest .post-card h3 a { text-decoration: none; color: var(--c-primary-dark); }
.latest .post-card h3 a:hover { color: var(--c-primary); }
.post-more { display: inline-block; margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; }

/* ===== Lead form section ===== */
.lead-section {
  background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
  color: #fff; padding: 2.5rem 0; margin-top: 2rem;
}
.lead-inner { display: grid; gap: 2rem; }
.lead-text h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.lead-text p { margin: 0 0 1rem; opacity: 0.92; }
.lead-trust { list-style: none; margin: 0; padding: 0; }
.lead-trust li { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; font-size: 0.95rem; }
.lead-trust li::before { content: '✓'; color: #7fd6ac; font-weight: 700; }
.lead-form {
  background: #fff; color: var(--c-text); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow); max-width: 420px;
}
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.95rem; }
.form-field input {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--c-border);
  border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; color: var(--c-text);
}
.form-field input:focus { border-color: var(--c-primary); outline: 2px solid var(--c-primary-light); }
/* Honeypot: hidden from humans but present for bots. Uses the visually-hidden
   clip technique — NOT off-screen offset, which extends the scroll region and
   caused horizontal overflow (leftward in RTL). */
.hp-field {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.form-status { min-height: 1.5em; margin: 0.5rem 0 0; font-weight: 600; }
.form-status.ok { color: var(--c-accent); }
.form-status.err { color: #c0392b; }
.form-alt { font-size: 0.9rem; margin: 0.5rem 0 0; color: var(--c-text-soft); }
@media (min-width: 800px) {
  .lead-inner { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ===== Footer ===== */
.site-footer { background: #0b2a3d; color: #cfe2ee; padding: 2.5rem 0 1rem; }
.site-footer a { color: #9fc9e3; }
.footer-grid { display: grid; gap: 2rem; }
.footer-title { font-size: 1.05rem; color: #fff; margin: 0 0 0.6rem; }
.footer-nav, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-nav li, .footer-contact li { margin-bottom: 0.35rem; }
.footer-nav a, .footer-contact a { text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { text-decoration: underline; }
.footer-disclaimer { font-size: 0.85rem; opacity: 0.75; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 2rem; padding-top: 1rem; font-size: 0.85rem; opacity: 0.8; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ===== Mobile CTA bar ===== */
.mobile-cta {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 250;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: #fff; border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.12);
}
.mcta {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 10px; text-decoration: none; font-size: 0.78rem; font-weight: 600;
}
.mcta-call { color: var(--c-primary); }
.mcta-wa { color: var(--c-wa-dark); }
.mcta-form { color: var(--c-accent); }
@media (min-width: 1000px) { .mobile-cta { display: none; } }

/* ===== Accessibility widget ===== */
/* z-index below .mobile-cta (250) so the call/WhatsApp bar always stays on top */
.a11y { position: fixed; top: 40%; inset-inline-start: 0; z-index: 240; }
.a11y-toggle {
  background: var(--c-primary); color: #fff; border: 0; cursor: pointer;
  padding: 0.6rem; border-radius: 0 8px 8px 0; display: flex;
}
.a11y-panel {
  position: absolute; top: 0; inset-inline-start: 100%; margin-inline-start: 4px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.75rem; width: 190px;
  display: flex; flex-direction: column; gap: 0.25rem;
  /* never reach the bottom CTA bar: widget starts at 40vh, bar is ~64px,
     so cap at the remaining space minus a margin; scroll inside */
  max-height: calc(60vh - 80px); overflow-y: auto;
}
/* the hidden attribute must always win over display:flex above */
.a11y-panel[hidden] { display: none; }
.a11y-title { font-weight: 700; margin: 0 0 0.25rem; font-size: 0.95rem; }
.a11y-panel button {
  background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 6px;
  padding: 0.4rem 0.6rem; font-family: inherit; font-size: 0.88rem; cursor: pointer;
  text-align: start; color: var(--c-text);
}
.a11y-panel button:hover { background: var(--c-primary-light); }
.a11y-panel button[aria-pressed="true"] { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.a11y-panel a { font-size: 0.85rem; margin-top: 0.25rem; }

/* Accessibility modes (classes set on <html>) */
.a11y-grayscale body { filter: grayscale(1); }
.a11y-negative body { filter: invert(1) hue-rotate(180deg); }
.a11y-negative body img, .a11y-negative body video { filter: invert(1) hue-rotate(180deg); }
.a11y-high-contrast { --c-text: #000; --c-text-soft: #1a1a1a; --c-primary: #003a63; --c-primary-dark: #002540; --c-border: #555; }
.a11y-light-bg { --c-bg: #fff; --c-bg-alt: #fff; --c-primary-light: #fff; }
.a11y-light-bg .hero, .a11y-light-bg .lead-section { background: #fff; color: var(--c-text); }
.a11y-light-bg .hero a.btn, .a11y-light-bg .lead-section a { color: var(--c-primary); }
.a11y-underline a { text-decoration: underline !important; }
.a11y-readable body, .a11y-readable body * { font-family: Arial, 'Segoe UI', sans-serif !important; letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== 404 ===== */
.page-404 { text-align: center; padding: 4rem 1rem; }
.page-404 h1 { color: var(--c-primary-dark); }

/* ===== Homepage news cards =====
   Rebuilt 2026-07-31: the previous markup put a full-size image inline in a
   bulleted <li>, which rendered as a giant image with a stray bullet. Mobile
   first (79% of traffic): one column on a phone, two from 560px, three from
   900px. Thumbnails are the -300x300 files, so the square ratio is native. */
.news-cards { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.news-card { border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg); box-shadow: var(--shadow); overflow: hidden; }
/* Phone: a compact horizontal row (thumb beside the title). Six stacked
   full-width cards ran ~1400px before the page's actual content — too long a
   scroll on the device 79% of visitors use. */
.news-card > a { display: flex; flex-direction: row; align-items: center;
  gap: 0.85rem; height: 100%; text-decoration: none; color: inherit; }
.news-card__img { flex: 0 0 104px; width: 104px; height: 104px; aspect-ratio: 1 / 1;
  object-fit: cover; display: block; background: var(--c-bg-soft, #f3f5f7); }
.news-card__title { display: block; padding: 0.7rem 0.9rem 0.7rem 0; font-weight: 600;
  font-size: 0.98rem; line-height: 1.35; color: var(--c-primary-dark); }
.news-card > a:hover .news-card__title { color: var(--c-primary); }

/* Image-less cards. Four of the six promoted pages have no image anywhere in
   the archive, so there is nothing to show. Stretching them to match a
   neighbour's height left a large empty white box with a floating title, which
   reads as a broken image. Instead they size to their own content and get a
   deliberate treatment: tinted panel with a leading accent rule (logical
   property, so it sits on the right in RTL). */
.news-card--noimg { background: var(--c-bg-soft, #f4f7f9);
  border-inline-start: 4px solid var(--c-primary); }
.news-card--noimg > a { padding: 0.2rem 0; }
.news-card--noimg .news-card__title { padding: 0.85rem 1rem; font-size: 1.02rem; }

/* Tablet and up: stacked cards in a grid, image on top.
   align-items:start stops a text-only card inheriting the height of the tallest
   card in its row — that stretch is what produced the empty boxes. */
@media (min-width: 560px) {
  .news-cards { grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
  .news-card > a { flex-direction: column; align-items: stretch; gap: 0; }
  .news-card__img { flex: none; width: 100%; height: auto; max-height: 190px; }
  .news-card__title { padding: 0.75rem 0.9rem; }
  .news-card--noimg .news-card__title { padding: 0.95rem 1rem; }
}
@media (min-width: 900px) { .news-cards { grid-template-columns: repeat(3, 1fr); } }

/* ===== Homepage trust strip (Duns badges + insurer/HMO logos) =====
   Was one logo per full-width row, five screens tall. A credibility signal only
   works when it is scanned in a glance, so: a wrapping horizontal row with a
   consistent logo height. */
.home-badges { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.9rem 1.4rem; margin: 1.75rem 0;
  padding: 1.1rem 0.75rem; border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border); }
.home-badges img { height: 46px; width: auto; max-width: 130px; object-fit: contain;
  display: block; }
.home-badges figure { margin: 0; display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem; }
.home-badges figcaption { font-size: 0.72rem; color: var(--c-text-soft);
  text-align: center; line-height: 1.2; }
/* The two Duns badges are the strongest signal — let them run a little larger */
.home-badges a[href*="duns100"] img { height: 62px; max-width: 160px; }
@media (min-width: 700px) {
  .home-badges { gap: 1rem 2rem; }
  .home-badges img { height: 54px; max-width: 150px; }
  .home-badges a[href*="duns100"] img { height: 74px; max-width: 190px; }
}

/* Coverage notice — the "we are not in your HMO's network" disclosure.
   Added 2026-08-01 for the HMO page rewrites. It has to read as important
   without reading as an error: an amber rule on the inline-start edge (logical,
   so it mirrors correctly in both RTL and LTR) over a warm tint. Deliberately
   NOT red — this is information the reader needs, not a failure. */
.notice-coverage {
  background: #fdf6ec;
  border-inline-start: 4px solid var(--c-accent, #b25e09);
  border-radius: var(--radius, 10px);
  padding: 0.9rem 1.05rem;
  margin: 1.25rem 0 1.5rem;
  color: var(--c-text, #1a2c30);
}
.notice-coverage p { margin: 0; }
.notice-coverage p + p { margin-top: 0.6rem; }
.notice-coverage strong { color: #8a4a07; }

/* Insurer / health-fund strip. Rendered from site.insurers on the homepage and
   both contact pages (2026-08-01), so all three cannot disagree again. Visually
   it is the .home-badges strip without the top border, since on the homepage it
   sits directly beneath it and a second rule would read as a separator. */
.insurer-strip { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.9rem 1.4rem; margin: 0 0 1.75rem;
  padding: 0 0.75rem 1.1rem; border-bottom: 1px solid var(--c-border); }
.insurer-strip figure { margin: 0; display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem; }
.insurer-strip img { height: 46px; width: auto; max-width: 130px;
  object-fit: contain; display: block; }
.insurer-strip figcaption { font-size: 0.72rem; color: var(--c-text-soft);
  text-align: center; line-height: 1.2; }
/* Inside an article (the contact pages) it needs its own breathing room. */
.article-body .insurer-strip { border-top: 1px solid var(--c-border);
  padding-top: 1.1rem; margin-top: 1.5rem; }
@media (min-width: 700px) {
  .insurer-strip { gap: 1rem 2rem; }
  .insurer-strip img { height: 54px; max-width: 150px; }
}

/* ===== Header fit (2026-08-01) =====
   The language switcher pushed an already-crowded header past its limit: at
   desktop widths the brand wrapped onto four lines. The header was already
   marginal — 11 Hebrew nav items, the phone pill and the brand — so the
   switcher exposed the problem rather than caused it.
   Three changes, least invasive first. The brand text itself is untouched;
   shortening it is Michael's call, not a layout convenience. */

/* 1. The brand never stacks. It is the site's identity and the first thing a
      visitor reads; the nav can give way instead. */
.logo { flex-shrink: 0; }
.logo span { white-space: nowrap; }

/* 2. Between 1000px and 1150px there is genuinely no room for the full nav
      alongside the brand, phone and switcher — the nav was wrapping every item
      onto two lines. Use the menu button through that range instead, which is
      what it exists for. The phone pill stays: it is the primary CTA. */
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-nav.open {
    display: block; position: absolute; top: 100%; inset-inline: 0;
    background: var(--c-bg); border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow);
  }
  .site-nav.open ul { display: block; gap: 0; padding: 0.5rem 0; }
  .site-nav a { padding: 0.6rem 1.25rem; border-radius: 0; font-size: 1rem; }
  .site-nav .lang-item {
    margin-block-start: 0.9rem; margin-inline-start: 0; padding-inline: 1.25rem;
  }
}

/* 3. From 1150px the full nav fits, but only just. Tighten the item padding a
      little and reduce the switcher to its globe and caret — the language name
      stays in the accessibility tree via .visually-hidden, so screen readers
      and keyboard users lose nothing. Reclaims roughly 55px. */
@media (min-width: 1320px) {
  /* Added 2026-08-01 alongside (3): the padding/font trim reclaimed enough room
     for the row, but four labels ("עמוד הבית", "הסרת משקפיים", …) were still
     breaking mid-item. Items may wrap BETWEEN themselves, never inside one. */
  .site-nav a { padding: 0.5rem 0.55rem; font-size: 0.9rem; white-space: nowrap; }
  .lang-switch { padding-inline: 0.6rem; gap: 0.3rem; }
  .lang-switch > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* (4) The header bar is navigation, not prose, so it need not sit inside the
   1080px article measure. With the row measuring 1274px, capping it at 1080
   left no arrangement that both avoided mid-item breaks and avoided horizontal
   scroll. Give the bar its own ceiling; the article container is untouched.
   The nav therefore appears from 1320px and the menu button covers everything
   below — collapsing rather than wrapping, per the acceptance criteria. */
.site-header > .container { max-width: 1320px; }