/* Stylesheet for the generated "פתוח בשבת" SEO pages (ADR 0019, tools/gen_seo.js).
   The .nrow / .cat-ico / .pop-pill rules are copied verbatim from landing/index.html
   so the place cards look identical to the live results list; the rest is page
   layout for the static pages. */

:root {
  --violet: #8b5cf6;
  /* --violet is a 4.23:1 pair with --card, which is under AA for normal text.
     Fine as a border, a gradient stop or a hover; NOT for small text. This is
     the same hue darkened to 5.7:1 for anything a reader has to read. */
  --violet-ink: #7c3aed;
  --pink: #ec4899;
  --ink: #241b33;
  --slate: #5b5470;
  --muted: #7c7391;
  --bg: #faf7ff;
  --card: #ffffff;
  --line: #ece6fb;
  --shadow-sm: 0 1px 3px rgba(36, 27, 51, .06);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg);
  font-family: "Heebo", -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink); line-height: 1.6;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }

.topbar { background: linear-gradient(90deg, var(--violet), var(--pink)); }
.topbar .wrap { padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The header's "on the map" pill (gen_seo.js mapPillHtml, owner 2026-09-04):
   the one persistent way back to the map, filtered to the page's subject.
   44px target, white on the gradient in both themes (the gradient is the same
   in both), a double ring on focus so it reads on the violet→pink sweep. */
.topbar .map-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.6); color: #fff; text-decoration: none; font-weight: 800; font-size: .88rem; line-height: 1; white-space: nowrap; }
.topbar .map-pill:hover { background: rgba(255,255,255,.28); }
.topbar .map-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 0 4.5px rgba(36,27,51,.55); }
.topbar .map-pill .ui-ico { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 380px) { .topbar a.brand span { display: none; } }
.topbar a.brand { color: #fff; font-weight: 800; text-decoration: none; font-size: 1.05rem; }
.topbar a.brand span { font-weight: 500; opacity: .9; }

nav.crumbs { font-size: .85rem; color: var(--muted); margin: 16px 0 4px; }
nav.crumbs a { color: var(--violet); text-decoration: none; }
nav.crumbs a:hover { text-decoration: underline; }

h1 { font-size: 1.55rem; margin: 6px 0 8px; }
/* Orientation line (gen_seo.js pageHtml, copy.orientation): the first thing
   read on every generated page, right under the h1 and above the page's own
   lede/intro, because ~96% of search visitors land here and never see the
   homepage welcome modal (GSC audit 2026-09-08). Sized between .lede and
   .intro on purpose: it is not the page's own answer (that stays .lede's
   job), just the one-time "what is this" a first-time visitor needs, so it
   should not outrank the page-specific line right under it. */
.orient { color: var(--slate); margin: 0 0 8px; font-size: .92rem; line-height: 1.5; }
.lede { color: var(--ink); margin: 0 0 10px; font-size: 1.02rem; }
.intro { color: var(--slate); margin: 0 0 6px; }
/* Destination anchor prose (destinationCopy in tools/seo_config.json, rendered
   at gen_seo.js's anchor-copy <p>). It is the ONE paragraph on the page written
   about the venue itself, and it is what buys the page its index slot back from
   markDestinationDuplicates — so it reads as body copy, a step warmer than
   .intro, and never as a boxed callout: a tinted panel above 5-8 named
   businesses would read as a claim about them. Sits between the intro and the
   nearby list, which is the order the page argues in. */
.anchor-copy {
  color: var(--ink); margin: 0 0 12px; line-height: 1.7; max-width: 62ch;
}
/* Hotel pages only (ADR 0050). Sits between the intro and the count because it
   qualifies the list that follows, and a reader who skips to the rows should
   have passed it. Quieter than .intro and set off by a rule rather than a box:
   it is a caveat, not a callout, and a tinted panel here would read as a
   warning about the hotels rather than a note about our data. */
.kashrut-note {
  color: var(--muted); font-size: .92rem; line-height: 1.6;
  margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--line);
  max-width: 68ch;
}
.count { color: var(--muted); font-size: .9rem; margin: 0 0 4px; font-weight: 600; }
/* Freshness signal (AEO): answer engines prefer a source that states its own
   currency, and it doubles as the honest reading of "טעון אימות" — a stated
   count that names when it was true. Sits right under .count, quieter than it
   (no bold), never its own paragraph elsewhere on the page. */
.freshness { color: var(--muted); font-size: .8rem; margin: 0 0 18px; }

/* Skip link. The jump bar put ~20 more links between the top of the page and
   the first place, on the pages accessibility.html names as the map's accessible
   alternative, so the bar owes this (ux review 2026-08-23). Clipped rather than
   pushed off-screen: a negative offset on an absolutely positioned element can
   grow the scroll box. */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
  width: auto; height: auto; clip-path: none;
  background: var(--card); color: var(--ink); border: 2px solid var(--violet);
  border-radius: 10px; padding: 10px 16px; font-weight: 700; text-decoration: none;
}
main:focus { outline: none; }

/* Sticky horizontal category filter bar (mobile quick-jump; zero JS).
   Bleeds to the viewport edges so pills scroll edge-to-edge on phones. */
.pillbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 8px; overflow-x: auto;
  margin: 0 -16px 16px; padding: 10px 16px;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pillbar::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); color: var(--slate);
  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .9rem;
  text-decoration: none;
}
.pill:hover { border-color: var(--violet); color: var(--ink); }
.pill.is-active { background: linear-gradient(90deg, var(--violet), var(--pink)); color: #fff; border-color: transparent; }

.nlist { display: flex; flex-direction: column; gap: 9px; }

/* Article prose (מאמרים/יומן מסע). Scoped to main.article so the pSEO listing
   pages, which share this stylesheet, are untouched. Tuned to sit close to the
   hand-written essay styling on /מאמרים/ so hub → article doesn't jar. */
main.article { max-width: 46rem; }
main.article h2 {
  color: var(--ink); font-size: clamp(1.15rem, 2.4vw, 1.35rem); font-weight: 800;
  line-height: 1.45; margin: 30px 0 12px;
}
main.article p { color: #2c2340; font-size: 1.02rem; line-height: 1.85; margin: 0 0 16px; }
main.article p strong { color: var(--ink); font-weight: 700; }
main.article p a { color: var(--violet); font-weight: 600; }
main.article p a:hover { text-decoration: none; }
main.article > h1 + p { font-size: 1.1rem; color: var(--slate); font-weight: 600; }

/* Inline place pill ("[[BOX: id]]" → Option A, owner decision 2026-07-26): a
   small pill sits INSIDE the sentence and links down to the matching card in
   the end-of-article block (#p-<id>) — never a full-width .nrow card mid-prose
   (docs/planning/reports/2026-07-24-fixplan-inline-extraction.md). The dot is
   aria-hidden; its meaning ("open on Shabbat") is also carried by adjacent
   visually-hidden text, never by color/shape alone. */
main.article .ref {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f5f0ff; border: 1px solid #ece0ff; border-radius: 999px;
  padding: 2px 11px 2px 7px; font-size: .92em; font-weight: 700; color: var(--ink);
  text-decoration: none; vertical-align: -3px; margin: 0 2px; white-space: nowrap;
}
main.article .ref:hover, main.article .ref:focus-visible { background: #ece0ff; color: var(--violet); }
main.article .ref:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
main.article .ref .cat-ico { width: 12px; height: 12px; }
main.article .dot-open { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; }
main.article .ref .dot-open { width: 6px; height: 6px; }
main.article .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; }

/* Featured place ("[[FEATURE: id]]" → Time-Out-style pass, owner decision
   2026-07-26): the one/two places the story is actually ABOUT, set apart from
   a merely-considered [[BOX:]] mention by type scale + a single hairline rule
   only — no border, no background fill, no box-shadow (we have no photo of any
   place, only AI illustrations of the trip, so the weight has to come from
   type, not from imagery standing in for the place). The hairline rule is the
   SAME restrained idiom as /מאמרים/'s .pull gradient rule, just a plain
   border instead of a gradient (a second gradient here would compete with the
   prose, not frame it). */
main.article .feature { margin: 34px 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
main.article .feature h3 { font-size: clamp(1.15rem, 2.2vw, 1.3rem); font-weight: 800; color: var(--ink); margin: 0 0 8px; line-height: 1.4; }
main.article .feature h3 a { color: inherit; text-decoration: none; }
main.article .feature h3 a:hover { text-decoration: underline; }
main.article .feature h3 a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
main.article .feature-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; font-size: .88rem; color: var(--muted); }
main.article .feature-meta .cat-ico { width: 13px; height: 13px; }
main.article .feature-status { display: inline-flex; align-items: center; gap: 5px; }
main.article .feature-status .dot-open { width: 6px; height: 6px; }
main.article .feature-actions { margin: 0; font-size: .85rem; }
main.article .feature-actions a { color: var(--violet); font-weight: 700; text-decoration: none; margin-inline-end: 16px; }
main.article .feature-actions a:last-child { margin-inline-end: 0; }
main.article .feature-actions a:hover { text-decoration: underline; }
main.article .feature-actions a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Article image ("[[IMAGE: file.webp | כיתוב]]"). Full column width, and the
   "הדמיה AI" tag sits ON the image rather than under it: the disclosure has to
   travel with the picture when someone screenshots or crops it. Over a soft
   scrim so it stays legible on a bright sky or a dark table.
   TOP-start corner, not bottom: image generators put their own visible
   watermark in a bottom corner (legal review 2026-07-26 measured ours landing
   exactly on Gemini's ✦), and covering another party's provenance mark with our
   own is indefensible even though their watermarking duty isn't ours.
   width/height come from the file (webpSize), so the caption below never jumps
   while the image loads. */
main.article .art-img { margin: 26px 0 22px; }
main.article .art-img-frame { position: relative; line-height: 0; border-radius: 12px; overflow: hidden; background: var(--bg); }
main.article .art-img img { width: 100%; height: auto; display: block; }
main.article .art-img .ai-tag {
  position: absolute; inset-inline-start: 10px; top: 10px;
  background: rgba(23, 16, 40, .72); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .01em; line-height: 1; padding: 6px 9px; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
main.article .art-img figcaption { margin: 9px 2px 0; font-size: .85rem; line-height: 1.6; color: var(--muted); }

/* End-of-article "המקומות במאמר" block: every boxed place exactly once, with
   its real actions (map/Waze/Google/report) — the inline pills above stay
   lightweight because the actions live here instead. */
main.article .endblock { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
main.article .endblock h3 { font-size: 1.05rem; font-weight: 800; color: var(--violet); margin: 0 0 4px; }
main.article .endblock .sub { font-size: .85rem; color: var(--muted); margin: 0 0 18px; }
main.article .place-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { main.article .place-grid { grid-template-columns: 1fr; } }
main.article .pcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); scroll-margin-top: 80px; }
main.article .pcard .nm { font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
main.article .pcard .nm svg { width: 14px; height: 14px; flex: 0 0 auto; }
main.article .pcard .city { font-weight: 500; color: var(--muted); font-size: .82rem; margin-bottom: 4px; }
main.article .pcard .cat { font-size: .8rem; color: var(--slate); display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
main.article .pcard .cat .cat-ico { width: 13px; height: 13px; }
main.article .pcard .status { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: #15803d; font-weight: 700; margin-bottom: 9px; }
main.article .pcard .actions { display: flex; flex-wrap: wrap; gap: 11px 14px; align-items: center; }
main.article .pcard .actions a { font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--violet); }
main.article .pcard .actions a:hover, main.article .pcard .actions a:focus-visible { text-decoration: underline; }
main.article .pcard .actions a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
main.article .pcard .rep { margin-inline-start: auto; font-size: .74rem; font-weight: 500; color: var(--muted); }
.grp { font-size: 1.05rem; margin: 22px 0 9px; display: flex; align-items: baseline; gap: 7px; }
.grp .grp-n { color: var(--muted); font-size: .85rem; font-weight: 600; }
/* .pillbar is sticky at top:0, so a heading scrolled to by a #anchor lands
   underneath it. The bar's height is one line of .pill text plus fixed padding,
   so the clearance has to scale with the root font or a reader at 150% gets the
   heading tucked behind it (measured: bar 57px at 100%, 69px at 150%). rem for
   the text, px for the padding that does not scale. */
.grp[id] { scroll-margin-top: calc(3.6rem + 12px); }
.grp[id]:focus { outline: none; }
.grp[id]:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* A category heading that is ALSO a link to that category's own page — today
   only אטרקציות and מסלולי טיול, the two that live on the /פעילות/ axis. It
   inherits the heading's colour on purpose: this is a heading first and a link
   second, and a blue heading mid-page reads as a mistake. The underline appears
   on hover/focus so it is still discoverably a link. */
.grp-link { color: inherit; text-decoration: none; }
.grp-link:hover, .grp-link:focus-visible { text-decoration: underline; }

/* The same link from a /יעד/ page, where it is a real sentence rather than a
   heading, so here it looks like the link it is. */
.see-also { margin: 14px 0 0; font-size: .95rem; }
.see-also a { color: var(--violet); }

/* Every city on a category page, as a wrapping quick-jump row (zero JS).

/* Every group on the page, as a wrapping quick-jump row above them (zero JS).
   Wraps rather than scrolling like .pillbar: the whole point is that the reader
   SEES the country is covered, and a bar you have to swipe hides that again. */
.jumpbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.jumpbar .pill b { color: var(--violet-ink); font-weight: 800; }
/* ↗ = this chip leaves the page. Decorative (aria-hidden): the destination is
   already in the href, and a screen reader announcing "arrow" on every out-link
   would be noise. */
.jumpbar .pill .pill-out { color: var(--muted); font-weight: 400; font-size: 1.25em; line-height: 1; }  /* the ‹ chevron (2026-09-04): a hair larger than the label or it reads as a stray quote mark */
/* .pill is nowrap for the sticky category bar, which scrolls sideways. This one
   wraps instead, so a long label (a destination name, a city מול city pair) must
   be allowed to break rather than push the row past the viewport. Short chips
   still size to their content and stay on one line. */
.jumpbar .pill { max-width: 100%; white-space: normal; }
/* The tail of a long bar. The summary IS a chip, so the row reads as one list
   that continues rather than as a separate control. */
.jumpmore { margin: -8px 0 16px; }
.jumpmore summary { display: inline-block; cursor: pointer; list-style: none; }
.jumpmore summary::-webkit-details-marker { display: none; }
.jumpmore summary::after { content: ' ▾'; color: var(--muted); }
.jumpmore[open] summary::after { content: ' ▴'; }
.jumpmore[open] summary { margin: 0 0 8px; }
.hub-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 9px; }
.hub-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); font-weight: 700; }
/* ראש בראש cards carry a label and no count, because the honest candidates
   (מדד counts or ranks) render as a bare number pair beside "X מול Y" and
   misread as a score on a page built to be fact-checked. .hub-card's
   space-between then strands the label at one edge, so these centre instead. */
.hub-card-vs { justify-content: center; text-align: center; }
.hub-card:hover { border-color: var(--violet); }
.hub-card b { color: var(--violet-ink); font-weight: 800; }

/* --- copied verbatim from landing/index.html (keep in sync via card fidelity) --- */
.nrow { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; box-shadow: var(--shadow-sm); }
.nrow .body { min-width: 0; flex: 1; }
.nrow .nm { font-weight: 700; overflow-wrap: anywhere; }
/* nowrap: the "· עיר" token moves to the next line as ONE unit — the maqaf/dash
   inside a city name is a legal break point under ANY overflow-wrap value, so
   without this "תל־אביב–יפו" split mid-name and a bare "·" dangled at a line
   start. The NAME keeps overflow-wrap: anywhere above as the escape hatch.
   Twin of the same rule in landing/index.html (card fidelity — change both). */
.nrow .nm .city { font-weight: 500; color: var(--muted); font-size: .9em; white-space: nowrap; }
/* A place name that links to its own /יעד/ page (place-card.js nameHref). Only
   the generated pages ever emit it, so this rule has no twin in index.html. The
   underline is on by default rather than on hover: the row already holds three
   other links, and a bold word that is only discoverably clickable reads as a
   heading. Inherits colour so a row does not turn into a wall of violet. */
.nrow .nm .nm-page { color: inherit; text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 3px; }
.nrow .nm .nm-page:hover, .nrow .nm .nm-page:focus-visible { color: var(--violet); }
.nrow .meta { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* DELIBERATELY NOT in sync with index.html's copy of this one rule, which since
   2026-08-06 also carries `display:flex; align-items:center; gap:6px;
   flex-wrap:wrap` so the live list's subcategory tag pills sit apart from the
   status pill. A static row never emits a .pop-sub — tools/gen_seo.js's
   cardPlace() passes neither the `sub` field nor a subLabelOf, on purpose
   (gen_seo.test.js holds both halves) — so the flex switch would buy these
   pages nothing, and would cost the lone pill its line-box half-leading: a
   silent few-px height change across all 118 generated pages that
   `gen_seo.js --check` cannot catch, because it compares HTML and never loads
   this file. If tags are ever wanted on the static rows, this rule and that
   generator change ship together. */
.nrow .nrow-status { margin-top: 4px; }
/* Saturday hours from the business's own site (place-card.js satHoursHtml, ADR
   0056): the window in ink, the provenance phrase muted and underlined because
   it IS the link to the source page. Twin of the same rule in index.html
   (card fidelity — change both). */
.nrow .sat-hours { margin-top: 4px; font-size: .82rem; color: var(--muted); }
.nrow .sat-hours b { color: var(--ink); font-weight: 700; }
.nrow .sat-hours a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* "הצג במפה של שלנגי" — primary CTA that brings a page/article visitor into the
   live interactive map focused on this place (/#place deep link). SEO-page-only,
   so it lives here, not in index.html's shared .nrow rules. */
.nrow .on-map { display: inline-block; margin-top: 6px; background: var(--violet); color: #fff; font-weight: 700; font-size: .78rem; padding: 5px 12px; border-radius: 999px; text-decoration: none; }
.nrow .on-map:hover { filter: brightness(1.06); }
/* The place's own website (owner ruling 2026-08-11) — the same link the map
   popup has carried since 2026-08-06, on the same action line as the CTA above
   and the report link below. The MARKUP comes from the one shared builder
   (siteActionHtml() in js/place-card.js); only these presentation rules are
   per-surface, and they have to be, because the map's copy lives inside a
   `.pop-actions` flex row and this one sits in an inline text line.
   Deliberately NOT byte-identical to `.pop-actions a.pop-site`, therefore, and
   the drift check in tools/ci_checks.sh asserts PRESENCE here rather than
   equality — see its header.
   The two values that ARE copied verbatim are the ones a reader compares across
   surfaces: the #efe9fd tonal fill and the #7c3aed link colour. Tonal, never
   solid: on the map the one solid violet belongs to the route button, and here
   it belongs to "הצג במפה" directly above — a second solid pill on the same line
   would read as two primary actions. */
.nrow .pop-site { display: inline-block; margin-top: 4px; margin-inline-start: 10px; color: #7c3aed; font-weight: 700; font-size: .78rem; text-decoration: none; background: #efe9fd; border-radius: 999px; padding: 3px 10px; }
.nrow .pop-site:hover { background: #e4dcfd; }
/* Bare text, no second pill: the outer pill already draws the boundary, and a
   chip inside a chip reads as two controls where there is one link (owner
   2026-08-06). It stays legible as a MARKING rather than as a word in the label
   by size and colour alone. Same values as place-map.css. */
.pop-site-beta { color: #7b5bc7; font-size: .62rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2; margin-inline-start: 4px; }
.nrow .report { display: inline-block; margin-top: 4px; margin-inline-start: 10px; color: var(--muted); font-size: .78rem; text-decoration: underline; }
.nrow .report:hover { color: var(--slate); }
.nrow a.go { color: var(--violet); font-weight: 700; font-size: .82rem; white-space: nowrap; flex: 0 0 auto; border-inline-start: 1px solid var(--line); padding-inline-start: 12px; }
.nrow a.waze { color: #0d78c4; font-weight: 700; font-size: .82rem; white-space: nowrap; flex: 0 0 auto; }
.cat-ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.17em; }
.cat-ico-wrap { display: inline-flex; vertical-align: -.17em; }
.pop-pill { display:inline-block; background:#fff5e6; border:1px solid #ffd591; color:#c05600; font-weight:700; border-radius:999px; padding:1px 9px; font-size:.8rem; }
.pop-pill-open { background:#e7f6ec; border-color:#a6dcb8; color:#1a7f37; }
.pop-pill-closed { background:#fde8e8; border-color:#f5b5b5; color:#b42318; }
/* The two hotel pills (ADR 0050). These MUST be here, not only in
   landing/css/place-map.css: the static pages load this file alone, so a
   missing rule does not fall back to the map's styling, it falls back to the
   bare .pop-pill above — which is the AMBER "טעון אימות" colour. Shipping
   "לא כשר" in the pending colour on an indexed page is what happened when this
   block was forgotten (QA gate, 2026-08-11), and it inverts the pill's meaning
   on the one surface Google reads. */
.pop-pill-kashrut { background:#e6f0f2; border-color:#b4d2da; color:#1f5566; }
/* --- end copied block --- */

.dist { color: var(--violet); font-weight: 700; white-space: nowrap; }

.faq { margin: 30px 0 0; }
.faq h2 { font-size: 1.05rem; margin: 0 0 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin: 0 0 8px; box-shadow: var(--shadow-sm); }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '＋'; float: inline-end; color: var(--muted); font-weight: 700; }
.faq details[open] summary::after { content: '－'; }
.faq details p { margin: 9px 0 0; color: var(--slate); }

.cta { margin: 22px 0 0; }
.cta a { display: inline-block; color: var(--violet); font-weight: 700; text-decoration: none; }
.cta a:hover { text-decoration: underline; }

footer { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 16px; font-size: .8rem; color: var(--muted); }
footer p { margin: 0 0 8px; }
footer .caveat { color: var(--slate); }
footer a { color: var(--violet); }
footer nav.hub { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
footer nav.site-links { margin-top: 10px; font-weight: 600; }
footer nav.site-links a { text-decoration: none; }
footer nav.hub a { text-decoration: none; }
footer nav.hub a:hover { text-decoration: underline; }

/* מדד הפתיחות בשבת — ranking tables (tools/gen_seo.js index page) */
.rank-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); margin: 0 0 14px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rank-table th, .rank-table td { padding: 9px 14px; text-align: right; border-bottom: 1px solid var(--line); }
.rank-table tbody tr:last-child td { border-bottom: 0; }
.rank-table thead th { font-size: .8rem; color: var(--muted); font-weight: 700; }
.rank-table th.num, .rank-table td.num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-table td.num { color: var(--violet); font-weight: 800; }
.rank-table .rk { color: var(--muted); font-weight: 700; width: 2.2em; }
.rank-table td a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 3px; }
.rank-table td a:hover { color: var(--violet); }
.rank-note { color: var(--slate); font-size: .82rem; margin: 4px 0 14px; }
.method { margin: 0 0 14px; padding-inline-start: 20px; color: var(--slate); }
.method li { margin: 0 0 7px; }
.rank-table td:nth-child(2), .rank-table th:nth-child(2) { position: sticky; inset-inline-start: 0; background: var(--card); }
.rank-table tbody tr:first-child td { background: linear-gradient(90deg, rgba(139, 92, 246, .09), rgba(139, 92, 246, .02)); }
.rank-table tbody tr:first-child td:nth-child(2) { background: #f4effe; }
.rank-cite { font-size: .72rem; color: var(--muted); padding: 6px 14px 8px; text-align: center; border-top: 1px solid var(--line); }

/* תג לעסקים — badge page (/פתוח-בשבת/תג/) */
.badge-preview { margin: 6px 0 18px; }
.embed { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 14px; margin: 0 0 18px; overflow-x: auto; font-size: .82rem; line-height: 1.6; direction: ltr; text-align: left; }
.embed code { user-select: all; -webkit-user-select: all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.badge-terms { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 4px 14px; color: var(--slate); font-size: .9rem; }
.badge-terms p { margin: 10px 0; }