/*
 * Site header. Tokens only (see theme base.css aliases).
 * Below 1280 px: 64 px bar with logo, call and menu; the quick bar carries the rest.
 * From 1280 px: utility strip + 84 px bar, sticky, compacting to 64 px on scroll (CSS scroll timeline).
 */

.wp-site-blocks > * {
	margin-block: 0;
}

.isl-site-header {
	position: relative;
	z-index: 40;
}

/* ---------- Utility strip ---------- */

.isl-utility {
	display: none;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}

.isl-utility__row {
	height: var(--wp--custom--header--utility);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s24);
}

.isl-utility__facts {
	color: var(--ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.isl-utility__contact {
	line-height: var(--wp--custom--line-height--ui);
	display: flex;
	align-items: center;
	gap: var(--s24);
	white-space: nowrap;
}

.isl-utility__email {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono);
	color: var(--ink-2);
	text-decoration: none;
}

.isl-utility__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--s8);
	color: var(--ink);
	font-size: var(--fs-small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.isl-utility__email:hover,
.isl-utility__phone:hover {
	color: var(--ink);
	text-decoration: underline;
}

/* ---------- Main bar ---------- */

.isl-bar {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	anchor-name: --isl-bar;
}

/* Below 1280 px the 64 px bar includes its 1 px rule (the phone comps draw it border-box). */
.isl-bar__row {
	height: calc(var(--wp--custom--header--bar-mobile) - 1px);
	display: flex;
	align-items: center;
	gap: var(--s32);
}

.isl-bar__logo {
	display: flex;
	flex-shrink: 0;
}

.isl-bar__logo img {
	display: block;
	height: 32px;
	width: auto;
}

.isl-nav {
	display: none;
}

.isl-nav__list {
	display: flex;
	align-items: center;
	gap: var(--s16);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-body);
	font-weight: 600;
}

.isl-nav__item {
	display: flex;
	align-items: center;
	gap: var(--s4);
	height: var(--wp--custom--touch--min);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow var(--t-fast) var(--ease);
}

.isl-nav__item:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Current section and open menu: the orange active marker. */
.isl-nav__item[aria-current],
.isl-nav__item[data-current] {
	box-shadow: inset 0 -4px 0 var(--orange);
}

.isl-site-header:has(#isl-menu-products:popover-open) [popovertarget="isl-menu-products"],
.isl-site-header:has(#isl-menu-industries:popover-open) [popovertarget="isl-menu-industries"] {
	box-shadow: inset 0 -4px 0 var(--orange);
}

.isl-nav__chevron {
	transition: transform var(--t-base) var(--ease);
}

.isl-site-header:has(#isl-menu-products:popover-open) [popovertarget="isl-menu-products"] .isl-nav__chevron,
.isl-site-header:has(#isl-menu-industries:popover-open) [popovertarget="isl-menu-industries"] .isl-nav__chevron {
	transform: rotate(180deg);
}

.isl-bar__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--s4);
	margin-right: calc(var(--s8) - var(--isl-margin));
}

.isl-bar__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--touch--min);
	height: var(--wp--custom--touch--min);
	color: var(--ink);
	border-radius: var(--r-control);
	overflow: hidden;
}

.isl-bar__call:hover {
	color: var(--ink);
	background: var(--panel);
}

.isl-bar__actions .isl-chip,
.isl-bar__quote {
	display: none;
}

.isl-bar__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--touch--min);
	height: var(--wp--custom--touch--min);
	padding: 0;
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	color: var(--ink);
}

.isl-bar__menu:hover {
	background: var(--panel);
}

.isl-site-header:has(#isl-seal-failed:popover-open, #isl-seal-failed[open]) .isl-bar__actions .isl-chip {
	background: var(--orange-tint);
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

/* Minimal variant: logo and phone. */
.isl-bar--minimal .isl-bar__row {
	justify-content: space-between;
}

.isl-bar__phone {
	display: none;
	align-items: center;
	gap: var(--s8);
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.isl-bar__call--minimal {
	margin-right: calc(var(--s8) - var(--isl-margin));
}

/* ---------- Desktop header, from 1280 px ---------- */

@media (min-width: 1280px) {
	.isl-site-header {
		position: sticky;
		top: calc(-1 * (var(--wp--custom--header--utility) + var(--wp--custom--border--hairline)));
	}

	.isl-utility {
		display: block;
	}

	.isl-bar__row {
		height: var(--wp--custom--header--bar);
	}

	.isl-bar__logo img {
		height: 40px;
	}

	.isl-nav {
		display: block;
	}

	.isl-bar__actions {
		gap: var(--s12);
		margin-right: 0;
	}

	.isl-bar__actions .isl-chip {
		display: inline-flex;
	}

	.isl-bar__quote {
		display: inline-flex;
		padding: 0 var(--s24);
	}

	.isl-bar__menu {
		display: none;
	}

	/* At rest the phone number sits in the utility strip; the icon only joins the compact bar (trade-off 4). */
	.isl-bar__call {
		width: 0;
		margin-right: calc(-1 * var(--s12));
		visibility: hidden;
	}

	.isl-bar--minimal .isl-bar__phone {
		display: inline-flex;
	}

	.isl-bar--minimal .isl-bar__call {
		display: none;
	}
}

/*
 * Compact on scroll, CSS only. The header box keeps its height so nothing below it moves;
 * it sticks 20 px higher, and its content settles into the 64 px that stays in view.
 * Browsers without scroll timelines keep the full 84 px bar.
 */
@supports (animation-timeline: scroll()) {
	@media (min-width: 1280px) {
		.isl-site-header {
			top: calc(-1 * (var(--wp--custom--header--utility) + var(--wp--custom--border--hairline) + var(--wp--custom--header--bar) - var(--wp--custom--header--bar-compact)));
		}

		.isl-site-header .isl-bar__row,
		.isl-site-header .isl-bar__logo img,
		.isl-site-header .isl-bar__call,
		.isl-site-header .isl-bar__quote {
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: scroll(root block);
			animation-range: var(--wp--custom--header--utility) calc(var(--wp--custom--header--utility) + var(--wp--custom--border--hairline) + var(--wp--custom--header--bar) - var(--wp--custom--header--bar-compact));
		}

		.isl-site-header .isl-bar__row { animation-name: isl-compact-row; }
		.isl-site-header .isl-bar__logo img { animation-name: isl-compact-logo; }
		.isl-site-header .isl-bar__call { animation-name: isl-compact-call; }
		.isl-site-header .isl-bar__quote { animation-name: isl-compact-quote; }
	}
}

@keyframes isl-compact-row {
	to { padding-top: calc(var(--wp--custom--header--bar) - var(--wp--custom--header--bar-compact)); }
}

@keyframes isl-compact-logo {
	to { height: 32px; }
}

@keyframes isl-compact-call {
	to {
		width: var(--wp--custom--touch--min);
		margin-right: 0;
		visibility: visible;
	}
}

@keyframes isl-compact-quote {
	to { min-height: var(--wp--custom--touch--min); }
}

/* ---------- Products and Industries menus (desktop) ---------- */

.isl-mega {
	position: fixed;
	inset: auto 0 auto 0;
	top: var(--isl-mega-top, calc(var(--wp--custom--header--utility) + var(--wp--custom--header--bar) + 1px));
	width: 100%;
	max-width: none;
	max-height: calc(100vh - var(--wp--custom--header--bar-compact));
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-sheet);
	overflow: auto;
}

@supports (anchor-name: --a) {
	.isl-mega {
		position-anchor: --isl-bar;
		top: anchor(bottom);
	}
}

.isl-mega__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s24);
	padding: var(--s32) 0;
}

.isl-mega__tiles {
	grid-column: span 9;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.isl-mega__tiles > li {
	display: flex;
}

.isl-tile {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	transition: box-shadow var(--t-fast) var(--ease);
}

.isl-tile:hover {
	color: var(--ink);
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.isl-tile:hover .isl-tile__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-tile__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 128px;
	background: var(--panel);
	overflow: hidden;
}

.isl-tile__img img {
	display: block;
	width: 100%;
	height: 128px;
	object-fit: cover;
}

.isl-tile__img picture {
	display: contents;
}

.isl-tile__text {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
	padding: var(--s16);
}

.isl-tile__name {
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--ui);
	font-weight: 700;
}

.isl-tile__line {
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--ink-2);
}

.isl-mega__side {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	gap: var(--s8);
	margin: 0;
	padding: 0 0 0 var(--s24);
	border-left: 1px solid var(--line);
	list-style: none;
}

.isl-row-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s12);
	min-height: 56px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
}

.isl-row-link > span {
	display: flex;
	flex-direction: column;
}

.isl-row-link__name {
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--ui);
	font-weight: 700;
}

.isl-row-link__line {
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--ink-2);
}

.isl-row-link:hover {
	color: var(--ink);
}

.isl-row-link:hover .isl-row-link__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-row-link--compact {
	min-height: var(--wp--custom--touch--min);
}

.isl-mega__strip {
	background: var(--panel);
	border-top: 1px solid var(--line);
}

.isl-mega__strip-row {
	min-height: var(--s64);
	display: flex;
	align-items: center;
	gap: var(--s24);
}

.isl-mega__strip-row .isl-link {
	min-height: var(--wp--custom--touch--min);
}

.isl-mega__hint {
	margin-left: auto;
	font-size: var(--fs-small);
	color: var(--ink-2);
}

/* Industries menu (not drawn; built from design.md 6.4 in the Products menu's frame). */
.isl-mega__industries {
	grid-column: span 9;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--s24);
	margin: 0;
	padding: 0;
	list-style: none;
	align-content: start;
}

.isl-mega__feature {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	gap: var(--s16);
	padding: var(--s16) var(--s16) var(--s16) var(--s24);
	border-left: 1px solid var(--line);
}

.isl-plantlist {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.isl-plantlist li {
	display: flex;
	align-items: center;
	gap: var(--s12);
}

.isl-plantlist__name {
	flex: 1;
	padding: var(--s4) var(--s8);
	border: 1px solid var(--ink-2);
	font-size: var(--fs-mono-sm);
	color: var(--ink-2);
}

.isl-plantlist__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var(--r-pill);
	background: var(--orange);
	color: var(--ink);
	font-size: var(--fs-mono-sm);
}

/* ---------- Seal failed? Popover on desktop, bottom sheet on phones ---------- */

.isl-sheet {
	color: var(--ink);
	background: var(--surface);
	box-shadow: var(--shadow-sheet);
}

.isl-sheet:popover-open,
.isl-sheet[open] {
	display: flex;
	flex-direction: column;
	gap: var(--s16);
}

.isl-sheet__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--s16);
}

.isl-sheet__titles {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
}

.isl-callback {
	display: flex;
	flex-direction: column;
	gap: var(--s12);
}

/* Phones and tablets: bottom sheet over a 40 % ink scrim. */
@media (max-width: 1279.98px) {
	.isl-sheet {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-width: none;
		max-height: calc(100dvh - var(--s32));
		margin: 0;
		padding: var(--s12) var(--isl-margin) calc(var(--s24) + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-radius: var(--r-panel) var(--r-panel) 0 0;
		overflow: auto;
		transition: transform var(--t-base) var(--ease), overlay var(--t-base) allow-discrete, display var(--t-base) allow-discrete;
	}

	@starting-style {
		.isl-sheet:popover-open,
		.isl-sheet[open] {
			transform: translateY(100%);
		}
	}

	.isl-sheet::backdrop {
		background: var(--wp--custom--scrim);
	}

	.isl-sheet__handle {
		align-self: center;
		width: var(--s32);
		height: var(--s4);
		border-radius: var(--r-pill);
		background: var(--line);
	}

	.isl-sheet__title {
		font-size: var(--fs-h2);
		line-height: var(--wp--custom--line-height--heading-2-mobile);
		font-weight: 800;
		font-stretch: var(--wp--custom--font-stretch--heading-2);
	}

	.isl-sheet__sub {
		font-size: var(--fs-body);
		line-height: var(--wp--custom--line-height--lead);
		color: var(--ink-2);
	}

	.isl-sheet .isl-divider {
		font-size: var(--fs-mono-sm);
		line-height: var(--wp--custom--line-height--ui);
	}

	.isl-sheet .isl-callback__note {
		margin-top: var(--s4);
		color: var(--ink-2);
	}
}

/* Desktop: a 432 px popover under the chip. */
@media (min-width: 1280px) {
	.isl-sheet {
		position: fixed;
		inset: auto;
		top: calc(var(--wp--custom--header--utility) + var(--wp--custom--header--bar) - var(--s12));
		right: max(var(--isl-margin), (100vw - var(--isl-content)) / 2);
		width: 432px;
		margin: 0;
		padding: var(--s24);
		border: 1px solid var(--line);
		border-radius: var(--r-panel);
	}

	@supports (anchor-name: --a) {
		.isl-bar__actions .isl-chip--seal {
			anchor-name: --isl-chip;
		}

		/* 8 px under the header bar's 64 / 84 px (full or compact), right edge 48 px in from the chip's (HeaderSealFailed). */
		.isl-sheet {
			position-anchor: --isl-chip;
			top: calc(anchor(--isl-bar bottom) + var(--s8) - var(--wp--custom--border--hairline));
			right: calc(anchor(right) + var(--s48));
		}
	}

	.isl-sheet__handle {
		display: none;
	}

	.isl-sheet__title {
		font-size: var(--fs-h3);
		line-height: var(--wp--custom--line-height--heading-3);
		font-weight: 700;
	}

	.isl-sheet__sub {
		font-size: var(--fs-small);
		line-height: var(--wp--custom--line-height--small);
		color: var(--ink-2);
	}

	.isl-sheet .isl-callback {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.isl-sheet .isl-callback__submit,
	.isl-sheet .isl-callback__note {
		grid-column: span 2;
	}

	.isl-sheet .isl-label {
		font-size: var(--fs-small);
		line-height: var(--wp--custom--line-height--small);
	}

	.isl-sheet .isl-input {
		padding: 0 var(--s12);
	}

	.isl-sheet .isl-phone__cc {
		padding: 0 var(--s8);
	}

	.isl-sheet .isl-callback__note {
		color: var(--ink-2);
	}
}

/* ---------- Mobile menu: full-height sheet above the quick bar ---------- */

.isl-menu {
	position: fixed;
	inset: 0 0 calc(var(--isl-quickbar-h) + env(safe-area-inset-bottom, 0px)) 0;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--surface);
	color: var(--ink);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.isl-menu:popover-open {
	display: flex;
	flex-direction: column;
}

.isl-menu__top {
	position: sticky;
	top: 0;
	flex-shrink: 0;
	height: var(--wp--custom--header--bar-mobile);
	padding: 0 var(--s8) 0 var(--isl-margin);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.isl-menu__top .isl-bar__logo img {
	height: 32px;
}

.isl-menu__nav {
	padding: var(--s16) var(--isl-margin) var(--s24);
	display: flex;
	flex-direction: column;
	gap: var(--s16);
}

.isl-chip--block {
	display: flex;
	width: 100%;
	font-size: var(--fs-body);
}

.isl-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.isl-menu__list > li {
	border-bottom: 1px solid var(--line);
}

.isl-menu__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	color: var(--ink);
	font-size: var(--fs-h3);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.isl-menu__row::-webkit-details-marker {
	display: none;
}

.isl-menu__row:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.isl-menu__group[open] > .isl-menu__row .isl-icon {
	transform: rotate(180deg);
}

.isl-menu__row .isl-icon {
	transition: transform var(--t-base) var(--ease);
}

.isl-menu__sub {
	margin: 0;
	padding: 0 0 var(--s12) var(--s16);
	border-left: 1px solid var(--line);
	list-style: none;
}

.isl-menu__sub a {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--touch--min);
	color: var(--ink);
	font-size: var(--fs-body);
	text-decoration: none;
}

.isl-menu__sub a:hover {
	text-decoration: underline;
}

.isl-menu__sub-sep {
	margin-top: var(--s8);
	padding-top: var(--s8);
	border-top: 1px solid var(--line);
}

.isl-menu__sub a.isl-menu__strong {
	color: var(--orange-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 1280px) {
	.isl-menu {
		display: none !important;
	}
}

@media (max-width: 1279.98px) {
	.isl-mega {
		display: none !important;
	}
}