/* ==========================================================================
   תן לי — design tokens
   Colors/type extracted from Figma (fileKey YaMIzBurk5Snl66nCXvDuF, node 1:2).
   "Birzia" font files not yet supplied — falls back to system fonts until
   the real woff2 files are self-hosted (see docs/seo-geo-performance-strategy.md).
   ========================================================================== */
:root {
	--color-navy: #2c347e;
	--color-teal: #4cbaba;
	--color-text: #052748;
	--color-bg-light: #f2f4fa;
	--color-white: #ffffff;
	/* Distinct deeper-navy heading color used specifically in the community
	   section per Figma (measured #16335a) — not the same token as
	   --color-navy (#2c347e) used for buttons/nav elsewhere. */
	--color-navy-deep: #16335a;

	--font-heading: 'Birzia', -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-body: -apple-system, 'Segoe UI', Arial, sans-serif;

	--radius-pill: 23px;
	--container-max: 1440px;
	--header-container-max: 1560px;
	--gutter: 24px;

	/* Magazine category tints — shades of the two brand hues above, not new
	   colors. Used by tenli_magazine_category_chip() (inc/magazine.php) to
	   color category chips without a 38-entry per-category palette. */
	--tint-teal-bg: #eaf6f6; --tint-teal-fg: #1c6e6e;
	--tint-teal2-bg: #e7f5f5; --tint-teal2-fg: #256969;
	--tint-navy-bg: #eef0f9; --tint-navy-fg: #2c347e;
	--tint-navy2-bg: #eceefa; --tint-navy2-fg: #3a437f;
}

/* ==========================================================================
   Reset (minimal, not a full normalize — trimmed to what this theme needs)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { text-size-adjust: 100%; }
/* clip, not hidden: overflow-x:hidden forces the paired overflow-y to
   compute as auto (CSS overflow spec), which turns html/body into their own
   scroll container and breaks position:sticky for every descendant (e.g.
   .profile-nav-wrap on the agency profile page — verified broken with this
   set to hidden, fixed with clip). clip suppresses the same horizontal
   overflow without creating that scroll container. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	line-height: 1.5;
	background: var(--color-white);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); color: var(--color-navy); }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.screen-reader-text {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	inset-inline-start: 16px;
	top: 16px;
	width: auto;
	height: auto;
	overflow: visible;
	z-index: 100;
	background: var(--color-white);
	color: var(--color-navy);
	padding: 12px 20px;
	border-radius: 8px;
	font-family: var(--font-heading);
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
/* Works on both light and navy backgrounds: the white ring alone gives a
   clearly visible break against dark sections, the navy ring gives strong
   contrast against light sections — no single outline color does both. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-navy);
	border-radius: 2px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.benefits__inner,
.wizard__inner,
.articles__inner,
.faq__inner,
.site-footer__inner,
.about__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: 13px;
	padding-inline: 28px;
	min-height: 45px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn--primary {
	background: var(--color-navy);
	color: var(--color-white);
	box-shadow: 0 6px 16px -6px rgba(44, 52, 126, 0.5);
}
.btn--accent {
	background: var(--color-teal);
	color: var(--color-white);
	box-shadow: 0 6px 16px -6px rgba(76, 186, 186, 0.55);
}
.btn--primary:hover,
.btn--accent:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 22px -8px rgba(44, 52, 126, 0.55);
}
.btn--outline {
	background: transparent;
	color: var(--color-navy);
	border: 2px solid var(--color-navy);
}
.btn--outline:hover {
	background: var(--color-navy);
	color: var(--color-white);
	transform: translateY(-3px);
}
.btn--outline-sm {
	background: var(--color-white);
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
	font-size: 15px;
	min-height: 40px;
	padding-inline: 18px;
	border-radius: var(--radius-pill);
}
.btn--outline-sm:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

/* ==========================================================================
   Header
   Two rows, each with its own centered container (--header-container-max)
   so the two rows' left/right edges line up. Top row: brand fixed to the
   right (column 1), CTA fixed to the left (column 3); the middle column is
   the single flexible (1fr) track so all the slack collects between brand
   and utility — utility itself is end-aligned within that track so it sits
   flush against the CTA instead of floating independently centered.
   ========================================================================== */
/* Sticky on both mobile and desktop — only this white utility bar, not the
   blue .header-bottom nav below it (which stays in normal flow and scrolls
   away underneath). z-index:80 — below the mobile drawer (90/91) and the
   skip-link (100) so both still layer correctly above it, above ordinary
   page content. Permanent (not scroll-triggered) shadow since the bar now
   always floats over whatever scrolls beneath it. */
.header-top { background: var(--color-white); position: sticky; top: 0; z-index: 80; box-shadow: 0 2px 10px rgba(5, 39, 72, 0.06); }
.header-top__inner {
	max-width: var(--header-container-max);
	margin-inline: auto;
	padding-inline: 16px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 32px;
	padding-block: 24px;
	min-height: 130px;
}
.header-top__brand {
	grid-column: 1;
	justify-self: start; /* start = right edge in RTL */
	display: flex;
	align-items: center;
	gap: 28px;
}
.site-logo img { width: 205px; height: auto; }
/* Mobile-only control: the full nav is already visible inline on desktop,
   so this toggle (and the menu it drives) only needs to exist ≤780px —
   see the @media block below. */
.header-top__menu-icon {
	display: none;
	flex-shrink: 0;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 26px;
	padding: 0;
}
.header-top__menu-icon-bars,
.header-top__menu-icon-close {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-top__menu-icon-bars img { width: 24px; height: 26px; display: block; }
.header-top__menu-icon-close svg { width: 22px; height: 22px; }
.header-top__menu-icon-close { opacity: 0; visibility: hidden; }
/* Two fixed icons crossfaded by aria-expanded — not a transform-morph, since
   the new hamburger asset's bars are different widths (see header.php). */
.header-top__menu-icon[aria-expanded="true"] .header-top__menu-icon-bars { opacity: 0; visibility: hidden; }
.header-top__menu-icon[aria-expanded="true"] .header-top__menu-icon-close { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
	.header-top__menu-icon-bars,
	.header-top__menu-icon-close { transition: opacity 0.15s ease; }
}
.header-top__utility {
	grid-column: 2;
	justify-self: end; /* hugs the CTA (column 3) instead of centering independently */
	display: flex;
	/* row-reverse: the reference design's left-to-right physical order is
	   learning → calculators → podcast → finance (graduation cap nearest the
	   CTA buttons, finance nearest the logo) — the opposite of what a plain
	   RTL row would give (first DOM child renders rightmost by default).
	   Markup order in header.php stays learning/calc/podcast/finance either
	   way, so this only flips the visual placement, not the DOM/AT reading
	   order — screen readers and the mobile drawer (same order top-to-
	   bottom) are unaffected. */
	flex-direction: row-reverse;
	gap: 12px;
}
/* Icon-only links — no permanent visible label (the text moved to
   aria-label + data-tooltip, see header.php). 44px box = comfortable
   touch/click target around the visually smaller 26px icon, and doubles as
   the anchor for the hover/focus tooltip below. */
.header-top__utility a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}
.header-top__utility img { width: 26px; height: 26px; display: block; }
@media (prefers-reduced-motion: no-preference) {
	.header-top__utility a { transition: background-color 0.15s ease; }
	.header-top__utility img { transition: transform 0.15s ease; }
}
.header-top__utility a:hover,
.header-top__utility a:focus-visible,
.header-top__utility a.is-active { background: var(--tint-teal-bg); }
.header-top__utility a:hover img,
.header-top__utility a:focus-visible img { transform: translateY(-2px) scale(1.08); }
/* Active state is never color-only: a small dot below the icon on top of
   the tinted background, so it still reads for colorblind users. */
.header-top__utility a.is-active::before {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-teal);
}
/* CSS-only hover/focus tooltip — content comes from data-tooltip (kept in
   sync with each link's aria-label in header.php), not a JS tooltip lib. */
.header-top__utility a::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--color-navy);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	padding: 7px 13px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 5;
}
@media (prefers-reduced-motion: no-preference) {
	.header-top__utility a::after { transition: opacity 0.15s ease, transform 0.15s ease; }
}
.header-top__utility a:hover::after,
.header-top__utility a:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.header-top__ctas {
	grid-column: 3;
	justify-self: end; /* end = left edge in RTL — aligns with the search field below */
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Sticky-header merge (≥781px only — see .initStickyHeaderMerge() in
   main.js): once .header-bottom (the blue nav bar) scrolls fully out from
   under the already-sticky .header-top, the SAME #primary-nav element gets
   moved (not duplicated) in here, ahead of the utility icons. min-height on
   .header-top__inner stays identical in both states on purpose — the row's
   own height must never change, or the sticky bar's height-change would
   shove all page content below it down/up by that delta (a real jump).
   User-approved Artifact, 30.07.2026. */
.header-top.is-scrolled .header-top__inner { grid-template-columns: auto 1fr auto auto; }
.header-top.is-scrolled .header-top__utility { grid-column: 3; }
.header-top.is-scrolled .header-top__ctas { grid-column: 4; }

/* The exact same <nav>/.header-bottom__nav element, restyled only via this
   ancestor context — its original navy-bar rules (white text, 21px, 58px
   gaps) are untouched below and still apply whenever it's back in
   .header-bottom__inner. Starts invisible and fades in one tick after the
   JS move, so the swap never looks like an instant snap.
   Deliberately opacity-only, NO transform here: this <nav> contains the
   "ביטוחים" mega-menu trigger + its absolutely-positioned .ins-mega panel
   (a descendant several levels down). A CSS transform on ANY ancestor —
   even an identity translateY(0) — creates a new containing block for that
   absolutely-positioned descendant, so the panel's left:50% centering math
   would resolve against this narrow <nav>'s own width instead of the
   full-width .header-top, breaking its position/size once merged. Caught
   live via Playwright, 30.07.2026 — same class of bug already documented
   above for the .header-bottom__mega-trigger <li>. */
.header-top__inner .header-bottom__nav {
	grid-column: 2;
	color: var(--color-navy);
	font-size: 16px;
	opacity: 0;
}
.header-top__inner .header-bottom__nav.header-top__nav--visible { opacity: 1; }
.header-top__inner .header-bottom__nav ul { gap: 26px; }
.header-top__inner .header-bottom__nav a.is-active { color: var(--color-teal); }
.header-top__inner .header-bottom__mega-trigger { font-size: 16px; color: var(--color-navy); }
.header-top__inner .header-bottom__mega-trigger:hover,
.header-top__inner .header-bottom__mega-trigger[aria-expanded="true"] { color: var(--color-teal); }
@media (prefers-reduced-motion: no-preference) {
	.header-top__inner .header-bottom__nav { transition: opacity 0.25s ease; }
}
@media (prefers-reduced-motion: reduce) {
	.header-top__inner .header-bottom__nav { opacity: 1; }
}

/* WP admin bar (visible only when logged in) is fixed at the very top —
   32px tall at ≥783px, 46px on narrower admin-bar breakpoints (WP core's
   own responsive values, not this theme's). The already-sticky .header-top
   needs to sit BELOW it, not under/behind it. No prior handling existed for
   this at all before the sticky-header-merge feature request surfaced it. */
body.admin-bar .header-top { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .header-top { top: 46px; }
}

/* position:relative added for the "ביטוחים" mega menu panel (.ins-mega,
   near the end of this file) — it's an absolutely positioned overlay that
   needs to anchor to this bar's own bottom edge without affecting this
   element's height/flow, so the header's own height stays unchanged. */
.header-bottom { background: var(--color-navy); position: relative; }
.header-bottom__inner {
	max-width: var(--header-container-max);
	margin-inline: auto;
	padding-inline: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 12px;
	min-height: 67px;
	flex-wrap: wrap;
}
.header-bottom__nav {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 21px;
	color: var(--color-white);
}
.header-bottom__nav ul { display: flex; flex-wrap: wrap; gap: 58px; }
.header-bottom__nav a:hover { color: var(--color-teal); }
.header-bottom__nav a.is-active { color: var(--color-teal); font-weight: 700; }
/* Defensive: never let a nested submenu (e.g. a legacy mega-menu) dump unstyled onto the page. */
.header-bottom__nav ul ul,
.site-footer__menu ul { display: none; }
.header-bottom__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--color-white);
	border-radius: 999px;
	padding-inline: 22px;
	min-height: 44px;
	width: 360px;
	flex-shrink: 0;
	background: transparent;
	color: var(--color-white);
}
.header-bottom__search input {
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 19px;
	flex: 1;
	min-width: 0;
}
.header-bottom__search input::placeholder { color: var(--color-white); opacity: 0.85; }
.header-bottom__search button {
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	margin-inline-end: -12px;
}
.header-bottom__search img { width: 23px; height: 23px; }

/* Live site-wide search dropdown (assets/js/site-search.js). Absolutely
   positioned against .header-bottom__search itself (position:relative
   above) so it always sits directly under the search field regardless of
   where that field falls in the nav row. Desktop-only by construction —
   .header-bottom (and this panel with it) is display:none under 780px, see
   the mobile breakpoint further down ("search is gone by request"). */
.site-search__panel {
	position: absolute;
	top: calc(100% + 14px);
	inset-inline-start: 0;
	width: 460px;
	max-width: 80vw;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--color-white);
	color: var(--color-navy);
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(22, 51, 90, 0.22);
	padding-block: 10px;
	z-index: 90;
}
.site-search__panel[hidden] { display: none; }
.site-search__status {
	padding: 22px 20px;
	text-align: center;
	font-size: 14px;
	color: var(--color-navy);
	opacity: 0.65;
}
.site-search__group + .site-search__group {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--color-bg-light);
}
.site-search__group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 20px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-teal);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.site-search__group-title svg { width: 15px; height: 15px; flex-shrink: 0; }
.site-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 20px;
	color: var(--color-navy);
}
.site-search__item:hover,
.site-search__item:focus-visible {
	background: var(--color-bg-light);
	outline: 0;
}
.site-search__item-thumb {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--color-bg-light);
}
.site-search__item-thumb--empty { display: block; }
.site-search__item-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.site-search__item-title {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-search__item-meta { font-size: 12.5px; color: var(--color-navy); opacity: 0.6; }
.site-search__footer {
	margin-top: 8px;
	padding: 10px 20px 2px;
	border-top: 1px solid var(--color-bg-light);
}
.site-search__footer a { font-size: 14px; font-weight: 700; color: var(--color-teal); }
.site-search__footer a:hover { color: var(--color-navy); }

/* ==========================================================================
   Mobile nav drawer (see .header-top__menu-icon click handler in main.js)
   Fixed + off-canvas at every width by construction (translateX(100%) pushes
   it past the physical right edge), so it never needs a desktop-only
   display:none — the hamburger that opens it is already mobile-only.
   inset-inline-start (not -end): "start" = physical right under RTL, which
   is the edge this drawer opens from.
   ========================================================================== */
.mobile-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 39, 72, 0.45);
	z-index: 90;
	opacity: 0;
	visibility: hidden;
}
.mobile-drawer-overlay.is-open { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
	.mobile-drawer-overlay { transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
	.mobile-drawer-overlay.is-open { transition: opacity 0.25s ease; }
}

.mobile-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	width: 90%;
	max-width: 380px;
	background: var(--color-white);
	z-index: 91;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	visibility: hidden;
	box-shadow: -8px 0 32px rgba(5, 39, 72, 0.18);
}
.mobile-drawer.is-open { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
	.mobile-drawer { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s; }
	.mobile-drawer.is-open { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
}

.mobile-drawer__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-block-end: 1px solid var(--color-bg-light);
}
.mobile-drawer__logo img { width: 120px; height: auto; }
.mobile-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-bg-light);
	color: var(--color-navy);
	border: 0;
}
.mobile-drawer__close svg { width: 18px; height: 18px; }

.mobile-drawer__nav { flex: 1 1 auto; overflow-y: auto; padding-block: 8px; }
.mobile-drawer__list { list-style: none; margin: 0; padding: 0; }
.mobile-drawer__item { border-block-end: 1px solid var(--color-bg-light); }
.mobile-drawer__item:last-child { border-block-end: 0; }
.mobile-drawer__link {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding-inline: 20px;
	background: none;
	border: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 17px;
	color: var(--color-navy);
	text-decoration: none;
	text-align: right;
	cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
	.mobile-drawer__link { transition: color 0.15s ease, background-color 0.15s ease; }
}
.mobile-drawer__link:hover,
.mobile-drawer__link:focus-visible { color: var(--color-teal); background: var(--color-bg-light); }
.mobile-drawer__link.is-active { color: var(--color-teal); background: var(--color-bg-light); font-weight: 700; }

/* subtle by design — muted navy, not full-strength brand color, so icons
   support the label instead of competing with it */
.mobile-drawer__icon { display: flex; flex: none; color: var(--color-navy); opacity: 0.55; }
.mobile-drawer__icon svg { width: 20px; height: 20px; }
.mobile-drawer__text { flex: 1; min-width: 0; }

.mobile-drawer__chevron { display: flex; flex: none; color: var(--color-navy); opacity: 0.45; }
.mobile-drawer__chevron svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
	.mobile-drawer__chevron svg { transition: transform 0.2s ease; }
}
.mobile-drawer__toggle[aria-expanded="true"] .mobile-drawer__chevron svg { transform: rotate(180deg); }

/* Accordion: grid-template-rows 0fr → 1fr, not display/height, so the
   expand/collapse can actually animate smoothly with auto-sized content and
   no JS height measurement. Safe to default to collapsed (no no-JS fallback
   needed here) — the whole drawer only opens via JS in the first place; a
   no-JS visitor never reaches this markup either way. */
.mobile-drawer__sublist-wrap {
	display: grid;
	grid-template-rows: 0fr;
	background: var(--color-bg-light);
}
@media (prefers-reduced-motion: no-preference) {
	.mobile-drawer__sublist-wrap { transition: grid-template-rows 0.25s ease; }
}
/* Direct-child combinator (not a bare descendant selector) — required now
   that the "ביטוחים" mega menu nests a second accordion level inside this
   one (see tenli_render_insurance_mega_menu_mobile(), inc/insurance-mega-
   menu.php): a descendant selector would force-expand every nested
   category panel the instant the outer "ביטוחים" item opens, since it
   matches ANY .mobile-drawer__sublist-wrap inside an .is-expanded item
   regardless of depth. Scoping to the immediate child means each level's
   open/closed state stays independent — verified as the intended,
   unchanged behavior for the drawer's original single-level items too. */
.mobile-drawer__item.is-expanded > .mobile-drawer__sublist-wrap { grid-template-rows: 1fr; }
.mobile-drawer__sublist { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; }
.mobile-drawer__sublist a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-inline: 56px 20px;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 15.5px;
	color: var(--color-navy);
	text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
	.mobile-drawer__sublist a { transition: color 0.15s ease; }
}
.mobile-drawer__sublist a:hover,
.mobile-drawer__sublist a:focus-visible { color: var(--color-teal); }

.mobile-drawer__cta {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 24px;
	border-block-start: 1px solid var(--color-bg-light);
}
.mobile-drawer__cta .btn { width: 100%; min-height: 52px; justify-content: center; }

body.has-open-drawer { overflow: hidden; }

/* ==========================================================================
   Hero
   Split layout: real photo on the physical left, content on the physical
   right (header/nav redesign, 30.07.2026 — replaces the old faint decorative
   .hero__bg watermark + exact-Figma-px .hero__inner overlay). .hero__content
   comes FIRST in markup (H1 gets read/found first) and .hero__media second —
   in a plain flex row under RTL, main-start is the physical right, so source
   order alone puts content on the right and the photo on the left with no
   extra `order` property needed. The insurance-category card below stays
   nested inside .hero and keeps its own bottom-anchored overlap (see
   .services further down) — that part of the structure didn't change.
   ========================================================================== */
.hero {
	position: relative;
	background: var(--color-white);
	padding-block-end: 96px;
}
.hero__grid {
	display: flex;
	align-items: stretch;
	min-height: 640px;
}
.hero__content {
	flex: 1 1 46%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block-start: 56px;
	/* Right inset is based on the header/nav container's own right margin
	   ((100vw - header-container-max)/2), plus a fixed 68px inline offset
	   (was 16px) so the H1/CTA row sits further from the physical right
	   edge than flush with "ראשי" (the header's rightmost nav item) —
	   requested 30.07.2026 via a live before/after mockup (padding-right
	   196px -> 248px at a ~1920px reference width). Capped at 272px
	   (was 220px, same +52px bump) so it doesn't over-indent on
	   ultra-wide monitors. */
	padding-right: min(272px, max(16px, calc((100vw - var(--header-container-max)) / 2 + 68px)));
	padding-left: clamp(24px, 4vw, 64px);
}
.hero__title { font-size: clamp(38px, 3.6vw, 76px); font-weight: 800; line-height: 1.04; }
.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--color-teal); }
.hero__subtitle { margin-block-start: 26px; max-width: 500px; font-size: clamp(17px, 1.4vw, 22px); font-weight: 500; line-height: 1.5; color: var(--color-text); }
/* flex-start, not flex-end: main-start=right in this RTL flex row, so
   flex-start is what actually hugs the right edge (matching the headline/
   subtitle above it). flex-end packs toward main-end = left instead. */
.hero__actions { margin-block-start: 44px; display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }

/* Real photo (family walking together at sunset — assets/images/hero/), not
   a stock-photo screenshot lift and not the old decorative brand-symbol
   watermark. object-position favors the upper-middle of the frame so the
   family stays in view across every crop ratio the responsive column takes. */
.hero__media {
	position: relative;
	flex: 1 1 54%;
	min-width: 0;
	overflow: hidden;
}
/* object-position keeps the family (positioned left-of-center in the source
   photo) in frame once object-fit:cover trims the sides to match whatever
   aspect ratio the column ends up at desktop vs. mobile. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 15% 42%; }
/* Soft horizontal blend into the white content background instead of a hard
   vertical seam — physical `right` on purpose (this fades the edge that
   touches the content column, which is the image's physical right edge
   under RTL, not a logical/mirrorable one). Wide (40%) + multiple color
   stops rather than one plain 0%->100% linear fade: a plain 2-stop linear
   gradient still reads as an abrupt "hard line" perceptually once it's
   fading a bright, warm sunset sky into flat white — the extra stops (25/
   55/100) ease it in gradually instead. */
.hero__media::after {
	content: '';
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 40%;
	background: linear-gradient(
		to left,
		var(--color-white) 0%,
		rgba(255, 255, 255, 0.88) 25%,
		rgba(255, 255, 255, 0.5) 55%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

/* ==========================================================================
   Insurance category card — bottom-anchored overlap onto whatever the Hero's
   actual rendered height ends up being (not a fixed px offset from the top,
   since the Hero no longer has one exact-Figma height now that it's a real
   flex split layout). Must stay nested inside .hero in the markup for this
   positioning to resolve against the Hero's own box.
   ========================================================================== */
.services {
	position: absolute;
	bottom: -64px;
	left: 50%;
	transform: translateX(-50%);
	width: min(1440px, calc(100% - 32px));
	min-height: 165px;
	z-index: 3;
}
.services__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	width: 100%;
	min-height: 165px;
	padding: 32px 16px;
	background: var(--color-white);
	border-radius: 20px;
	box-shadow: 4px 0 30px -1px rgba(0, 0, 0, 0.07);
}
.services__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	border-inline-end: 1px solid #e4e4ea;
}
.services__item:last-child { border-inline-end: 0; }
.services__icon { width: 72px; height: 72px; object-fit: contain; }
.services__label { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #16335a; }

/* Light hover feedback for the whole bar — on .services__item itself (not
   just .services__item-link) so all 6 categories react the same way, even
   the 5 that aren't wrapped in a real link yet (see front-page.php). */
@media (prefers-reduced-motion: no-preference) {
	.services__icon { transition: transform 0.2s ease; }
}
.services__item:hover .services__icon,
.services__item-link:focus-visible .services__icon { transform: translateY(-4px) scale(1.06); }
.services__item:hover .services__label,
.services__item-link:focus-visible .services__label { color: var(--color-teal); }

/* ==========================================================================
   Benefits
   ========================================================================== */
.benefits { padding-block: 80px; }
/* .services sits absolutely positioned 64px past the Hero's own bottom edge
   (see "bottom: -64px" above) so it can overlap onto whatever comes next —
   at this width, that's .benefits, and its -64px eats straight into this
   section's 80px top padding, leaving only ~16px of real visible gap above
   the cards. Restore a normal-looking gap by adding that 64px back on top,
   desktop-only (≤960px .services returns to normal static flow with its own
   margin-block-start instead, so no compensation is needed there). */
@media (min-width: 961px) {
	.benefits { padding-block-start: 144px; }
}
.benefits__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.benefits__card {
	background: var(--color-bg-light);
	border-radius: 16px;
	padding: 40px;
	padding-block-start: 64px;
	position: relative;
}
.benefits__icon {
	position: absolute;
	inset-block-start: -28px;
	inset-inline-end: 32px;
	width: 56px;
	height: 56px;
	filter: drop-shadow(0 6px 12px rgba(44, 52, 126, 0.18));
}
.benefits__card h3 { font-size: 26px; margin-block-end: 16px; }
.benefits__card p { color: var(--color-text); font-size: 17px; line-height: 1.7; }
.benefits__result { margin-block-start: 16px; color: var(--color-navy); font-size: 15px; line-height: 1.7; }
.benefits__result strong { color: var(--color-navy); }

/* ==========================================================================
   Wizard
   ========================================================================== */
.wizard { padding-block: 80px; background: var(--color-bg-light); }
/* .wizard__inner intentionally has no max-width override of its own —
   falls back to the shared max-width:var(--container-max) rule (1440px,
   see the Layout helpers block near the top) so this section reads as wide
   as the homepage's other full-width sections (e.g. .community__inner),
   per explicit request. It used to be capped at 1200px. */
/* Navy banner sits above the white card and overlaps its top edge slightly
   for a layered-depth effect, matching Figma node 41:420/421/427 — this
   entire banner was previously missing; the plain h2/p that used to render
   here directly on the light background was actually the CARD's internal
   heading (see .wizard__card-title below), not the section title. */
.wizard__banner {
	background: var(--color-navy);
	color: var(--color-white);
	text-align: center;
	border-radius: 24px;
	padding: 32px 40px;
	margin-block-end: -18px;
	position: relative;
	z-index: 1;
}
.wizard__banner-title { color: var(--color-white); font-size: 32px; font-weight: 700; }
.wizard__banner-subtitle { color: var(--color-white); opacity: 0.85; font-size: 20px; margin-block-start: 8px; }

/* Homepage picker only (front-page.php) — everywhere else .wizard__banner
   is reused as-is (car/home/personal-accident/life/travel/health-insurance
   pages, supplier-signup, single agency), so this is a modifier, not an
   edit to the shared rule above. Drops the solid navy block per explicit
   request: no more colored box, no more layered card-overlap trick (that
   only made sense against a colored background) — just the heading sitting
   directly on the section's own light background. */
.wizard__banner--plain {
	background: none;
	box-shadow: none;
	padding: 0;
	margin-block-end: 28px;
	position: static;
}
.wizard__banner--plain .wizard__banner-title { color: var(--color-navy); }
.wizard__banner--plain .wizard__banner-subtitle { color: var(--color-text); opacity: 0.75; }

.wizard__form {
	position: relative;
	z-index: 0;
	background: var(--color-white);
	border-radius: 16px;
	padding: 40px 60px;
	box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08);
}
.wizard__step-head {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: center;
	text-align: center;
}
.wizard__card-title { font-size: 24px; }
.wizard__question {
	font-family: var(--font-heading);
	font-size: 18px;
	margin-block: 32px 20px;
	text-align: center;
}
.wizard__options { display: grid; grid-template-columns: 1fr 1fr; gap: 27px 29px; margin-block-end: 44px; }
.wizard__options--grid3 { grid-template-columns: repeat(3, 1fr); }
.wizard__options--grid1 { grid-template-columns: 1fr; }
/* Default/idle state is WHITE fill + visible navy border per Figma — the
   previous implementation had this backwards (flat bg-on-bg by default,
   only showing the border on hover/selected). */
.wizard__option {
	padding: 14px 32px;
	border: 1px solid var(--color-navy);
	border-radius: 12px;
	background: var(--color-white);
	font-family: var(--font-heading);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wizard__option:hover,
.wizard__option.is-selected,
.wizard__option[aria-checked="true"] { background: var(--color-navy); color: var(--color-white); }
.wizard__progress { display: flex; gap: 8px; justify-content: center; margin-block-start: 24px; }

/* ---- homepage "מתאם הביטוח" picker: illustration / content panel / diagram ----
   Redesigned 30.07.2026 (Artifact-approved first) — three columns instead of
   the original two. The diagram is still a "game" only — its buttons never
   navigate, on click or on drag-release. Hovering/focusing/clicking a node
   updates .insurance-matcher__content (and, for the 2 categories that have
   one, the illustration) via assets/js/main.js's showInfo(); the ONLY real
   navigation is that panel's own CTA (.insurance-matcher__cta).
   [data-wizard-split] ships hidden and JS reveals it once it can actually
   wire the interaction up — the <noscript> fallback list (front-page.php)
   is what a no-JS visitor sees instead, so the section is never a dead end. */
.insurance-matcher { padding-block: 80px; background: var(--color-bg-light); }
.insurance-matcher__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.insurance-matcher__head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.insurance-matcher__head h2 { font-size: clamp(28px, 3.2vw, 36px); font-weight: 800; }
.insurance-matcher__head p { margin-block-start: 12px; color: var(--color-text); opacity: 0.75; font-size: 16px; line-height: 1.6; }

[data-wizard-split] { display: none; }
.insurance-matcher__card {
	align-items: center;
	gap: 8px;
	background: var(--color-white);
	border-radius: 28px;
	box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08);
	padding: 24px 44px;
}
.wizard-diagram-col { flex: 0 0 320px; min-width: 0; }

.wizard-diagram__fallback { list-style: none; margin: 20px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wizard-diagram__fallback a {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border: 1px solid rgba(44, 52, 126, 0.14); border-radius: 12px;
	color: var(--color-navy); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 14px;
}
.wizard-diagram__fallback svg { width: 20px; height: 20px; flex: none; color: var(--color-teal); }
.wizard-diagram__fallback a:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

/* ---- content panel (center) ---- */
/* min-height + vertical centering: the 6 categories' title/description
   lengths differ enough that switching between them was visibly shifting
   the whole card's height (measured live: up to a ~148px swing around the
   900-960px range before this fix). Reserving the tallest real measured
   height per breakpoint (plus a small buffer) keeps the card a constant
   height across every category — see the responsive overrides below. */
.insurance-matcher__content {
	flex: 1 1 0; min-width: 0; padding: 28px 40px; text-align: center;
	min-height: 370px;
	display: flex; flex-direction: column; justify-content: center;
}
.insurance-matcher__eyebrow { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.03em; color: var(--color-teal); margin: 0 0 10px; }
.insurance-matcher__rule { width: 40px; height: 3px; border-radius: 2px; background: var(--color-teal); margin: 0 auto 18px; }
.insurance-matcher__title { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; color: var(--color-navy-deep); margin: 0 0 14px; }
.insurance-matcher__text { font-size: 15.5px; line-height: 1.75; color: var(--color-text); opacity: 0.82; max-width: 38ch; margin: 0 auto 26px; }
/* Sizing/color/hover come from the shared .btn .btn--accent classes on the
   markup itself, so this matches the header's "סוכנויות ביטוח" button
   exactly. Only the bits specific to this in-card placement stay here. */
.insurance-matcher__cta { align-self: center; gap: 8px; text-decoration: none; }
.insurance-matcher__cta svg { width: 16px; height: 16px; }
.insurance-matcher__cta:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.insurance-matcher__micro { margin-block-start: 14px; font-size: 12.5px; color: var(--color-text); opacity: 0.6; }

/* ---- illustration (physical left) ----
   2 of 6 categories have a real generated image so far (travel, health —
   assets/images/matcher/) — showInfo() (main.js) only swaps the <img> src
   when the clicked node has one, so the other 4 just leave whichever
   illustration is already showing instead of a placeholder. */
.insurance-matcher__illustration { flex: 0 0 260px; display: flex; align-items: center; justify-content: center; padding-block: 12px; }
.insurance-matcher__illustration-frame {
	position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, rgba(76, 186, 186, 0.14), rgba(76, 186, 186, 0) 70%);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.insurance-matcher__illustration-frame img { width: 88%; height: 88%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
	.insurance-matcher__illustration-frame img { transition: opacity 0.2s ease; }
}

/* ---- diagram (physical right) ----
   Node/hub positions are set inline per-node (top/left %, computed in PHP —
   front-page.php) against this 100x100 box, so the whole thing scales with
   the container instead of needing a JS-computed layout. Drag+spring
   physics + idle float are added by assets/js/main.js (initWizardDiagram) —
   unchanged by this restyle, only the rules below (borders/shadows/colors)
   are new. */
.wizard-diagram { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-inline: auto; }
.wizard-diagram__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.wizard-diagram__lines line { stroke: rgba(44, 52, 126, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Background is a light neutral tint, not solid navy: the hub sits on the
   WHITE card, and the real logo mark (favicon-icon.svg, front-page.php) is
   itself navy + teal — a navy circle behind it would swallow the navy arc
   almost entirely (verified broken this way once already). --color-bg-light
   gives both the navy and the teal parts of the mark real contrast. */
.wizard-diagram__hub {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 22%; aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-bg-light);
	border: 1px solid rgba(44, 52, 126, 0.08);
	box-shadow: 0 12px 28px -6px rgba(44, 52, 126, 0.22);
	display: flex; align-items: center; justify-content: center;
	z-index: 3;
}
.wizard-diagram__hub img { width: 62%; height: 62%; object-fit: contain; }
.wizard-diagram__node {
	position: absolute;
	--drag-x: 0px; --drag-y: 0px;
	/* aspect-ratio:1 only sets the *preferred* size — a 2-line label (e.g.
	   "תאונות אישיות", the one long two-word category name here) still forces
	   the box taller than that, turning the circle into an oval. Sized wide
	   enough (with slightly tighter padding) that icon + a 2-line label
	   always fit within a true circle instead of stretching it. */
	width: 30%; aspect-ratio: 1;
	transform: translate(-50%, -50%) translate(var(--drag-x), var(--drag-y));
	border-radius: 50%;
	background: var(--color-white);
	border: 1.5px solid rgba(44, 52, 126, 0.12);
	box-shadow: 0 8px 20px -8px rgba(15, 20, 50, 0.18);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	padding: 5% 7%;
	margin: 0;
	color: var(--color-navy);
	font: inherit;
	text-decoration: none;
	text-align: center;
	z-index: 2;
	cursor: pointer;
	appearance: none;
	touch-action: none;
	-webkit-user-select: none; user-select: none;
}
.wizard-diagram__node svg { width: 20px; height: 20px; flex: none; pointer-events: none; }
.wizard-diagram__label { font-family: var(--font-heading); font-weight: 700; font-size: 10.5px; line-height: 1.2; pointer-events: none; overflow-wrap: break-word; hyphens: auto; }
.wizard-diagram__node[data-draggable="true"] { cursor: grab; }
.wizard-diagram__node.is-dragging { cursor: grabbing; z-index: 4; box-shadow: 0 16px 32px -6px rgba(5, 39, 72, 0.28); }
.wizard-diagram__node.is-active,
.wizard-diagram__node:focus-visible { border-color: var(--color-teal); outline: none; box-shadow: 0 0 0 4px rgba(76, 186, 186, 0.2), 0 10px 22px -8px rgba(15, 20, 50, 0.2); }
.wizard-diagram__node.is-active svg { color: var(--color-teal); }
@media (prefers-reduced-motion: no-preference) {
	.wizard-diagram__node { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
	.wizard-diagram__node:hover { border-color: var(--color-teal); box-shadow: 0 10px 22px rgba(5, 39, 72, 0.16); }
	.wizard-diagram__node.is-dragging { transition: none; }
}
/* Stacked layout starts at 1080px, not the more typical ~900px breakpoint —
   below 1080px the content column (squeezed between the two fixed-width
   side columns in the 3-column row layout) got narrow enough that its text
   wrapped dramatically more (measured live: up to 683px tall at 900px vs.
   ~370px at 1350px+), which made the min-height needed to prevent a jump
   swing wildly by width alone, on top of the jump-by-category this whole
   fix is for. Switching to the stacked layout earlier sidesteps that
   squeeze range entirely instead of chasing it with more breakpoints. */
@media (max-width: 1079px) {
	.insurance-matcher__card { flex-direction: column; padding: 36px 24px 30px; }
	.insurance-matcher__illustration { order: 1; flex: 0 0 auto; width: 150px; padding-block-end: 4px; }
	.wizard-diagram-col { order: 2; flex: 0 0 auto; width: 100%; margin-block-end: 4px; }
	.insurance-matcher__content { order: 3; padding: 8px 4px 0; min-height: 300px; }
}
@media (min-width: 700px) {
	.wizard-diagram__node svg { width: 22px; height: 22px; }
	.wizard-diagram__label { font-size: 11.5px; }
}

.wizard__field { margin-block-end: 24px; text-align: right; }
.wizard__field label { display: block; font-family: var(--font-heading); margin-block-end: 8px; }
.wizard__field-hint { font-size: 13px; color: var(--color-text); opacity: 0.65; margin-block-start: 6px; }
.wizard__field input,
.wizard__field select,
.wizard__field textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--color-navy);
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: 16px;
	background: var(--color-white);
	color: var(--color-text);
}
.wizard__field textarea { resize: vertical; min-height: 100px; }
.wizard__field input:focus-visible,
.wizard__field select:focus-visible,
.wizard__field textarea:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

.wizard__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-align: right;
	font-size: 14px;
	margin-block-end: 8px;
	cursor: pointer;
}
.wizard__consent input { margin-block-start: 4px; flex-shrink: 0; }
/* The privacy-policy link inside consent text inherited the base a{color:
   inherit; text-decoration:none} reset, so it rendered visually identical to
   plain text — a real link (href already correct), just invisible as one. */
.wizard__consent a { text-decoration: underline; color: var(--color-navy); }

.wizard__done { text-align: center; padding-block: 24px; }
.wizard__done p { margin-block-start: 12px; }

.wizard__error {
	color: #b3261e;
	background: #fdecea;
	border-radius: 8px;
	padding: 12px 16px;
	text-align: center;
	font-size: 14px;
	margin-block-end: 16px;
}

.wizard__actions { display: flex; justify-content: space-between; gap: 16px; margin-block-start: 8px; }
.wizard__actions .btn { flex: 0 0 auto; }
.wizard__actions .btn:only-child { margin-inline-start: auto; }
/* .btn/.wizard__actions/.wizard__progress all set an explicit `display`, which
   (being an author rule) beats the UA stylesheet's `[hidden] { display: none }`
   even though selector specificity is tied — author styles always win over UA
   defaults. Restate `display: none` here, at higher specificity, so toggling
   the `hidden` attribute from JS actually hides these elements. */
.btn[hidden],
.wizard__actions[hidden],
.wizard__progress[hidden] { display: none; }

/* ==========================================================================
   Articles
   ========================================================================== */
.articles { padding-block: 80px; }
.articles__title { text-align: center; font-size: 30px; margin-block-end: 24px; }
.articles__tabs {
	display: flex;
	justify-content: center;
	gap: 0;
	background: var(--color-bg-light);
	border-radius: 38px;
	padding: 6px;
	margin-inline: auto;
	margin-block-end: 40px;
	max-width: 847px;
}
.articles__tab {
	flex: 1;
	padding: 14px 24px;
	border-radius: 32px;
	font-family: var(--font-heading);
	font-weight: 500;
	color: var(--color-navy);
}
.articles__tab.is-active { background: var(--color-white); font-weight: 700; }
/* Homepage teaser hardcodes 4 equal-width tabs (flex:1) to match Figma
   pixel-for-pixel; the magazine page has 7 (הכל + 6 real categories) and
   needs to wrap/size-to-content instead of squeezing evenly. */
.articles__tabs--wrap { flex-wrap: wrap; max-width: none; width: fit-content; }
.articles__tabs--wrap .articles__tab { flex: 0 0 auto; white-space: nowrap; }
.articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.article-card { position: relative; }
.article-card__image {
	display: block;
	position: relative;
	aspect-ratio: 2 / 1;
	background: var(--color-bg-light);
	border-radius: 16px;
	overflow: clip;
	margin-block-end: 16px;
}
.article-card__image img { width: 100%; height: 100%; object-fit: cover; }
/* Category chip floated over the card image — only present on the full
   magazine archive/category grid (tenli_render_magazine_card(), see
   inc/magazine.php); the 3-item homepage teaser never sets this. */
.article-card__chip { position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 1; }
.article-card__chip .chip { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.article-card__title { font-size: 18px; line-height: 1.5; }
.article-card__title-link:hover { color: var(--color-teal); }
/* Stretched link: the whole card becomes one hit target instead of two
   separate links (image + title) with a dead-zone gap between them. */
.article-card__title-link::after { content: ''; position: absolute; inset: 0; }
.article-card__excerpt { color: var(--color-text); opacity: 0.7; font-size: 14px; line-height: 1.6; margin-block: 8px 10px; }
.articles__empty { text-align: center; color: var(--color-text); opacity: 0.6; padding-block: 24px; }
.articles__cta { text-align: center; margin-block-start: 40px; }
/* Tab panels — JS (initArticlesTabs(), main.js) toggles [hidden] + .is-active
   in sync with the tab buttons above. .articles__panel[hidden] is redundant
   with the UA stylesheet on a plain block element, but kept explicit to
   match the codebase's existing convention (see .calc-row[hidden] etc.) in
   case this panel ever gains its own `display` value later. */
.articles__panel[hidden] { display: none; }
.articles__tabs-fallback { text-align: center; margin-block-end: 24px; }
.articles__tabs-fallback a { color: var(--color-navy); text-decoration: underline; }

/* "מחשבונים" tab panel — same grid rhythm as .article-card (icon instead of
   a photo, since calculators have no featured image). Data comes from
   tenli_calculators_hub_items()/tenli_calculators_hub_icon_svg(), the same
   source that powers /insurance-calculators/ — not a second copy. */
.calc-teaser-card {
	position: relative;
	background: var(--color-bg-light);
	border-radius: 16px;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.calc-teaser-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(5, 39, 72, 0.1);
}
.calc-teaser-card__icon svg { width: 26px; height: 26px; }
.calc-teaser-card__title { font-size: 18px; line-height: 1.5; margin: 0; }
.calc-teaser-card__link { color: inherit; text-decoration: none; }
.calc-teaser-card__link:hover { color: var(--color-teal); }
.calc-teaser-card__link::after { content: ''; position: absolute; inset: 0; }
.calc-teaser-card__desc { color: var(--color-text); opacity: 0.7; font-size: 14px; line-height: 1.6; margin: 0; }
.calc-teaser-card__meta { font-size: 12.5px; font-weight: 700; color: var(--color-teal); }

/* ==========================================================================
   "פניות סוכנים" homepage CTA module (front-page.php, inc/agent-cta-module.php)
   — above the footer, below the articles/tabs section. Photo-col is FIRST in
   the markup so it lands on the right under RTL's default flex row direction
   (no row-reverse needed), matching the approved reference ad's layout.
   ========================================================================== */
.agent-cta { padding-block: 72px; background: var(--color-bg-light); }
.agent-cta__inner {
	max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter);
	display: flex; align-items: center; gap: 56px;
}
.agent-cta__photo-col { flex: 1 1 320px; max-width: 340px; text-align: center; }
.agent-cta__photo { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: 0 16px 40px -18px rgba(5, 39, 72, 0.35); }
.agent-cta__badge { margin-block-start: 18px; }
.agent-cta__badge strong { display: block; font-family: var(--font-heading); font-size: 18px; color: var(--color-navy); }
.agent-cta__badge span { display: block; font-size: 14px; font-weight: 700; color: var(--color-teal); margin-block-start: 2px; }

.agent-cta__form-col { flex: 1 1 480px; }
.agent-cta__title { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--color-navy); line-height: 1.3; margin-block-end: 14px; }
.agent-cta__subtitle { font-size: 16px; color: var(--color-text); opacity: 0.75; line-height: 1.65; margin-block-end: 26px; }
.agent-cta__row { display: flex; gap: 16px; }
.agent-cta__row .wizard__field { flex: 1 1 0; }
.agent-cta__actions { margin-block: 4px 20px; }
.agent-cta__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--color-text); margin-block-end: 12px; cursor: pointer; }
.agent-cta__consent input { margin-block-start: 3px; flex-shrink: 0; }
.agent-cta__consent a { color: var(--color-navy); text-decoration: underline; }

@media (max-width: 860px) {
	.agent-cta__inner { flex-direction: column; text-align: center; gap: 32px; }
	.agent-cta__row { flex-direction: column; gap: 0; }
	.agent-cta__consent { text-align: right; }
}

/* Small inline SVG icon inside a category chip (tenli_magazine_icon_svg()). */
.mag-icon { display: inline-flex; flex: none; width: 14px; height: 14px; vertical-align: -2px; margin-inline-end: 2px; }
.mag-icon svg { width: 100%; height: 100%; display: block; }

/* Date + reading-time row under a card excerpt, or under a magazine page
   title — small enough to be its own generic utility rather than folded
   into .article-card. */
.meta { font-size: 13px; color: var(--color-text); opacity: 0.65; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.meta .dot::before { content: '·'; margin-inline-end: 10px; }

/* ==========================================================================
   Magazine — page-templates/magazine.php ("כל הכתבות") and category.php.
   Grid/cards/filters/pagination all reuse .articles__ (prefix), .article-card,
   .agency-directory__pagination above; only the page-level wrapper is new.
   ========================================================================== */
.magazine { padding-block: 48px 80px; }
.magazine__hero { text-align: center; max-width: 70ch; margin-inline: auto; margin-block-end: 8px; }
.magazine__hero h1 { font-size: 34px; margin-block: 8px 10px; }
.magazine__hero p { color: var(--color-text); opacity: 0.75; font-size: 16px; }

/* Author archive (author.php) — extends .magazine__hero with an avatar +
   role line above the same h1/p rules; margin-block-end bumped a bit more
   below the whole grid needs breathing room. */
.author-hero { margin-block-end: 32px; }
.author-hero__avatar { border-radius: 50%; margin-block-end: 4px; }
.author-hero__role { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); opacity: 1; font-size: 14.5px; margin-block-end: 4px; }

/* ==========================================================================
   Community — pixel-matched to Figma (fileKey YaMIzBurk5Snl66nCXvDuF), not an
   approximation. Section is a fixed 740px canvas at desktop widths; every
   child below is positioned with `top` measured from THIS section's own
   top edge (section has position:relative — these are not page-absolute
   Figma-canvas coordinates). Horizontal centering uses left:50% +
   translateX(-50%) on each child rather than a shared wrapper, since the
   title/subtitle/button don't share a common width. Collapses to normal
   static flow below 960px — see the responsive block.
   ========================================================================== */
.community {
	position: relative;
	width: 100%;
	min-height: 740px;
	background: var(--color-bg-light);
}
.community__inner { position: relative; height: 100%; min-height: 740px; }

/* Loose scatter layer — every .community__blob/.community__dot gets its own
   one-off --size/--top/--left OR --right custom properties inline (see
   front-page.php), never a grid/row. `.community__scatter` itself is just a
   full-bleed positioning host, not a flex/grid container. */
.community__scatter { position: absolute; inset: 0; z-index: 1; list-style: none; margin: 0; padding: 0; }
.community__blob {
	position: absolute;
	top: var(--top);
	left: var(--left, auto);
	right: var(--right, auto);
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 10px 26px rgba(5, 12, 46, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--size) * 0.18);
}
.community__blob img { max-width: 100%; max-height: 100%; object-fit: contain; }
.community__dot {
	position: absolute;
	top: var(--top);
	left: var(--left, auto);
	right: var(--right, auto);
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
}
.community__dot--teal { background: var(--color-teal); }
.community__dot--navy { background: var(--color-navy); }

.community__title {
	position: absolute;
	z-index: 2;
	top: 231px;
	left: 50%;
	transform: translateX(-50%);
	width: 490px;
	height: 147px;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 105px;
	line-height: 147px;
	text-align: center;
	color: var(--color-navy-deep);
	white-space: nowrap;
}
/* Fixed-width number so digits going 0 -> 1,000 -> 3,580 don't reflow the
   "מעל"/"+" around it — tabular-nums keeps each digit glyph the same width
   too, so the count-up itself doesn't visibly wobble mid-animation. */
.counter-number {
	display: inline-block;
	min-width: 5.2ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.community__subtitle {
	position: absolute;
	z-index: 2;
	top: 358px;
	left: 50%;
	transform: translateX(-50%);
	width: 435px;
	height: 67px;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 48px;
	line-height: 67px;
	text-align: center;
	color: var(--color-navy-deep);
	white-space: nowrap;
}
.community__cta {
	position: absolute;
	z-index: 2;
	top: 465px;
	left: 50%;
	transform: translateX(-50%);
	width: 252px;
	height: 50px;
	min-height: 0;
	padding: 0;
	line-height: 27px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding-block: 80px; }
/* .faq__inner intentionally has NO max-width override here — it falls back
   to the shared max-width:var(--container-max) rule (1440px) like every
   sibling section. A previous 900px override here contradicted the actual
   Figma frame (x=240, width=1439 on the 1920px canvas — i.e. the standard
   1440px content width), shrinking the section by 540px for no reason. */
.faq__title { text-align: center; font-size: 30px; margin-block: 8px 40px; }
/* Real accordion — every item has an answer <p>, one row per question,
   toggled by the native <details>/<summary> in the markup. Same pattern
   as .ins-faq__list (insurance category pages) and .about-faq__list.
   Two independent columns (30.07.2026, 11 questions total, split in
   front-page.php): flex, not a shared CSS grid with row tracks — a grid
   would force both columns' Nth row to the same height, so opening one
   <details> would stretch a blank gap into the sibling column's same-row
   cell instead of just growing its own column. align-items:flex-start (not
   the flex default stretch) is what actually lets each .faq__col size to
   its own content and grow independently when a question opens. */
.faq__list {
	display: flex;
	align-items: flex-start;
	gap: 0 48px;
	max-width: 1100px;
	margin-inline: auto;
	border-block-start: 1px solid rgba(44, 52, 126, 0.14);
}
.faq__col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.faq__item {
	display: block;
	min-height: 0;
	background: transparent;
	border-radius: 0;
	padding: 0;
	border-block-end: 1px solid rgba(44, 52, 126, 0.14);
}
.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 17px;
	color: var(--color-navy);
	list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: '';
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid var(--color-navy);
	border-block-end: 2px solid var(--color-navy);
	transform: rotate(45deg);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) {
	.faq__item summary::after { transition: transform 0.2s ease; }
}
.faq__item p { margin: 0; padding: 0 4px 20px; color: var(--color-text); opacity: 0.85; font-size: 15px; line-height: 1.7; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-navy); color: var(--color-white); }
.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding-block: 64px;
}
.site-footer__title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-white); margin-block-end: 16px; }
.site-footer__col p { color: var(--color-white); opacity: 0.8; margin-block-end: 8px; }
.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
}
.site-footer__menu li { margin-block-end: 8px; opacity: 0.8; }
/* Agent/agency community CTA card (footer.php) — small card tucked inside
   the "לסוכנים ולסוכנויות ביטוח" column, not a separate full-width banner
   (an earlier full-width teal version read as too big/loud — replaced with
   the smallest of 4 mockup variations the user picked from). */
.site-footer__agent-card {
	margin-top: 16px;
	background: rgba(255, 255, 255, 0.06);
	border-inline-start: 3px solid var(--color-teal);
	border-radius: 8px;
	padding: 14px 16px;
}
.site-footer__agent-card-title { color: var(--color-white); font-weight: 700; font-size: 13.5px; margin: 0 0 4px; }
.site-footer__agent-card-text { color: var(--color-white); opacity: 0.72; font-size: 12.5px; margin: 0 0 10px; }
.site-footer__agent-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-teal);
	color: var(--color-white);
	font-weight: 700;
	font-size: 12.5px;
	padding: 7px 14px;
	border-radius: 999px;
}
.site-footer__agent-card-btn:hover { opacity: 0.88; }

/* Sitewide short loan disclaimer (footer.php) — the site has loan-related
   content/categories and takes loan-related inquiries too, same as it
   already does for insurance leads; this is the equivalent short "bank-
   style" legal notice for that, not tied to any one article. */
.site-footer__disclaimer-wrap { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.site-footer__disclaimer {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 16px var(--gutter);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--color-white);
	opacity: 0.6;
}
.site-footer__disclaimer strong { opacity: 0.9; }

.site-footer__bottom {
	padding-block: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	flex-wrap: wrap;
	gap: 16px;
}
.site-footer__bottom-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
.site-footer__copyright { font-size: 13px; opacity: 0.7; margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer__legal a { font-size: 13px; opacity: 0.7; text-decoration: underline; }
.site-footer__legal a:hover { opacity: 1; }

.site-footer__bottom-brand { display: flex; align-items: center; gap: 24px; }
.site-footer__bottom-social { display: flex; gap: 10px; }
.site-footer__bottom-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
	opacity: 0.8;
}
.site-footer__bottom-social svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
	.site-footer__bottom-social a { transition: opacity 0.15s ease, background-color 0.15s ease; }
}
.site-footer__bottom-social a:hover,
.site-footer__bottom-social a:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.site-footer__bottom-logo { height: 32px; width: auto; opacity: 0.95; }

/* ==========================================================================
   Supplier signup page (page-templates/supplier-signup.php)
   Reuses .wizard__* component classes for visual consistency with the
   homepage comparison wizard — only what's genuinely new lives here.
   ========================================================================== */
.supplier-signup { padding-block: 80px; background: var(--color-bg-light); }
.supplier-signup__inner { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }

/* Pilot landing page (page-templates/agent-pilot.php) only. */
.supplier-signup__pilot-intro { max-width: 640px; margin: 32px auto 0; text-align: center; }
.supplier-signup__pilot-intro p { font-size: 17px; line-height: 1.7; margin: 0 0 12px; color: var(--color-text); }
.supplier-signup__pilot-note {
	background: var(--color-white);
	border-radius: 12px;
	border-inline-start: 4px solid var(--color-teal);
	box-shadow: 0 2px 10px rgba(5, 39, 72, 0.08);
	padding: 16px 20px;
	margin-block-start: 20px;
	text-align: right;
}
.supplier-signup__pilot-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-navy); }
.supplier-signup__results { margin-block: 12px; display: flex; flex-direction: column; gap: 8px; }
.supplier-signup__result {
	width: 100%;
	text-align: right;
	padding: 12px 20px;
	border: 1px solid var(--color-navy);
	border-radius: 12px;
	background: var(--color-white);
	font-family: var(--font-heading);
}
.supplier-signup__result:hover { background: var(--color-navy); color: var(--color-white); }
.supplier-signup__claim-summary { font-family: var(--font-heading); font-size: 18px; margin-block-end: 24px; text-align: center; }
.supplier-signup__checkbox { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); }
/* Both overrides need to out-specificity the generic .wizard__field rules
   (.wizard__field label / .wizard__field input) that this checkbox label
   sits inside — those rules assume a normal "label above input" field and
   were winning over the two rules above/below, forcing this label to
   display:block and stretching the checkbox itself to width:100% of its
   grid column (a giant invisible hit-area with the native checkbox glyph
   painted pinned to one edge, detached from its own text). */
.wizard__field .supplier-signup__checkbox { display: flex; margin-block-end: 0; }
.wizard__field .supplier-signup__checkbox input[type="checkbox"] { width: auto; padding: 0; border: 0; flex-shrink: 0; }

/* Full specialty checklist (tenli_supplier_signup_specialty_options() — the
   6 core categories plus every real, recurring specialty from the agency
   directory data, ~30-45 items). A fixed equal-width grid looked ragged
   with labels this variable in length (some 2 characters, some full
   phrases) — each chip here sizes to its own content and wraps naturally
   instead, which stays visually even regardless of label length. Bordered +
   scrollable so a ~40-item list doesn't blow up the page's vertical rhythm. */
.supplier-signup__specialty-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	max-height: 260px;
	overflow-y: auto;
	padding: 16px 20px;
	border: 1px solid var(--color-navy);
	border-radius: 12px;
	background: var(--color-white);
}
.supplier-signup__specialty-list .supplier-signup__checkbox { flex: 0 0 auto; }

/* Signup email/phone verification blocks (4-digit code), reused on both the
   "claim" and "new" stages — see inc/signup-verification.php. */
.claim-otp { background: var(--color-bg-light); border-radius: 12px; padding: 16px; }
.claim-otp__verify { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; flex-wrap: wrap; }
.claim-otp__verify label { font-family: var(--font-heading); font-size: 14px; }
.claim-otp__verify input {
	width: 90px;
	text-align: center;
	letter-spacing: 4px;
	font-size: 18px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--color-navy);
	background: var(--color-white);
}
.claim-otp__status { font-size: 13px; margin-block-start: 8px; color: var(--color-text); opacity: 0.8; }
.claim-otp__status.is-success { color: #1c6e6e; opacity: 1; font-weight: 700; }
.claim-otp__status.is-error { color: #a4362f; opacity: 1; font-weight: 700; }

/* Supplier-terms scroll-to-accept gate — see inc/supplier-terms.php. The
   checkbox itself is native `disabled` until initTermsGate() (assets/js/
   supplier-signup.js) detects the box scrolled to (or already short enough
   to skip) the bottom, so it can never be checked without at least having
   scrolled through the text once. */
.terms-gate { border: 1px solid var(--color-navy); border-radius: 12px; padding: 16px; background: var(--color-white); }
.terms-gate--unavailable { background: var(--color-bg-light); border-style: dashed; color: var(--color-text); opacity: 0.85; }
.terms-gate__card { text-align: center; }
.terms-gate__label { display: block; font-family: var(--font-heading); font-weight: 700; margin-block-end: 6px; }
.terms-gate__summary { margin: 0 0 12px; font-size: 13.5px; color: var(--color-text); opacity: 0.8; }
.terms-gate__hint { font-size: 12.5px; color: var(--color-text); opacity: 0.7; margin-block: 10px 0; }
.terms-gate .supplier-signup__checkbox { margin-block-start: 14px; }
.terms-gate .supplier-signup__checkbox input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }

/* The agreement itself, opened via "פתיחת ההסכם לעיון" — a wide, accessible
   native <dialog> (same chrome recipe as .agency-inquiry-modal/.quick-popup-
   modal, just wider, since this one needs to comfortably hold a full legal
   document instead of a short form). */
.terms-gate-modal {
	border: 0;
	border-radius: 16px;
	padding: 0;
	max-width: 720px;
	width: calc(100% - 40px);
	max-height: calc(100vh - 80px);
	box-shadow: 0 20px 60px rgba(5, 39, 72, 0.25);
	color: var(--color-text);
}
.terms-gate-modal::backdrop { background: rgba(5, 39, 72, 0.55); }
.terms-gate-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 28px 16px; border-bottom: 1px solid var(--color-bg-light); }
.terms-gate-modal__head h2 { font-size: 19px; color: var(--color-navy); margin: 0; }
.terms-gate-modal__close { font-size: 18px; line-height: 1; padding: 6px 10px; border-radius: 8px; }
.terms-gate-modal__close:hover { background: var(--color-bg-light); }
.terms-gate-modal__scroll {
	max-height: 55vh;
	overflow-y: auto;
	padding: 20px 28px;
	font-size: 14px;
	line-height: 1.75;
}
.terms-gate-modal__scroll:focus-visible { outline: 2px solid var(--color-teal); outline-offset: -2px; }
.terms-gate-modal__foot { padding: 16px 28px 24px; border-top: 1px solid var(--color-bg-light); text-align: left; }

/* Dynamic review summary (substep 3, "new" stage) — values are read live
   from the form's own fields by JS, never hardcoded here. */
.supplier-signup__summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-block-end: 20px; }
.supplier-signup__summary-item { padding: 12px 14px; background: var(--color-bg-light); border-radius: 11px; text-align: center; }
.supplier-signup__summary-item span { display: block; margin-block-end: 4px; color: var(--color-text); opacity: 0.65; font-size: 11.5px; }
.supplier-signup__summary-item strong { font-family: var(--font-heading); font-size: 14px; color: var(--color-navy); }

/* Staged-wizard redesign (2026-08) — structural styling only, reusing the
   .ins-wizard__progress-* component already shared by every insurance-
   calculator wizard on the site (assets/css/main.css, ~line 2559) instead of
   a parallel progress-bar design. Visual polish of the individual steps
   continues in later phases; this block is what makes the mechanism usable/
   testable. */
.supplier-signup__progress { margin-block-end: 28px; }
.supplier-signup__steps-labels {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-heading);
	font-size: 13px;
	color: var(--color-text);
	opacity: 0.55;
}
.supplier-signup__steps-labels li { flex: 1 1 0; text-align: center; }
.supplier-signup__steps-labels li:first-child { text-align: right; }
.supplier-signup__steps-labels li:last-child { text-align: left; }
.supplier-signup__steps-labels li.is-active { color: var(--color-navy); font-weight: 700; opacity: 1; }
.supplier-signup__steps-labels li.is-done { color: var(--color-teal); opacity: 1; }

.supplier-signup__substep-title { font-size: 22px; margin: 0 0 6px; }
.supplier-signup__substep-title:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 4px; border-radius: 4px; }
.supplier-signup__substep-intro { margin: 0 0 24px; color: var(--color-text); opacity: 0.75; font-size: 14.5px; line-height: 1.6; }

.supplier-signup__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.wizard__field label span { font-weight: 400; opacity: 0.6; font-size: 0.85em; }

.supplier-signup__security-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block: 16px 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--color-bg-light);
	color: var(--color-text);
	opacity: 0.75;
	font-size: 12.5px;
}

.supplier-signup__next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; text-align: right; }
.supplier-signup__next-steps li { background: var(--color-bg-light); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; line-height: 1.5; }
.supplier-signup__next-steps strong { display: block; margin-block-end: 4px; color: var(--color-navy); font-size: 13px; }
.supplier-signup__next-steps span { color: var(--color-text); opacity: 0.85; }

.supplier-signup__already-registered-actions { display: flex; gap: 12px; justify-content: center; margin-block-start: 20px; flex-wrap: wrap; }

.login-line { text-align: center; margin-block-start: 20px; color: var(--color-text); opacity: 0.75; font-size: 14px; }
.login-line a { color: var(--color-navy); font-weight: 700; text-decoration: underline; }

/* Specialty picker (substep 2, "new" stage) — 6 core-category cards always
   visible + an expandable search panel for the rest. See
   assets/js/supplier-signup.js:initSpecialtyPicker(). */
#specialty-search {
	width: 100%;
	height: 48px;
	padding: 0 44px 0 16px;
	border: 1px solid var(--color-navy);
	border-radius: 12px;
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c347e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.3-4.3'/%3E%3C/svg%3E") no-repeat left 14px center / 18px;
}

.supplier-signup__specialty-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 12px; font-family: var(--font-heading); }
.supplier-signup__specialty-count { padding: 6px 12px; border-radius: 999px; background: var(--color-bg-light); color: var(--color-navy); font-size: 12.5px; font-weight: 700; }

.supplier-signup__specialty-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-block-end: 16px; }
.supplier-signup__specialty-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 10px;
	text-align: center;
	background: var(--color-white);
	border: 1.5px solid var(--color-bg-light);
	border-radius: 14px;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 13.5px;
	color: var(--color-text);
}
@media (prefers-reduced-motion: no-preference) {
	.supplier-signup__specialty-card { transition: border-color 0.15s ease, background-color 0.15s ease; }
}
.supplier-signup__specialty-card input { position: absolute; opacity: 0; pointer-events: none; }
.supplier-signup__specialty-card:has(input:focus-visible) { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.supplier-signup__specialty-card:hover { border-color: color-mix(in srgb, var(--color-teal) 45%, transparent); }
.supplier-signup__specialty-card.is-selected { background: color-mix(in srgb, var(--color-teal) 12%, var(--color-white)); border-color: var(--color-teal); font-weight: 700; }
.supplier-signup__specialty-card-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.supplier-signup__specialty-card-icon img { max-width: 100%; max-height: 100%; }

.supplier-signup__specialty-expand-toggle { display: block; width: 100%; text-align: center; }

.supplier-signup__specialty-expand { margin-block-start: 16px; }
.supplier-signup__specialty-expand .supplier-signup__specialty-list { margin: 0; }
.supplier-signup__specialty-expand .supplier-signup__checkbox.is-selected { background: color-mix(in srgb, var(--color-teal) 12%, var(--color-white)); border-radius: 8px; padding-inline: 6px; margin-inline: -6px; font-weight: 700; }
.supplier-signup__specialty-empty { margin: 12px 0 0; color: var(--color-text); opacity: 0.7; font-size: 13.5px; }

@media (max-width: 720px) {
	.supplier-signup__form-grid { grid-template-columns: 1fr; }
	.supplier-signup__next-steps { grid-template-columns: 1fr; }
	.supplier-signup__steps-labels { font-size: 11.5px; }
	.supplier-signup__specialty-cards { grid-template-columns: repeat(2, 1fr); }
	.supplier-signup__summary-strip { grid-template-columns: 1fr; }
	.terms-gate-modal { max-height: calc(100vh - 40px); }
	.terms-gate-modal__scroll { max-height: 50vh; }
}

/* Direct-contact popup on the single agency page — native <dialog>, see
   assets/js/agency-inquiry.js. */
.agency-inquiry-modal {
	border: 0;
	border-radius: 16px;
	padding: 28px;
	max-width: 480px;
	width: calc(100% - 40px);
	box-shadow: 0 20px 60px rgba(5, 39, 72, 0.25);
	color: var(--color-text);
}
.agency-inquiry-modal::backdrop { background: rgba(5, 39, 72, 0.55); }
.agency-inquiry-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.agency-inquiry-modal__head h2 { font-size: 18px; }
.agency-inquiry-modal__close { font-size: 18px; line-height: 1; padding: 6px 10px; border-radius: 8px; }
.agency-inquiry-modal__close:hover { background: var(--color-bg-light); }
.agency-inquiry-modal__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-block: 16px; line-height: 1.5; }
.agency-inquiry-modal__consent a { text-decoration: underline; color: var(--color-navy); }
.agency-inquiry-modal .wizard__actions { margin-block-start: 8px; }

/* Site-wide "פנייה מהירה" popup (inc/quick-popup.php, assets/js/quick-popup.js)
   — same native-<dialog> chrome as .agency-inquiry-modal (shared classes for
   the head/close/consent rows), just under its own root class since it isn't
   scoped to the agency template. */
.quick-popup-modal {
	border: 0;
	border-radius: 16px;
	padding: 28px;
	max-width: 460px;
	width: calc(100% - 40px);
	box-shadow: 0 20px 60px rgba(5, 39, 72, 0.25);
	color: var(--color-text);
}
.quick-popup-modal::backdrop { background: rgba(5, 39, 72, 0.55); }
.quick-popup-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
.quick-popup-modal__head h2 { font-size: 19px; line-height: 1.4; color: var(--color-navy); margin: 0; }
.quick-popup-modal__close { flex-shrink: 0; }
.quick-popup-modal__subtext { font-size: 14px; line-height: 1.6; opacity: 0.75; margin: 0 0 18px; }
.quick-popup-modal__error { color: #a4362f; font-size: 13px; margin-block-start: 10px; }
.quick-popup-modal__done { text-align: center; padding-block: 12px; }
.quicklead-form textarea {
	width: 100%;
	border: 1px solid rgba(44, 52, 126, 0.2);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	font-family: var(--font-body);
	resize: vertical;
}

/* ==========================================================================
   Supplier portal page (page-templates/supplier-portal.php)
   ========================================================================== */
.supplier-portal { padding-block: 80px; background: var(--color-bg-light); }
.supplier-portal__inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); }
.supplier-portal__table-wrap { overflow-x: auto; background: var(--color-white); border-radius: 16px; padding: 8px; margin-block-end: 24px; }
.supplier-portal__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.supplier-portal__table th,
.supplier-portal__table td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--color-bg-light); white-space: nowrap; }
.supplier-portal__table th { font-family: var(--font-heading); color: var(--color-navy); }
.supplier-portal__notice { background: var(--color-bg-light); border: 1px solid var(--color-navy); color: var(--color-navy); border-radius: 12px; padding: 12px 18px; margin-block-end: 20px; font-family: var(--font-heading); }
.supplier-portal__edit-form { margin-block-end: 32px; }

/* ==========================================================================
   Public agency directory (archive-tenli_agency.php, single-tenli_agency.php)
   ========================================================================== */
.agency-directory,
.agency-single { padding-block: 80px; background: var(--color-bg-light); }
/* flex + gap on the shared column, not per-child margins: every direct
   child (banner, optional intro, search-panel or specialty-links nav,
   results list, pagination, "back to full directory" link) gets identical
   spacing automatically regardless of which optional blocks are present on
   a given template — no more hand-matching margin-block-end/-start pairs
   across four different templates. */
.agency-directory__inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: 28px; }
.agency-single__inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); }

/* Full search-results page (search.php) — one section per content type,
   reusing each type's own existing card grid (.articles__grid,
   .agency-directory__rows, .destination-archive-grid, .learn-grid) so
   results look identical to the same content on its home listing page. */
.site-search-page__section + .site-search-page__section { margin-top: 12px; }
.site-search-page__section-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--color-navy);
	margin-block-end: 18px;
}
.site-search-page__section-count { font-size: 15px; font-weight: 500; color: var(--color-navy); opacity: 0.55; }
.site-search-page__pages { display: flex; flex-direction: column; gap: 14px; }
.site-search-page__pages li { padding: 14px 18px; background: var(--color-bg-light); border-radius: 12px; }
.site-search-page__pages a { font-size: 17px; font-weight: 700; color: var(--color-navy); }
.site-search-page__pages a:hover { color: var(--color-teal); }
.site-search-page__pages p { margin-block-start: 4px; font-size: 14px; opacity: 0.7; }
.site-search-page__empty { font-size: 16px; opacity: 0.75; }

/* Two-column layout: main content (right, in RTL) + a sticky sidebar (left)
   with the claim-ownership and direct-contact CTAs. Single column below 900px. */
.agency-single__layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.agency-single__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* top: 152px (130px sitewide sticky .header-top + 20px original gap) — only
   ever active >=900px per the override below, which matches the desktop
   header height, so no separate mobile value is needed here. */
.agency-single__aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 152px; }
.agency-aside-card { background: var(--color-white); border-radius: 16px; padding: 24px; box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08); }
.agency-aside-card h3 { font-size: 16px; margin-block-end: 8px; }
.agency-aside-card p { font-size: 13.5px; color: var(--color-text); opacity: 0.75; margin-block-end: 16px; line-height: 1.6; }
.agency-aside-card .btn { width: 100%; }
@media (max-width: 900px) {
	.agency-single__layout { grid-template-columns: 1fr; }
	.agency-single__aside { position: static; }
}

/* Editable intro copy — index (options) and city/specialty terms (term meta),
   see inc/agency-editable-content.php. Hidden entirely when empty. */
.agency-directory__intro { max-width: 78ch; margin-inline: auto; text-align: center; font-size: 15.5px; line-height: 1.75; color: var(--color-text); opacity: 0.85; }
.agency-directory__intro p { margin-block-end: 12px; }
.agency-directory__intro p:last-child { margin-block-end: 0; }

/* Editable content-below copy — same source (options/term meta), rendered
   after the results/pagination instead of before the search panel. The
   top border reads as "further reading", distinct from the results above. */
.agency-directory__content-below { max-width: 78ch; margin-inline: auto; padding-block-start: 24px; border-block-start: 1px solid rgba(44, 52, 126, 0.12); font-size: 15px; line-height: 1.75; color: var(--color-text); opacity: 0.85; }
.agency-directory__content-below p { margin-block-end: 12px; }
.agency-directory__content-below p:last-child { margin-block-end: 0; }

/* Search panel — elevated card wrapping the filter form + "add business" CTA,
   replacing the bare flex row the filters used to sit in directly on the page. */
.search-panel {
	background: var(--color-white);
	border: 1px solid var(--color-bg-light);
	border-radius: 20px;
	box-shadow: 0 4px 28px rgba(44, 52, 126, 0.1);
	padding: 28px 28px 24px;
}
.search-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 18px; flex-wrap: wrap; }
.search-panel__title { font-size: 18px; }
.add-business-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-bg-light);
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
	border-radius: 999px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13.5px;
	padding: 8px 16px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.add-business-btn:hover { background: var(--color-navy); color: var(--color-white); }
.agency-directory__filters { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }

/* Smart type-ahead field (specialty / city) — see assets/js/agency-directory.js */
.combo-field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.combo-field label { font-family: var(--font-heading); font-size: 14px; color: var(--color-navy); }
.combo-field__control { position: relative; }
.combo-field__input {
	width: 100%;
	min-height: 44px;
	padding-inline: 16px;
	border: 1px solid var(--color-navy);
	border-radius: 12px;
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-text);
}
.combo-field__input::placeholder { color: var(--color-text); opacity: 0.5; }
.combo-field__listbox {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline: 0;
	z-index: 10;
	max-height: 260px;
	overflow-y: auto;
	background: var(--color-white);
	border: 1px solid var(--color-bg-light);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(44, 52, 126, 0.15);
}
.combo-field__option {
	padding: 12px 16px;
	font-size: 15px;
	color: var(--color-text);
	cursor: pointer;
}
.combo-field__option.is-active,
.combo-field__option:hover { background: var(--color-bg-light); color: var(--color-navy); }
/* Long-row agency card ("variant ד") — one per line, room for a phone-reveal
   action and specialty chips up front. See tenli_render_agency_card() in
   inc/agency-directory.php, shared by every directory-listing template. */
.agency-directory__rows { display: flex; flex-direction: column; gap: 14px; }
.agency-directory__row-card {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	background: var(--color-white);
	border: 1px solid var(--color-bg-light);
	border-radius: 16px;
	padding: 16px 20px;
	box-shadow: 0 2px 10px rgba(44, 52, 126, 0.05);
	transition: box-shadow 0.15s ease;
}
.agency-directory__row-card:hover { box-shadow: 0 8px 24px rgba(44, 52, 126, 0.12); }
.agency-directory__row-id { display: flex; align-items: center; gap: 12px; min-width: 220px; flex: 1 1 220px; }
.agency-directory__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-teal);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	flex: none;
}
.agency-directory__row-name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-navy); }
.agency-directory__row-name:hover { color: var(--color-teal); }
.agency-directory__row-city { font-size: 13px; color: var(--color-text); opacity: 0.65; margin-block-start: 2px; }
.agency-directory__row-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 2 1 260px; }
.chip { background: var(--color-bg-light); color: var(--color-navy); font-size: 12.5px; font-family: var(--font-heading); font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.chip--muted { opacity: 0.6; }
.agency-directory__row-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: 0 0 auto; }
.phone-reveal {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-bg-light);
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-family: var(--font-heading);
	font-weight: 700;
	white-space: nowrap;
}
.phone-reveal svg { width: 14px; height: 14px; flex: none; }
.phone-reveal:hover { background: var(--color-navy); color: var(--color-white); }

/* Paid-customer highlight — admin-controlled "is_paid_customer" flag (see
   inc/agency-admin.php), rendered by tenli_render_agency_card(). */
.agency-directory__row-card--featured {
	border-color: var(--color-teal);
	border-inline-start: 4px solid var(--color-teal);
	background: linear-gradient(0deg, #f5fcfc, #f5fcfc), var(--color-white);
}
.agency-directory__featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--color-teal);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	padding: 2px 9px;
	border-radius: 999px;
	margin-inline-start: 6px;
	vertical-align: middle;
}

/* In-feed directory banner — inserted every TENLI_BANNER_EVERY_N_CARDS
   cards by tenli_render_directory_banner_if_due() (inc/agency-banners.php).
   Colors are per-banner (admin-set), applied inline; layout/motion here. */
.agency-directory__banner-slot { list-style: none; }
.directory-banner {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 18px 24px;
	border-radius: 16px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.directory-banner.is-visible { opacity: 1; transform: translateY(0); }
.directory-banner__image { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.directory-banner__copy { flex: 1 1 auto; min-width: 200px; }
.directory-banner__title { font-size: 18px; margin-block-end: 4px; }
.directory-banner__subtitle { font-size: 14px; opacity: 0.9; margin: 0; }
.directory-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: 999px;
	white-space: nowrap;
	flex: none;
	transition: opacity 0.15s ease;
}
.directory-banner__cta:hover { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
	.directory-banner { opacity: 1; transform: none; transition: none; }
}

/* Breadcrumbs — shared by all agency directory templates (see
   tenli_agency_breadcrumbs() in inc/agency-directory.php). */
.breadcrumbs { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); padding-block-start: 24px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--color-text); opacity: 0.7; }
.breadcrumbs a { color: var(--color-navy); text-decoration: underline; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 6px; opacity: 0.6; }
.breadcrumbs li[aria-current="page"] { font-weight: 600; }

.agency-directory__pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-block-start: 32px; }
.agency-directory__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 8px;
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-navy);
	font-family: var(--font-heading);
}
.agency-directory__pagination .page-numbers.current { background: var(--color-navy); color: var(--color-white); }

.agency-single__table { width: 100%; border-collapse: collapse; }
.agency-single__table th,
.agency-single__table td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--color-bg-light); }
.agency-single__table th { font-family: var(--font-heading); color: var(--color-navy); width: 30%; }
.agency-single__unverified-note { font-size: 13px; opacity: 0.7; margin-block-start: 16px; }
.agency-single__breadcrumbs,
.agency-directory__specialty-links,
.agency-directory__combo-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   Single agency/company page — extended profile sections
   (single-tenli_agency.php). Reuses .wizard__banner/.wizard__form/
   .agency-aside-card/.chip/.btn as-is throughout; the rules below cover only
   what's genuinely new (badge pill, banner meta line, sticky anchor nav,
   the plain "info card" used for About/Services/Companies/Areas/Related, and
   the row-list patterns inside them).
   ========================================================================== */
.profile-badge-pill {
	display: inline-block;
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	padding: 3px 12px;
	border-radius: var(--radius-pill);
	margin-block-end: 10px;
}
.profile-banner-meta {
	color: var(--color-white);
	opacity: 0.9;
	font-size: 14px;
	margin-block-start: 12px;
	display: flex;
	gap: 8px 18px;
	flex-wrap: wrap;
	justify-content: center;
}

/* top:132px (not 0) — sits flush directly under the new sitewide sticky
   .header-top (130px tall desktop; see the header.php/main.css sticky-header
   change), not flush against the viewport's own top edge like before. See
   the matching ≤780px override further down for the header's shorter
   84px mobile height. */
.profile-nav-wrap { position: sticky; top: 132px; z-index: 20; background: var(--color-bg-light); }
.profile-nav { display: flex; justify-content: center; gap: 4px 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(44, 52, 126, 0.12); }
.profile-nav::-webkit-scrollbar { display: none; }
.profile-nav a {
	font-family: var(--font-heading);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-text);
	opacity: 0.6;
	text-decoration: none;
	padding-block: 12px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	flex: 0 0 auto;
}
.profile-nav a.is-active { opacity: 1; color: var(--color-navy); border-block-end-color: var(--color-teal); }
/* Every #anchor the sticky nav links to — without this, smooth-scrolling to
   one lands its heading right under (hidden behind) the sticky bar above).
   72px (.profile-nav-wrap's own height) plus 132px for the sitewide sticky
   .header-top that now also sits above it — see the ≤780px override below
   for the header's shorter mobile height. */
#about, #services, #companies, #areas, #faq, #articles, #related, #contact {
	scroll-margin-top: 204px;
}

/* same recipe as .agency-aside-card — used for every supporting section
   below the main facts card (which reuses .wizard__form as-is). */
.info-card { background: var(--color-white); border-radius: 16px; padding: 24px 28px; box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08); }
.info-card h2 { font-size: 19px; }
.info-card h3 { font-size: 15px; margin-block: 14px 4px; }
.info-card p { font-size: 14px; line-height: 1.75; color: var(--color-text); opacity: 0.88; margin-block: 0 10px; }
.info-card p:last-child { margin-block-end: 0; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; }

.simple-row-list { display: flex; flex-direction: column; }
.simple-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-block: 12px; border-bottom: 1px solid var(--color-bg-light); flex-wrap: wrap; }
.simple-row:last-child { border-bottom: none; }
.simple-row__label { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--color-navy); flex: 0 0 auto; }
.simple-row__desc { font-size: 13.5px; color: var(--color-text); opacity: 0.75; flex: 1 1 260px; }

.related-row { display: flex; justify-content: space-between; align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--color-bg-light); text-decoration: none; color: inherit; gap: 8px; flex-wrap: wrap; }
.related-row:last-child { border-bottom: none; }
.related-row:hover .related-row__name { color: var(--color-teal); }
.related-row__name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--color-navy); }
.related-row__meta { font-size: 12.5px; opacity: 0.6; }

.contact-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding-block: 8px; }
.contact-row a { color: var(--color-navy); font-weight: 600; }

.section-stack { display: flex; flex-direction: column; gap: 24px; }

/* mobile sticky action bar — plain and functional, reuses .btn as-is */
.profile-mobile-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: none;
	gap: 8px;
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
	background: var(--color-white);
	box-shadow: 0 -4px 20px rgba(5, 39, 72, 0.14);
}
.profile-mobile-bar .btn { flex: 1 1 0; font-size: 14px; padding-inline: 10px; }
.btn--call { background: var(--color-navy); color: var(--color-white); box-shadow: 0 6px 16px -6px rgba(44, 52, 126, 0.5); }
.btn--whatsapp { background: #25d366; color: #ffffff; box-shadow: 0 6px 16px -6px rgba(37, 211, 102, 0.5); }
.btn--call:hover,
.btn--whatsapp:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -8px rgba(44, 52, 126, 0.55); }

.quicklead-form { display: flex; flex-direction: column; gap: 12px; }
/* Same author-rule-beats-[hidden] issue as .btn[hidden] etc. above — needed
   here because assets/js/quick-popup.js sets form.hidden=true on successful
   submit and .quicklead-form's own display:flex otherwise wins. */
.quicklead-form[hidden] { display: none; }
.quicklead-form label { font-family: var(--font-heading); font-size: 13px; display: block; margin-block-end: 4px; }
.quicklead-form input,
.quicklead-form select {
	width: 100%;
	border: 1px solid rgba(44, 52, 126, 0.2);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	font-family: var(--font-body);
}
/* .quicklead-form .quicklead-form__consent (two classes), not just
   .quicklead-form__consent alone — this label is also a bare <label>
   descendant of .quicklead-form, so the earlier, higher-specificity
   ".quicklead-form label { display:block }" rule above was winning the
   cascade and silently keeping this a block box, never an actual flex
   container, no matter what display value was written here. */
.quicklead-form .quicklead-form__consent { display: flex; gap: 8px; font-size: 12px; opacity: 0.8; align-items: flex-start; line-height: 1.5; }
/* Text lives in its own <span> (not a bare text node next to the checkbox)
   so it gets a real flex-item width to wrap within, and text-wrap:balance
   evens out the line lengths instead of greedy-wrapping a lone orphan word
   onto its own final line. */
.quicklead-form__consent span { flex: 1 1 auto; min-width: 0; text-wrap: balance; }
/* Brand-colored checkbox instead of the plain OS-default square (which reads
   as an unstyled/broken control next to the rest of this polished form) —
   accent-color is enough on its own, no custom SVG/box needed. */
.quicklead-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-block-start: 1px;
	accent-color: var(--color-teal);
}
.quicklead-form__hint { font-size: 12px; opacity: 0.65; margin: 4px 0 0; line-height: 1.5; }

@media (max-width: 780px) {
	.wizard__banner-title { font-size: 24px; }
}
@media (max-width: 600px) {
	.profile-mobile-bar { display: flex; }
	.info-card { padding: 18px 20px; border-radius: 14px; }
}

/* ==========================================================================
   Cookie consent banner (footer.php)
   ========================================================================== */
.cookie-banner {
	position: fixed;
	inset-inline: 16px;
	bottom: 16px;
	max-width: 760px;
	margin-inline: auto;
	background: var(--color-white);
	border-radius: 20px;
	box-shadow: 0 8px 32px rgba(5, 39, 72, 0.18);
	padding: 24px 28px;
	z-index: 200;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__close {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: var(--color-navy);
}
.cookie-banner__close:hover { background: var(--color-bg-light); }
.cookie-banner__content { padding-inline-start: 32px; text-align: center; }
.cookie-banner__title { font-size: 20px; margin-block-end: 8px; }
.cookie-banner__text { font-size: 14px; line-height: 1.6; margin-block-end: 16px; }
.cookie-banner__text a { text-decoration: underline; font-weight: 700; }

/* ==========================================================================
   Basic fallback template (index.php)
   ========================================================================== */
.basic-content { max-width: 800px; margin-inline: auto; padding: 80px var(--gutter); }
.basic-content .entry-content h2 { font-size: 22px; margin-block: 32px 12px; }
.basic-content .entry-content h3 { font-size: 18px; margin-block: 20px 8px; }
.basic-content .entry-content p { margin-block-end: 16px; line-height: 1.7; }
.basic-content .entry-content ul { list-style: disc; padding-inline-start: 24px; margin-block-end: 16px; }
.basic-content .entry-content li { margin-block-end: 8px; line-height: 1.7; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.services__list { grid-template-columns: repeat(3, 1fr); }
	.services__item { border-inline-end: 0; border-bottom: 1px solid #e4e4ea; gap: 8px; padding-block-end: 16px; }
	.services__item:nth-last-child(-n+3) { border-bottom: 0; }
	.benefits__inner,
	.site-footer__inner { grid-template-columns: 1fr; }
	/* Back to a single reading column below desktop width: stack the two
	   .faq__col columns (right's questions, then left's) instead of placing
	   them side by side. */
	.faq__list { flex-direction: column; max-width: 780px; }
	/* Below 960px the Hero becomes a single full-bleed photo card instead of
	   the desktop's side-by-side split: the real photo is an absolute
	   background filling the whole block, and .hero__content sits on top of
	   it (z-index), anchored toward the bottom over a dark scrim for
	   contrast. DOM order is unchanged (.hero__content still comes first —
	   H1 stays first in reading order); only the visual stacking is done
	   with position/z-index, not by moving the image earlier in the markup. */
	.hero { padding-block-end: 40px; }
	.hero__grid { position: relative; flex-direction: column; min-height: 620px; overflow: hidden; }
	.hero__media { position: absolute; inset: 0; z-index: 0; flex: none; width: 100%; aspect-ratio: auto; }
	/* Desktop's 42% vertical anchor was tuned for that split-column crop; on
	   the taller full-bleed mobile crop it sat lower in the frame than looks
	   right (more legs/sand, less sky/hats). Raised to 28% here — mobile
	   only, confirmed by an actual screenshot, not guessed. */
	.hero__media img { object-position: 15% 28%; }
	/* Dark bottom-up scrim instead of the desktop side seam (same pseudo-
	   element, different job at this width) — content sits in the darkest
	   part near the bottom, the sky/family stay clear and visible up top. */
	.hero__media::after {
		inset: 0;
		width: auto;
		background: linear-gradient(
			to top,
			rgba(5, 39, 72, 0.92) 0%,
			rgba(5, 39, 72, 0.62) 32%,
			rgba(5, 39, 72, 0.18) 62%,
			rgba(5, 39, 72, 0) 100%
		);
	}
	.hero__content {
		position: relative;
		z-index: 2;
		justify-content: flex-end;
		padding: 40px var(--gutter) 40px;
		text-align: center;
		color: var(--color-white);
	}
	/* Navy heading/subtitle text is invisible on a dark photo scrim — flip
	   to white here; the teal accent line stays teal, it already reads fine
	   on a dark background. */
	.hero__title-line { color: var(--color-white); }
	.hero__subtitle { color: rgba(255, 255, 255, 0.92); max-width: 100%; margin-inline: auto; }
	/* CTA row stays right-aligned (not centered) even though the headline/
	   subtitle above it are centered — matches the mobile Figma reference.
	   flex-start, not flex-end: start=right in RTL. (First attempt used
	   flex-end and landed the buttons on the physical left — verified wrong
	   with an actual screenshot, not assumed.) */
	/* .hero__content is a flex column with justify-content:flex-end (see
	   above) inside a ~620px min-height box, so the whole title/subtitle/
	   actions group hugs its bottom edge — adding trailing margin on the
	   LAST child pushes that entire group up by the same amount (verified
	   live: the button row moved up exactly as much as the margin added, not
	   a no-op). Needed because the site's floating accessibility widget
	   (#ga11y-button, a 3rd-party plugin — not theme markup) sits fixed
	   ~20-68px from the real viewport's bottom edge; on shorter phone
	   viewports (address bar visible, ~650-680px) the button row previously
	   landed inside that zone and got visually clipped by the widget —
	   reproduced and confirmed live via a real 412x660 viewport before this
	   fix, not assumed from the desktop-sized screenshot alone. 72px leaves
	   a real ~60px gap at that worst-case height. */
	.hero__actions { justify-content: flex-start; margin-block-end: 72px; }
	/* The navy-on-transparent outline button is also unreadable over a
	   photo — swap to a white-on-transparent variant for this section only. */
	.hero__actions .btn--outline { background: transparent; color: var(--color-white); border-color: var(--color-white); }
	.hero__actions .btn--outline:hover { background: var(--color-white); color: var(--color-navy); }
	.services {
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		width: 100%;
		margin-block-start: 24px;
	}
	/* Same pattern as .hero above: the 740px-tall/absolute-positioned desktop
	   scatter layout is exact-to-the-reference at desktop widths only. Below
	   960px it reverts to normal static flow: `.community__scatter` becomes
	   `display:contents` so its <li> children flatten into `.community__inner`
	   (a row-wrap flex) as siblings of `.community__content`; giving
	   `.community__content` `flex-basis:100%` forces a wrap before and after
	   it, which is what actually produces "some logos above, some below the
	   text" without needing two separate DOM lists. */
	.community { min-height: 0; padding-block: 56px; text-align: center; }
	.community__inner {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 12px;
		height: auto;
		min-height: 0;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}
	.community__scatter { position: static; display: contents; }
	.community__content { flex: 1 0 100%; order: 0; display: flex; flex-direction: column; align-items: center; }
	.community__blob {
		position: static;
		width: 64px;
		height: 64px;
		padding: 9px;
		flex: 0 0 auto;
	}
	/* First 3 (DOM order) float above the text, next 3 float below it — the
	   rest, plus every decorative dot, are dropped so mobile never shows more
	   than 6 logos (per spec). */
	.community__blob:nth-child(-n+3) { order: -1; }
	.community__blob:nth-child(n+4):nth-child(-n+6) { order: 1; }
	.community__blob:nth-child(n+7),
	.community__dot { display: none; }
	.community__title,
	.community__subtitle,
	.community__cta {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		width: auto;
		height: auto;
		margin-inline: auto;
	}
	.community__title { white-space: normal; font-size: 56px; line-height: 1.2; }
	.community__subtitle { white-space: normal; font-size: 26px; line-height: 1.35; }
	.community__cta { display: inline-flex; padding: 10px 24px; min-height: 45px; }
}
/* Tablet portrait (~iPad, 701-960px): don't collapse straight to a phone's
   single column — there's room for two. */
@media (min-width: 701px) and (max-width: 960px) {
	.articles__grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
	/* Compact single-row mobile header: logo + hamburger only (~76px tall).
	   The utility icon-links and the supplier-signup CTA don't fit a bar
	   this slim without wrapping — both move into the drawer instead of
	   disappearing (see .mobile-drawer__nav / __cta below). box-shadow now
	   lives on the base .header-top rule (sticky at all widths). */
	.header-top__inner {
		display: flex;
		align-items: center;
		min-height: 76px;
		padding-block: 14px;
	}
	.header-top__utility,
	.header-top__ctas { display: none; }
	.header-top__brand { width: 100%; justify-content: space-between; }
	/* 2x+ the base 32x26 size on request — also brings it comfortably past
	   the 44px minimum touch-target guideline it was under before. */
	.header-top__menu-icon { display: flex; order: 2; width: 64px; height: 52px; }
	.header-top__menu-icon-bars img { width: 48px; height: 52px; }
	.header-top__menu-icon-close svg { width: 44px; height: 44px; }
	.site-logo { order: 1; }
	.site-logo img { width: 140px; }

	/* .header-bottom (search + old inline nav) has no role on mobile
	   anymore — search is gone by request, nav lives in the drawer. */
	.header-bottom { display: none; }

	.wizard__form { padding: 32px; }

	/* .header-top drops to ~84px tall at this width (compact single-row
	   header above) — the agency profile page's own sticky sub-nav and its
	   #anchor targets need the shorter offset to match, or they'd leave an
	   oversized gap under the header on mobile. */
	.profile-nav-wrap { top: 86px; }
	#about, #services, #companies, #areas, #faq, #articles, #related, #contact {
		scroll-margin-top: 158px;
	}
	/* Fixes a real clipping bug (reported on the destination page's anchor
	   nav, screenshot showing "יעדים מובילים" cut off flush against the
	   screen edge): .profile-nav is centered (justify-content:center) on
	   desktop where it fits, but once its tabs overflow on mobile, a
	   centered flex row spreads the overflow evenly onto BOTH sides —
	   scrolling can only reach one side, so the far tab stays permanently
	   cut off no matter how far you scroll. Left-aligning it here means
	   overflow only happens on one side (the scrollable one), and the
	   inline padding keeps the first/last tab from touching the physical
	   screen edge. */
	.profile-nav { justify-content: flex-start; padding-inline: 16px; }
}
@media (max-width: 600px) {
	.services__list { grid-template-columns: repeat(2, 1fr); }
	.services__item:nth-last-child(-n+3) { border-bottom: 1px solid #e4e4ea; }
	.services__item:nth-last-child(-n+2) { border-bottom: 0; }
	.header-top__utility { display: none; }
	.hero__grid { min-height: 560px; }

	.benefits { padding-block: 48px; }
	.benefits__card { padding: 24px; }

	.wizard { padding-block: 48px; }
	.wizard__form { padding: 24px 20px; }
	.wizard__banner { padding: 24px; border-radius: 16px; }
	.wizard__banner-title { font-size: 22px; }
	.wizard__options { grid-template-columns: 1fr; }

	.articles { padding-block: 48px; }
	.articles__title { font-size: 24px; }
	.articles__tabs { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
	.articles__tab { flex: 0 0 auto; padding: 10px 20px; }
	.articles__grid { grid-template-columns: 1fr; }

	.community { padding-block: 56px; }
	.community__inner { gap: 10px; }
	.community__blob { width: 52px; height: 52px; padding: 7px; }
	.community__content { gap: 10px; }
	.community__title { font-size: 32px; line-height: 1.15; }
	.community__subtitle { font-size: 17px; line-height: 1.4; margin-block: 8px 20px; }

	.faq { padding-block: 48px; }
	.faq__title { font-size: 24px; margin-block: 8px 24px; }

	.site-footer__inner { grid-template-columns: 1fr; padding-block: 40px; gap: 24px; }

	.search-panel { padding: 20px; border-radius: 16px; }
	.search-panel__head { flex-direction: column; align-items: stretch; }
	.add-business-btn { justify-content: center; }
	.directory-banner { padding: 16px; }
	.directory-banner__cta { width: 100%; }
	.site-footer__bottom { padding-block: 16px; flex-direction: column; align-items: flex-start; }
	.site-footer__bottom-brand { width: 100%; justify-content: space-between; }
	.site-footer__social a { width: 44px; height: 44px; font-size: 14px; }
}
@media (max-width: 480px) {
	.btn { white-space: normal; text-align: center; padding-inline: 18px; font-size: 16px; }
}

/* ==========================================================================
   Homepage services card — "ביטוח דירה" link only (page-templates/home-
   insurance.php's landing page). The other 5 category icons stay plain
   (no matching page yet) — see front-page.php's conditional wrap. The inner
   <a> reuses .services__item's own flex recipe so wrapping it changes
   nothing about icon size/position; only hover/focus states are new.
   ========================================================================== */
.services__item-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: 8px;
}
.services__item-link:focus-visible .services__label { color: var(--color-teal); }
@media (prefers-reduced-motion: no-preference) {
	.services__label { transition: color 0.15s ease; }
}

/* ==========================================================================
   "ביטוח דירה" category landing page (page-templates/home-insurance.php).
   MOBILE FIRST by explicit client requirement (unlike the rest of this file,
   which is desktop-first with max-width overrides) — base rules below are
   the mobile layout; tablet/desktop are additive @media (min-width) blocks
   at the end of this section only. Prefixed `.ins-` throughout to avoid any
   collision with the desktop-first components above, even where the visual
   result is intentionally identical (e.g. `.ins-wizard__option` mirrors
   `.wizard__option` exactly, but is built on real <input> elements per this
   page's own fieldset/legend accessibility requirement — see the template's
   file-header comment).
   ========================================================================== */
.ins-section__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: 20px; }
.ins-section__note { font-size: 13px; color: var(--color-text); opacity: 0.65; line-height: 1.6; margin-block-start: 16px; }
.ins-section__cta { text-align: center; margin-block-start: 24px; }

.ins-content { padding-block: 40px; }
.ins-content--tinted { background: var(--color-bg-light); }
.ins-content h2 { font-size: 24px; margin-block-end: 14px; }
.ins-content__lead { font-size: 16.5px; line-height: 1.75; color: var(--color-text); opacity: 0.9; margin-block-end: 20px; max-width: 78ch; }

/* ---------- Hero ---------- */
.ins-hero { padding-block-end: 32px; background: var(--color-bg-light); }
.ins-hero__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: 20px; padding-block-start: 24px; display: flex; flex-direction: column; gap: 28px; }
.ins-hero__title { font-size: 34px; font-weight: 800; line-height: 1.1; }
.ins-hero__subtitle { color: var(--color-teal); font-family: var(--font-heading); font-weight: 700; font-size: 19px; margin-block-start: 8px; }
.ins-hero__intro { margin-block-start: 16px; font-size: 16.5px; line-height: 1.7; color: var(--color-text); max-width: 62ch; }
.ins-hero__benefits { margin-block-start: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ins-hero__benefit { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--color-navy); }
.ins-hero__benefit-icon { display: flex; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-teal); box-shadow: 0 2px 8px rgba(44, 52, 126, 0.08); }
.ins-hero__benefit-icon svg { width: 16px; height: 16px; }

.ins-hero__visual { position: relative; align-self: center; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.ins-hero__dome { position: absolute; inset: 0; border-radius: 50%; background: var(--color-white); border: 2px solid rgba(76, 186, 186, 0.35); box-shadow: 0 20px 50px rgba(44, 52, 126, 0.12); }
/* Same PNG icon as the homepage services bar (tenli_insurance_categories(),
   assets/images/icons/service-*.png) — reused here instead of a bespoke
   inline SVG per page, so the icon in the hero circle actually matches the
   one the visitor already saw in the toolbar. No separate checkmark badge
   needed anymore: each service-*.png already bakes its own confirmation
   accent into the artwork. */
.ins-hero__icon-img { position: relative; z-index: 1; width: 120px; height: 120px; object-fit: contain; }

/* ---------- Wizard ---------- */
.ins-wizard { padding-block: 32px; background: var(--color-bg-light); }
.ins-wizard__inner { max-width: 900px; margin-inline: auto; padding-inline: 20px; }
.ins-wizard__form { padding: 24px 20px; }

.ins-wizard__progress-wrap { margin-block-end: 20px; }
.ins-wizard__progress-track { height: 6px; border-radius: 999px; background: var(--color-bg-light); border: 1px solid rgba(44, 52, 126, 0.15); overflow: hidden; }
.ins-wizard__progress-fill { height: 100%; width: 11.11%; background: var(--color-teal); border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
	.ins-wizard__progress-fill { transition: width 0.25s ease; }
}
.ins-wizard__progress-text { margin-block-start: 8px; font-size: 13px; font-family: var(--font-heading); color: var(--color-navy); text-align: center; }

.ins-wizard__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.ins-wizard__legend {
	width: 100%;
	padding: 0;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-navy);
	text-align: center;
	margin-block-end: 20px;
}
.ins-wizard__legend--small { font-size: 15px; margin-block: 16px 12px; }
.ins-wizard__legend-hint { display: block; font-weight: 500; font-size: 13px; opacity: 0.65; margin-block-start: 4px; }

.ins-wizard__options { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block-end: 8px; }
.ins-wizard__options--inline { grid-template-columns: 1fr 1fr; max-width: 320px; margin-inline: auto; }
.ins-wizard__subfield { border: 0; padding: 0; margin-block-start: 8px; }

.ins-wizard__option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid var(--color-navy);
	border-radius: 12px;
	background: var(--color-white);
	font-family: var(--font-heading);
	font-size: 16px;
	text-align: center;
	cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
	.ins-wizard__option { transition: background-color 0.15s ease, color 0.15s ease; }
}
.ins-wizard__option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.ins-wizard__option:hover,
.ins-wizard__option.is-selected { background: var(--color-navy); color: var(--color-white); }
.ins-wizard__option:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-navy); }

.ins-wizard__result-loading { text-align: center; font-family: var(--font-heading); color: var(--color-navy); padding-block: 24px; }
.ins-wizard__result-range { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--color-navy); text-align: center; margin-block-end: 12px; }
.ins-wizard__result-recommended { text-align: center; font-size: 16px; margin-block-end: 20px; }
.ins-wizard__result-block { background: var(--color-bg-light); border-radius: 12px; padding: 16px 18px; margin-block-end: 14px; }
.ins-wizard__result-block h4 { font-family: var(--font-heading); font-size: 15px; color: var(--color-navy); margin-block-end: 8px; }
.ins-wizard__result-block ul { list-style: disc; padding-inline-start: 20px; }
.ins-wizard__result-block li { font-size: 15px; line-height: 1.7; color: var(--color-text); }
.ins-wizard__result-disclaimer { font-size: 12.5px; color: var(--color-text); opacity: 0.7; text-align: center; line-height: 1.6; margin-block-start: 12px; }

/* ---------- Sample offers ---------- */
.ins-offers__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-block-start: 20px; }
.ins-offers__card h3 { font-size: 17px; margin-block-end: 6px; }
.ins-offers__card p { font-size: 15px; }

/* ---------- Coverage strip ---------- */
.ins-coverage-strip { padding-block: 32px; }
.ins-coverage-strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.ins-coverage-strip__item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ins-coverage-strip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-bg-light);
	color: var(--color-navy);
}
.ins-coverage-strip__icon svg { width: 26px; height: 26px; }
.ins-coverage-strip__label { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--color-navy); }

/* ---------- Coverage/what's-included cards ---------- */
.ins-cards-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ins-cards-grid__card { position: relative; padding-block-start: 52px; }
.ins-cards-grid__icon {
	position: absolute;
	top: -18px;
	inset-inline-start: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--color-white);
	color: var(--color-teal);
	box-shadow: 0 4px 14px rgba(44, 52, 126, 0.15);
}
.ins-cards-grid__icon svg { width: 22px; height: 22px; }
/* Overrides the sitewide .info-card h3/p sizes (15px/14px, tuned for the
   agency-profile page's denser layout) — this page's brief called out
   content that reads too small, so cards here get a bigger, more legible
   scale instead of inheriting that default. */
.ins-cards-grid__card h3 { font-size: 17px; }
.ins-cards-grid__card p { font-size: 15px; }
.ins-cards-grid__example { font-size: 13.5px; opacity: 0.7; font-style: italic; }

/* ---------- Checklist ---------- */
.ins-checklist { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.ins-checklist li { position: relative; padding-inline-start: 30px; font-size: 16px; line-height: 1.6; color: var(--color-text); }
.ins-checklist li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-teal);
}
.ins-checklist li::after {
	content: '';
	position: absolute;
	inset-inline-start: 6px;
	top: 8px;
	width: 9px;
	height: 5px;
	border-inline-start: 2px solid var(--color-white);
	border-block-end: 2px solid var(--color-white);
	transform: rotate(-45deg);
}
.ins-checklist--muted li::before { background: #b9c0d6; }

/* ---------- Pricing placeholder ---------- */
.ins-pricing-placeholder p:first-child { font-family: var(--font-heading); font-size: 16px; color: var(--color-navy); margin-block-end: 8px; }

/* ---------- Process ---------- */
.ins-process { padding-block: 40px; }
.ins-process h2 { font-size: 24px; text-align: center; margin-block-end: 24px; }
.ins-process__steps { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ins-process__step { background: var(--color-white); border: 1px solid var(--color-bg-light); border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px rgba(44, 52, 126, 0.06); }
.ins-process__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-teal);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	margin-block-end: 12px;
}
.ins-process__step h3 { font-size: 17px; margin-block-end: 6px; }
.ins-process__step p { font-size: 15px; color: var(--color-text); opacity: 0.85; }

/* ---------- Comparison table -> cards on mobile ---------- */
.ins-compare-table-wrap { margin-block-start: 8px; }
.ins-compare-table { width: 100%; border-collapse: collapse; }
.ins-compare-table thead { display: none; }
.ins-compare-table tr { display: block; background: var(--color-white); border: 1px solid var(--color-bg-light); border-radius: 14px; padding: 14px 16px; margin-block-end: 12px; }
.ins-compare-table th[scope="row"] { display: block; text-align: right; font-family: var(--font-heading); color: var(--color-navy); font-size: 16px; padding-block-end: 8px; }
.ins-compare-table td { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; font-size: 14.5px; border-block-start: 1px solid var(--color-bg-light); }
.ins-compare-table td::before { content: attr(data-label); font-weight: 600; color: var(--color-navy); opacity: 0.7; }

/* ---------- Articles + FAQ split ---------- */
.ins-split { display: grid; grid-template-columns: 1fr; gap: 36px; }
.ins-articles__grid { grid-template-columns: 1fr; gap: 20px; }

/* Same row-accordion look as the shared .faq__list/.faq__item base, minus
   the homepage's centered max-width — this list should fill the full width
   of its .ins-split column instead. */
.ins-faq__list { display: flex; flex-direction: column; gap: 0; }
.ins-faq__list .faq__item {
	display: block;
	min-height: 0;
	background: transparent;
	border-radius: 0;
	padding: 0;
	border-block-end: 1px solid rgba(44, 52, 126, 0.14);
}
.ins-faq__list .faq__item:first-child { border-block-start: 1px solid rgba(44, 52, 126, 0.14); }
.ins-faq__list .faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px;
}
.ins-faq__list .faq__item summary::after {
	content: '';
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid var(--color-navy);
	border-block-end: 2px solid var(--color-navy);
	transform: rotate(45deg);
}
.ins-faq__list .faq__item[open] summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) {
	.ins-faq__list .faq__item summary::after { transition: transform 0.2s ease; }
}
.ins-faq__list .faq__item p { margin: 0; padding: 0 4px 20px; color: var(--color-text); opacity: 0.85; font-size: 15px; line-height: 1.7; }

/* ---------- Trust card ---------- */
.ins-trust { padding-block: 32px; }
.ins-trust__card p { font-size: 15px; line-height: 1.7; }
.ins-trust__card ul { list-style: disc; padding-inline-start: 20px; margin-block: 4px 10px; }
.ins-trust__card li { font-size: 14.5px; line-height: 1.6; }
.ins-trust__disclaimer { opacity: 0.65; font-size: 12.5px; padding-block-start: 10px; border-block-start: 1px solid var(--color-bg-light); }

/* ---------- Closing CTA ---------- */
.ins-cta { background: var(--color-navy); padding-block: 40px; }
.ins-cta__inner { display: flex; flex-direction: column; gap: 20px; text-align: center; align-items: center; }
.ins-cta__copy h2 { color: var(--color-white); font-size: 22px; margin-block-end: 8px; }
.ins-cta__copy p { color: var(--color-white); opacity: 0.9; font-size: 16px; }
.ins-cta__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ins-cta__actions .btn { width: 100%; }
.btn--outline-light { background: transparent; color: var(--color-white); border: 2px solid var(--color-white); }
.btn--outline-light:hover { background: var(--color-white); color: var(--color-navy); transform: translateY(-3px); }

/* ==========================================================================
   Calculators — "split dashboard" chrome shared by the /calculators/ hub
   page and the .calc-live companion panel wrapped around each single
   calculator's UNCHANGED [data-ins-wizard] form (car/home/personal-accident/
   life/travel/health-insurance). Mobile-first, same convention as the rest
   of this .ins-* family (see the ≥701px/≥961px blocks below). Synced by
   assets/js/calc-live-panel.js, which only observes DOM state the wizard
   engines already produce — it never touches those engines.
   ========================================================================== */

/* ---------- Single calculator page: live panel wrapper ---------- */
/* Replaces .ins-wizard__inner as this section's centering container (wider,
   to leave the untouched .ins-wizard__form room next to .calc-live on
   desktop) — .ins-wizard__inner itself is unused by these 3 re-skinned
   templates now, but left defined since nothing else references it. */
.calc-split-wrap { max-width: 1100px; margin-inline: auto; padding-inline: 20px; margin-block-start: 24px; }
.calc-form-card { min-width: 0; }
/* .calc-live is a desktop-only companion to the wizard's own progress bar
   (data-ins-progress-text) — on mobile that existing progress bar already
   communicates progress, so no second UI competes for the narrow viewport. */
.calc-live { display: none; }

/* ---------- Hub page (/calculators/) ---------- */
.calc-shell { max-width: var(--container-max); margin-inline: auto; padding-inline: 20px; padding-block: 32px 64px; display: flex; flex-direction: column; gap: 24px; }

.calc-sidebar { background: var(--color-white); border: 1px solid var(--color-bg-light); border-radius: 18px; padding: 22px; }
.calc-sidebar h2 { font-size: 19px; margin-block-end: 4px; }
.calc-sidebar__hint { font-size: 12.5px; color: var(--color-text); opacity: 0.65; margin-block-end: 16px; }

.calc-search-box { position: relative; margin-block-end: 18px; }
.calc-search-box input { width: 100%; border: 1.5px solid var(--color-bg-light); border-radius: 12px; padding: 11px 40px 11px 12px; font-size: 14px; font-family: inherit; outline: none; }
.calc-search-box input:focus-visible { border-color: var(--color-navy); }
.calc-search-box svg { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text); opacity: 0.5; pointer-events: none; }

.calc-filter-group { margin-block-end: 18px; }
.calc-filter-group:last-child { margin-block-end: 0; }
.calc-filter-group h4 { font-size: 12.5px; font-family: var(--font-heading); color: var(--color-navy); margin-block-end: 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.calc-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding-block: 6px; cursor: pointer; }
.calc-check input { width: 16px; height: 16px; accent-color: var(--color-teal); }
.calc-check--all { font-weight: 700; color: var(--color-navy); padding-block-end: 10px; margin-block-end: 6px; border-block-end: 1px solid var(--color-bg-light); }
.calc-check__count { margin-inline-start: auto; color: var(--color-text); opacity: 0.55; font-size: 12px; font-variant-numeric: tabular-nums; }

.calc-main-head { margin-block-end: 16px; }
.calc-main-head h1 { font-size: 26px; }
.calc-main-head__count { font-size: 13px; color: var(--color-text); opacity: 0.6; margin-block-start: 4px; }

.calc-list { display: flex; flex-direction: column; gap: 10px; }
.calc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--color-white); border: 1px solid var(--color-bg-light); border-radius: 14px; padding: 16px 18px; transition: border-color 0.15s ease; }
/* `.calc-row{display:flex}` above outranks the UA stylesheet's
   `[hidden]{display:none}` — without this, assets/js/calculators-hub.js
   setting row.hidden=true has no visual effect at all (the exact bug the
   user hit: unchecking every sidebar filter still showed all 7 rows). */
.calc-row[hidden] { display: none; }
.calc-row:hover { border-color: var(--color-teal); }
.calc-row__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--color-navy); background: var(--color-bg-light); }
.calc-row__icon svg { width: 22px; height: 22px; }
.calc-row__body { flex: 1 1 160px; min-width: 0; }
.calc-row__title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-navy); }
.calc-row__desc { font-size: 13.5px; color: var(--color-text); opacity: 0.7; margin-block-start: 3px; }
.calc-row__meta { flex: 0 0 100%; order: 3; display: flex; gap: 14px; font-size: 12px; color: var(--color-text); opacity: 0.65; font-family: var(--font-heading); font-weight: 600; }
.calc-row__meta span { display: flex; align-items: center; gap: 4px; }
.calc-row__meta svg { width: 13px; height: 13px; }
.calc-row__btn { flex: 0 0 100%; order: 4; text-align: center; background: rgba(76, 186, 186, 0.14); color: var(--color-teal); border-radius: 10px; padding: 10px 18px; font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; }
.calc-row.is-external .calc-row__btn { background: var(--color-bg-light); color: var(--color-navy); }
.calc-row__empty { text-align: center; padding-block: 40px; color: var(--color-text); opacity: 0.6; font-size: 14.5px; }

/* ---------- Tablet (≥701px) ---------- */
@media (min-width: 701px) {
	.ins-hero__benefits { grid-template-columns: repeat(4, 1fr); }
	.ins-offers__grid { grid-template-columns: repeat(2, 1fr); }
	.ins-coverage-strip__list { grid-template-columns: repeat(3, 1fr); }
	.ins-cards-grid { grid-template-columns: repeat(2, 1fr); }
	.ins-process__steps { grid-template-columns: repeat(2, 1fr); }
	.ins-articles__grid { grid-template-columns: repeat(2, 1fr); }
	.ins-cta__actions { flex-direction: row; width: auto; }
	.ins-cta__actions .btn { width: auto; }

	.calc-row__meta { flex: none; order: 0; }
	.calc-row__btn { flex: none; order: 0; }
}

/* ---------- Desktop (≥961px) ---------- */
@media (min-width: 961px) {
	.ins-hero__inner {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		align-items: center;
		gap: 48px;
		padding-block-start: 32px;
	}
	.ins-hero__content { text-align: right; }
	.ins-hero__title { font-size: 52px; }
	.ins-hero__subtitle { font-size: 24px; }
	.ins-hero__intro { margin-inline: 0; }
	.ins-hero__benefits { grid-template-columns: repeat(4, 1fr); }
	.ins-hero__visual { width: 320px; height: 320px; justify-self: start; }
	.ins-hero__icon-img { width: 160px; height: 160px; }

	.ins-wizard__inner { max-width: 760px; }
	.ins-wizard__form { padding: 40px 60px; }
	.ins-wizard__options { grid-template-columns: repeat(2, 1fr); }
	.ins-wizard__options--stack { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
	.ins-wizard__options--inline { grid-template-columns: 1fr 1fr; }

	.ins-offers__grid { grid-template-columns: repeat(4, 1fr); }
	.ins-coverage-strip__list { grid-template-columns: repeat(6, 1fr); }
	.ins-cards-grid { grid-template-columns: repeat(3, 1fr); }
	.ins-process__steps { grid-template-columns: repeat(4, 1fr); }

	.ins-compare-table thead { display: table-header-group; }
	.ins-compare-table tr { display: table-row; border: 0; padding: 0; margin: 0; border-bottom: 1px solid var(--color-bg-light); }
	.ins-compare-table th,
	.ins-compare-table td { display: table-cell; padding: 12px 16px; border: 0; }
	.ins-compare-table th[scope="col"] { font-family: var(--font-heading); color: var(--color-navy); text-align: center; }
	.ins-compare-table th[scope="row"] { text-align: right; }
	.ins-compare-table td { text-align: center; }
	.ins-compare-table td::before { content: none; }

	/* Wide comparison tables (more than the usual 3 data columns — e.g.
	   personal-accident-insurance's 5-way comparison) keep each column at a
	   comfortable reading width and scroll horizontally instead of being
	   crammed into the same 100%-width table car/home's 3-column comparison
	   uses. Same table skeleton/typography as .ins-compare-table — additive
	   modifier, not a fork — so car/home (which never carry this class) are
	   unaffected. Dressed as a card (same recipe as .info-card elsewhere on
	   this page) with a sticky right-hand label column and zebra striping,
	   rather than a bare scrolling <table>, so it reads as an intentional
	   component instead of a raw HTML fallback. */
	.ins-compare-table-wrap--wide {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--color-white);
		border-radius: 16px;
		box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08);
		padding: 6px;
	}
	.ins-compare-table--wide { min-width: 1100px; border-collapse: separate; border-spacing: 0; }
	.ins-compare-table--wide th,
	.ins-compare-table--wide td { white-space: nowrap; }
	.ins-compare-table--wide thead th { padding-block: 16px; }
	.ins-compare-table--wide tbody tr:nth-child(even) { background: var(--color-bg-light); }
	.ins-compare-table--wide tr > *:first-child {
		position: sticky;
		right: 0;
		z-index: 2;
		box-shadow: -8px 0 12px -10px rgba(44, 52, 126, 0.35);
	}
	.ins-compare-table--wide thead tr > *:first-child { background: var(--color-white); z-index: 3; }
	.ins-compare-table--wide tbody tr:nth-child(odd) > *:first-child { background: var(--color-white); }
	.ins-compare-table--wide tbody tr:nth-child(even) > *:first-child { background: var(--color-bg-light); }
	.ins-compare-table__hint { margin-block-start: 10px; font-size: 12.5px; color: var(--color-text); opacity: 0.6; text-align: center; }

	.ins-split { grid-template-columns: 1fr 1fr; gap: 48px; }

	.ins-cta__inner { flex-direction: row; justify-content: space-between; text-align: right; }
	.ins-cta__copy h2 { font-size: 28px; }

	/* Section headings sized to match the rest of the site's desktop scale
	   (e.g. .faq__title/.articles__title are 30px) — the mobile 24px base
	   they share with everything above stayed too small once there's real
	   desktop width to use. */
	.ins-content h2,
	.ins-process h2 { font-size: 30px; }
	.ins-content__lead { font-size: 17px; }

	/* ---------- Single calculator page: live panel ---------- */
	.calc-split { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
	.calc-live {
		display: block;
		position: sticky;
		/* 130px sitewide sticky .header-top + original 24px gap — this panel
		   only ever shows at this desktop breakpoint, matching the header's
		   desktop height. */
		top: 154px;
		background: var(--color-navy);
		color: var(--color-white);
		border-radius: 18px;
		padding: 26px;
	}
	.calc-live__label { font-family: var(--font-heading); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-teal); }
	.calc-live__title { font-size: 17px; line-height: 1.5; margin-block-start: 8px; color: var(--color-white); }
	.calc-live__checklist { margin-block-start: 20px; display: flex; flex-direction: column; gap: 11px; }
	.calc-live__checklist li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; opacity: 0.5; transition: opacity 0.15s ease; }
	.calc-live__checklist li.is-answered { opacity: 1; }
	.calc-live__checklist svg { width: 16px; height: 16px; color: var(--color-teal); flex: none; }
	.calc-live__ready { display: none; margin-block-start: 20px; padding-block-start: 18px; border-block-start: 1px solid rgba(255, 255, 255, 0.18); font-size: 13.5px; line-height: 1.6; color: var(--color-white); }
	.calc-live.is-ready .calc-live__checklist { display: none; }
	.calc-live.is-ready .calc-live__ready { display: block; }

	/* ---------- Hub page ---------- */
	.calc-shell { flex-direction: row; align-items: flex-start; }
	.calc-sidebar { flex: 0 0 280px; position: sticky; top: 154px; } /* 130px sticky header + original 24px gap */
	.calc-main { flex: 1; min-width: 0; }
}

/* ==========================================================================
   "ביטוחים" mega menu — desktop trigger + panel (header.php,
   tenli_render_insurance_mega_menu_desktop(), inc/insurance-mega-menu.php).
   The mobile version reuses .mobile-drawer__* classes instead (see the
   Mobile drawer block above) — everything in THIS block only ever renders
   inside .header-bottom, which is already display:none ≤780px, so no extra
   media query is needed to hide it on mobile.
   ========================================================================== */
/* NOT position:relative on this <li> — the panel below (#insurance-mega-
   panel) is centered against the full-width .header-bottom bar via its own
   position:relative (see the .header-bottom rule near the top of this
   file). Giving this narrow <li> its own position:relative would make IT
   the containing block instead, collapsing the panel's 50%-centering math
   down to this button's own ~100px width — caught live via Playwright
   (panel rendered ~430px off-center) before this comment was added. */
.header-bottom__mega-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 21px;
	color: var(--color-white);
	padding: 0;
}
.header-bottom__mega-chevron { width: 16px; height: 16px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
	.header-bottom__mega-chevron { transition: transform 0.2s ease; }
}
.header-bottom__mega-trigger:hover,
.header-bottom__mega-trigger[aria-expanded="true"] { color: var(--color-teal); }
.header-bottom__mega-trigger[aria-expanded="true"] .header-bottom__mega-chevron { transform: rotate(180deg); }

/* Visibility driven ONLY by assets/js/mega-menu.js's .is-open class (click,
   or keyboard focus) — deliberately NOT :hover (no mouse-hover-to-open
   fallback; the user explicitly asked for click-only, 30.07.2026). Uses
   opacity/visibility, not display:none, so it can transition AND still gets
   correctly excluded from the accessibility tree while closed — same
   pattern already used for .mobile-drawer-overlay above. Deliberately does
   NOT also key off :focus-within: that would make focus returning to the
   trigger after Escape immediately reopen the panel via CSS, defeating the
   "Escape closes and returns focus" requirement. */
.ins-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	width: calc(100vw - 48px);
	max-width: var(--header-container-max);
	margin-block-start: 14px;
	background: var(--color-white);
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(5, 39, 72, 0.25);
	z-index: 120;
	text-align: right;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-8px);
}
.header-bottom__nav-item--mega.is-open .ins-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
	.ins-mega { transition: opacity 0.18s ease, visibility 0s linear 0.18s, transform 0.18s ease; }
	.header-bottom__nav-item--mega.is-open .ins-mega { transition: opacity 0.18s ease, transform 0.18s ease; }
}
.ins-mega__inner { padding: 36px 40px 32px; display: flex; flex-direction: column; gap: 28px; }

/* ---------- Upper: 6 category columns + promo card ---------- */
.ins-mega__upper { display: grid; grid-template-columns: repeat(6, 1fr) 250px; gap: 0 8px; align-items: stretch; }
.ins-mega__columns { display: contents; }
.ins-mega__col {
	display: flex;
	flex-direction: column;
	padding-inline: 16px;
	border-inline-end: 1px solid var(--color-bg-light);
}
.ins-mega__col:first-child { padding-inline-start: 0; }
.ins-mega__col:last-child { border-inline-end: 0; }
.ins-mega__col-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-block-end: 14px;
}
.ins-mega__col-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-bg-light);
	color: var(--color-navy);
	flex: none;
}
.ins-mega__col-icon svg { width: 20px; height: 20px; }
.ins-mega__col-title { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; color: var(--color-navy); }
.ins-mega__col-head:hover .ins-mega__col-title,
.ins-mega__col-head:focus-visible .ins-mega__col-title { color: var(--color-teal); }
/* Higher-specificity selector required here — .header-bottom__nav ul ul
   (near the top of this file, the "never dump an unstyled legacy submenu"
   guard) would otherwise also catch these two lists: both really are <ul>
   elements nested inside another <ul>, since #insurance-mega-panel sits
   inside the "ביטוחים" <li> which is itself inside .header-bottom__nav's
   own top-level <ul>. Confirmed live via Playwright — both rendered with
   display:none / zero size under the plain .ins-mega__col-list selector. */
.header-bottom__nav .ins-mega__col-list { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.ins-mega__link {
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-text);
	opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
	.ins-mega__link { transition: color 0.15s ease, opacity 0.15s ease; }
}
.ins-mega__link:hover,
.ins-mega__link:focus-visible { color: var(--color-teal); opacity: 1; }
.ins-mega__link--placeholder { opacity: 0.4; cursor: default; }
.ins-mega__link--placeholder:hover,
.ins-mega__link--placeholder:focus-visible { color: var(--color-text); opacity: 0.4; }

.ins-mega__promo {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
}
.ins-mega__promo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ins-mega__promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 39, 72, 0) 30%, rgba(5, 39, 72, 0.85) 100%);
	z-index: 1;
}
/* .ins-mega__promo (the card) is display:flex; align-items:flex-end —
   that alone bottom-aligns this, its only in-flow child (the background
   image is position:absolute). width:100% is still needed here so
   text-align:center centers against the full card width, not just this
   block's own shrink-to-fit content width. */
.ins-mega__promo-copy {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 20px;
	color: var(--color-white);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ins-mega__promo-title { color: var(--color-white); font-size: 19px; line-height: 1.3; margin-block-end: 8px; }
.ins-mega__promo-text { font-size: 13px; line-height: 1.5; opacity: 0.9; margin-block-end: 16px; }
/* Distinct from the sitewide .btn shapes on purpose — matches the reference
   mockup's pill button exactly: white fill, navy text, fully rounded (not
   the asymmetric .btn corner), small leading arrow. Scoped to this one
   card, not a new global button variant. */
.ins-mega__promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-white);
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(5, 39, 72, 0.25);
}
.ins-mega__promo-cta svg { width: 16px; height: 16px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
	.ins-mega__promo-cta { transition: transform 0.15s ease; }
}
.ins-mega__promo-cta:hover,
.ins-mega__promo-cta:focus-visible { transform: translateY(-2px); }

/* ---------- Lower: matcher card + company index card ---------- */
.ins-mega__lower { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ins-mega__lower-card {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--color-bg-light);
	border-radius: 18px;
	padding: 24px;
}
.ins-mega__lower-copy { min-width: 0; }
.ins-mega__lower-copy h3 { font-size: 18px; margin-block-end: 8px; }
.ins-mega__lower-copy p { font-size: 13.5px; color: var(--color-text); opacity: 0.85; line-height: 1.5; margin-block-end: 14px; }
.ins-mega__lower-card--match .ins-mega__lower-copy { flex: 1 1 auto; }
.ins-mega__lower-card--match .ins-mega__lower-img { width: 140px; height: 100px; border-radius: 12px; object-fit: cover; flex: none; }

/* Companies card: copy on the right (fixed-ish width), logos + index CTA
   grouped together as one block on the left — one row of logos, not the
   two-row wrap this used to collapse into once the copy's own flex-grow
   left too little room for all 5 in a single line. */
.ins-mega__lower-card--companies .ins-mega__lower-copy { flex: 0 1 230px; }
.ins-mega__companies-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Same .header-bottom__nav ul ul specificity issue as .ins-mega__col-list
   above — this is also a <ul> nested inside the nav's own <ul>. */
.header-bottom__nav .ins-mega__companies { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.ins-mega__companies li { display: flex; flex: none; }
.ins-mega__companies img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	background: var(--color-white);
	border-radius: 50%;
	padding: 9px;
	box-shadow: 0 4px 12px rgba(44, 52, 126, 0.1);
}
@media (prefers-reduced-motion: no-preference) {
	.ins-mega__companies a { transition: transform 0.15s ease; }
}
.ins-mega__companies a:hover,
.ins-mega__companies a:focus-visible { transform: translateY(-2px); }
.ins-mega__company-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 10.5px;
	text-align: center;
	padding: 4px;
	box-shadow: 0 4px 12px rgba(44, 52, 126, 0.1);
}
.ins-mega__companies-col .ins-mega__companies-cta { margin-block-end: 0; }

/* Tablet / narrow desktop (781–1200px — .header-bottom is still visible
   here, only ≤780px switches to the mobile drawer): 6 columns + a fixed-
   width promo card no longer fit — wrap to 3 columns per row, promo card
   full-width beneath, lower cards stack. */
@media (max-width: 1200px) {
	.ins-mega { width: calc(100vw - 32px); }
	.ins-mega__inner { padding: 28px 24px; }
	.ins-mega__upper { grid-template-columns: repeat(3, 1fr); }
	.ins-mega__col { border-inline-end: 0; border-block-end: 1px solid var(--color-bg-light); padding-block-end: 16px; margin-block-end: 4px; }
	.ins-mega__promo { grid-column: 1 / -1; min-height: 200px; flex-direction: row; align-items: stretch; }
	.ins-mega__promo-img { position: static; width: 200px; height: auto; flex: none; }
	.ins-mega__promo::after { background: linear-gradient(90deg, rgba(5, 39, 72, 0.9), rgba(5, 39, 72, 0.55)); }
	.ins-mega__promo-copy { display: flex; flex-direction: column; justify-content: center; }
	.ins-mega__lower { grid-template-columns: 1fr; }
}

/* ==========================================================================
   "ביטוחים" mega menu — mobile accordion content (nested inside the
   existing mobile drawer's own .mobile-drawer__sublist-wrap; see the direct-
   child combinator fix on .mobile-drawer__item.is-expanded above and
   tenli_render_insurance_mega_menu_mobile(), inc/insurance-mega-menu.php).
   ========================================================================== */
.mobile-drawer__sublist--nested { padding-block: 4px; }
.ins-mega__mobile-companies,
.ins-mega__mobile-match { padding: 16px 20px; }
.ins-mega__mobile-companies-head strong { display: block; font-family: var(--font-heading); font-size: 15px; color: var(--color-navy); margin-block-end: 4px; }
.ins-mega__mobile-companies-head p { font-size: 13px; color: var(--color-text); opacity: 0.75; margin-block-end: 14px; }
.ins-mega__companies--mobile img,
.ins-mega__companies--mobile .ins-mega__company-fallback { width: 48px; height: 48px; }
.ins-mega__mobile-match p { font-size: 13.5px; color: var(--color-text); line-height: 1.5; margin-block-end: 12px; }
.ins-mega__mobile-match .btn,
.ins-mega__mobile-companies .btn { width: 100%; justify-content: center; }

/* ==========================================================================
   Calculator "embed mode" (inc/calc-embed.php) — the standalone document
   rendered at ?tenli_embed=1 on any of the 6 calculator pages: just the
   <section class="ins-wizard"> block, no header/footer chrome. Used by the
   /insurance-calculators/ hub's popup (.calc-modal below) and, later, by an
   external agent embed.
   ========================================================================== */
.tenli-calc-embed { background: var(--color-bg-light); }
.tenli-calc-embed .ins-wizard { padding-block: 24px; }
.tenli-calc-embed__credit {
	text-align: center;
	font-size: 12px;
	color: var(--color-text);
	opacity: 0.6;
	padding-block: 12px 20px;
}
.tenli-calc-embed__credit a { color: var(--color-navy); text-decoration: underline; }

/* Shown instead of the wizard when ?tenli_embed_agency=<token> resolves to
   an agency that isn't currently active (see inc/embed-requests.php) — the
   explicit product decision is that the calculator visibly refuses to work
   rather than silently falling back to shared marketplace routing. */
.tenli-calc-embed__blocked {
	max-width: 480px;
	margin-inline: auto;
	padding: 28px 24px;
	text-align: center;
	background: var(--color-white);
	border: 1.5px solid rgba(224, 76, 76, 0.35);
	border-radius: 16px;
}
.tenli-calc-embed__blocked p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--color-text); }
.tenli-calc-embed__blocked p:first-child { color: #c0392b; font-size: 16px; }
.tenli-calc-embed__blocked p:last-child { margin-bottom: 0; }
.tenli-calc-embed__blocked a { color: var(--color-navy); text-decoration: underline; }

/* ==========================================================================
   Calculators hub popup (page-templates/calculators-hub.php,
   assets/js/calculators-hub.js) — native <dialog> + <iframe>, same pattern
   as .agency-inquiry-modal.
   ========================================================================== */
.calc-modal {
	border: 0;
	border-radius: 16px;
	padding: 0;
	width: min(900px, calc(100% - 32px));
	height: calc(100% - 64px);
	box-shadow: 0 20px 60px rgba(5, 39, 72, 0.25);
	overscroll-behavior: contain;
}
.calc-modal::backdrop { background: rgba(5, 39, 72, 0.55); }
.calc-modal__close {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-navy);
	box-shadow: 0 2px 10px rgba(5, 39, 72, 0.18);
}
.calc-modal__close svg { width: 16px; height: 16px; }
.calc-modal__close:hover { background: var(--color-bg-light); }
.calc-modal__frame { display: block; width: 100%; height: 100%; border: 0; border-radius: 16px; }
@media (max-width: 600px) {
	.calc-modal { width: 100%; height: 100%; border-radius: 0; }
	.calc-modal__frame { border-radius: 0; }
}

/* ==========================================================================
   Destinations — single-tenli_destination.php + shared destination-card
   partial (tenli_render_destination_card(), inc/destinations-directory.php).
   Reuses .ins-content/.ins-content--tinted, .info-card, .chip, .faq__list,
   .calc-split-wrap/.calc-live, .profile-nav-wrap/.profile-nav, .wizard__*
   from elsewhere in this file — only genuinely new components get new rules
   here (hero, quick-facts sidebar, card grid, seasonal picker, warning
   module, map).
   ========================================================================== */

/* Narrower than the site's normal 1440px container on purpose — this page
   is read top-to-bottom like an article, not scanned like a dashboard (same
   1100px reading width as assets/css/article.css's .tenli-article). Shared
   by every section here AND by the index/taxonomy archive listings
   (archive-tenli_destination.php etc.) for a consistent feel across the
   whole destinations feature. */
.destination-section__inner { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }

/* ---- Hero v2 (29.07.2026) — single full-bleed photo + overlaid card,
   approved via design-review Artifact after two iterations (rejected: a
   2-col intro+slider layout, and flat-gradient placeholder imagery). Facts
   that used to live in a sidebar card (.destination-qf, removed) now split
   into a compact 4-item row inside the overlay card (season/trip-length/
   currency/direct-flight) and a full-width strip below the hero (warning/
   trip-length/exchange-rate/weather/local-time/continent) — see
   .destination-facts-strip below. Live-data JS hooks are unchanged
   (.destination-clock[data-timezone], .destination-weather[data-coordinates]
   — assets/js/destination-single.js — only the markup around them moved). */
.destination-hero--v2 { position: relative; max-width: 1100px; margin-inline: auto; border-radius: 24px; overflow: hidden; min-height: 460px; display: flex; box-shadow: 0 10px 30px rgba(5, 39, 72, 0.12); }
.destination-hero__bg { position: absolute; inset: 0; background: var(--color-bg-light); }
.destination-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destination-hero__credit {
	position: absolute; bottom: 8px; inset-inline-start: 8px; margin: 0; z-index: 1;
	background: rgba(5, 39, 72, 0.55); color: var(--color-white); font-size: 10.5px; padding: 3px 9px; border-radius: var(--radius-pill);
}
.destination-hero__credit a { color: inherit; }
.destination-hero__credit--ai { background: rgba(90, 60, 160, 0.75); }
.destination-hero__credit--ai::before { content: "✦ "; }
.destination-hero__overlay {
	position: relative; z-index: 1; margin: 32px 32px 32px auto; width: min(420px, 92%); align-self: center;
	background: rgba(255, 255, 255, 0.97); border-radius: 20px; padding: 30px 28px; box-shadow: 0 10px 30px rgba(5, 39, 72, 0.12);
}
.destination-hero__eyebrow {
	display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--color-teal);
	background: rgba(76, 186, 186, 0.12); border-radius: 999px; padding: 5px 14px; margin-block-end: 12px;
}
.destination-hero__title { font-size: clamp(28px, 3.4vw, 36px); font-weight: 800; line-height: 1.15; color: var(--color-navy-deep); margin: 0 0 14px; }
.destination-hero__about { font-size: 14.5px; line-height: 1.7; color: var(--color-text); opacity: 0.85; margin: 0 0 20px; }
.destination-hero__about p { margin-block-end: 10px; }
/* Sizing/color/hover come from the shared .btn .btn--accent classes on the
   markup itself, so this matches every other primary CTA on the site
   (header "סוכנויות ביטוח", homepage matcher, etc). Only spacing specific
   to this hero placement stays here. */
.destination-hero__cta { gap: 9px; margin-block-end: 22px; text-decoration: none; }
.destination-hero__cta svg { width: 16px; height: 16px; }
.destination-hero__mini-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-block-start: 18px; border-block-start: 1px solid rgba(44, 52, 126, 0.1); }
.destination-hero__mini-fact { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.destination-hero__mini-fact svg { width: 19px; height: 19px; color: var(--color-teal); }
.destination-hero__mini-fact span { display: block; font-size: 10px; opacity: 0.6; line-height: 1.25; }
.destination-hero__mini-fact strong { display: block; font-size: 11.5px; color: var(--color-navy-deep); }

.destination-facts-strip {
	max-width: 1100px; margin: 20px auto 24px; background: var(--color-white); border-radius: 18px;
	box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08); display: grid; grid-template-columns: repeat(6, 1fr);
}
.destination-facts-strip__item { padding: 18px 14px; text-align: center; border-inline-start: 1px solid rgba(44, 52, 126, 0.1); display: flex; flex-direction: column; gap: 6px; }
.destination-facts-strip__item:first-child { border-inline-start: none; }
.destination-facts-strip__label { font-size: 11px; color: var(--color-text); opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 5px; }
.destination-facts-strip__label svg { width: 13px; height: 13px; color: var(--color-teal); flex: none; }
.destination-facts-strip__value { font-size: 15px; font-weight: 800; color: var(--color-navy-deep); font-variant-numeric: tabular-nums; }
.destination-facts-strip__value--warning-level-1 { color: #1f8a5a; font-size: 13.5px; }
.destination-facts-strip__value--warning-level-2 { color: #b5760a; font-size: 13.5px; }
.destination-facts-strip__value--warning-level-3 { color: #d9660c; font-size: 13.5px; }
.destination-facts-strip__value--warning-level-4 { color: #c0392b; font-size: 13.5px; }
.destination-facts-strip__sub { font-size: 10.5px; opacity: 0.55; }

/* "Boarding pass" currency banner — replaced a flat gradient bar (rejected
   as generic) with an icon stub + dashed "perforation" + white content
   panel, using punched-circle notches matched to the page background. */
.destination-fx-banner { max-width: 1100px; margin: 0 auto 30px; display: flex; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(5, 39, 72, 0.1); }
.destination-fx-banner__icon-panel {
	flex: 0 0 110px; background: var(--color-navy-deep); display: flex; align-items: center; justify-content: center;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px); background-size: 14px 14px;
}
.destination-fx-banner__icon-panel svg { width: 42px; height: 42px; color: var(--color-teal); }
.destination-fx-banner__stub { flex: 0 0 0; position: relative; width: 0; border-inline-start: 2px dashed rgba(44, 52, 126, 0.2); }
.destination-fx-banner__stub::before, .destination-fx-banner__stub::after {
	content: ""; position: absolute; inset-inline-start: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-bg-light);
}
.destination-fx-banner__stub::before { top: -10px; }
.destination-fx-banner__stub::after { bottom: -10px; }
.destination-fx-banner__content { flex: 1; background: var(--color-white); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 26px; flex-wrap: wrap; }
.destination-fx-banner__text strong { display: block; font-size: 16px; color: var(--color-navy-deep); margin-block-end: 3px; }
.destination-fx-banner__text span { font-size: 13px; opacity: 0.75; }
/* Same reasoning as .destination-hero__cta above: reuses .btn .btn--accent
   for sizing/color/hover, only keeps what's specific to this banner slot. */
.destination-fx-banner__cta { gap: 8px; white-space: nowrap; text-decoration: none; }
.destination-fx-banner__cta svg { width: 15px; height: 15px; }

.destination-why__card-icon {
	width: 52px; height: 52px; border-radius: 50%; margin: 0 0 14px; display: flex; align-items: center; justify-content: center;
	background: var(--color-bg-light); color: var(--color-teal);
}
.destination-why__card-icon svg { width: 24px; height: 24px; }

.destination-clock__time { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-navy-deep); font-variant-numeric: tabular-nums; }
.destination-clock__diff { font-size: 12px; opacity: 0.7; }
.destination-weather__value { font-weight: 700; color: var(--color-navy-deep); font-size: 14.5px; }

.destination-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-block-start: 20px; }
.destination-why__grid .info-card p { margin-block-end: 0; }

.destination-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-block-start: 20px; }

.destination-card {
	display: flex; flex-direction: column; background: var(--color-white); border-radius: 16px; overflow: hidden;
	box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08); text-decoration: none; color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.destination-card:hover { box-shadow: 0 8px 24px rgba(44, 52, 126, 0.12); transform: translateY(-2px); }
.destination-card__media { position: relative; aspect-ratio: 4/3; background: var(--color-bg-light); overflow: hidden; }
.destination-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destination-card__media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-navy); opacity: 0.35; }
.destination-card__media-fallback svg { width: 30px; height: 30px; }
.destination-card__type-badge {
	position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; border-radius: 50%;
	background: var(--color-white); display: flex; align-items: center; justify-content: center; color: var(--color-navy);
	box-shadow: 0 2px 8px rgba(44, 52, 126, 0.15);
}
.destination-card__type-badge svg { width: 16px; height: 16px; }
.destination-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.destination-card__title { font-size: 17px; color: var(--color-navy-deep); }
.destination-card__place { font-size: 12.5px; opacity: 0.65; margin: 0; }
.destination-card__excerpt { font-size: 13.5px; color: var(--color-text); opacity: 0.85; line-height: 1.55; margin: 0; }
.destination-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }
.destination-card__trip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-navy); margin: 4px 0 0; }
.destination-card__trip svg { width: 14px; height: 14px; }

/* "יעדים מובילים"/"עוד יעדים ב-" ambient auto-scroll marquee
   (single-tenli_destination.php, #leading) — replaced the old full-size
   .destination-grid of .destination-card's (too tall, several rows) with
   one compact row that drifts continuously via a pure-CSS keyframe
   animation (no JS — the duplicated item set for the seamless loop is
   rendered server-side in PHP, every copy after the first marked
   aria-hidden+untabbable). Pauses on hover/focus and respects
   prefers-reduced-motion. --leading-duration/--leading-loop-offset are set
   inline per destination (PHP) — duration ~3.5s/card keeps the pace
   consistent regardless of item count, and the loop-offset percentage
   matches however many copies PHP decided to render (see the PHP comment
   next to $leading_repeats) so the animation always ends exactly on a
   repeat boundary, whatever that count is.

   direction:ltr is deliberate on BOTH the wrapper and the track (30.07.2026,
   two-part fix — the first pass only set it on the track and still broke):
   the wrapper's own RTL context anchors a too-wide block child to its RIGHT
   edge, so at translateX(0) the visible window was actually looking at the
   TAIL of the duplicated set, not its start — the "-50%" loop math assumes
   the window starts at the track's own local x:0. Verified live the first
   pass "fixed" the rest frame (looked fine at translateX(0)) but produced a
   fully BLANK frame at the loop boundary (translateX(-50%)), because that
   offset then pointed past the end of the track's actual content entirely.
   Setting direction:ltr on the wrapper too makes it anchor the track at its
   LEFT edge instead — track-local x:0 (item 1) is what translateX(0) shows,
   so translateX(-50%) lands exactly on the second copy's item 1, in the
   same screen position — the loop is then correct at every offset, not
   just at rest. Fade-edge pseudo-elements use physical left/right (not
   inset-inline-*) so they don't also flip meaning under the forced
   direction. direction:rtl is restored on each card so the Hebrew name
   inside still reads correctly. */
.destination-leading-marquee { position: relative; overflow: hidden; margin-block-start: 20px; direction: ltr; }
.destination-leading-marquee::before, .destination-leading-marquee::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.destination-leading-marquee::before { right: 0; background: linear-gradient(to left, var(--color-bg-light), transparent); }
.destination-leading-marquee::after { left: 0; background: linear-gradient(to right, var(--color-bg-light), transparent); }
.destination-leading-marquee__track {
	display: flex; gap: 16px; width: max-content; direction: ltr;
	animation: destination-leading-scroll var(--leading-duration, 28s) linear infinite;
}
.destination-leading-marquee:hover .destination-leading-marquee__track,
.destination-leading-marquee:focus-within .destination-leading-marquee__track { animation-play-state: paused; }
@keyframes destination-leading-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(var(--leading-loop-offset, -50%)); }
}

.destination-mini-card {
	direction: rtl;
	flex: none; width: 250px; text-decoration: none; color: inherit;
	background: var(--color-white); border: 1px solid rgba(44, 52, 126, 0.08); border-radius: 16px;
	box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08); overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.destination-mini-card:hover, .destination-mini-card:focus-visible { box-shadow: 0 10px 28px rgba(44, 52, 126, 0.16); transform: translateY(-3px); }
.destination-mini-card:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.destination-mini-card__media { aspect-ratio: 4/3; background: var(--color-bg-light); overflow: hidden; }
.destination-mini-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destination-mini-card__media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-navy); opacity: 0.35; }
.destination-mini-card__media-fallback svg { width: 34px; height: 34px; }
.destination-mini-card__body { padding: 14px 16px 16px; display: flex; align-items: center; gap: 8px; }
.destination-mini-card__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-bg-light); color: var(--color-navy); display: flex; align-items: center; justify-content: center; }
.destination-mini-card__icon svg { width: 13px; height: 13px; }
.destination-mini-card__name { font-size: 16px; font-weight: 700; color: var(--color-navy-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
	.destination-mini-card { width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
	.destination-leading-marquee__track { animation: none; }
}

.destination-practical-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-block-start: 20px; }
.destination-practical__meta { font-size: 12px; opacity: 0.6; }
.destination-practical__capital a { color: var(--color-teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.destination-practical__capital a:hover { color: var(--color-navy); }

.destination-months { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px 16px; }
.destination-months__btn {
	border: 1.5px solid rgba(44, 52, 126, 0.2); background: var(--color-white); color: var(--color-navy);
	border-radius: var(--radius-pill); padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.destination-months__btn.is-active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.destination-month-detail__panel p { margin: 0; }

.destination-warning { border-radius: 16px; padding: 22px; border: 1.5px solid; }
.destination-warning--level-1 { background: #eefaf3; border-color: #b7e6cb; }
.destination-warning--level-2 { background: #fff8e6; border-color: #f0dfa0; }
.destination-warning--level-3 { background: #fff1e6; border-color: #f3c199; }
.destination-warning--level-4 { background: #fdeceb; border-color: #f2b8b2; }
.destination-warning__level { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-navy-deep); margin-block-end: 8px; }
.destination-warning__level svg { width: 20px; height: 20px; }
.destination-warning__meta { font-size: 12px; opacity: 0.65; margin-block-start: 8px; }
.destination-warning__auto-badge { opacity: 1; font-weight: 700; color: var(--color-teal); }

/* Shared tooltip behavior for the warning-level badges (facts-strip value +
   the "?" help bubble in the full warning section) — same content-comes-from-
   data-tooltip pattern as .header-top__utility a::after, but with a wider,
   wrappable box since the NSC's own level explanations run a full sentence,
   not a short nowrap label. */
.destination-warning-tooltip { position: relative; cursor: help; }
.destination-warning-tooltip::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 10px);
	right: 50%;
	transform: translateX(50%) translateY(4px);
	background: var(--color-navy);
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.45;
	white-space: normal;
	width: max-content;
	max-width: 240px;
	text-align: center;
	padding: 9px 13px;
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 6;
	box-shadow: 0 6px 18px rgba(22, 51, 90, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
	.destination-warning-tooltip::after { transition: opacity 0.15s ease, transform 0.15s ease; }
}
.destination-warning-tooltip:hover::after,
.destination-warning-tooltip:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(50%) translateY(0);
}
.destination-warning__level .destination-warning-tooltip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 17px; height: 17px; border-radius: 50%; background: rgba(44, 52, 126, 0.12);
	color: var(--color-navy-deep); font-size: 11px; font-weight: 700; line-height: 1;
	margin-inline-start: 2px;
}
.destination-facts-strip__value.destination-warning-tooltip { border-bottom: 1px dotted currentColor; }

/* Mobile fix: centering the tooltip on the trigger's exact x-position (the
   default above) overflows past whichever screen edge the trigger happens
   to sit near — confirmed in practice, the warning badge is always the
   strip's first/rightmost cell, so the centered box spilled off the right
   edge and got hard-clipped by the site's global overflow-x:clip. Below
   640px we detach the tooltip from the trigger as its own positioning
   anchor and instead inset it from a wider ancestor (the grid cell / the
   full-width warning-level row) that is always safely within the page's
   own margins, so the box can never extend past the viewport. */
@media (max-width: 640px) {
	.destination-warning-tooltip { position: static; }
	.destination-facts-strip__item,
	.destination-warning__level { position: relative; }
	.destination-warning-tooltip::after {
		right: 10px;
		left: 10px;
		transform: none;
		width: auto;
		max-width: none;
	}
	.destination-warning-tooltip:hover::after,
	.destination-warning-tooltip:focus-visible::after {
		transform: none;
	}
}

/* "מסעדות מומלצות" — single-tenli_destination.php #restaurants. Card shape
   mirrors .destination-card (same shadow/radius/hover-lift language) so the
   page stays visually consistent; filter chips only render server-side when
   there are 2+ distinct cities among the filled restaurants (see PHP:
   count($restaurant_cities) > 1) — with today's real data (3 Bangkok
   restaurants) that's false, so no non-functional filter row ships. */
.restaurant-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.restaurant-filters__chip {
	border: 1.5px solid rgba(44, 52, 126, 0.18); background: var(--color-white); color: var(--color-navy);
	border-radius: var(--radius-pill); padding: 8px 18px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.restaurant-filters__chip.is-active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.restaurant-filters__chip:not(.is-active):hover { border-color: var(--color-teal); color: var(--color-teal); }
.restaurant-filters__chip:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

.restaurant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 20px; }
.restaurant-card {
	display: flex; flex-direction: column; background: var(--color-white); border-radius: 16px; overflow: hidden;
	box-shadow: 0 4px 24px rgba(44, 52, 126, 0.08); transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.restaurant-card:hover { box-shadow: 0 10px 28px rgba(44, 52, 126, 0.14); transform: translateY(-4px); }
.restaurant-card__media { position: relative; aspect-ratio: 4/3; background: var(--color-bg-light); overflow: hidden; }
.restaurant-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.restaurant-card:hover .restaurant-card__media img { transform: scale(1.03); }
.restaurant-card__media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-navy); opacity: 0.3; }
.restaurant-card__media-fallback svg { width: 34px; height: 34px; }
.restaurant-card__badge {
	position: absolute; top: 12px; inset-inline-start: 12px; display: flex; align-items: center; gap: 5px;
	background: var(--color-navy-deep); color: var(--color-white); font-size: 12px; font-weight: 700;
	padding: 6px 12px; border-radius: var(--radius-pill); box-shadow: 0 4px 12px rgba(22, 51, 90, 0.35);
}
.restaurant-card__badge svg { width: 12px; height: 12px; }
.restaurant-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.restaurant-card__body h3 { margin: 0; font-size: 18px; color: var(--color-navy-deep); }
.restaurant-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12.5px; color: var(--color-teal); font-weight: 700; }
.restaurant-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.restaurant-card__meta svg { width: 14px; height: 14px; }
.restaurant-card__desc { font-size: 13.5px; color: var(--color-text); opacity: 0.85; line-height: 1.6; margin: 0; }
.restaurant-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; }
.restaurant-card__tags li { background: var(--color-bg-light); color: var(--color-navy); font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); }
.restaurant-card__credit { margin: 2px 0 0; font-size: 10.5px; opacity: 0.55; }
.restaurant-card__credit a { color: inherit; }
.restaurant-card__cta {
	margin-block-start: 8px; align-self: flex-start; background: var(--color-navy); color: var(--color-white);
	font-size: 13.5px; font-weight: 700; padding: 10px 20px; border-radius: var(--radius-pill); text-decoration: none;
	display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
	transition: background 0.18s ease, transform 0.15s ease;
}
.restaurant-card__cta:hover { background: var(--color-navy-deep); transform: translateY(-2px); }

.restaurant-card--featured { grid-column: span 1; }
@media (min-width: 961px) {
	.restaurant-grid:has(.restaurant-card--featured) { grid-template-columns: 1.35fr 1fr 1fr; }
	.restaurant-card--featured .restaurant-card__media { aspect-ratio: 16/10; }
	.restaurant-card--featured .restaurant-card__body h3 { font-size: 21px; }
	.restaurant-card--featured .restaurant-card__cta { background: var(--color-navy-deep); }
}
[data-restaurant-grid] .restaurant-card[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.restaurant-card, .restaurant-card__media img, .restaurant-card__cta { transition: none; }
	.restaurant-card:hover { transform: none; }
	.restaurant-card:hover .restaurant-card__media img { transform: none; }
	.destination-explore__panel-cta, .explore-marker span { transition: none; }
	.destination-explore__panel-cta:hover { transform: none; }
	.explore-marker.is-active span { transform: none; }
}

/* "מפת [יעד], בחרו את היעד הבא שלכם" — single-tenli_destination.php #map.
   Real Leaflet map (assets/js/destination-map.js) + custom branded markers,
   two-column desktop layout (map ~65% / panel+list ~35%), category filters,
   and a data-attribute-driven detail panel — same interaction pattern as
   the #nearby geo-discovery section (destination-orbit.js), generalized to
   work on any future country-type destination page. */
.destination-explore__subtitle { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-teal); margin: 8px 0 0; }
.destination-explore__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.destination-explore__filter {
	border: 1.5px solid rgba(44, 52, 126, 0.18); background: var(--color-white); color: var(--color-navy);
	border-radius: var(--radius-pill); padding: 8px 18px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.destination-explore__filter.is-active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.destination-explore__filter:not(.is-active):hover { border-color: var(--color-teal); color: var(--color-teal); }
.destination-explore__filter:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

.destination-explore__hint { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.65; margin: 16px 0 12px; }
.destination-explore__hint svg { width: 16px; height: 16px; flex: none; }

.destination-explore__cols {
	display: grid; grid-template-columns: 1.85fr 1fr; gap: 24px; align-items: start;
	background: var(--color-white); border: 1px solid rgba(44, 52, 126, 0.08); border-radius: 20px;
	box-shadow: 0 4px 28px rgba(44, 52, 126, 0.08); padding: 20px;
}
.destination-explore__map-col { min-width: 0; }
.destination-explore__map {
	width: 100%; height: 460px; border-radius: 14px; overflow: hidden; z-index: 0;
	background: var(--color-bg-light);
}
.destination-explore__panel-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.destination-explore__panel { background: var(--color-bg-light); border-radius: 14px; padding: 20px; }
.destination-explore__panel h3 { margin: 0 0 8px; font-size: 17px; color: var(--color-navy-deep); }
.destination-explore__panel p { margin: 0; font-size: 13.5px; line-height: 1.65; opacity: 0.85; }
.destination-explore__stats { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.destination-explore__stats li { font-size: 13px; color: var(--color-navy); }
.destination-explore__stats strong { color: var(--color-teal); font-size: 16px; margin-inline-end: 4px; }

.destination-explore__panel-media { aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; margin: 0 0 12px; background: var(--color-white); }
.destination-explore__panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destination-explore__panel-type { display: inline-block; font-size: 12px; font-weight: 700; color: var(--color-teal); margin: 0 0 4px; }
.destination-explore__panel-detail h3 { margin: 0 0 6px; }
.destination-explore__panel-excerpt { margin: 0 0 10px !important; }
.destination-explore__panel-fact { margin: 0 0 6px !important; font-size: 12.5px !important; }
.destination-explore__panel-fact strong { color: var(--color-navy-deep); opacity: 1; }
.destination-explore__panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }
.destination-explore__panel-cta {
	background: var(--color-navy); color: var(--color-white); font-size: 13.5px; font-weight: 700;
	padding: 10px 20px; border-radius: var(--radius-pill); text-decoration: none;
	display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
	transition: background 0.18s ease, transform 0.15s ease;
}
.destination-explore__panel-cta:hover { background: var(--color-navy-deep); transform: translateY(-2px); }
.destination-explore__panel-locate {
	background: none; border: 1.5px solid rgba(44, 52, 126, 0.25); color: var(--color-navy);
	font: inherit; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-pill); cursor: pointer;
	min-height: 44px; box-sizing: border-box; transition: border-color 0.18s ease, color 0.18s ease;
}
.destination-explore__panel-locate:hover { border-color: var(--color-teal); color: var(--color-teal); }
.destination-explore__panel-locate:focus-visible, .destination-explore__panel-cta:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

.destination-explore__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.destination-explore__item {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
	background: var(--color-white); border: 1.5px solid rgba(44, 52, 126, 0.1); text-decoration: none; color: inherit;
	min-height: 44px; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease;
}
.destination-explore__item:hover { border-color: var(--color-teal); }
.destination-explore__item.is-active { border-color: var(--color-teal); background: rgba(76, 186, 186, 0.08); }
.destination-explore__item:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.destination-explore__item-icon {
	flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--color-bg-light); color: var(--color-navy);
}
.destination-explore__item-icon svg { width: 15px; height: 15px; }
.destination-explore__item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.destination-explore__item-name { font-size: 13.5px; font-weight: 700; color: var(--color-navy-deep); }
.destination-explore__item-type { font-size: 11.5px; opacity: 0.6; }

/* Custom Leaflet marker — no default blue pin, no coverage circles. */
.explore-marker span {
	display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--color-navy);
	border: 3px solid var(--color-white); box-shadow: 0 2px 6px rgba(44, 52, 126, 0.4); cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.explore-marker.is-active span { background: var(--color-teal); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(76, 186, 186, 0.25); }
.explore-marker__tooltip { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; }
.destination-explore__map .leaflet-control-zoom { border-radius: var(--radius-pill); overflow: hidden; box-shadow: 0 4px 14px rgba(44, 52, 126, 0.18); border: none; }
.destination-explore__map .leaflet-control-zoom a { color: var(--color-navy) !important; }
.destination-explore__map .leaflet-control-attribution { font-size: 10px; }

/* "מה נמצא סביב X?" geographic discovery (single-tenli_destination.php,
   #nearby) — tabs (nearby countries / destinations inside) driving a
   stylized inline-SVG region map (tenli_destination_geo_map_svg(), inc/
   destinations-directory.php) with clickable marker <button>s, synced to a
   horizontally-scrollable mobile chip strip and a dynamic detail panel — see
   assets/js/destination-orbit.js. All animation is transform/opacity only
   and gated behind prefers-reduced-motion (bottom of this block). */
.destination-geo__subtitle { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-teal); margin: 8px 0 10px; }
.destination-geo__desc { font-size: 14.5px; line-height: 1.7; opacity: 0.82; margin: 0 0 24px; max-width: 68ch; }

.destination-geo__tabs { display: flex; gap: 8px; margin-block-end: 20px; }
.destination-geo__tab {
	border: 1.5px solid rgba(44, 52, 126, 0.18); background: var(--color-white); color: var(--color-navy);
	border-radius: var(--radius-pill); padding: 10px 20px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.destination-geo__tab.is-active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.destination-geo__tab:not(.is-active):hover { border-color: var(--color-teal); color: var(--color-teal); }
.destination-geo__tab:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

/* min-width:0 on both grid items: without it, a grid item's automatic
   minimum width defaults to its content's min-content size — here that was
   the horizontally-scrolling mobile chip row (assets, several nowrap chip
   buttons in a flex row), which forced .destination-geo__map-col wider than
   its actual grid track and pushed it off-center/off-screen to the left.
   overflow-x:auto on .destination-geo__chips handles the scrolling itself;
   this just stops that content from inflating its ancestor's minimum size. */
.destination-geo__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.destination-geo__map-col, .destination-geo__panel { min-width: 0; }

.destination-geo__map { position: relative; width: 100%; aspect-ratio: 400 / 480; max-width: 420px; margin: 0 auto; }
.destination-geo__map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.destination-geo__thailand { fill: var(--color-teal); opacity: 0.9; stroke: var(--color-white); stroke-width: 2; }
.destination-geo__markers[hidden] { display: none; }

.destination-geo__marker {
	position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%;
	background: var(--color-white); border: 2.5px solid var(--color-navy); padding: 0; cursor: pointer; z-index: 2;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 2px 8px rgba(5, 39, 72, 0.18);
}
.destination-geo__marker span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--color-navy); transform: scale(0.35); transition: transform 0.18s ease, background 0.18s ease; }
.destination-geo__marker:hover,
.destination-geo__marker:focus-visible { transform: translate(-50%, -50%) scale(1.15); border-color: var(--color-teal); }
.destination-geo__marker:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.destination-geo__marker.is-active { border-color: var(--color-teal); box-shadow: 0 4px 14px rgba(44, 186, 186, 0.35); }
.destination-geo__marker.is-active span { background: var(--color-teal); transform: scale(0.55); }
.destination-geo__marker.is-active::before {
	content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--color-teal); opacity: 0;
}

.destination-geo__chips { display: none; }
.destination-geo__hint { text-align: center; font-size: 12.5px; opacity: 0.55; margin: 16px 0 0; }

.destination-geo__panel {
	background: var(--color-white); border-radius: 20px; padding: 28px; box-shadow: 0 8px 28px rgba(5, 39, 72, 0.08);
	min-height: 260px; display: flex; flex-direction: column; justify-content: center;
}
.destination-geo__panel-default h3 { margin: 0 0 10px; font-size: 19px; color: var(--color-navy-deep); }
.destination-geo__panel-default p { font-size: 14px; line-height: 1.7; opacity: 0.82; margin: 0 0 16px; }
.destination-geo__panel-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.destination-geo__panel-summary li {
	font-size: 13.5px; font-weight: 600; color: var(--color-navy); background: var(--color-bg-light);
	border-radius: 10px; padding: 9px 14px;
}

.destination-geo__panel-detail[hidden] { display: none; }
.destination-geo__panel-type {
	display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--color-teal); background: var(--tint-teal-bg, rgba(76, 186, 186, 0.12));
	border-radius: 999px; padding: 4px 12px; margin-block-end: 10px;
}
.destination-geo__panel-detail h3 { margin: 0 0 8px; font-size: 21px; color: var(--color-navy-deep); }
.destination-geo__panel-detail > p { font-size: 14px; line-height: 1.7; opacity: 0.85; margin: 0 0 16px; }
.destination-geo__panel-facts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(5, 39, 72, 0.06); }
.destination-geo__panel-facts li { display: flex; justify-content: space-between; gap: 10px; background: var(--color-bg-light); padding: 10px 14px; font-size: 13px; }
.destination-geo__panel-facts li[hidden] { display: none; }
.destination-geo__panel-facts strong { font-weight: 700; color: var(--color-navy); opacity: 0.75; }
.destination-geo__panel-why { font-size: 13.5px; line-height: 1.65; opacity: 0.85; margin: 0 0 16px; }
.destination-geo__panel-why[hidden] { display: none; }
.destination-geo__panel-why strong { color: var(--color-navy-deep); }
.destination-geo__panel-cta { display: inline-flex; color: var(--color-blue, #2563eb); font-weight: 700; font-size: 14px; text-decoration: none; }
.destination-geo__panel-cta[hidden] { display: none; }
.destination-geo__panel-cta:hover { text-decoration: underline; }

/* Selection swap: a very short fade+lift on the panel content, not a
   layout-shifting transition (min-height on .destination-geo__panel keeps
   it stable while default/detail toggle). */
@media (prefers-reduced-motion: no-preference) {
	.destination-geo__panel-detail:not([hidden]) { animation: destination-geo-panel-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes destination-geo-panel-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- ambient motion: entrance reveal, active-marker pulse ---- */
@media (prefers-reduced-motion: no-preference) {
	.destination-geo__marker.is-active::before { animation: destination-geo-pulse 2.4s ease-out infinite; }

	[data-orbit-reveal] h2,
	[data-orbit-reveal] .destination-geo__subtitle,
	[data-orbit-reveal] .destination-geo__desc,
	[data-orbit-reveal] .destination-geo__tabs,
	[data-orbit-reveal] .destination-geo__layout { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
	[data-orbit-reveal] .destination-geo__marker { opacity: 0; transition: opacity 0.4s ease calc(var(--stagger, 0) * 60ms), transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
	[data-orbit-reveal].is-visible h2,
	[data-orbit-reveal].is-visible .destination-geo__subtitle,
	[data-orbit-reveal].is-visible .destination-geo__desc,
	[data-orbit-reveal].is-visible .destination-geo__tabs,
	[data-orbit-reveal].is-visible .destination-geo__layout { opacity: 1; transform: translateY(0); }
	[data-orbit-reveal].is-visible .destination-geo__marker { opacity: 1; }
}
@keyframes destination-geo-pulse {
	0% { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(1.8); opacity: 0; }
}

.destination-itin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px 16px; }
.destination-itin-tabs__btn {
	border: 1.5px solid rgba(44, 52, 126, 0.2); background: var(--color-white); color: var(--color-navy);
	border-radius: var(--radius-pill); padding: 8px 18px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.destination-itin-tabs__btn.is-active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.destination-itin-panel p { margin-block-end: 8px; }

@media (max-width: 960px) {
	.destination-hero--v2 { min-height: auto; flex-direction: column; border-radius: 0; }
	.destination-hero__bg { position: relative; height: 220px; }
	.destination-hero__overlay { margin: -40px 16px 20px; align-self: auto; width: auto; }
	.destination-hero__mini-facts { grid-template-columns: repeat(2, 1fr); }
	.destination-facts-strip { grid-template-columns: repeat(3, 1fr); margin-inline: 16px; }
	.destination-facts-strip__item:nth-child(4) { border-inline-start: none; }
	.destination-fx-banner { flex-direction: column; margin-inline: 16px; }
	.destination-fx-banner__icon-panel { flex-basis: 60px; }
	.destination-fx-banner__stub { width: auto; height: 0; border-inline-start: none; border-block-start: 2px dashed rgba(44, 52, 126, 0.2); }
	.destination-fx-banner__stub::before, .destination-fx-banner__stub::after { top: -10px; inset-inline-start: unset; }
	.destination-fx-banner__stub::before { inset-inline-start: -10px; }
	.destination-fx-banner__stub::after { inset-inline-end: -10px; }
	.destination-fx-banner__content { flex-direction: column; align-items: flex-start; }
	.restaurant-grid { grid-template-columns: repeat(2, 1fr); }
	.destination-explore__cols { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
	.destination-explore__panel-col { display: contents; }
	.destination-explore__map-col { order: 2; }
	.destination-explore__panel { order: 3; }
	.destination-explore__map { height: 400px; }
	.destination-explore__list { order: 1; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-block-end: 4px; scrollbar-width: thin; }
	.destination-explore__item { flex: none; }
	.destination-explore__item-type { display: none; }
	.destination-geo__layout { grid-template-columns: 1fr; gap: 8px; }
	.destination-geo__map { max-width: 300px; }
	.destination-geo__marker { width: 30px; height: 30px; }
	.destination-geo__chips { display: block; margin-block-start: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
	.destination-geo__chip-group { display: flex; gap: 8px; padding-block: 2px 6px; }
	.destination-geo__chip-group[hidden] { display: none; }
	.destination-geo__chip {
		flex: none; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill);
		border: 1.5px solid rgba(44, 52, 126, 0.18); background: var(--color-white); color: var(--color-navy);
		font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
	}
	.destination-geo__chip.is-active { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
	.destination-geo__panel { margin-block-start: 20px; }
}
@media (max-width: 640px) {
	.destination-why__grid,
	.destination-grid,
	.restaurant-grid,
	.destination-practical-grid { grid-template-columns: 1fr; }
	.destination-hero__mini-facts { grid-template-columns: 1fr 1fr; }
	.destination-facts-strip { grid-template-columns: 1fr 1fr; }
	.destination-facts-strip__item { border-inline-start: none; border-block-start: 1px solid rgba(44, 52, 126, 0.1); }
	.destination-facts-strip__item:nth-child(1), .destination-facts-strip__item:nth-child(2) { border-block-start: none; }
}

/* ==========================================================================
   Calculators hub — "הטמעת מחשבונים" CTA + request popup
   (page-templates/calculators-hub.php, assets/js/embed-request.js,
   inc/embed-requests.php).
   ========================================================================== */
.calc-sidebar__embed-cta {
	margin-block-start: 28px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--color-bg-light);
}
.calc-sidebar__embed-cta h4 { font-size: 14px; margin-block-end: 6px; }
.calc-sidebar__embed-cta p { font-size: 13px; color: var(--color-text); opacity: 0.75; margin-block-end: 12px; }
.calc-sidebar__embed-cta .btn { width: 100%; justify-content: center; }

.embed-request-modal {
	border: 0;
	border-radius: 16px;
	padding: 28px;
	max-width: 520px;
	width: calc(100% - 40px);
	max-height: calc(100% - 64px);
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(5, 39, 72, 0.25);
	color: var(--color-text);
}
.embed-request-modal::backdrop { background: rgba(5, 39, 72, 0.55); }
.embed-request-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
.embed-request-modal__head h2 { font-size: 19px; }
.embed-request-modal__close { font-size: 22px; line-height: 1; padding: 4px 10px; border-radius: 8px; }
.embed-request-modal__close:hover { background: var(--color-bg-light); }
.embed-request-modal__intro { font-size: 13.5px; opacity: 0.8; margin-block-end: 18px; }
.embed-request-modal__calcs { border: 1px solid var(--color-bg-light); border-radius: 12px; padding: 14px 16px; margin-block: 16px; }
.embed-request-modal__calcs legend { font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; padding-inline-end: 8px; }
.embed-request-modal__calcs .calc-check { display: flex; align-items: center; gap: 8px; padding-block: 6px; font-size: 14px; }
.embed-request-modal__done { text-align: center; padding-block: 12px; }

/* Embed code blocks — shared between the approval email
   (tenli_calc_embed_snippets_html()) and the supplier portal below. */
.embed-code-block { margin-block-end: 16px; }
.embed-code-block h4 { font-size: 14px; margin-block-end: 6px; }
.embed-code-block__code {
	width: 100%;
	font-family: monospace;
	font-size: 12px;
	direction: ltr;
	text-align: left;
	background: var(--color-bg-light);
	border: 1px solid #e4e4ea;
	border-radius: 8px;
	padding: 10px 12px;
	resize: vertical;
}

/* Supplier portal — "קודי הטמעה" section (page-templates/supplier-portal.php) */
.supplier-portal__embed-codes { margin-block-end: 24px; }
.supplier-portal__embed-hint { font-size: 13px; opacity: 0.75; margin-block-end: 16px; }

/* ==========================================================================
   Destinations index + taxonomy archives — REDESIGN (archive-
   tenli_destination.php, taxonomy-tenli_continent.php, taxonomy-
   tenli_destination_type.php). Built mobile-first per explicit request
   (base rules below = mobile; min-width media queries layer up), unlike
   most of the rest of this file (desktop-first with max-width — see the
   note on home-insurance.php's block for the same documented exception).
   Deliberately does NOT touch .wizard__banner, .destination-grid,
   .destination-card, .destination-section__inner, .destination-pagination,
   .destination-empty, .destination-filterbar* (old rules) — those either
   stay reserved for single-tenli_destination.php or are fully replaced by
   the new .destination-archive-* / .destination-filterbar__fields classes
   below, scoped only to this listing so single-tenli_destination.php is
   pixel-identical to before. .destination-search__panel / __sugg / __empty
   (autocomplete dropdown, populated by assets/js/destinations-search.js)
   are kept as-is, just re-anchored under the new .destination-archive-search
   wrapper.
   ========================================================================== */

.destination-archive__inner {
	max-width: var(--container-max); /* the site's normal 1440px content width — was --header-container-max (1560px), pulled back in after live feedback that the grid felt too spread toward the edges */
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: 20px 60px;
}
.destination-archive .breadcrumbs { max-width: var(--container-max); }

/* ---- hero: plain heading directly on the page background, no colored box
   — removed after live feedback ("the blue frame around the title"). Same
   "no more colored block" call already made once before on this exact
   site (see .wizard__banner--plain above, front-page.php's picker heading)
   — this mirrors that pattern rather than introducing a new one. Decorative
   dotted flight path + pin + plane (aria-hidden, purely visual) recolored
   from white-on-navy to navy-on-light since there's no more navy fill
   behind them. ---- */
.destination-archive-hero { position: relative; padding: 4px 4px 6px; text-align: center; }
.destination-archive-hero__title { color: var(--color-navy-deep); font-size: clamp(24px, 6vw, 40px); font-weight: 800; line-height: 1.15; margin: 0; }
.destination-archive-hero__subtitle { color: var(--color-text); opacity: 0.75; font-size: clamp(14px, 2.6vw, 17px); line-height: 1.6; margin: 10px auto 0; max-width: 56ch; }
.destination-archive-hero__deco { display: none; position: absolute; color: var(--color-navy); opacity: 0.2; pointer-events: none; }
.destination-archive-hero__deco--path { top: -6px; inset-inline-start: 4%; width: 150px; }
.destination-archive-hero__deco--path svg:first-child { width: 22px; height: 22px; margin-block-end: 4px; }
.destination-archive-hero__deco--path svg:last-child { width: 100%; height: auto; }
.destination-archive-hero__deco--plane { top: 0; inset-inline-end: 6%; width: 34px; height: 34px; transform: scaleX(-1); }
.destination-archive-hero__deco--plane svg { width: 100%; height: 100%; }

/* ---- search field ---- */
.destination-archive-search { position: relative; margin-block: 20px 0; }
.destination-archive-search__icon {
	position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: var(--color-navy); opacity: 0.55; pointer-events: none;
}
.destination-archive-search__icon svg { width: 19px; height: 19px; display: block; }
.destination-archive-search input {
	width: 100%; border: 1.5px solid rgba(44, 52, 126, 0.16); border-radius: 999px; background: var(--color-white);
	padding: 15px 50px 15px 20px; font: inherit; font-size: 15px; color: var(--color-text); min-height: 52px;
	box-shadow: 0 2px 10px rgba(44, 52, 126, 0.05); box-sizing: border-box;
}
.destination-archive-search input:focus { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.destination-search__panel {
	position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 10; background: var(--color-white);
	border-radius: 14px; box-shadow: 0 8px 24px rgba(44, 52, 126, 0.15); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.destination-search__sugg { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; text-decoration: none; color: var(--color-text); }
.destination-search__sugg:hover { background: var(--color-bg-light); }
.destination-search__sugg-title { font-weight: 600; color: var(--color-navy-deep); }
.destination-search__sugg-type { font-size: 12px; opacity: 0.6; }
.destination-search__empty { padding: 14px 16px; font-size: 13.5px; opacity: 0.7; }

/* ---- filter toolbar: mobile "סינון" trigger + sort, always visible ---- */
.destination-filterbar { margin-block-start: 16px; position: relative; }
.destination-filterbar__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.destination-filterbar__mobile-trigger {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto;
	background: var(--color-white); color: var(--color-navy); border: 1.5px solid rgba(44, 52, 126, 0.18);
	border-radius: var(--radius-pill); padding: 13px 22px; font: inherit; font-weight: 700; font-size: 14.5px;
	min-height: 48px; cursor: pointer; box-shadow: 0 2px 10px rgba(44, 52, 126, 0.05);
}
.destination-filterbar__mobile-trigger svg { width: 17px; height: 17px; }
.destination-filterbar__mobile-trigger:hover, .destination-filterbar__mobile-trigger:focus-visible { border-color: var(--color-teal); color: var(--color-teal); }
.destination-sort { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.destination-sort label { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--color-navy); }
.destination-sort select {
	flex: 1 1 auto; appearance: none; border: 1.5px solid rgba(44, 52, 126, 0.18); border-radius: var(--radius-pill); background: var(--color-white);
	padding: 12px 34px 12px 16px; font-size: 13.5px; font-family: inherit; color: var(--color-text); min-height: 48px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c347e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: left 12px center; background-size: 15px;
}

/* ---- filter fields: SAME markup repositions between a mobile bottom-sheet
   drawer (base/mobile rules here) and desktop inline pills (min-width:768px
   below) — see assets/js/destinations-search.js for the .is-open toggle. ---- */
.destination-filterbar__backdrop {
	position: fixed; inset: 0; background: rgba(5, 39, 72, 0.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.destination-filterbar__backdrop.is-open { opacity: 1; pointer-events: auto; }
.destination-filterbar__fields {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 91; max-height: 82vh; overflow-y: auto;
	background: var(--color-white); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(5, 39, 72, 0.2);
	padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
	transform: translateY(100%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
}
.destination-filterbar__fields.is-open { transform: translateY(0); visibility: visible; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.destination-filterbar__fields-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 14px; }
.destination-filterbar__fields-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-navy-deep); }
.destination-filterbar__fields-title svg { width: 17px; height: 17px; color: var(--color-teal); }
.destination-filterbar__fields-close {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--color-bg-light); color: var(--color-navy); border: 0; cursor: pointer;
}
.destination-filterbar__fields-close svg { width: 15px; height: 15px; }
.destination-filterbar__fields-close:hover { background: rgba(44, 52, 126, 0.14); }

.destination-filterbar__fields-body { display: flex; flex-direction: column; gap: 12px; }
.destination-filterbar__field { position: relative; }
.destination-filterbar__field-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--color-teal); pointer-events: none; }
.destination-filterbar__field-icon svg { width: 17px; height: 17px; display: block; }
.destination-filterbar__field select {
	appearance: none; font: inherit; font-size: 14.5px; padding: 13px 36px 13px 42px; width: 100%; box-sizing: border-box;
	border-radius: 12px; border: 1.5px solid rgba(44, 52, 126, 0.18); background-color: var(--color-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c347e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: left 12px center; background-size: 15px;
	color: var(--color-text); min-height: 48px; cursor: pointer;
}
.destination-filterbar__field select:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 1px; }

.destination-filterbar__actions { display: flex; flex-direction: column; gap: 10px; margin-block-start: 18px; }
.destination-filterbar__reset-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
	background: var(--color-white); color: var(--color-navy); border: 2px solid var(--color-navy); border-radius: var(--radius-pill);
	padding: 12px 18px; font-weight: 700; font-size: 13.5px; text-decoration: none; min-height: 46px;
}
.destination-filterbar__reset-btn svg { width: 15px; height: 15px; }
.destination-filterbar__reset-btn:hover { background: var(--color-bg-light); }
.destination-filterbar__apply { min-height: 46px; justify-content: center; }

/* ---- results count + grid + card + empty + pagination ---- */
.destination-archive-count { font-size: 14px; font-weight: 700; color: var(--color-text); opacity: 0.75; margin: 18px 0 6px; }

.destination-archive-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-block-start: 10px; }

/* Outer wrapper is a plain (non-interactive) positioning context — the
   .destination-archive-card__link <a> below is what actually wraps the
   whole card's content (media+footer) and is what "the entire card is
   clickable" refers to, same pattern as the existing .destination-card
   (tenli_render_destination_card()). .destination-archive-card__fav is a
   SIBLING of that <a>, not nested inside it (an interactive <button> inside
   an <a> is invalid HTML), positioned on top via z-index so it stays
   independently clickable. */
.destination-archive-card {
	position: relative; border-radius: 18px; overflow: hidden; background: var(--color-white);
	box-shadow: 0 4px 22px rgba(44, 52, 126, 0.09); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.destination-archive-card:hover, .destination-archive-card:focus-within { box-shadow: 0 16px 36px rgba(5, 39, 72, 0.16); transform: translateY(-4px); }
.destination-archive-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.destination-archive-card__link:focus-visible { outline: 3px solid var(--color-teal); outline-offset: -3px; border-radius: 18px; }
.destination-archive-card__media { position: relative; aspect-ratio: 4/3.1; background: var(--color-bg-light); overflow: hidden; }
.destination-archive-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;
}
.destination-archive-card:hover .destination-archive-card__media img { transform: scale(1.05); }
.destination-archive-card__media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-navy); opacity: 0.3; }
.destination-archive-card__media-fallback svg { width: 34px; height: 34px; }
.destination-archive-card__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(5, 39, 72, 0.88) 0%, rgba(5, 39, 72, 0.32) 42%, transparent 72%);
}
.destination-archive-card__continent {
	position: absolute; top: 12px; inset-inline-start: 12px; background: rgba(255, 255, 255, 0.94); color: var(--color-navy-deep);
	font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px;
}
.destination-archive-card__fav {
	position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.94); color: var(--color-navy);
	box-shadow: 0 2px 8px rgba(5, 39, 72, 0.2); transition: color 0.15s ease, transform 0.15s ease;
}
.destination-archive-card__fav svg { width: 17px; height: 17px; }
.destination-archive-card__fav:hover { transform: scale(1.08); }
.destination-archive-card__fav:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.destination-archive-card__fav[aria-pressed="true"] { color: var(--color-teal); }
.destination-archive-card__fav[aria-pressed="true"] svg { fill: currentColor; }
.destination-archive-card__overlay { position: absolute; inset-inline: 0; bottom: 0; padding: 14px 16px; }
.destination-archive-card__title { margin: 0; font-size: 19px; line-height: 1.25; color: var(--color-white); font-weight: 800; }
.destination-archive-card__place { margin: 4px 0 0; font-size: 13px; color: var(--color-white); opacity: 0.85; }
.destination-archive-card__footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.destination-archive-card__chip {
	display: inline-flex; align-items: center; gap: 5px; background: var(--color-bg-light); color: var(--color-navy);
	font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
}
.destination-archive-card__chip svg { width: 13px; height: 13px; color: var(--color-teal); }

.destination-archive-empty { text-align: center; padding: 60px 20px; background: var(--color-bg-light); border-radius: 16px; margin-block-start: 16px; }
.destination-archive-empty h2 { font-size: 20px; margin-block-end: 8px; }
.destination-archive-empty p { opacity: 0.75; margin-block-end: 16px; }

.destination-archive-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-block-start: 32px; }
.destination-archive-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding-inline: 8px;
	border-radius: 12px; background: var(--color-white); color: var(--color-navy); text-decoration: none; font-weight: 700;
	box-shadow: 0 2px 8px rgba(44, 52, 126, 0.08);
}
.destination-archive-pagination .page-numbers:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.destination-archive-pagination .page-numbers.current { background: var(--color-navy); color: var(--color-white); box-shadow: none; }
.destination-archive-pagination .page-numbers.dots { box-shadow: none; background: none; }
.destination-archive-pagination .page-numbers:hover:not(.current):not(.dots) { background: var(--color-bg-light); }

/* ---- tablet: 2-col grid, filter fields become inline pills (no more
   bottom-sheet drawer — mobile trigger hides itself) ---- */
@media (min-width: 768px) {
	.destination-archive-hero__deco { display: block; }
	.destination-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

	.destination-filterbar__mobile-trigger { display: none; }
	.destination-filterbar__backdrop { display: none; }

	/* Flatten every wrapper (toolbar/fields/fields-body/actions) into the
	   form itself via display:contents — the DOM/JS structure that the
	   mobile drawer needs stays exactly the same, but on desktop every
	   control (sort, the 4 selects, reset, apply) becomes a direct flex
	   item of ONE row that wraps together, instead of sort sitting on its
	   own line above the selects on their own line below. Same flattening
	   technique already used for .community__scatter (front-page.php).
	   .destination-filterbar__fields' mobile-closed state sets
	   visibility:hidden (see base rules) — display:contents removes its OWN
	   box but does NOT stop that visibility value from being INHERITED into
	   its children (the selects), so it has to be reset back to visible
	   explicitly here or the fields render present-but-invisible on
	   desktop. */
	.destination-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
	.destination-filterbar__toolbar,
	.destination-filterbar__fields,
	.destination-filterbar__fields-body,
	.destination-filterbar__actions { display: contents; visibility: visible; }
	.destination-filterbar__fields-head { display: none; }
	.destination-filterbar__field { flex: 1 1 170px; min-width: 150px; }
	.destination-filterbar__reset-btn, .destination-filterbar__apply { flex: 0 0 auto; }
	.destination-sort { flex: 0 0 auto; order: -1; }
	.destination-sort select { min-width: 170px; }
}

/* ---- small-desktop: 3-col grid ---- */
@media (min-width: 1024px) {
	.destination-archive-hero { padding: 10px 60px 18px; }
	.destination-archive-grid { grid-template-columns: repeat(3, 1fr); }
	.destination-archive-search { max-width: 640px; }
}

/* ---- wide desktop: 4-col grid, the full-width feel the redesign asked for ---- */
@media (min-width: 1400px) {
	.destination-archive-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.destination-archive-card, .destination-archive-card__media img, .destination-archive-card__fav, .destination-filterbar__fields, .destination-filterbar__backdrop { transition: none; }
	.destination-archive-card:hover { transform: none; }
	.destination-archive-card:hover .destination-archive-card__media img { transform: none; }
}