/*
 * IBASTOM – site header and footer (mu-plugin ibastom-site-chrome).
 * Loaded on every front-end page (Elementor and block pages) and in the block editor.
 * Every rule is scoped to ibs-* classes (or to body.ibs-classic for the page-level fixes on Elementor pages),
 * so page styles are not touched. Fonts are inherited from the page; colours come from --ibs-* tokens: the site
 * defaults below, replaced on each designed page by that page's own palette ("Page palettes" at the end of this file).
 */

/* ---------- Tokens (site default palette) ---------- */
:root {
	--ibs-bar-h: 56px;
}
/* Tokens live on <body>, so every area of the page that belongs to the chrome contract – the bar, the page's own
 * row under it, both mobile menus, the footer – reads the same palette. Page families replace the palette tokens
 * (end of this file); the role tokens below then follow automatically. */
body.ibs-chrome, .editor-styles-wrapper :is(.ibs-header, .ibs-footer) {
	--ibs-ink: #111418;
	--ibs-ink-2: #1c2026;
	--ibs-paper: #ffffff;
	--ibs-paper-2: #f3f4f6;
	--ibs-line: #dcdfe4;
	--ibs-muted: #535a64;
	--ibs-accent: #2346d6;        /* links, underline, focus on light ground */
	--ibs-accent-soft: #9db0ff;   /* accent on dark ground */
	--ibs-on-ink: #f5f6f8;
	--ibs-on-ink-muted: #b4bac4;
	--ibs-on-ink-line: #353b45;
	--ibs-good: #8fd6b0;
	--ibs-bad: #ffb4a8;
	--ibs-radius: 4px;
	--ibs-wrap: 1240px;
	--ibs-gutter: clamp(1rem, 4vw, 3rem);
	--ibs-ease: cubic-bezier(.2, .7, .2, 1);
	--ibs-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--ibs-font: inherit; /* block pages: the page font */

	/* Colour roles: one fixed set of tokens per area, read by every rule of that area.
	 *   top-*   header 1: the site bar (brand + main menu) and its open mobile menu
	 *   row-*   header 2: the page's own row ("בעמוד זה") and its open mobile menu
	 *   f1-* … f5-*  footer areas from top to bottom. The footer has four areas: join = f1, contact = f2,
	 *                social = f3, closing line = f5 (the 30 % band that mirrors header 1); f4 is defined, unused.
	 * Per area: bg, ink (text, headings, icons), muted (secondary text), line (rules, borders), accent (English line,
	 * required mark, current link, underline, hover, focus ring), good / bad (form messages); row also on-accent
	 * (text on its accent button). The values below are the fallback for browsers without relative colours (dark
	 * bar and closing line in ink, footer areas in ink-2, light row). The three tones themselves are in the @supports
	 * block right after this rule. */
	--ibs-brand: var(--ibs-accent);            /* hue source of the tones: the page's brand colour */
	--ibs-top-bg: var(--ibs-ink);
	--ibs-top-ink: var(--ibs-on-ink);
	--ibs-top-muted: var(--ibs-on-ink-muted);
	--ibs-top-line: var(--ibs-on-ink-line);
	--ibs-top-accent: var(--ibs-accent-soft);
	--ibs-row-bg: var(--ibs-paper-2);
	--ibs-row-ink: var(--ibs-ink);
	--ibs-row-muted: var(--ibs-muted);
	--ibs-row-line: var(--ibs-line);
	--ibs-row-accent: var(--ibs-accent);
	--ibs-row-on-accent: var(--ibs-paper);
	--ibs-f1-bg: var(--ibs-ink-2);
	--ibs-f2-bg: var(--ibs-ink-2);
	--ibs-f3-bg: color-mix(in srgb, var(--ibs-ink-2) 50%, var(--ibs-ink));
	--ibs-f4-bg: color-mix(in srgb, var(--ibs-ink-2) 50%, var(--ibs-ink));
	--ibs-f5-bg: var(--ibs-ink);
	--ibs-f1-ink: var(--ibs-on-ink); --ibs-f1-muted: var(--ibs-on-ink-muted); --ibs-f1-line: var(--ibs-on-ink-line); --ibs-f1-accent: var(--ibs-accent-soft); --ibs-f1-good: var(--ibs-good); --ibs-f1-bad: var(--ibs-bad);
	--ibs-f2-ink: var(--ibs-on-ink); --ibs-f2-muted: var(--ibs-on-ink-muted); --ibs-f2-line: var(--ibs-on-ink-line); --ibs-f2-accent: var(--ibs-accent-soft); --ibs-f2-good: var(--ibs-good); --ibs-f2-bad: var(--ibs-bad);
	--ibs-f3-ink: var(--ibs-on-ink); --ibs-f3-muted: var(--ibs-on-ink-muted); --ibs-f3-line: var(--ibs-on-ink-line); --ibs-f3-accent: var(--ibs-accent-soft); --ibs-f3-good: var(--ibs-good); --ibs-f3-bad: var(--ibs-bad);
	--ibs-f4-ink: var(--ibs-on-ink); --ibs-f4-muted: var(--ibs-on-ink-muted); --ibs-f4-line: var(--ibs-on-ink-line); --ibs-f4-accent: var(--ibs-accent-soft); --ibs-f4-good: var(--ibs-good); --ibs-f4-bad: var(--ibs-bad);
	--ibs-f5-ink: var(--ibs-on-ink); --ibs-f5-muted: var(--ibs-on-ink-muted); --ibs-f5-line: var(--ibs-on-ink-line); --ibs-f5-accent: var(--ibs-accent-soft); --ibs-f5-good: var(--ibs-good); --ibs-f5-bad: var(--ibs-bad);
}

/* Three tones per page (user spec 17.10.2026, fifth round – replaces the earlier ladders):
 *   30 % – header 1 (site bar) and footer 5 (closing line)            OKLCH L .27
 *   35 % – footers 3–4 (social)                                       OKLCH L .345
 *   40 % – header 2 (page row) and footers 1–2 (join, contact)        OKLCH L .42
 * All three are shades of the page's brand hue. The spec's percentages are visual targets: at exactly L .30 / .35 /
 * .40 neighbouring steps differ by only ~1.2:1, so the steps are spread to .27 / .345 / .42 (each step ≥ 1.29:1 on
 * every palette) to keep 40 → 35 → 30 clearly visible in the footer. Chroma is capped at 0.17 × L – inside sRGB for
 * every hue, so no colour is clipped. Text tokens are set for contrast on each ground: ink L .98; muted and accent
 * rise with the ground; the accent keeps the page's own highlight (--ibs-accent-soft) and lifts only its lightness.
 * Opaque colours only – no area uses opacity. */
@supports (color: oklch(from red l c h)) {
	body.ibs-chrome, .editor-styles-wrapper :is(.ibs-header, .ibs-footer) {
		--ibs-top-bg: oklch(from var(--ibs-brand) .27 min(c, .046) h);
		--ibs-top-ink: oklch(from var(--ibs-brand) .98 min(c, .01) h);
		--ibs-top-muted: oklch(from var(--ibs-brand) .80 min(c, .03) h);
		--ibs-top-line: oklch(from var(--ibs-brand) .47 min(c, .05) h);
		--ibs-top-accent: oklch(from var(--ibs-accent-soft) max(l, .80) min(c, .15) h);

		--ibs-row-bg: oklch(from var(--ibs-brand) .42 min(c, .071) h);
		--ibs-row-ink: oklch(from var(--ibs-brand) .98 min(c, .01) h);
		--ibs-row-muted: oklch(from var(--ibs-brand) .87 min(c, .03) h);
		--ibs-row-line: oklch(from var(--ibs-brand) .60 min(c, .05) h);
		--ibs-row-accent: oklch(from var(--ibs-accent-soft) max(l, .88) min(c, .14) h);
		--ibs-row-on-accent: var(--ibs-top-bg);

		--ibs-f1-bg: oklch(from var(--ibs-brand) .42 min(c, .071) h);
		--ibs-f1-ink: oklch(from var(--ibs-brand) .98 min(c, .01) h);
		--ibs-f1-muted: oklch(from var(--ibs-brand) .87 min(c, .03) h);
		--ibs-f1-line: oklch(from var(--ibs-brand) .60 min(c, .05) h);
		--ibs-f1-accent: oklch(from var(--ibs-accent-soft) max(l, .88) min(c, .14) h);
		--ibs-f1-good: oklch(.90 .09 155);
		--ibs-f1-bad: oklch(.90 .08 25);

		--ibs-f2-bg: oklch(from var(--ibs-brand) .42 min(c, .071) h);
		--ibs-f2-ink: oklch(from var(--ibs-brand) .98 min(c, .01) h);
		--ibs-f2-muted: oklch(from var(--ibs-brand) .87 min(c, .03) h);
		--ibs-f2-line: oklch(from var(--ibs-brand) .60 min(c, .05) h);
		--ibs-f2-accent: oklch(from var(--ibs-accent-soft) max(l, .88) min(c, .14) h);
		--ibs-f2-good: oklch(.90 .09 155);
		--ibs-f2-bad: oklch(.90 .08 25);

		--ibs-f3-bg: oklch(from var(--ibs-brand) .345 min(c, .058) h);
		--ibs-f3-ink: oklch(from var(--ibs-brand) .98 min(c, .01) h);
		--ibs-f3-muted: oklch(from var(--ibs-brand) .82 min(c, .03) h);
		--ibs-f3-line: oklch(from var(--ibs-brand) .54 min(c, .05) h);
		--ibs-f3-accent: oklch(from var(--ibs-accent-soft) max(l, .83) min(c, .15) h);
		--ibs-f3-good: oklch(.88 .09 155);
		--ibs-f3-bad: oklch(.88 .08 25);

		--ibs-f4-bg: oklch(from var(--ibs-brand) .345 min(c, .058) h);
		--ibs-f4-ink: oklch(from var(--ibs-brand) .98 min(c, .01) h);
		--ibs-f4-muted: oklch(from var(--ibs-brand) .82 min(c, .03) h);
		--ibs-f4-line: oklch(from var(--ibs-brand) .54 min(c, .05) h);
		--ibs-f4-accent: oklch(from var(--ibs-accent-soft) max(l, .83) min(c, .15) h);
		--ibs-f4-good: oklch(.88 .09 155);
		--ibs-f4-bad: oklch(.88 .08 25);

		--ibs-f5-bg: oklch(from var(--ibs-brand) .27 min(c, .046) h);
		--ibs-f5-ink: oklch(from var(--ibs-brand) .98 min(c, .01) h);
		--ibs-f5-muted: oklch(from var(--ibs-brand) .80 min(c, .03) h);
		--ibs-f5-line: oklch(from var(--ibs-brand) .47 min(c, .05) h);
		--ibs-f5-accent: oklch(from var(--ibs-accent-soft) max(l, .80) min(c, .15) h);
		--ibs-f5-good: oklch(.86 .09 155);
		--ibs-f5-bad: oklch(.86 .08 25);
	}
}
/* Elementor pages: the site font (Rubik, loaded by the Elementor kit) with a clean fallback. */
body.ibs-classic :is(.ibs-bar, .ibs-site-footer, .ibs-nav .wp-block-navigation__responsive-container) { --ibs-font: Rubik, "Segoe UI", Arial, sans-serif; }

.ibs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Every page with the chrome ---------- */
/* Customizer "Additional CSS" sets html, body { overflow-x: hidden }, which turns body into a scroll container and
   breaks the sticky header. clip hides the same overflow without creating a scroll container. */
html:has(body.ibs-chrome), body.ibs-chrome { overflow-x: clip; }

/* ---------- Elementor pages (Hello Elementor) ---------- */
html:has(body.ibs-classic) { scroll-padding-top: calc(var(--ibs-bar-h) + var(--wp-admin--admin-bar--height, 0px) + 12px); }
body.ibs-classic #ibs-content-start { display: block; height: 0; outline: none; }
body.ibs-classic .ibs-skip:focus {
	clip: auto; clip-path: none; width: auto; height: auto; margin: 0; overflow: visible; white-space: normal;
	position: fixed; z-index: 100001; inset-inline-start: 1rem; top: calc(var(--wp-admin--admin-bar--height, 0px) + .75rem);
	padding: .75rem 1.25rem; background: #111418; color: #fff; font-weight: 700; text-decoration: none; border-radius: 4px; outline: 3px solid #9db0ff;
}

/* ---------- Header ---------- */
.ibs-site-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60;
	margin: 0;
}
.ibs-bar {
	position: relative;
	background: var(--ibs-top-bg); color: var(--ibs-top-ink);
	border-block-end: 1px solid var(--ibs-top-line);
	font-family: var(--ibs-font); line-height: 1.4;
	overflow-wrap: normal;
}
.ibs-bar :where(p) { margin: 0; }
.ibs-header.ibs-header {
	width: min(var(--ibs-wrap), 100% - 2 * var(--ibs-gutter)); margin-inline: auto;
	height: var(--ibs-bar-h); gap: 1.5rem;
	flex-wrap: nowrap;
}
.ibs-header > * { margin-block: 0 !important; }
.ibs-brand { flex: none; font-family: var(--ibs-mono); font-weight: 500; font-size: 1rem; letter-spacing: .02em; white-space: nowrap; line-height: 1; }
.ibs-bar .ibs-brand a { display: inline-flex; align-items: center; color: var(--ibs-top-ink); text-decoration: none; }
.ibs-bar .ibs-brand a::before { content: ""; width: .62em; height: .62em; margin-inline-end: .6em; background: var(--ibs-top-accent); transform: rotate(45deg); flex: none; transition: transform .4s var(--ibs-ease); }
.ibs-bar .ibs-brand a:hover::before { transform: rotate(225deg); }
.ibs-brand__tld { color: var(--ibs-top-muted); }

/* Capabilities navigation (core/navigation, class ibs-nav). */
.ibs-nav.ibs-nav { flex: 0 1 auto; min-width: 0; font-family: inherit; font-size: .9375rem; font-weight: 500; margin: 0; }
.ibs-nav .wp-block-navigation__container { gap: clamp(.7rem, 1.25vw, 1.4rem); flex-wrap: nowrap; }
.ibs-bar .ibs-nav .wp-block-navigation-item__content {
	position: relative; display: block; padding-block: .35rem;
	color: var(--ibs-top-ink); text-decoration: none; white-space: nowrap;
}
.ibs-bar .ibs-nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--ibs-top-accent);
	transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ibs-ease);
}
.ibs-bar .ibs-nav .wp-block-navigation-item__content:hover::after,
.ibs-bar .ibs-nav .wp-block-navigation-item__content[aria-current="page"]::after { transform: scaleX(1); }
.ibs-bar .ibs-nav .wp-block-navigation-item__content[aria-current="page"] { font-weight: 700; }

/* Menu button: text "תפריט" (core, hasIcon:false). Shown below 1440px (13 items since "עבודות ביצוע", 17.10.2026); core shows it below 600px. */
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container-open {
	align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem 1rem; margin: 0;
	font: inherit; font-size: .9375rem; font-weight: 700; color: var(--ibs-top-ink);
	background: transparent; border: 1.5px solid var(--ibs-top-ink); border-radius: var(--ibs-radius); cursor: pointer;
}
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container-open::before {
	content: ""; width: 1rem; height: .7rem; flex: none;
	background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container-open:hover { background: var(--ibs-top-ink); color: var(--ibs-top-bg); }
@media (max-width: 599px) {
	.ibs-bar .ibs-nav .wp-block-navigation__responsive-container-open { display: inline-flex; }
}
@media (min-width: 600px) and (max-width: 1439px) {
	.ibs-bar .ibs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
	.ibs-bar .ibs-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Full row from 1440px: the bar's inner row may run wider than the page wrap (2rem side margin) and the items sit a
   little closer, so brand + 13 items fit at 15px (Rubik on Elementor pages is the widest: ~13px to spare at 1440). */
@media (min-width: 1440px) {
	.ibs-header.ibs-header { width: min(1400px, 100% - 4rem); }
	.ibs-nav .wp-block-navigation__container { gap: .9rem; }
}

/* Open menu (full-screen dialog from core/navigation). */
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ibs-top-bg) !important; color: var(--ibs-top-ink) !important;
	padding: 1rem var(--ibs-gutter) 2rem; font-size: 1rem;
	top: var(--wp-admin--admin-bar--height, 0px);
}
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.25rem; align-items: stretch; }
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "תחומי הפעילות"; display: block; font-size: .875rem; font-weight: 500; color: var(--ibs-top-muted);
	padding-block-end: .75rem; border-block-end: 1px solid var(--ibs-top-line); width: 100%;
}
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; width: 100%; counter-reset: ibs-nav; }
@media (min-width: 600px) {
	.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation__container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-block-end: 1px solid var(--ibs-top-line); counter-increment: ibs-nav; }
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%;
	padding-block: .85rem; color: var(--ibs-top-ink); font-size: 1.375rem; font-weight: 700; white-space: normal;
}
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation-item__content::before {
	content: counter(ibs-nav, decimal-leading-zero); order: 2; flex: none;
	font-family: var(--ibs-mono); font-size: .8125rem; font-weight: 500; color: var(--ibs-top-muted); direction: ltr;
}
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: var(--ibs-top-accent); }
.ibs-bar .ibs-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--ibs-top-accent); }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container-close {
	top: 1rem; inset-inline-end: var(--ibs-gutter); width: 2.75rem; height: 2.75rem;
	display: grid; place-items: center; padding: 0;
	color: var(--ibs-top-ink); background: transparent; border: 1.5px solid var(--ibs-top-muted); border-radius: var(--ibs-radius); cursor: pointer;
}
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; fill: currentColor; }

/* Submenu "עבודות ביצוע" (core/navigation-submenu, class ibs-nav-work): the label links to the home page's portfolio
   (#work); the core toggle button beside it opens the list (click / Enter / Space, Escape closes, aria-expanded),
   hover also opens it on desktop. Core repeats the class on the inner <ul>, hence li.ibs-nav-work. */
.ibs-bar .ibs-nav li.ibs-nav-work { align-items: center; }
.ibs-bar .ibs-nav li.ibs-nav-work.current-menu-ancestor > .wp-block-navigation-item__content { font-weight: 700; }
.ibs-bar .ibs-nav li.ibs-nav-work.current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ibs-bar .ibs-nav li.ibs-nav-work > .wp-block-navigation-submenu__toggle {
	display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; margin: 0; margin-inline-start: .2rem;
	color: inherit; background: transparent; border: 0; border-radius: var(--ibs-radius); cursor: pointer;
}
.ibs-bar .ibs-nav li.ibs-nav-work > .wp-block-navigation-submenu__toggle svg { width: .75rem; height: .75rem; stroke: currentColor; margin: 0; }
.ibs-bar .ibs-nav li.ibs-nav-work > .wp-block-navigation-submenu__toggle:hover { color: var(--ibs-top-accent); }
/* Desktop dropdown: the bar's own colours; opens from the item's left edge towards the page centre, so it never leaves the screen. */
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) li.ibs-nav-work > .wp-block-navigation__submenu-container {
	right: auto; left: 0; top: calc(100% + .35rem);
	min-width: 15rem; padding: .4rem 0;
	background: var(--ibs-top-bg); color: var(--ibs-top-ink);
	border: 1px solid var(--ibs-top-line); border-block-start: 2px solid var(--ibs-top-accent); border-radius: 0 0 var(--ibs-radius) var(--ibs-radius);
	box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / .28);
}
/* Keeps the pointer inside the item while it crosses the gap above the dropdown. */
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) li.ibs-nav-work > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: .5rem; }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) li.ibs-nav-work .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.1rem; }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) li.ibs-nav-work .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { inset-inline: 1.1rem; bottom: .3rem; }
/* Escape pressed while hovering (chrome.js): stays closed until the pointer leaves. */
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) li.ibs-nav-work.is-dismissed > .wp-block-navigation__submenu-container { visibility: hidden; opacity: 0; }
/* Open mobile menu: a collapsible list under the item, opened by a clear button of chrome.js (.ibs-nav-work__more,
   own aria-expanded); core shows submenus always open there and keeps its toggle hidden. */
.ibs-bar .ibs-nav .ibs-nav-work__more { display: none; }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open li.ibs-nav-work > .wp-block-navigation-submenu__toggle { display: none; }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open li.ibs-nav-work { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .75rem; }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open li.ibs-nav-work > .wp-block-navigation-item__content { flex: 1 1 0; width: auto; min-width: 0; }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open li.ibs-nav-work > .ibs-nav-work__more {
	display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0;
	color: var(--ibs-top-ink); background: transparent; border: 1.5px solid var(--ibs-top-muted); border-radius: var(--ibs-radius); cursor: pointer;
}
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open li.ibs-nav-work > .ibs-nav-work__more:hover { color: var(--ibs-top-accent); border-color: currentColor; }
.ibs-bar .ibs-nav .ibs-nav-work__more svg { width: 1rem; height: 1rem; transition: transform .2s var(--ibs-ease); }
.ibs-bar .ibs-nav .ibs-nav-work__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.ibs-nav-work > .wp-block-navigation__submenu-container {
	display: none; flex: 1 0 100%; box-sizing: border-box; max-width: 100%; padding: 0 0 .75rem; padding-inline-start: 1rem; gap: 0;
}
.ibs-bar .ibs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content li.ibs-nav-work > .ibs-nav-work__more[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { display: flex; }
.ibs-bar .ibs-nav .is-menu-open li.ibs-nav-work .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; counter-increment: none; }
.ibs-bar .ibs-nav .is-menu-open li.ibs-nav-work .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-block: .5rem; font-size: 1.0625rem; font-weight: 500; }
.ibs-bar .ibs-nav .is-menu-open li.ibs-nav-work .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { content: none; }
.ibs-bar .ibs-nav .is-menu-open li.ibs-nav-work .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { font-weight: 700; color: var(--ibs-top-accent); }
.ibs-bar .ibs-nav .is-menu-open li.ibs-nav-work.current-menu-ancestor > .wp-block-navigation-item__content { color: var(--ibs-top-accent); }

@media (max-width: 380px) {
	.ibs-brand__tld { display: none; }
}

/* Focus (header + menu + footer). */
/* Prefixed with body.ibs-chrome: page stylesheets set their own body-level focus colour, meant for their light ground. */
body.ibs-chrome .ibs-bar :focus-visible { outline: 3px solid var(--ibs-top-accent); outline-offset: 3px; border-radius: 2px; }
body.ibs-chrome .ibs-site-footer :focus-visible, .editor-styles-wrapper .ibs-footer :focus-visible { outline: 3px solid var(--ibs-accent-soft); outline-offset: 3px; border-radius: 2px; }

/* ---------- Footer ---------- */
.ibs-site-footer {
	margin: 0; background: var(--ibs-f5-bg); color: var(--ibs-on-ink); /* the areas paint their own grounds; this is the closing band's */
	font-family: var(--ibs-font); font-size: 1rem; line-height: 1.6; overflow-wrap: break-word;
	text-align: start;
}
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :where(h2, p, ul) { margin: 0; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }
.ibs-footer { width: min(var(--ibs-wrap), 100% - 2 * var(--ibs-gutter)); margin-inline: auto; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) a { color: var(--ibs-on-ink); }

/* Each area is one centred column, one area under the other: heading (Hebrew, then the English line),
 * the explanation, then the form / links. One vertical rhythm: --ibs-area-gap between the parts. */
.ibs-area {
	--ibs-area-gap: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--ibs-area-gap);
	text-align: center;
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
	scroll-margin-top: calc(var(--ibs-bar-h) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}
/* Footer areas, edge to edge (the content keeps its centred column), from top to bottom: join f1 and contact f2
 * (40 %), social f3 (35 %), closing line f5 (30 %, the band that mirrors header 1). The footer has four areas, so f4
 * (35 %) is defined but unused – no area is split or added for it. Join and contact share a ground: spacing (each
 * area's own padding) and a thin rule across the content column separate them.
 * Inside an area the footer's text tokens are replaced by that area's, so every rule below (headings, English line,
 * labels, required mark, buttons, social links, rules, messages, focus ring) follows the area it sits in. */
.ibs-area--join { --ibs-zone: var(--ibs-f1-bg); --ibs-on-ink: var(--ibs-f1-ink); --ibs-on-ink-muted: var(--ibs-f1-muted); --ibs-on-ink-line: var(--ibs-f1-line); --ibs-accent-soft: var(--ibs-f1-accent); --ibs-good: var(--ibs-f1-good); --ibs-bad: var(--ibs-f1-bad); }
.ibs-area--contact { --ibs-zone: var(--ibs-f2-bg); --ibs-on-ink: var(--ibs-f2-ink); --ibs-on-ink-muted: var(--ibs-f2-muted); --ibs-on-ink-line: var(--ibs-f2-line); --ibs-accent-soft: var(--ibs-f2-accent); --ibs-good: var(--ibs-f2-good); --ibs-bad: var(--ibs-f2-bad); }
.ibs-area--social { --ibs-zone: var(--ibs-f3-bg); --ibs-on-ink: var(--ibs-f3-ink); --ibs-on-ink-muted: var(--ibs-f3-muted); --ibs-on-ink-line: var(--ibs-f3-line); --ibs-accent-soft: var(--ibs-f3-accent); --ibs-good: var(--ibs-f3-good); --ibs-bad: var(--ibs-f3-bad); }
.ibs-footer__bottom { --ibs-zone: var(--ibs-f5-bg); --ibs-on-ink: var(--ibs-f5-ink); --ibs-on-ink-muted: var(--ibs-f5-muted); --ibs-on-ink-line: var(--ibs-f5-line); --ibs-accent-soft: var(--ibs-f5-accent); --ibs-good: var(--ibs-f5-good); --ibs-bad: var(--ibs-f5-bad); }
.ibs-area--join + .ibs-area--contact { border-block-start: 1px solid var(--ibs-on-ink-line); } /* same ground as join */
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-area, .ibs-footer__bottom) {
	background: var(--ibs-zone, transparent);
	box-shadow: 0 0 0 100vmax var(--ibs-zone, transparent);
	clip-path: inset(0 -100vmax);
}
.ibs-area > * { width: 100%; max-width: 100%; }
.ibs-area__head { display: grid; gap: .75rem; justify-items: center; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-area__title {
	font-family: inherit; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); font-weight: 700; line-height: 1.2;
	color: var(--ibs-on-ink); letter-spacing: -.01em;
}
/* Second line of the same H2: smaller, own type, the current accent colour; written as in the text ("Join us…"). */
.ibs-area__en { display: block; margin-block-start: .35rem; font-family: var(--ibs-mono); font-size: clamp(.875rem, .8rem + .25vw, 1rem); font-weight: 500; line-height: 1.4; letter-spacing: .04em; color: var(--ibs-accent-soft); }
.ibs-area__lead { color: var(--ibs-on-ink-muted); }

/* Shared field look (join + contact). */
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join, .ibs-contact) :is(input[type="email"], input[type="text"], input[type="tel"], textarea) {
	display: block; width: 100%; min-width: 0; min-height: 3.25rem; margin: 0; padding: .7rem 1rem;
	font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ibs-ink);
	background: var(--ibs-paper); border: 2px solid var(--ibs-paper); border-radius: var(--ibs-radius); box-shadow: none;
}
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join, .ibs-contact) :is(input, textarea)::placeholder { color: var(--ibs-muted); opacity: 1; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join, .ibs-contact) :is(input, textarea)[aria-invalid="true"] { border-color: var(--ibs-bad); box-shadow: 0 0 0 1px var(--ibs-bad); }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join, .ibs-contact) :is(input, textarea):focus-visible { outline: 3px solid var(--ibs-accent-soft); outline-offset: 2px; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join__btn, .ibs-contact__btn) {
	flex: none; min-height: 3.25rem; margin: 0; padding: .7rem 1.6rem; cursor: pointer;
	font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-transform: none;
	color: var(--ibs-ink); background: var(--ibs-on-ink); border: 2px solid var(--ibs-on-ink); border-radius: var(--ibs-radius);
	transition: background-color .2s var(--ibs-ease), color .2s var(--ibs-ease), box-shadow .2s var(--ibs-ease);
}
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join__btn, .ibs-contact__btn):hover { background: var(--ibs-accent-soft); border-color: var(--ibs-accent-soft); color: var(--ibs-ink); box-shadow: 4px 4px 0 var(--ibs-on-ink-line); }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join__btn, .ibs-contact__btn)[disabled] { opacity: .7; cursor: progress; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join__msg, .ibs-contact__msg) { min-height: 1.5em; font-size: .9375rem; font-weight: 500; margin: 0; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join__msg, .ibs-contact__msg).is-success { color: var(--ibs-good); }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) :is(.ibs-join__msg, .ibs-contact__msg):is(.is-error, .is-required, .is-invalid, .is-expired) { color: var(--ibs-bad); }

/* A. Join */
.ibs-join-wrap { margin: 0; }
.ibs-join { display: grid; gap: .6rem; max-width: 40rem; }
/* The forms sit centred; inside them labels and fields keep reading order (RTL, e-mail/phone LTR). */
.ibs-area .ibs-join-wrap, .ibs-area .ibs-join { width: min(100%, 34rem); margin-inline: auto; text-align: start; }
.ibs-join__hp, .ibs-contact__hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ibs-join__label { font-weight: 700; font-size: .9375rem; }
.ibs-join__req, .ibs-contact__req { color: var(--ibs-accent-soft); margin-inline-start: .2rem; }
.ibs-join__field { display: flex; gap: .5rem; flex-wrap: wrap; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-join__field input[type="email"] { flex: 1 1 14rem; width: auto; text-align: left; }

/* B. Contact: row 1 = form, row 2 = email (right) + phone (left). */
.ibs-contact-row--form, .ibs-contact-row--details { width: min(100%, 46rem); margin-inline: auto; text-align: start; }
.ibs-contact-row--form { margin-block: 0; }
.ibs-contact { display: grid; gap: 1rem; }
.ibs-contact__note { font-size: .875rem; color: var(--ibs-on-ink-muted); }
.ibs-contact__note span { color: var(--ibs-accent-soft); }
.ibs-contact__grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
	.ibs-contact__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ibs-contact__field--message { grid-column: 1 / -1; }
}
.ibs-contact__field { display: grid; gap: .4rem; align-content: start; }
.ibs-contact__label { font-weight: 700; font-size: .9375rem; }
.ibs-contact__opt { font-weight: 400; color: var(--ibs-on-ink-muted); margin-inline-start: .25rem; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-contact textarea { min-height: 8.5rem; resize: vertical; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-contact :is(input[type="email"], input[type="tel"]) { text-align: left; }
.ibs-contact__err { min-height: 0; font-size: .875rem; font-weight: 500; color: var(--ibs-bad); }
.ibs-contact__err:empty { display: none; }
.ibs-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }

.ibs-contact-row--details {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
	border-block-start: 1.5px solid var(--ibs-on-ink-line);
}
@media (min-width: 700px) {
	/* RTL: first item (email) on the right, phone on the left. */
	.ibs-contact-row--details { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
	.ibs-detail--phone { justify-self: end; text-align: end; }
}
.ibs-detail { display: grid; gap: .15rem; padding-block: 1.1rem; }
@media (max-width: 699px) {
	.ibs-detail { grid-template-columns: 5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; border-block-end: 1px solid var(--ibs-on-ink-line); }
}
.ibs-detail__key { font-size: .875rem; font-weight: 500; color: var(--ibs-on-ink-muted); }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-detail__value {
	justify-self: start; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); font-weight: 700; line-height: 1.25;
	color: var(--ibs-on-ink); text-decoration: none; overflow-wrap: anywhere;
	background: linear-gradient(var(--ibs-accent-soft), var(--ibs-accent-soft)) no-repeat right bottom / 0 2px; transition: background-size .35s var(--ibs-ease);
}
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-detail__value:hover { background-size: 100% 2px; }

/* C. Social */
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-social.wp-block-social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: min(100%, 52rem); margin: 0 auto; padding: 0; list-style: none; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-social .wp-social-link {
	margin: 0; background: transparent !important; color: var(--ibs-on-ink) !important;
	border: 1px solid var(--ibs-on-ink-line); border-radius: 999px;
	transition: background-color .2s var(--ibs-ease), color .2s var(--ibs-ease), border-color .2s var(--ibs-ease);
}
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-social .wp-social-link:hover { background: var(--ibs-accent-soft) !important; color: var(--ibs-ink) !important; border-color: var(--ibs-accent-soft); transform: none; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-social .wp-block-social-link-anchor { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem !important; color: inherit !important; text-decoration: none; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-social .wp-block-social-link-anchor svg { display: block; width: 1.1em; height: 1.1em; max-width: none; fill: currentColor; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-social .wp-block-social-link-label { font-size: .875rem; font-weight: 500; line-height: 1.2; }

/* Bottom line */
.ibs-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem 2rem; font-size: .9375rem; }
.ibs-footer__brand { font-family: var(--ibs-mono); font-weight: 500; letter-spacing: .02em; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-footer__bottom a { color: var(--ibs-on-ink-muted); text-decoration: none; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-footer__bottom a:hover { color: var(--ibs-on-ink); text-decoration: underline; text-underline-offset: .25em; }
:is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-footer__top a { font-weight: 700; color: var(--ibs-on-ink); }

/* ---------- Editor ---------- */
.editor-styles-wrapper .ibs-bar .ibs-nav .wp-block-navigation__container { flex-wrap: wrap; }
.editor-styles-wrapper .ibs-site-footer, .editor-styles-wrapper .ibs-footer { max-width: none; }
.editor-styles-wrapper .ibs-footer.ibs-footer { background: var(--ibs-f5-bg); color: var(--ibs-on-ink); padding-inline: 1.5rem; width: auto; }
.editor-styles-wrapper .ibs-header.ibs-header { background: var(--ibs-top-bg); color: var(--ibs-top-ink); width: auto; height: auto; min-height: var(--ibs-bar-h); padding-inline: 1rem; }

/* ---------- Print ---------- */
@media print {
	.ibs-site-header, .ibs-bar, .ibs-area--join, .ibs-contact-row--form, .ibs-area--social { display: none !important; }
	.ibs-site-footer { background: #fff !important; color: #000 !important; }
	.ibs-site-footer a, :is(.ibs-site-footer, .editor-styles-wrapper .ibs-footer) .ibs-area__title { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ibs-bar *, .ibs-site-footer * { transition: none !important; animation: none !important; }
}


/* ---------- Block pages: the page's own header row under the bar ----------
 * Contract with the page templates: the section navigation has class ibs-section-nav (its toggle reads
 * "בעמוד זה", see ibastom_chrome_section_nav()) and is introduced by a paragraph .ibs-section-label.
 * Colours come from the page (currentColor), so each page keeps its own look. */
.ibs-section-label { flex: none; margin: 0 !important; padding-inline-end: 1rem; border-inline-end: 1px solid currentColor; font-size: .8125rem; font-weight: 500; line-height: 1.6; white-space: nowrap; opacity: .72; }
.wp-block-navigation.ibs-section-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
	width: auto; min-width: 0; height: auto; min-height: 2.6rem; padding: .35rem .9rem; gap: .45rem;
	font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2;
}
.wp-block-navigation.ibs-section-nav .wp-block-navigation__responsive-container-open::after { content: "↓"; font-weight: 500; }
.wp-block-navigation.ibs-section-nav .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close { width: auto; min-width: 2.75rem; padding-inline: .75rem; font: inherit; font-size: .875rem; font-weight: 700; }
@media (max-width: 899px) {
	.ibs-section-label { display: none; }
	.wp-block-navigation.ibs-section-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; align-items: center; }
	.wp-block-navigation.ibs-section-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Header 2 – the page row: one step lighter than the bar (--ibs-row-*), opaque, also while both stay sticky. Each
 * family draws the row's ground on its own element (a pseudo-element, so the backdrop blur does not trap the mobile
 * overlay); only the colour is set here. The row's parts are the same in every family – the "בעמוד זה" label, the
 * section links, the "בעמוד זה" toggle (narrow screens) and one call-to-action button – and take the row's tokens
 * here instead of the page's light-ground colours. The button is the row's primary action: filled in the row accent;
 * the links are secondary: text with an accent underline on hover and for the current section. */
body.ibs-chrome :is(.sv-site-header, .pj-site-header, .ga3-site-header)::after,
body.ibs-chrome :is(.ec3-site-header, .cr3-site-header, .hnn-site-header)::before { background: var(--ibs-row-bg); }
body.ibs-chrome :is(.sv-site-header, .pj-site-header, .ga3-site-header)::after { border-block-end-color: var(--ibs-row-line); }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) { color: var(--ibs-row-ink); }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) .ibs-section-label { color: var(--ibs-row-muted); border-color: var(--ibs-row-line); opacity: 1; }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) .ibs-section-nav .wp-block-navigation-item__content { color: var(--ibs-row-ink); }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) .ibs-section-nav .wp-block-navigation-item__content::after { background: var(--ibs-row-accent); }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) .ibs-section-nav .wp-block-navigation__responsive-container-open { color: var(--ibs-row-ink); background: transparent; border-color: var(--ibs-row-ink); }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) .ibs-section-nav .wp-block-navigation__responsive-container-open:hover { color: var(--ibs-row-on-accent); background: var(--ibs-row-ink); }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) .wp-block-button__link { background: var(--ibs-row-accent); color: var(--ibs-row-on-accent); border-color: var(--ibs-row-accent); box-shadow: none; }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) .wp-block-button__link:hover { background: var(--ibs-row-ink); color: var(--ibs-row-on-accent); border-color: var(--ibs-row-ink); }
body.ibs-chrome :is(.sv-header, .pj-header, .ga3-header, .ec3-header, .cr3-header, .hnn-header) :focus-visible { outline: 3px solid var(--ibs-row-accent); outline-offset: 3px; }
/* The scroll-progress line at the row's lower edge (sv, pj, ga3, ec3, cr3; decorative) in the row accent. */
body.ibs-chrome :is(.sv-progress, .pj-progress, .ga3-progress, .ec3-progress, .cr3-progress)::before { background: var(--ibs-row-accent); }

/* The page row's mobile menu opens in the row's own shade (each family had drawn it on its dark ink). */
body.ibs-chrome .ibs-section-nav.ibs-section-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--ibs-row-bg) !important; color: var(--ibs-row-ink) !important; }
body.ibs-chrome .ibs-section-nav.ibs-section-nav .is-menu-open .wp-block-navigation__responsive-container-content::before { color: var(--ibs-row-muted); border-color: var(--ibs-row-line); }
body.ibs-chrome .ibs-section-nav.ibs-section-nav .is-menu-open .wp-block-navigation-item { border-color: var(--ibs-row-line); }
body.ibs-chrome .ibs-section-nav.ibs-section-nav .is-menu-open .wp-block-navigation-item__content { color: var(--ibs-row-ink); }
body.ibs-chrome .ibs-section-nav.ibs-section-nav .is-menu-open .wp-block-navigation-item__content::before { color: var(--ibs-row-accent); }
body.ibs-chrome .ibs-section-nav.ibs-section-nav .is-menu-open .wp-block-navigation-item__content:is(:hover, [aria-current]) { color: var(--ibs-row-accent); }
body.ibs-chrome .ibs-section-nav.ibs-section-nav .is-menu-open .wp-block-navigation__responsive-container-close { color: var(--ibs-row-ink); border-color: var(--ibs-row-line); }
body.ibs-chrome .ibs-section-nav.ibs-section-nav .wp-block-navigation__responsive-container.is-menu-open :focus-visible { outline-color: var(--ibs-row-accent); }

/* ---------- 404 page (templates/404.php, Hello Elementor requests) ---------- */
.ibs-404 { background: var(--ibs-paper-2); color: var(--ibs-ink); font-family: Rubik, "Segoe UI", Arial, sans-serif; outline: none; }
.ibs-404__wrap { width: min(46rem, 100% - 2 * var(--ibs-gutter)); margin-inline: auto; padding-block: clamp(3rem, 8vw, 6rem); }
.ibs-404__code { margin: 0; font-family: var(--ibs-mono); font-size: .9375rem; color: var(--ibs-accent); letter-spacing: .08em; }
.ibs-404__title { margin: .25rem 0 1rem; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); line-height: 1.1; font-weight: 800; color: var(--ibs-ink); }
.ibs-404__lead { margin: 0 0 2rem; font-size: 1.125rem; line-height: 1.7; color: var(--ibs-muted); max-width: 38rem; }
.ibs-404__search { margin-block-end: 2.5rem; }
.ibs-404__label { display: block; margin-block-end: .5rem; font-weight: 700; }
.ibs-404__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.ibs-404__input { flex: 1 1 14rem; min-width: 0; min-height: 2.875rem; padding: .5rem .875rem; font: inherit; color: var(--ibs-ink); background: var(--ibs-paper); border: 1.5px solid var(--ibs-muted); border-radius: var(--ibs-radius); }
.ibs-404__btn { min-height: 2.875rem; padding: .5rem 1.5rem; font: inherit; font-weight: 700; color: var(--ibs-paper); background: var(--ibs-ink); border: 0; border-radius: var(--ibs-radius); cursor: pointer; }
.ibs-404 .ibs-404__btn:is(:hover, :focus) { color: var(--ibs-paper); background: var(--ibs-accent); } /* not Hello's pink button:focus */
.ibs-404__h2 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; color: var(--ibs-ink); }
.ibs-404__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .5rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.ibs-404__links a { display: block; padding: .75rem 1rem; font-weight: 600; color: var(--ibs-ink); text-decoration: none; background: var(--ibs-paper); border: 1px solid var(--ibs-line); border-inline-start: 3px solid var(--ibs-accent); border-radius: var(--ibs-radius); }
.ibs-404__links a:hover { color: var(--ibs-accent); border-color: var(--ibs-accent); }
.ibs-404__contact { margin: 0; color: var(--ibs-muted); line-height: 1.8; }
.ibs-404__contact a { color: var(--ibs-accent); font-weight: 600; }
.ibs-404 :focus-visible { outline: 3px solid var(--ibs-accent); outline-offset: 2px; }
.ibs-404 :is(h1, h2) { font-family: inherit; } /* not the Elementor kit's heading font */

/* ---------- Accessibility toolbar (pojo-accessibility) ----------
 * Its closed panel sits off screen but its links stayed in the tab order: keyboard focus vanished for several Tabs
 * before reaching the page. Hidden while closed (after the slide-out), visible as soon as it opens. */
#pojo-a11y-toolbar:not(.pojo-a11y-toolbar-open) .pojo-a11y-toolbar-overlay { visibility: hidden; transition: visibility 0s linear .4s; }

/* ---------- Elementor archive template (tags, search, date): readable cards ----------
 * The Posts widget set 14px titles and a 10px meta line; titles are now h2 (widget setting), sized here. */
.ibs-archive-main { display: block; outline: none; }
body.ibs-classic .ibs-archive-main .elementor-widget-posts .elementor-post .elementor-post__title,
body.ibs-classic .ibs-archive-main .elementor-widget-posts .elementor-post .elementor-post__title a { font-size: 1.0625rem; line-height: 1.4; font-weight: 700; }
body.ibs-classic .ibs-archive-main .elementor-widget-posts .elementor-post .elementor-post__excerpt p { font-size: .9375rem; line-height: 1.65; color: #4b5563; } /* was #777 on #f3f5f8, 4.1:1 */
body.ibs-classic .ibs-archive-main .elementor-widget-posts .elementor-post .elementor-post__meta-data { font-size: .8125rem; line-height: 1.5; color: #4b5563; }
body.ibs-classic .ibs-archive-main .elementor-widget-posts .elementor-post .elementor-post__read-more { font-size: .9375rem; line-height: 1.5; }
body.ibs-classic .ibs-archive-main .elementor-widget-posts .elementor-pagination { margin-block: 2rem 1rem; font-size: 1rem; }
body.ibs-classic .ibs-archive-main .elementor-widget-posts .elementor-pagination .page-numbers { display: inline-block; min-width: 2.75rem; padding: .5rem .25rem; text-align: center; }

/* ---------- Page palettes ----------
 * The bar, its open mobile menu and the footer take the palette of the page they are shown on. Each page family maps
 * the --ibs-* roles to the page's OWN custom properties (declared on :root by the page stylesheet, which loads only on
 * that page), so every palette lives in one place: change it in the page CSS and the chrome follows. Scoped by the
 * body class of the family, so one page's palette never reaches another page.
 *   ink / paper / line / muted   dark ground (menu, footer) and bar text / bar ground / bar rule / secondary text
 *   accent                       on the light bar: brand mark, link underline, current link, focus ring (text-safe)
 *   accent-soft                  on the dark grounds: current menu item, English line, required mark, buttons' and
 *                                social links' hover, focus ring
 *   on-ink / -muted / -line      text, secondary text and rules on the dark grounds
 *   good / bad                   form messages and invalid fields (site defaults unless the page has its own)
 * Pages without a family class (Elementor pages, the default templates) keep the site defaults above.
 * Legacy hex rules: ecm / crp are the first e-commerce / corporate pages (14121 / 14125, now in the trash).
 */
body.ibastom-hnn { /* home page (14118) */
	--ibs-ink: var(--hnn-ink); --ibs-paper: var(--hnn-paper); --ibs-ink-2: var(--hnn-ink-2); --ibs-paper-2: var(--hnn-paper-2); --ibs-line: var(--hnn-line); --ibs-muted: var(--hnn-muted);
	--ibs-accent: var(--hnn-cobalt); --ibs-accent-soft: var(--hnn-signal);
	--ibs-on-ink: var(--hnn-on-dark); --ibs-on-ink-muted: var(--hnn-on-dark-muted); --ibs-on-ink-line: #2c3038; /* the page has no rule colour on dark */
	--ibs-good: var(--hnn-ok); --ibs-bad: var(--hnn-bad);
}
body.ibastom-ec3 { /* e-commerce (14132) */
	--ibs-ink: var(--ec3-ink); --ibs-paper: var(--ec3-paper); --ibs-ink-2: var(--ec3-ink-2); --ibs-paper-2: var(--ec3-paper-2); --ibs-line: var(--ec3-line); --ibs-muted: var(--ec3-muted);
	--ibs-accent: var(--ec3-signal-deep); --ibs-accent-soft: var(--ec3-signal-soft);
	--ibs-on-ink: var(--ec3-on-ink); --ibs-on-ink-muted: var(--ec3-on-ink-muted); --ibs-on-ink-line: var(--ec3-on-ink-line);
	--ibs-good: var(--ec3-green-soft);
}
body.ibastom-cr3 { /* corporate (14140) */
	--ibs-ink: var(--cr3-ink); --ibs-paper: var(--cr3-paper); --ibs-ink-2: var(--cr3-ink-2); --ibs-paper-2: var(--cr3-paper-2); --ibs-line: var(--cr3-line); --ibs-muted: var(--cr3-muted);
	--ibs-accent: var(--cr3-signal-deep); --ibs-accent-soft: var(--cr3-signal-soft);
	--ibs-on-ink: var(--cr3-on-ink); --ibs-on-ink-muted: var(--cr3-on-ink-muted); --ibs-on-ink-line: var(--cr3-on-ink-line);
	--ibs-good: var(--cr3-green-soft);
}
body.ibastom-ga3 { /* Google accounts (14145) */
	--ibs-ink: var(--ga3-ink); --ibs-paper: var(--ga3-paper); --ibs-ink-2: var(--ga3-ink-2); --ibs-paper-2: var(--ga3-paper-2); --ibs-line: var(--ga3-line); --ibs-muted: var(--ga3-muted);
	--ibs-accent: var(--ga3-signal-deep); --ibs-accent-soft: var(--ga3-lime);
	--ibs-on-ink: var(--ga3-on-ink); --ibs-on-ink-muted: var(--ga3-on-ink-muted); --ibs-on-ink-line: var(--ga3-on-ink-line);
}
/* Service pages, the blog, its topic archives and its articles (one stylesheet per page sets --sv-*). */
body.ibastom-sv {
	--ibs-ink: var(--sv-ink); --ibs-paper: var(--sv-paper); --ibs-ink-2: var(--sv-ink-2); --ibs-paper-2: var(--sv-paper-2); --ibs-line: var(--sv-line); --ibs-muted: var(--sv-muted);
	--ibs-accent: var(--sv-signal-deep); --ibs-accent-soft: var(--sv-accent);
	--ibs-on-ink: var(--sv-on-ink); --ibs-on-ink-muted: var(--sv-on-ink-muted); --ibs-on-ink-line: var(--sv-on-ink-line);
}
/* Topic archives and articles of a topic that has its own accent (assets/service-3/topics.css): the topic's accent
 * and light tint replace the blog's red and yellow; the blog's ink and paper stay. Topics without an accent of their
 * own (online-store, branding, marketing, portfolio) keep the blog palette above. */
body:is(.ibastom-blgt-ecommerce, .ibastom-blgt-corporate, .ibastom-blgt-google, .ibastom-blgt-malls, .ibastom-blgt-data, .ibastom-blgt-social, .ibastom-blgt-ppc, .ibastom-blgt-seo, .ibastom-blgt-digital, .ibastom-blgt-dropshipping, .ibastom-blgt-geo) {
	--ibs-paper-2: var(--blgt-tint); --ibs-accent: var(--sv-signal-deep); --ibs-accent-soft: var(--sv-signal-soft);
}
/* Company (project) pages: --pj-* from assets/project/<company>.css. */
body.ibastom-pj {
	--ibs-ink: var(--pj-ink); --ibs-paper: var(--pj-paper); --ibs-ink-2: var(--pj-ink-2); --ibs-paper-2: var(--pj-paper-2); --ibs-line: var(--pj-line); --ibs-muted: var(--pj-muted);
	--ibs-accent: var(--pj-signal-deep); --ibs-accent-soft: var(--pj-accent);
	--ibs-on-ink: var(--pj-on-ink); --ibs-on-ink-muted: var(--pj-on-ink-muted); --ibs-on-ink-line: var(--pj-on-ink-line);
}
body.ibastom-ecm { --ibs-ink: #0b1020; --ibs-paper: #ffffff; --ibs-accent: #4f3fd1; --ibs-accent-soft: #c4b8ff; --ibs-on-ink-line: #2a3150; }
body.ibastom-crp { --ibs-ink: #141a26; --ibs-paper: #fbf9f5; --ibs-on-ink-line: #313a4c; }