/*
Theme Name: IS-IL
Theme URI: https://is-il.org.il
Author: Open Source Solutions
Author URI: https://opensourcesolutions.pro
Description: Classic RTL-first theme for the national infrastructure coordination system. No build step, no framework, no page builder.
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isil
Tags: rtl-language-support, accessibility-ready
*/

/* ==========================================================================
   CONTENTS

   FOUNDATIONS
    1. Tokens
    2. Reset
    3. Base
    4. Accessibility floor

   PRIMITIVES — shared by several components, declared before their consumers
    5. Layout
    6. Buttons
    7. Breadcrumb
    8. Card grid
    9. Carousel dots
   10. Support bubble

   CHROME — present on every page
   11. Header
   12. Slide-out menu
   13. Login dialog
   14. Footer

   HOME SECTIONS — in document order
   15. Hero
   16. Metrics
   17. News
   18. Leading bodies
   19. Partner logos

   PAGE CONTENT
   20. Interior pages
   21. Appointments
   22. Editor content
   23. Sitemap

   GLOBAL OVERRIDES
   24. Responsive
   25. Print

   ORDERING RULE
   A component never has to out-specify a primitive it depends on, because
   every primitive is declared first. Where a component moves a primitive at
   one breakpoint — the news button, the bodies carousel — that override
   lives with the component, later in source, and so wins at equal weight.

   BREAKPOINTS
   Media queries cannot read custom properties, so these are written
   literally. Change them here and search for the value.
     48rem  /  768px  — carousels engage, columns collapse
     60rem  /  960px  — interior-page artwork drops, footer reflows
     90rem  / 1440px  — desktop ceiling; metrics icons shrink below it
   ========================================================================== */

/* ==========================================================================
   1. Tokens

   Colours and type come from the Figma StyleGuide frame. Departures from it
   are noted inline; each one exists to satisfy IS 5568 / WCAG 2.1 AA.
   ========================================================================== */

:root {
	/* Brand */
	--isil-blue-dark: #070f1c;     /* darkest sections — not in the StyleGuide */
	--isil-blue: #081744;          /* dark sections, headings */
	--isil-blue-hover: #0d2260;    /* the only hover state for blue fills */
	--isil-blue-light: #467bad;    /* secondary, focus ring */
	--isil-purple: #af485e;        /* accent fills, large display text */
	--isil-purple-hover: #9a3d52;
	--isil-purple-light: #d9a3ae;
	--isil-news-blue: #0050d1;     /* news CTA only — 6.8:1 on white */
	--isil-status-ok: #3ec46d;
	--isil-status-warn: #f0a03c;
	--isil-status-down: #e05252;

	/* Surfaces */
	--isil-page-bg: #fbfbfb;
	--isil-white: #ffffff;
	/* Channels rather than a hex value: the feature cards are translucent, and
	   rgb() needs the components separately to take an alpha at the point of
	   use. */
	--isil-card-bg: 242 242 242;   /* feature cards */
	--isil-surface-muted: #efefef; /* support-panel header */
	--isil-border: #e3e5ea;

	/* Text — contrast ratios measured against --isil-page-bg */
	--isil-text: #1a1f2e;          /* 14.8:1 */
	--isil-text-muted: #6b7280;    /*  4.7:1 — AA for body copy */
	--isil-text-invert: #ffffff;

	/* The Figma accent #AF485E gives 5.2:1 on the page background: AA for
	   normal text with no margin, and a fail for anything smaller. Links use
	   a darker cut of the same hue at 7.4:1. --isil-purple stays available
	   for large display text and decorative fills, where 3:1 is the bar. */
	--isil-link: #8e3549;
	--isil-link-invert: var(--isil-purple-light); /* 4.5:1 on --isil-blue */

	/* Company logo color */
	--isil-provider-logo: #8e8e8e;   /* 4.9:1 on --isil-blue-dark; 3:1 is the bar */

	/* Set inline per provider by isil_render_company(): every body has a
	   different file, so the URL cannot live in the stylesheet. Declared here
	   so the variable is documented and a missing inline style degrades to no
	   mask rather than to an invalid declaration. */
	--isil-provider-mask: none;

	/* Type */
	--isil-font: "Noto Sans Hebrew", "Segoe UI", system-ui, sans-serif;
	--isil-font-num: "Plus Jakarta Sans", "Noto Sans Hebrew", system-ui, sans-serif;
	--isil-fs-h1: 2.25rem;      /* 36px */
	--isil-fs-h2: 1.75rem;      /* 28px */
	--isil-fs-h3: 1.5rem;       /* 24px */
	--isil-fs-body: 1rem;       /* 16px */
	--isil-fs-small: 0.9375rem; /* 15px */

	/* The maquette sets 100% line height on every style, which is unreadable
	   for Hebrew body copy. */
	--isil-lh-heading: 1.15;
	--isil-lh-body: 1.6;

	/* Space — 4px base */
	--isil-space-1: 0.25rem;
	--isil-space-2: 0.5rem;
	--isil-space-3: 1rem;
	--isil-space-4: 1.5rem;
	--isil-space-5: 2rem;
	--isil-space-6: 3rem;
	--isil-space-7: 4rem;
	--isil-space-8: 6rem;

	/* Layout */
	--isil-container: 75rem;      /* 1200px */
	--isil-container-wide: 90rem; /* 1440px */
	--isil-gutter: var(--isil-space-4);
	--isil-radius: 8px;
	--isil-pill: 999px;
	--isil-shadow: 0 8px 24px rgb(0 0 0 / 35%);

	/* Target size. WCAG 2.1 — this project's stated level — has no
	   target-size criterion at AA, so this is a design decision, not a
	   compliance floor:
	     aa  — 24px, 2.5.8 Target Size (Minimum), AA, added in WCAG 2.2
	     aaa — 44px, 2.5.5 Target Size, AAA, WCAG 2.1
	   Point --isil-tap-target at either and every labelled control follows.
	   The designer drew the pills thin, so aa is the default. Switching to
	   aaa grows the header CTA, the outline pills and the closing CTA by
	   20px each: it changes the composition, it is not a silent toggle. */
	--isil-tap-aa: 24px;
	--isil-tap-aaa: 44px;
	--isil-tap-target: var(--isil-tap-aaa);

	/* Icon-only controls keep the larger floor either way: with no label to
	   widen them, the glyph is the whole target. */
	--isil-tap-icon: var(--isil-tap-aaa);

	--isil-hero-min: clamp(20rem, 42vw, 34rem);
}

/* ==========================================================================
   2. Reset

   Every selector here is wrapped in :where(), which zeroes its specificity.
   Without it, `ul[class]` (0-1-1) outranks a component class like
   `.isil-metrics` (0-1-0) and silently wins — a bug that cost us an
   afternoon. Resets should never outrank the components they precede.
   ========================================================================== */

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

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
	margin: 0;
}

:where(ul[class], ol[class]) {
	padding: 0;
	list-style: none;
}

:where(img, picture, svg, video) {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

/* ==========================================================================
   3. Base

   Written RTL-first with logical properties throughout. There is no rtl.css:
   direction comes from <html dir="rtl">, and every spacing rule is
   direction-agnostic, so an LTR context — the block editor for an
   English-locale user — mirrors correctly with no second file.
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--isil-page-bg);
	color: var(--isil-text);
	font-family: var(--isil-font);
	font-size: var(--isil-fs-body);
	line-height: var(--isil-lh-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: var(--isil-blue);
	font-weight: 900;
	line-height: var(--isil-lh-heading);
	text-wrap: balance;
}

h1 { font-size: var(--isil-fs-h1); }
h2 { font-size: var(--isil-fs-h2); }
h3 { font-size: var(--isil-fs-h3); }

p {
	text-wrap: pretty;
}

a {
	color: var(--isil-link);
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Latin numerals inside Hebrew text: isolate them so separators and
   punctuation are not reordered by the bidi algorithm. */
.isil-ltr-num {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==========================================================================
   4. Accessibility floor (IS 5568 / WCAG 2.1 AA)
   ========================================================================== */

:focus-visible {
	outline: 3px solid var(--isil-blue-light);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Only ever removed where :focus-visible provides the replacement. */
:focus:not(:focus-visible) {
	outline: none;
}

.isil-skip-link {
	position: absolute;
	z-index: 999;
	inset-block-start: -100%;
	inset-inline-start: var(--isil-space-3);
	padding: var(--isil-space-3) var(--isil-space-4);
	background: var(--isil-blue);
	color: var(--isil-text-invert);
	font-weight: 700;
	text-decoration: none;
}

.isil-skip-link:focus {
	inset-block-start: var(--isil-space-3);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip-path: none;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Work with the OS high-contrast mode rather than against it: forced-colors
   drops backgrounds, so anything that relied on fill alone needs an edge.
   Gutenberg buttons are included — they never route through .isil-btn. */
@media (forced-colors: active) {
	.isil-btn,
	.isil-hero__toggle,
	.wp-block-button__link {
		border: 1px solid;
	}
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.isil-container {
	width: min(100% - (var(--isil-gutter) * 2), var(--isil-container));
	margin-inline: auto;
}

.isil-container--wide {
	width: min(100% - (var(--isil-gutter) * 2), var(--isil-container-wide));
}

.isil-section {
	padding-block: var(--isil-space-7);
}

/* Per-page background, set on <body> by functions.php. 'default' is the
   al-hamaarechet background, and any page created later inherits it with no
   action needed. */
.isil-bg-default { background: var(--isil-page-bg); }
.isil-bg-white   { background: var(--isil-white); }

/* Section-level and page-level dark treatments are the same treatment; one
   ruleset, two entry points. */
.isil-section--dark,
.isil-bg-dark {
	background: var(--isil-blue);
	color: var(--isil-text-invert);
}

:is(.isil-section--dark, .isil-bg-dark) :is(h1, h2, h3) {
	color: var(--isil-text-invert);
}

:is(.isil-section--dark, .isil-bg-dark) a {
	color: var(--isil-link-invert);
}

/* An element with `hidden` is display:none by the browser's own stylesheet,
   but any later `display` declaration overrides it. Both dialogs set one, so
   the attribute has to be honoured explicitly. */
.isil-aside[hidden],
.isil-login[hidden] {
	display: none;
}

/* ==========================================================================
   6. Buttons

   One base, four modifiers. Every hand-written pill routes through .isil-btn
   so the tap target and radius are declared once.

   Gutenberg buttons are the exception and are styled in section 20. Core
   wraps the anchor in a <div>, and a pattern that puts a class on that
   wrapper leaves the anchor at core's default grey inside a branded box, so
   those rules target .wp-block-button__link directly.
   ========================================================================== */

.isil-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--isil-tap-target);
	padding: var(--isil-space-2) var(--isil-space-4);
	background: var(--isil-blue);
	color: var(--isil-text-invert);
	border: 2px solid var(--isil-blue);
	border-radius: var(--isil-pill);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.isil-btn:hover {
	background: var(--isil-blue-hover);
	border-color: var(--isil-blue-hover);
}

.isil-btn--ghost {
	background: transparent;
	color: var(--isil-blue);
}

.isil-btn--ghost:hover {
	background: rgb(8 23 68 / 6%);
	border-color: var(--isil-blue);
}

/* Login dialog: pushed to the foot of its column so both parcours line up
   however long their descriptions run. */
.isil-btn--login {
	margin-block-start: auto;
	min-height: 48px;
	border-width: 1px;
}

/* Footer CTA. */
.isil-btn--accent {
	padding: var(--isil-space-1) var(--isil-space-4);
	background: var(--isil-blue);
	border: 1px solid var(--isil-blue-dark);
	white-space: nowrap;
}

.isil-btn--accent:hover {
	background: var(--isil-blue-hover);
	border-color: var(--isil-white);
}

/* News CTA. The anchor is last in the DOM so reading order and tab order
   agree; section 17 places it back into row 1 beside the heading. */
.isil-btn--news {
	min-width: 0;
	padding: var(--isil-space-1) var(--isil-space-4);
	background: transparent;
	border: 1px solid var(--isil-news-blue);
	color: var(--isil-news-blue);
	font-size: var(--isil-fs-small);
}

.isil-btn--news:hover {
	background: rgb(0 80 209 / 8%);
	border-color: var(--isil-news-blue);
}

/* ==========================================================================
   7. Breadcrumb
   ========================================================================== */

.isil-breadcrumb {
	padding-block-start: var(--isil-space-4);
	color: var(--isil-blue-dark);
	font-size: var(--isil-fs-small);
}

.isil-breadcrumb a {
	color: var(--isil-blue-dark);
	text-decoration: none;
}

.isil-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isil-space-2);
	list-style: none;   /* the ol carries no class, so the reset skips it */
	padding: 0;
	margin: 0;
}

/* U+003E has Bidi_Mirrored=Yes, so the bidi algorithm renders it as "<" in
   an RTL run — it points at the current page, not back at the parent. The
   maquette shows it the other way; swap for a masked SVG if that matters. */
.isil-breadcrumb li + li::before {
	content: "\003E";
	margin-inline-end: var(--isil-space-2);
}

/* Targets the state, not the position: a three-level trail would break
   li:last-child, and the attribute is already in the markup. */
.isil-breadcrumb [aria-current="page"] {
	font-weight: 700;
}

/* ==========================================================================
   8. Card grid
   ========================================================================== */

.isil-grid {
	display: grid;
	gap: var(--isil-space-4);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.isil-card__title {
	margin-block-end: var(--isil-space-2);
	color: var(--isil-purple);
	font-size: var(--isil-fs-h3);
}

/* ==========================================================================
   9. Carousel dots — shared by the metrics and bodies carousels

   nav.js builds them at every viewport; they only become visible where a
   carousel actually engages. The scrolling rows themselves are set up in
   sections 16 and 18, next to the cards they hold.
   ========================================================================== */

.isil-dots {
	display: none;
}

@media (max-width: 48rem) {
	/* A dark pill behind the row: dots sit over changing footage or a dark
	   section, and the faded ones would otherwise vanish — WCAG 1.4.11 asks
	   for 3:1 on interface components. */
	.isil-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--isil-space-1);
		width: fit-content;
		margin-inline: auto;
		margin-block: var(--isil-space-3) var(--isil-space-2);
		padding: var(--isil-space-1) var(--isil-space-2);
		background: rgb(8 23 68 / 45%);
		border-radius: var(--isil-pill);
	}

	/* Pinned to the AA floor rather than the switch: a row of dots at 44px
	   would be a band across the hero. */
	.isil-dots__dot {
		display: grid;
		place-items: center;
		width: var(--isil-tap-aa);
		height: var(--isil-tap-aa);
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}

	/* The visible dot is the pseudo-element, so the button can be larger than
	   the mark it draws. Opacity is set inline by nav.js. */
	.isil-dots__dot::before {
		content: "";
		width: 10px;
		height: 10px;
		background: var(--isil-text-invert);
		border-radius: 50%;
		opacity: inherit;
		transition: transform 0.15s ease;
	}

	.isil-dots__dot[aria-current="true"]::before {
		transform: scale(1.3);
	}
}

/* ==========================================================================
   10. Support bubble

   One shell, three anchors: header, slide-out panel, footer. Position is set
   per context because the bubbles open in opposite directions, and a single
   positioned rule would leak from one to the next by source order.
   ========================================================================== */

.isil-support {
	position: relative;
}

.isil-support__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--isil-space-2);
	min-height: var(--isil-tap-icon);
	padding: 0;
	background: none;
	border: 0;
	color: var(--isil-text-invert);
	white-space: nowrap;
	cursor: pointer;
}

.isil-support__toggle:hover {
	text-decoration: underline;
}

.isil-support__panel {
	position: absolute;
	z-index: 2;
	width: max-content;
	padding: 0;
	background: var(--isil-white);
	border-radius: var(--isil-radius);
	color: var(--isil-text);
	box-shadow: var(--isil-shadow);
}

.isil-support__panel::after {
	content: "";
	position: absolute;
	border: 8px solid transparent;
}

.isil-support__title {
	margin: 0;
	padding: var(--isil-space-3) var(--isil-space-4);
	background: var(--isil-surface-muted);
	border-start-start-radius: var(--isil-radius);
	border-start-end-radius: var(--isil-radius);
	color: var(--isil-text);
	font-weight: 700;
	text-align: start;
}

/* The reset only clears markers from a ul that carries a class; this one
   does not, so it needs clearing here. */
.isil-support__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.isil-support__panel li + li {
	margin-block-start: var(--isil-space-2);
	padding-block-start: var(--isil-space-2);
	border-block-start: 1px dotted var(--isil-border);
}

.isil-support__panel a.isil-support__link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--isil-space-3);
	min-height: 48px;
	padding-inline: var(--isil-space-4);
	color: var(--isil-text);
	text-decoration: none;
	white-space: nowrap;
}

.isil-support__panel a.isil-support__link:hover {
	text-decoration: underline;
}

/* --- Header: opens downwards, anchored to the viewport edge. The toggle
   sits against it, so opening from its start edge pushes the panel
   off-screen. The pointer meets the title bar, hence the muted fill. ------ */

.isil-header .isil-support__panel {
	inset-block-start: calc(100% + var(--isil-space-2));
	inset-block-end: auto;
	inset-inline-start: auto;
	inset-inline-end: 0;
	transform: none;
}

.isil-header .isil-support__panel::after {
	inset-block-start: auto;
	inset-block-end: 100%;
	inset-inline-start: auto;
	inset-inline-end: var(--isil-space-4);
	border-block-start-width: 0;
	border-block-end-color: var(--isil-surface-muted);
}

/* --- Slide-out panel: opens upwards and sideways from the lower edge. ---- */

.isil-aside .isil-support__panel {
	inset-block-start: auto;
	inset-block-end: 0;
	inset-inline-start: calc(100% + var(--isil-space-3));
	inset-inline-end: auto;
	transform: none;
}

.isil-aside .isil-support__panel::after {
	inset-block-start: auto;
	inset-block-end: var(--isil-space-5);
	inset-inline-start: -8px;
	inset-inline-end: auto;
	border-inline-start-width: 0;
	border-inline-end-color: var(--isil-white);
}

/* --- Footer: opens sideways. Fixed offset rather than a percentage — the
   toggle is only as wide as its label, so a percentage swings wildly for
   small label changes. ---------------------------------------------------- */

.isil-footer .isil-support__panel {
	inset-block-start: 0;
	inset-block-end: auto;
	inset-inline-start: calc(100% + var(--isil-space-3));
	inset-inline-end: auto;
	transform: translateY(-50%);
}

.isil-footer .isil-support__panel::after {
	inset-block-start: auto;
	inset-block-end: var(--isil-space-6);
	inset-inline-start: -8px;
	inset-inline-end: auto;
	border-inline-start-width: 0;
	border-inline-end-color: var(--isil-white);
}

/* ==========================================================================
   11. Header

   No horizontal menu at any width: navigation lives entirely in the
   slide-out panel, so desktop and mobile share one mechanism.
   ========================================================================== */

.isil-header {
	background: var(--isil-white);
	border-block-end: 1px solid var(--isil-border);
}

.isil-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--isil-space-4);
	padding-block: var(--isil-space-1);
}

.isil-header__logo img {
	width: auto;
	max-height: 70px;
}

.isil-header__actions {
	display: flex;
	align-items: center;
	gap: var(--isil-space-4);
}

.isil-header__support .isil-support__toggle {
	min-width: var(--isil-tap-icon);
	justify-content: center;
	color: var(--isil-blue);
}

/* The icon ships white for the dark footer; recolour it here rather than
   maintaining a second file. */
.isil-header__support .isil-support__toggle img {
	filter: brightness(0) saturate(100%) invert(6%) sepia(38%)
		saturate(3000%) hue-rotate(215deg) brightness(95%) contrast(97%);
}

.isil-burger {
	display: block;
	position: relative;
	width: 26px;
	height: 3px;
	background: var(--isil-blue);
	border-radius: 3px;
}

.isil-burger::before,
.isil-burger::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 3px;
	background: inherit;
	border-radius: inherit;
}

/* Staggered widths, as in the maquette. */
.isil-burger::before {
	inset-block-end: 8px;
	width: 26px;
}

.isil-burger::after {
	inset-block-end: -8px;
	width: 18px;
}

.isil-nav-toggle {
	display: grid;
	place-items: center;
	min-width: var(--isil-tap-icon);
	min-height: var(--isil-tap-icon);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/* One button, two labels. The short form is the visible one on mobile; the
   full form stays in the DOM and keeps the accessible name intact, so the
   control is announced the same way at every width. */
.isil-header__cta-short {
	display: none;
}

/* Mobile keeps only the burger and the login button. Delete the
   .isil-header__support rule to bring the bubble back; nothing depends on
   its absence. */
@media (max-width: 48rem) {
	.isil-header__support {
		display: none;
	}

	.isil-header__logo img {
		max-height: 60px;
	}

	.isil-header__cta {
		padding-inline: var(--isil-space-3);
		font-size: var(--isil-fs-small);
	}

	.isil-header__cta-full {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.isil-header__cta-short {
		display: inline;
	}
}

/* ==========================================================================
   12. Slide-out menu
   ========================================================================== */

.isil-aside {
	position: fixed;
	inset: 0;
	z-index: 100;
}

/* The admin bar is fixed over the viewport, and this overlay is anchored to
   the viewport too — so the top of the panel lands underneath it. WordPress
   adds .admin-bar to <body> only when the bar is present. 46px below 783px,
   32px above; those are core's own values, not ours. */
.admin-bar .isil-aside {
	inset-block-start: 46px;
}

@media (min-width: 783px) {
	.admin-bar .isil-aside {
		inset-block-start: 32px;
	}
}

.isil-aside__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;            /* right, in RTL */
	display: flex;
	flex-direction: column;
	gap: var(--isil-space-4);
	width: min(88%, 24rem);
	padding: var(--isil-space-5);
	overflow-y: auto;
	background: var(--isil-blue-dark);
	color: var(--isil-text-invert);
	text-align: end;

	/* Slides in from the edge it is anchored to. translateX(-100%) moves it
	   right in RTL, which is off-screen here. */
	transform: translateX(-100%);
	transition: transform 0.28s ease-out;
}

.isil-aside__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 45%);
	opacity: 0;
	transition: opacity 0.28s ease-out;
}

/* nav.js adds .is-open one frame after removing [hidden], so the browser has
   a starting state to animate from. */
.isil-aside.is-open .isil-aside__panel {
	transform: translateX(0);
}

.isil-aside.is-open .isil-aside__backdrop {
	opacity: 1;
}

.isil-aside__top {
	display: block;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--isil-space-4);
	/*padding-inline-end: var(--isil-tap-icon);   !* keeps text clear of the close button *!*/
}

/* Lifted out of the row: as a flex sibling it was taking a third of a 320px
   panel and squeezing the status text into what was left. */
.isil-aside__close {
	position: absolute;
	inset-block-start: var(--isil-space-5);
	inset-inline-end: var(--isil-space-5);   /* left, in RTL */
	z-index: 1;
	min-width: var(--isil-tap-icon);
	min-height: var(--isil-tap-icon);
	padding: 0;
	background: none;
	border: 0;
	color: var(--isil-text-invert);
	font-size: 3rem;
	font-weight: 200;
	line-height: 1;
	cursor: pointer;
}

.isil-aside__cta {
	align-self: flex-start;
}

.isil-aside__nav a {
	display: block;
	padding-block: var(--isil-space-3);
	color: var(--isil-text-invert);
	text-decoration: none;
	text-align: start;
}

.isil-aside__nav a:hover,
.isil-aside__nav a:focus-visible {
	text-decoration: underline;
}

/* Dotted rules above and below the ministry logos, as in the maquette.
   border-dotted gives no control over dot size or spacing; a repeated radial
   gradient does — 3px dots every 9px, one line top and bottom. */
.isil-aside__logos {
	display: grid;
	gap: var(--isil-space-4);
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin-block-start: auto;
	padding-block: var(--isil-space-5);
	padding-inline-end: var(--isil-space-4);
	list-style: none;
	border: 0;
	background-image:
		radial-gradient(circle 1.5px, rgb(255 255 255 / 45%) 100%, transparent 100%),
		radial-gradient(circle 1.5px, rgb(255 255 255 / 45%) 100%, transparent 100%);
	background-size: 9px 3px;
	background-position: top left, bottom left;
	background-repeat: repeat-x;
}

.isil-aside__logos li {
	margin-inline-end: var(--isil-space-3);
}

.isil-aside__logos img {
	width: auto;
	max-width: 100%;
	max-height: 48px;
}

.isil-aside__support {
	align-self: flex-start;
	width: fit-content;
}

.isil-aside .isil-support__toggle {
	min-width: var(--isil-tap-icon);
	justify-content: center;
}

/* --- System status ------------------------------------------------------ */

/* Rendered by isil_status_render(). Every level carries visible wording, so
   the light reinforces the state rather than conveying it — WCAG 1.4.1. */
.isil-status {
	flex: 1;
	min-width: 0;
	text-align: start;
}

.isil-status__heading {
	font-weight: 700;
}

/* flex-start, not center: the wording wraps to two lines at the amber and
   red levels, and the light belongs beside the first one. */
.isil-status__state {
	display: flex;
	align-items: flex-start;
	gap: var(--isil-space-2);
	font-size: var(--isil-fs-body);
}

.isil-status__led {
	flex: none;
	width: 10px;
	height: 10px;
	margin-block-start: 0.45em;   /* optical centring on the first line */
	background: var(--isil-status-ok);
	border-radius: 50%;
}

.isil-status--warn .isil-status__led { background: var(--isil-status-warn); }
.isil-status--down .isil-status__led { background: var(--isil-status-down); }

.isil-status__label {
	flex: 0 1 auto;
}

/* Editors only — absent from the markup for everyone else. Tinted from
   currentColor so one white asset serves any context. */
.isil-status__edit {
	flex: none;
	width: 16px;
	height: 16px;
	margin-block-start: 0.25em;
	background: currentColor;
	opacity: 0.7;
	-webkit-mask: url("assets/img/pencilWhite.svg") no-repeat center / contain;
	mask: url("assets/img/pencilWhite.svg") no-repeat center / contain;
}

.isil-status__edit:hover,
.isil-status__edit:focus-visible {
	opacity: 1;
}

.isil-status__message {
	margin-block-start: var(--isil-space-1);
	color: var(--isil-text-invert);
	font-size: var(--isil-fs-small);
}

/* Rosé at the operational level only: there the message is an aside about
   where to get help, not part of an alert. Amber and red state a fact and
   read in plain white. */
.isil-status--ok .isil-status__message {
	color: var(--isil-purple-light);
}

/* ==========================================================================
   13. Login dialog
   ========================================================================== */

.isil-login {
	position: fixed;
	inset: 0;
	z-index: 110;   /* above the slide-out menu that opens it */
	display: grid;
	place-items: center;
	padding: var(--isil-space-4);
}

.isil-login__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 55%);
}

.isil-login__panel {
	position: relative;
	width: min(100%, 40rem);
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--isil-space-6);
	background: var(--isil-white);
	border-radius: 24px;
}

.isil-login__close {
	position: absolute;
	inset-block-start: var(--isil-space-4);
	inset-inline-end: var(--isil-space-4);   /* left, in RTL */
	min-width: var(--isil-tap-icon);
	min-height: var(--isil-tap-icon);
	padding: 0;
	background: none;
	border: 0;
	color: var(--isil-blue);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.isil-login__title {
	margin-block-end: var(--isil-space-6);
	color: var(--isil-blue);
	font-size: var(--isil-fs-h2);
	text-align: center;
}

.isil-login__cols {
	position: relative;
	display: grid;
	gap: var(--isil-space-7);
	grid-template-columns: 1fr 1fr;
}

/* Divider sits in the gap, so neither column needs asymmetric padding —
   which is what was pushing their content off-centre. */
.isil-login__cols::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	border-inline-start: 2px dotted var(--isil-purple);
}

.isil-login__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--isil-space-4);
	padding: 0;
	border: 0;
	text-align: center;
}

.isil-login__col h3 {
	color: var(--isil-blue);
	font-size: var(--isil-fs-h3);
}

.isil-login__note {
	color: var(--isil-link);
	font-weight: 700;
}

.isil-login__edit {
	position: absolute;
	inset-block-start: var(--isil-space-4);
	inset-inline-start: var(--isil-space-4);   /* right, in RTL */
	width: 18px;
	height: 18px;
	background: var(--isil-blue);
	opacity: 0.6;
	-webkit-mask: url("assets/img/pencilWhite.svg") no-repeat center / contain;
	mask: url("assets/img/pencilWhite.svg") no-repeat center / contain;
}

.isil-login__edit:hover,
.isil-login__edit:focus-visible {
	opacity: 1;
}

/* Shown in place of a button whose destination is still empty. Editors only,
   so it can be plain and unstyled — it is a reminder, not an interface. */
.isil-login__missing {
	margin-block-start: auto;
	color: var(--isil-text-muted);
	font-size: var(--isil-fs-small);
}

@media (max-width: 48rem) {
	.isil-login__cols {
		grid-template-columns: 1fr;
	}

	/* The vertical divider is positioned at 50% of the panel; in a single
	   column that draws a rule straight down the middle of the content. */
	.isil-login__cols::before {
		display: none;
	}

	.isil-login__col + .isil-login__col {
		padding-block-start: var(--isil-space-5);
		border-block-start: 2px dotted var(--isil-purple);
	}
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.isil-footer {
	position: relative;
	overflow: hidden;
	background: var(--isil-blue-dark);
	color: var(--isil-text-invert);
}

/* inline-grid so the block shrink-wraps its columns and leaves the artwork
   the rest of the width. Tracks are implicit; the children below claim
   theirs by index. */
.isil-footer__grid {
	display: inline-grid;
	align-items: start;
	gap: var(--isil-space-6);
	max-width: 65%;
	padding-block: var(--isil-space-6);
	padding-inline: var(--isil-space-6) var(--isil-space-5);
}

/* Excludes buttons and the support panel. A descendant selector outweighs a
   single class, so without :not() this paints the white pill's label white
   on white — and the panel's links likewise, since it is a light surface
   sitting inside a dark section. */
.isil-footer a:not(.isil-btn, .isil-support__link) {
	color: var(--isil-text-invert);
	text-decoration: none;
}

.isil-footer a:not(.isil-btn, .isil-support__link):hover,
.isil-footer a:not(.isil-btn, .isil-support__link):focus-visible {
	text-decoration: underline;
}

.isil-footer__brand img {
	width: auto;
	max-height: 88px;
}

.isil-footer__actions { grid-column: 2; }
.isil-footer__col:nth-of-type(1) { grid-column: 3; }
.isil-footer__col:nth-of-type(2) { grid-column: 4; }

/* The support toggle is a text link, not a button: it must neither stretch
   nor widen, since the panel is positioned from this element's edge. */
.isil-footer__actions .isil-support {
	align-self: flex-start;
	width: fit-content;
}

.isil-footer__heading {
	margin-block-end: var(--isil-space-3);
	color: var(--isil-purple);
	font-size: var(--isil-fs-body);
	font-weight: 700;
}

.isil-footer__col li + li {
	margin-block-start: var(--isil-space-2);
}

/* Inset from the page edge rather than bleeding off it, as the maquette
   places it. Logical property: follows the writing direction. */
.isil-footer__art {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 10rem;
	width: 32%;
	background-image: url("assets/img/footer-art.jpg");
	background-position: center;
	background-size: cover;
	-webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%);
	mask-image: linear-gradient(to right, #000 45%, transparent 100%);
	pointer-events: none;
}

@media (max-width: 48rem) {
	/* The desktop grid shrink-wraps to 65% and places children in four
	   explicit columns. Both have to go here, or the columns claim tracks 3
	   and 4 that no longer exist and spill outside the container. */
	.isil-footer__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		max-width: none;
		gap: var(--isil-space-5);
		padding-inline: var(--isil-space-4);
	}

	/* Logo, button and support link share one row. */
	.isil-footer__brand,
	.isil-footer__actions {
		grid-column: 1 / -1;
	}

	.isil-footer__col:nth-of-type(1),
	.isil-footer__col:nth-of-type(2) {
		grid-column: auto;
	}

	.isil-footer__brand {
		display: flex;
		justify-content: flex-start;   /* right, in RTL — as in the maquette */
	}

	/* Support bubble and login pill share one row, centred. */
	.isil-footer__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: start;
		gap: var(--isil-space-4);
	}

	/* Headings and links stay on the start edge of their own column, not
	   centred — the maquette aligns them right within each half. */
	.isil-footer__col {
		text-align: start;
	}
}

/* ==========================================================================
   15. Hero

   Children stack from the bottom: controls, then the metrics strip. The
   background — video pair or still image — is absolutely positioned and sits
   outside that flow.
   ========================================================================== */

.isil-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--isil-hero-min);
	overflow: hidden;
}

/* Fallback still, rendered when uploads/hero/ holds no video. */
.isil-hero > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.isil-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Two elements share one source file, so the browser downloads it once. The
   tail of each pass dissolves into the head of the next — the source clips
   do not loop cleanly, and this hides the seam without shortening them. */
.isil-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 1.2s ease-in-out; /* keep in sync with FADE in nav.js */
}

.isil-hero__video.is-active {
	opacity: 1;
}

.isil-hero__controls {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end; /* left in RTL — clear of the a11y widget */
	padding: var(--isil-space-3);
}

/* Pause control — required by WCAG 2.2.2 for motion over five seconds. */
.isil-hero__toggle {
	min-height: var(--isil-tap-target);
	padding: var(--isil-space-2) var(--isil-space-3);
	background: rgb(8 23 68 / 80%);
	color: var(--isil-text-invert);
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: var(--isil-pill);
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.isil-hero__toggle:hover {
	background: var(--isil-blue);
}

/* ==========================================================================
   16. Metrics
   ========================================================================== */

.isil-metrics {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;

	/* Not center. Centring an overflowing flex row makes the start-side
	   overflow unreachable — scrollWidth stops counting it, so the page
	   reports no overflow while the first card sits off-screen. */
	justify-content: flex-start;

	gap: var(--isil-space-4);
	padding-inline: var(--isil-space-3);
	padding-block: var(--isil-space-4) var(--isil-space-2);
	margin-block-end: var(--isil-space-3);
}

.isil-metric {
	position: relative;
	display: flex;
	flex: 1 1 0;

	/* Without this, min-width defaults to auto and the longest figure widens
	   its own card — flex-basis 0 alone does not give equal widths. */
	min-width: 0;

	align-items: center;
	justify-content: flex-start;
	gap: var(--isil-space-3);

	/* The content sets the height; one line per label keeps all five equal.
	   A fixed min-height padded the row out and left the connector sitting
	   off-centre relative to the content it links. */
	min-height: 0;

	padding-block: var(--isil-space-3);
	padding-inline: var(--isil-space-4);
	color: var(--isil-text-invert);
	border-radius: var(--isil-radius);

	/* Brand blue, opaque enough that contrast no longer depends on the
	   footage behind it. The Figma's warm translucent surface —
	   rgb(255 255 255 / 18%) over a 25% white border — drops below 4.5:1 on
	   the lighter clips and fails IS 5568. */
	background: rgb(8 23 68 / 72%);
	border: 1px solid rgb(70 123 173 / 45%);
	backdrop-filter: blur(6px);
}

/* Connector: dot — line — dot, drawn in CSS, no asset needed.

   Attached to the START side of every card but the first, so it overlaps the
   PREVIOUS card. That card is earlier in the DOM and painted below, which is
   what makes the connector visible: backdrop-filter gives each card its own
   stacking context, so z-index cannot lift a pseudo-element above a later
   sibling. Paint order is the only lever. */
.isil-metric:not(:first-child)::after {
	--isil-connector-w: 3rem;
	--isil-connector-offset: 3.2rem;

	content: "";
	position: absolute;
	inset-block-start: calc(50% - 4px);
	inset-inline-start: calc((var(--isil-space-4) / -2) - (var(--isil-connector-offset) / 2));
	width: var(--isil-connector-w);
	height: 8px;
	background:
		radial-gradient(circle 4px at 4px 50%, rgb(255 255 255 / 85%) 99%, transparent 100%) no-repeat,
		radial-gradient(circle 4px at calc(100% - 4px) 50%, rgb(255 255 255 / 85%) 99%, transparent 100%) no-repeat,
		linear-gradient(rgb(255 255 255 / 70%), rgb(255 255 255 / 70%)) no-repeat center / 100% 1.5px;
}

.isil-metric__icon {
	flex: none;
	width: 60px;
	height: 60px;
	margin: 0;
}

.isil-metric__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	align-items: flex-start;
}

.isil-metric__figure {
	display: flex;
	align-items: center;
	gap: var(--isil-space-2);
}

.isil-metric__value {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--isil-font-num);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.1;
}

/* Two words, stacked. Purely visual — the data stays a plain string so the
   CSV import and the future API never carry markup. */
.isil-metric__unit {
	max-width: 4ch;
	font-size: var(--isil-fs-small);
	line-height: 1.1;
	text-align: start;
	opacity: 0.85;
}

.isil-metric__label {
	padding-block-start: var(--isil-space-1);
	font-size: var(--isil-fs-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Below the 1440 desktop ceiling the row is tight; only the icon gives way,
   so the cards keep their proportions. */
@media (max-width: 90rem) {
	.isil-metric__icon {
		width: 56px;
		height: 56px;
	}
}

/* Carousel. The dots are section 9. */
@media (max-width: 48rem) {
	.isil-metrics {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--isil-space-4);
		padding-inline: var(--isil-space-4);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.isil-metrics::-webkit-scrollbar {
		display: none;
	}

	/* Focusable only when it actually overflows; nav.js adds the tabindex. */
	.isil-metrics:focus-visible {
		outline: 3px solid var(--isil-blue-light);
		outline-offset: 2px;
	}

	.isil-metric {
		flex: 0 0 78%; /* the next card peeks in, signalling the swipe */
		max-width: none;
		scroll-snap-align: center;
	}
}

/* ==========================================================================
   17. News — home page
   ========================================================================== */

.isil-news {
	background: var(--isil-white);
	padding-block-end: var(--isil-space-8);
}

/* Three tracks so the heading is centred on the container, not on the space
   the button leaves. The anchor stays last in the DOM — reading order and
   tab order agree — and is placed back into row 1 here. */
.isil-news .isil-container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	row-gap: var(--isil-space-6);
	width: 80%;
	max-width: none;
}

.isil-news__head {
	grid-area: 1 / 2;
	margin-block-end: 0;
}

.isil-news__head h2 {
	color: var(--isil-blue);
	font-size: 2.25rem;
	font-weight: 900;
	text-align: center;
}

.isil-news .isil-btn--news {
	grid-area: 1 / 3;
	justify-self: end;   /* left, in RTL */
}

.isil-news .isil-grid {
	grid-column: 1 / -1;
	grid-row: 2;
}

.isil-news-card {
	display: flex;
	flex-direction: column;
	text-align: start;
}

.isil-news-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-block-end: var(--isil-space-4);
	object-fit: cover;
	border-radius: var(--isil-radius);
}

/* Clamped to two lines and given the height of two, so every excerpt starts
   on the same baseline whatever the headline length. */
.isil-news-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(1.5rem * 1.15 * 2);
	margin-block-end: var(--isil-space-3);
	padding-inline-start: var(--isil-space-2);
	color: var(--isil-purple);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.15;
}

/* Image and headline are one link; the excerpt stays outside it so the
   link text a screen reader announces is the headline, not a paragraph. */
.isil-news-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.isil-news-card__link:hover .isil-news-card__title,
.isil-news-card__link:focus-visible .isil-news-card__title {
	text-decoration: underline;
}

.isil-news-card__link:focus-visible {
	outline: 3px solid var(--isil-blue-light);
	outline-offset: 4px;
	border-radius: var(--isil-radius);
}

.isil-news-card__excerpt {
	color: var(--isil-text);
	font-size: 1.125rem;
	line-height: 1.5;
}

/* One column: the grid placement above is undone, and the button falls back
   into document order — after the cards, where the markup puts it. */
@media (max-width: 48rem) {
	.isil-news .isil-container {
		grid-template-columns: 1fr;
		width: 90%;
	}

	.isil-news__head,
	.isil-news .isil-btn--news,
	.isil-news .isil-grid {
		grid-area: auto;
	}

	.isil-news .isil-btn--news {
		justify-self: center;
	}
}

/* ==========================================================================
   18. Leading bodies — dark section

   Reading from the right, which is the start edge in RTL: the artwork
   occupies the first third, the quote and the cards share the other two.
   ========================================================================== */

.isil-bodies-section {
	position: relative;
	overflow: hidden;
	padding-block: var(--isil-space-8);
	background-color: var(--isil-blue-dark);
	color: var(--isil-text-invert);
}

/* The mask fades the inner edge over a wide band so the circuit pattern
   dissolves instead of stopping at a line. Physical direction: the artwork
   is anchored by an inline property, and the edge to fade is its left. */
.isil-bodies-section::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 42%;
	background-image: url("assets/img/bodies-bg.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%);
	mask-image: linear-gradient(to left, #000 35%, transparent 95%);
	pointer-events: none;
}

/* Content clears the artwork column instead of overlapping it. */
.isil-bodies-section > .isil-container {
	position: relative;
	z-index: 1;
	width: auto;
	margin-inline-start: 40%;
	margin-inline-end: var(--isil-space-6);
}

.isil-bodies-section__title {
	margin-block-end: var(--isil-space-5);
	color: var(--isil-text-invert);
	font-size: var(--isil-fs-h2);
	font-weight: 900;
}

/* --- Quote -------------------------------------------------------------- */

/* Stops short of the last card: four of the five body cards plus the gaps
   between them. Tied to the same values as the grid, so changing the card
   count or the gap keeps the two in step. */
.isil-quote {
	position: relative;
	max-width: calc(80% - (var(--isil-space-2) * 0.8));
	padding-block-start: 5rem;
	margin: 0 0 var(--isil-space-8);
}

/* Sits behind the lead line rather than above the block. -29px pulls the
   glyph past the text edge; the padding above reserves the room. */
.isil-quote::before {
	content: "\201C";
	position: absolute;
	z-index: 0;
	inset-inline-start: -29px;
	color: rgb(255 255 255 / 18%);
	font-family: "Agdasima", var(--isil-font), sans-serif;
	font-size: 180px;
	font-weight: 700;
	line-height: 55px;
	pointer-events: none;
}

.isil-quote > * {
	position: relative;
	z-index: 1;
}

.isil-quote__lead {
	margin-block-end: var(--isil-space-4);
	color: var(--isil-purple);
	font-size: var(--isil-fs-h3);
	font-weight: 900;
	line-height: var(--isil-lh-heading);
}

.isil-quote p:not(.isil-quote__lead) {
	font-size: 1.25rem;
	line-height: var(--isil-lh-body);
}

.isil-quote p + p {
	margin-block-start: var(--isil-space-4);
}

.isil-quote__more {
	margin-block-start: var(--isil-space-4);
}

.isil-quote__more a {
	color: var(--isil-purple);
	font-weight: 700;
}

/* --- Cards -------------------------------------------------------------- */

.isil-bodies {
	display: grid;
	gap: var(--isil-space-2);
	grid-template-columns: repeat(5, 1fr);
}

.isil-body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgb(255 255 255 / 4%);
	border-radius: var(--isil-radius);
}

.isil-body__head {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: var(--isil-space-3);
	padding: var(--isil-space-4) var(--isil-space-3);
	text-align: center;
}

.isil-body__icon {
	width: 56px;
	height: 56px;
}

.isil-body__label {
	margin: 0;
	color: var(--isil-purple);
	font-size: var(--isil-fs-body);
	font-weight: 700;
	line-height: 1.2;
}

.isil-body__rule {
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--isil-purple);
}

.isil-body__figure {
	margin: 0;
	margin-block-start: auto; /* figures align across cards of unequal text */
}

.isil-body__value {
	display: block;
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--isil-font-num);
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.1;
}

.isil-body__unit {
	display: block;
	font-size: var(--isil-fs-small);
	opacity: 0.75;
}

/* --- Provider panel ----------------------------------------------------- */

.isil-body__providers {
	display: flex;
	flex-direction: column;
	gap: var(--isil-space-3);
	padding: var(--isil-space-3);
	background: rgb(255 255 255 / 3%);

	/* Fixed regardless of how many lines the labels wrap to, so all five
	   cards' panels end at the same height. */
	min-height: 9rem;
}

/* Fixed row height, so the two rows line up across all five cards whatever
   the label wraps to. Without it each card sets its own rhythm and the
   drift compounds down the panel. */
.isil-provider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--isil-space-3);
	font-size: 0.75rem;
	line-height: 1.35;
}

/* Reserves two lines' worth of height always, so a one-line name and a
   two-line name push the logo row down by the same amount either way. */
.isil-provider__label {
	flex-basis: 100%;
	min-height: calc(16px * 1.2 * 2);
	color: var(--isil-text-invert);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-align: center;
	color: var(--isil-purple-light);
}

.isil-provider__text {
	flex: 1;
	min-width: 0;
}

.isil-provider + .isil-provider {
	padding-block-start: var(--isil-space-3);
	border-block-start: 1px dotted rgb(255 255 255 / 25%);
}

/* The mark and its fallback share a box, so a body with a logo and one
   without line up in the same column. Sizing them separately is what made
   the row look ragged. */
.isil-provider__logo,
.isil-provider__initial {
	flex: none;
	width: 60px;
	height: 60px;
	margin-block-start: var(--isil-space-1);
	transition: transform 0.15s ease;
}

/* Masked, not an <img>: the file is a stencil and the colour comes from CSS,
   so one grey is changed here rather than by re-exporting ninety-nine files.
   Only the alpha channel of the PNG is read — whatever colour it was made in
   is irrelevant, which is one export step fewer per logo.

   role="img" and aria-label are on the element in the markup, because a span
   carries no accessible name of its own. */
.isil-provider__logo {
	background: var(--isil-provider-logo);
	-webkit-mask: var(--isil-provider-mask, none) no-repeat center / contain;
	mask: var(--isil-provider-mask, none) no-repeat center / contain;
}

.isil-provider__initial {
	display: grid;
	place-items: center;
	background: rgb(255 255 255 / 12%);
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 50%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

/* Both, not just the logo: growing one and not the other draws attention to
   which bodies are missing artwork. */
.isil-provider:hover .isil-provider__logo,
.isil-provider:hover .isil-provider__initial {
	transform: scale(1.15);
}

.isil-provider__figure {
	color: var(--isil-purple);
	font-weight: 700;
}

/* --- Below 60rem: artwork moves below the content, cards become a carousel */

@media (max-width: 60rem) {
	.isil-bodies-section::before {
		inset-block-start: auto;
		inset-block-end: 0;
		inset-inline: 0;
		width: auto;
		height: 16rem;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 40%);
	}

	.isil-bodies-section > .isil-container {
		width: min(100% - (var(--isil-gutter) * 2), var(--isil-container));
		margin-inline: auto;
		padding-block-end: 14rem; /* clears the artwork */
	}

	.isil-bodies-section__title {
		text-align: center;
	}

	.isil-quote {
		max-width: none;
		padding-block-start: 0;
	}

	.isil-quote::before {
		inset-inline-start: -5px;
	}

	/* Cards start hard against the start edge. The mask fades the trailing
	   edge of the row rather than the card itself, so the effect stays put
	   while the cards scroll under it. */
	.isil-bodies {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--isil-space-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		padding-inline: 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.isil-bodies::-webkit-scrollbar {
		display: none;
	}

	.isil-bodies:focus-visible {
		outline: 3px solid var(--isil-blue-light);
		outline-offset: 2px;
	}

	.isil-body {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   19. Partner logos

   Rendered from the media library: any image tagged with an isil_logo_group
   term shows up, untagged ones don't. Grid, not a slider — they fit on one
   screen, and autoplay would need a WCAG 2.2.2 pause control.

   Sizing is defensive because the uploads are a mixed bag. object-fit
   handles dimensions; baked-in padding and opaque backgrounds are fixed by
   hand before upload, never automatically (-trim eats logos that use white).
   ========================================================================== */

.isil-logos-section {
	background: var(--isil-page-bg);
	text-align: center;
}

.isil-logos-section h2 {
	margin-block-end: var(--isil-space-6);
}

/* Switch the whole grid by changing --isil-logos-cols. 6 gives fewer, larger
   logos; 7 fits more per row but reads smaller. Logo height follows the
   column count, so nothing else needs touching. */
.isil-logos {
	--isil-logos-cols: 7;

	display: grid;
	gap: var(--isil-space-4);
	grid-template-columns: repeat(var(--isil-logos-cols), 1fr);
	padding: var(--isil-space-5);
	background: var(--isil-white);
	border-radius: var(--isil-radius);
}

.isil-logo {
	display: flex;
	align-items: center;
	justify-content: center;

	/* Taller rows when there are fewer columns: 6 -> 88px, 7 -> 75px. */
	min-height: calc(528px / var(--isil-logos-cols));
}

.isil-logo__img {
	width: auto;
	max-width: 100%;
	max-height: calc(528px / var(--isil-logos-cols));
	object-fit: contain;
}

/* Below 60rem the desktop formula — row height scaled inversely with the
   column count — produces absurdly tall rows. Cell width becomes the
   limiting dimension instead, so height only needs a safety ceiling. */
@media (max-width: 60rem) {
	.isil-logos {
		--isil-logos-cols: 4;
		gap: var(--isil-space-2);
		padding: 0;
	}

	.isil-logo {
		min-height: 0;
	}

	.isil-logo__img {
		max-height: 120px;
	}
}

@media (max-width: 48rem) {
	.isil-logos {
		--isil-logos-cols: 3;
	}
}

/* ==========================================================================
   20. Interior pages

   Same artwork as the home page, on the light background. Applies to every
   page using the default template, so pages created later inherit it.

   The blocks below come from the locked patterns in inc/patterns.php. Core
   wraps a group's children in .wp-block-group__inner-container and a
   button's anchor in a <div>, so the layout hooks attach one level deeper
   than the class name suggests. Both are flagged where they matter.
   ========================================================================== */

.isil-page {
	position: relative;
	overflow: hidden;
	min-height: 60vh;
	padding-block: var(--isil-space-6) var(--isil-space-8);
}

/* Mask stops at 72% of the artwork's own 42% — roughly 30% of the page —
   so the image is fully transparent before the text column starts at 24%.
   Widen either number and the prose starts riding on the circuit pattern. */
.isil-page::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;      /* left, in RTL */
	width: 42%;
	background-image: url("assets/img/page-bg.jpg");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-mask-image: linear-gradient(to right, #000 20%, transparent 72%);
	mask-image: linear-gradient(to right, #000 20%, transparent 72%);
	pointer-events: none;
}

.isil-page > .isil-container {
	position: relative;
	z-index: 1;
	width: auto;
	margin-inline-end: 24%;
	margin-inline-start: var(--isil-space-6);
}

.isil-page .isil-content h2 {
	margin-block: var(--isil-space-6) var(--isil-space-4);
	color: var(--isil-purple);
	font-size: var(--isil-fs-h3);
}

/* --- Feature cards ------------------------------------------------------ */

/* Six cards in one row is the maquette. At the container's own width they
   come out at 120px each and the Hebrew titles break over five lines, so the
   row is allowed to bleed back across the artwork column. Safe because the
   cards are opaque: they cover the image rather than sitting on it. */
.isil-features {
	margin-inline-end: -12%;
}

.isil-features .wp-block-columns {
	display: grid;
	gap: var(--isil-space-2);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.isil-features .wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Six across from 960px up. Cards land near 200px — two-line titles. Move
   this to 75rem if the client would rather keep three columns on laptops. */
@media (min-width: 60rem) {
	.isil-features .wp-block-columns {
		grid-template-columns: repeat(6, 1fr);
	}
}



/* The bleed only means anything while there is artwork to bleed over. */
@media (max-width: 60rem) {
	.isil-features {
		margin-inline-end: 0;
	}
}

.isil-feature {
	padding: var(--isil-space-4) var(--isil-space-3);

	/* Semi-transparent, but not below 60%: the cards bleed over the artwork
	   column, and under that the darkest parts of the image show through
	   enough to drop the 15px body text below 4.5:1. At 80% the worst case
	   still measures around 9:1. */
	background: rgb(var(--isil-card-bg) / 80%);

	border: 1px solid var(--isil-border);
	border-radius: var(--isil-radius);
	text-align: center;
}

/* Two lines' worth, always. The titles run to one or two lines depending on
   the wording, and without this the paragraphs start at different heights
   across the row — which is what the client saw shifting while typing. */
.isil-feature h3 {
	min-height: calc(
			28px + var(--isil-space-3)
			+ 2 * var(--isil-fs-body) * var(--isil-lh-heading)
	);
	color: var(--isil-blue);
	font-size: var(--isil-fs-body);
	text-wrap: pretty;
}

/* Icon above the heading, not inline. Decorative, so it carries no
   accessible name — the heading text is the label. */
.isil-feature h3::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	margin-inline: auto;
	margin-block-end: var(--isil-space-3);
	background: url("assets/img/redCheckedBox.svg") no-repeat center / contain;
}

.isil-feature p {
	margin-block-start: var(--isil-space-3);
	font-size: var(--isil-fs-small);
}

/* --- Page actions ------------------------------------------------------- */

/* Outline pills, registered as their own pattern: they sit above the closing
   CTA on some pages and stand alone elsewhere. Vertical spacing comes from
   `.isil-content > * + *`, not from here. */
.isil-page-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--isil-space-3);
}

.isil-page-actions .wp-block-button {
	padding: 0;
	background: none;
	border: 0;
}

/* --isil-link rather than --isil-purple: at 15px the label counts as body
   copy and needs 4.5:1, which the Figma accent only just clears. The border
   is the weaker half — 2.9:1 against the page background, under the 3:1 that
   WCAG 1.4.11 asks of a control's boundary. Thicken it to 2px or darken the
   token if that has to pass rather than merely look right. */
.isil-page-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--isil-tap-target);
	padding: var(--isil-space-2) var(--isil-space-4);
	background: transparent;
	border: 1px solid var(--isil-link);
	border-radius: var(--isil-pill);
	color: var(--isil-link);
	font-size: var(--isil-fs-small);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.isil-page-actions .wp-block-button__link:hover,
.isil-page-actions .wp-block-button__link:focus-visible {
	background: var(--isil-link);
	color: var(--isil-text-invert);
}

/* Adjacent margins collapse to the larger of the two, so the pair would
   otherwise sit 4rem apart — the maquette groups them tighter than that. */
.isil-page-actions + .isil-cta {
	margin-block-start: var(--isil-space-6);
}

/* --- Closing CTA -------------------------------------------------------- */

.isil-cta {
	display: block;
	margin-block-start: var(--isil-space-7);
	padding: var(--isil-space-5) var(--isil-space-6);
	background: var(--isil-purple);
	border-radius: var(--isil-pill);
	color: var(--isil-text-invert);
}

/* The group block inserts its own container; that is the row, not .isil-cta.
   Grid rather than flex: the pattern gives no wrapper around the heading and
   the paragraph, so they are placed by position instead. */
.isil-cta > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: var(--isil-space-5);
	row-gap: var(--isil-space-1);
}

/* Must weigh as much as `.isil-page .isil-content h2`, which otherwise puts
   the accent colour and 48px of block-start margin on every page h2 — the
   heading was being painted accent-on-accent and disappearing. */
.isil-content .isil-cta :is(h2, p) {
	margin-block: 0;
	color: var(--isil-text-invert);
}

.isil-content .isil-cta h2 {
	grid-area: 1 / 1;
	font-size: var(--isil-fs-h3);
}

.isil-content .isil-cta p {
	grid-area: 2 / 1;
	font-size: var(--isil-fs-small);
}

.isil-cta .wp-block-buttons {
	grid-area: 1 / 2 / 3 / 3;
	display: flex;
	align-items: center;
	gap: var(--isil-space-5);
	margin: 0;
}

/* The maquette's chevron. A pseudo-element rather than a <span>: bare markup
   inside a locked pattern parses as core/freeform, which the editor can then
   delete. Decorative either way — the button label carries the meaning.
   currentColor through a mask means one white asset serves every context. */
.isil-cta .wp-block-buttons::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 2rem;
	background: currentColor;
	-webkit-mask: url("assets/img/chevronWhite.svg") no-repeat center / contain;
	mask: url("assets/img/chevronWhite.svg") no-repeat center / contain;
}

/* The pill goes on the link, never on the block button's wrapper. */
.isil-cta .wp-block-button {
	padding: 0;
	background: none;
	border: 0;
}

.isil-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--isil-tap-target);
	padding: var(--isil-space-2) var(--isil-space-5);
	background: var(--isil-blue);
	border: 0;
	border-radius: var(--isil-pill);
	color: var(--isil-text-invert);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.isil-cta .wp-block-button__link:hover {
	background: var(--isil-blue-dark);
}

/* Below 60rem the artwork is gone and the container is centred, so the page
   body behaves like any other. */
@media (max-width: 60rem) {
	.isil-page::before {
		display: none;
	}

	.isil-page > .isil-container {
		width: min(100% - (var(--isil-gutter) * 2), var(--isil-container));
		margin-inline: auto;
	}
}

/* A full pill needs a single-line block; at two or three lines the radius
   swallows the corners of the text. The chevron points across a gap that no
   longer exists once the parts stack, so it goes. */
@media (max-width: 48rem) {
	.isil-cta {
		border-radius: var(--isil-radius);
		text-align: center;
	}

	.isil-cta > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		row-gap: var(--isil-space-4);
	}

	.isil-content .isil-cta h2,
	.isil-content .isil-cta p,
	.isil-cta .wp-block-buttons {
		grid-area: auto;
	}

	.isil-cta .wp-block-buttons {
		justify-content: center;
	}

	.isil-cta .wp-block-buttons::before {
		display: none;
	}
}

/* ==========================================================================
   21. Appointments

   The list is the substance; the calendar is a shortcut into it. Month
   navigation and day cells are ordinary links, so the page is fully operable
   with JavaScript off and needs no roving tabindex — which is what keeps the
   hardest part of IS 5568 out of this component entirely.
   ========================================================================== */

.isil-notice {
	padding: var(--isil-space-3) var(--isil-space-4);
	margin-block-end: var(--isil-space-5);
	border-inline-start: 4px solid;
	border-radius: var(--isil-radius);
	font-size: var(--isil-fs-small);
}

.isil-notice--ok {
	background: rgb(62 196 109 / 10%);
	border-color: var(--isil-status-ok);
}

.isil-notice--error {
	background: rgb(224 82 82 / 10%);
	border-color: var(--isil-status-down);
}

/* --- Month grid --------------------------------------------------------- */

.isil-calendar {
	max-width: 34rem;
	padding: var(--isil-space-5);
	background: var(--isil-white);
	border-radius: var(--isil-radius);
	margin-block-end: var(--isil-space-7);
	text-align: center;
}

.isil-calendar__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--isil-space-2);
	margin-block-end: var(--isil-space-4);
}

.isil-calendar__month {
	min-width: 12ch;   /* stops the arrows shifting as the month name changes */
	margin: 0;
	font-size: var(--isil-fs-h3);
	text-align: center;
}

/* U+2039 and U+203A are Bidi_Mirrored, like the breadcrumb's ">": the glyph
   flips with the run direction, so the markup uses the logical one and the
   browser draws the arrow pointing the right way. Do not "fix" this by
   swapping the entities. */
.isil-calendar__nav {
	display: grid;
	place-items: center;
	min-width: var(--isil-tap-icon);
	min-height: var(--isil-tap-icon);
	color: var(--isil-link);
	font-size: 1.5rem;
	text-decoration: none;
}

/* A masked SVG, not a bidi-mirrored character. "‹" and "›" flip according to
   the direction the browser resolves around them, which follows the month
   name — Latin one month, Hebrew the next. The arrow has to follow the
   layout, not the text, so the direction is set here and never guessed. */
.isil-calendar__chev {
	width: 0.7em;
	height: 0.7em;
	background: currentColor;
	-webkit-mask: url("assets/img/chevronWhite.svg") no-repeat center / contain;
	mask: url("assets/img/chevronWhite.svg") no-repeat center / contain;
}

/* chevronWhite.svg points toward the inline start; the next-month arrow is
   the same glyph mirrored. scaleX follows the writing direction, so this
   holds in an LTR context too. */
.isil-calendar__nav[rel="prev"] .isil-calendar__chev {
	transform: scaleX(-1);
}

.isil-calendar__nav:hover {
	background: rgb(142 53 73 / 8%);
	border-radius: 50%;
}

.isil-calendar__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.isil-calendar__grid th {
	padding-block: var(--isil-space-2);
	color: var(--isil-text-muted);
	font-size: var(--isil-fs-small);
	font-weight: 400;
}

.isil-calendar__grid td {
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

.isil-calendar__day {
	height: 2.75rem;
	font-size: var(--isil-fs-small);
}

/* Days with nothing on them are still readable — greying them out below the
   4.5:1 floor to make the linked ones stand out would trade one problem for
   a worse one. The link carries the emphasis instead. */
.isil-calendar__day.has-sessions a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-inline: auto;
	background: var(--isil-purple);
	border-radius: 50%;
	color: var(--isil-text-invert);
	font-weight: 700;
	text-decoration: none;
}

.isil-calendar__day.has-sessions a:hover {
	background: var(--isil-purple-hover);
}

.isil-calendar__day.is-today {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --- Session list ------------------------------------------------------- */

.isil-sessions {
	display: grid;
	gap: var(--isil-space-5);
}

.isil-sessions__empty {
	color: var(--isil-text-muted);
	text-align: center;
	padding: var(--isil-space-5);
}

/* scroll-margin, not a JS offset: the day cells link to #isil-slot-N and the
   sticky header would otherwise cover the heading they land on. */
.isil-session {
	scroll-margin-block-start: var(--isil-space-6);
	padding: var(--isil-space-5);
	background: var(--isil-white);
	border: 1px solid var(--isil-border);
	border-radius: var(--isil-radius);
}

.isil-session__title {
	margin-block-end: var(--isil-space-2);
	color: var(--isil-purple);
	font-size: var(--isil-fs-h3);
}

.isil-session__when {
	color: var(--isil-text);
	font-weight: 700;
}

.isil-session__intro {
	margin-block-start: var(--isil-space-3);
}

.isil-session__seats {
	margin-block: var(--isil-space-3);
	color: var(--isil-text-muted);
	font-size: var(--isil-fs-small);
}

/* Calendar and list side by side: a 34rem calendar alone on a 1200px page
   leaves two thirds of the width empty, and the sessions are what the visitor
   came for. Below 60rem they stack, calendar first. */
@media (min-width: 60rem) {
	.isil-appointments {
		display: grid;
		grid-template-columns: 34rem 1fr;
		gap: var(--isil-space-7);
		align-items: stretch;   /* remplace align-items: start */
		margin: var(--isil-space-5);
		padding: var(--isil-space-5);
		background: var(--isil-white);
		border: 1px solid var(--isil-border);
		border-radius: var(--isil-radius);
	}

	.isil-calendar {
		margin-block-end: 0;
	}

	/* Rule between the two columns, carried by the sessions column so it only
   exists when the two sit side by side. inline-end is the left in RTL. */
	.isil-appointments .isil-sessions {
		/*padding-inline-end: var(--isil-space-6);*/
		border-inline-start: 1px solid var(--isil-border);
	}
}

/* --- Booking form ------------------------------------------------------- */

.isil-booking-form {
	display: grid;
	gap: var(--isil-space-3);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	padding-block-start: var(--isil-space-4);
	border-block-start: 1px solid var(--isil-border);
}

.isil-field {
	margin: 0;
}

.isil-field label {
	display: block;
	margin-block-end: var(--isil-space-1);
	font-size: var(--isil-fs-small);
	font-weight: 700;
}

.isil-field input {
	width: 100%;
	min-height: var(--isil-tap-icon);
	padding: var(--isil-space-2) var(--isil-space-3);
	background: var(--isil-white);
	border: 1px solid var(--isil-border);
	border-radius: var(--isil-radius);
	color: var(--isil-text);
}

.isil-field input:focus-visible {
	border-color: var(--isil-blue-light);
}

/* The asterisk is aria-hidden and the input carries `required`, so this is
   decoration for sighted users only — the accessible name is unaffected. */
.isil-field__required {
	color: var(--isil-link);
}

.isil-booking-form .isil-btn {
	grid-column: 1 / -1;
	justify-self: start;   /* right, in RTL */
}

/* Honeypot. Hidden by clip-path rather than display:none: a bot that reads the
   stylesheet skips anything display:none, and this field has to look
   fillable. aria-hidden and tabindex="-1" in the markup keep it away from
   anyone using the form for real. */
.isil-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 48rem) {
	.isil-calendar {
		max-width: none;
	}

	.isil-booking-form {
		grid-template-columns: 1fr;
	}

	.isil-booking-form .isil-btn {
		justify-self: stretch;
	}
}

/* ==========================================================================
   22. Editor content (the_content output)
   ========================================================================== */

.isil-content > * + * {
	margin-block-start: var(--isil-space-4);
}

.isil-content h2 {
	margin-block-start: var(--isil-space-6);
}

.isil-content :is(ul, ol) {
	padding-inline-start: var(--isil-space-5);
	list-style: revert;
}

.isil-content li + li {
	margin-block-start: var(--isil-space-2);
}

.isil-content table {
	width: 100%;
	border-collapse: collapse;
}

.isil-content :is(th, td) {
	padding: var(--isil-space-2) var(--isil-space-3);
	border: 1px solid var(--isil-border);
	text-align: start;
}

/* ==========================================================================
   23. Sitemap
   ========================================================================== */

.isil-sitemap ul {
	padding-inline-start: var(--isil-space-5);
	list-style: disc;
}

.isil-sitemap li {
	margin-block-end: var(--isil-space-2);
}

/* ==========================================================================
   24. Responsive — global scale below 60rem

   Only what has to change globally lives here; component-specific
   breakpoints sit with their component.
   ========================================================================== */

@media (max-width: 60rem) {
	:root {
		--isil-fs-h1: 1.75rem;
		--isil-fs-h2: 1.5rem;
		--isil-space-7: 2.5rem;
	}

	.isil-header__bar {
		flex-wrap: wrap;
	}

	.isil-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.isil-footer__art {
		display: none;
	}
}

/* ==========================================================================
   25. Print
   ========================================================================== */

@media print {
	.isil-header,
	.isil-footer,
	.isil-skip-link,
	.isil-hero__stage,
	.isil-hero__controls {
		display: none;
	}

	body {
		background: var(--isil-white);
		color: #000;
	}
}