/* Header and primary navigation: solid full-width bar. Mobile-first. */

.iw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--iw-color-bg);
	border-bottom: 1px solid var(--iw-color-line);
}

.admin-bar .iw-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.iw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--iw-space-6);
	max-width: var(--iw-container);
	height: var(--iw-header-height);
	margin: 0 auto;
	padding: 0 var(--iw-gutter);
}

.iw-header__logo {
	display: block;
	flex: none;
}

.iw-header__logo img {
	width: auto;
	height: 50px;
}

/* White logo sits on top of the colored one; the overlay header crossfades between them */
.iw-header__logo {
	position: relative;
}

.iw-header__logo-dark,
.iw-header__logo-light {
	transition: opacity 0.25s ease;
}

.iw-header__logo-light {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
}

/* Toggle (mobile) */
.iw-header__toggle {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	margin-right: -12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--iw-color-ink);
	cursor: pointer;
}

.iw-header__toggle-bars,
.iw-header__toggle-bars::before,
.iw-header__toggle-bars::after {
	position: absolute;
	left: 12px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.iw-header__toggle-bars { top: 23px; }
.iw-header__toggle-bars::before,
.iw-header__toggle-bars::after { content: ""; left: 0; }
.iw-header__toggle-bars::before { top: -7px; }
.iw-header__toggle-bars::after { top: 7px; }

.iw-header__toggle[aria-expanded="true"] .iw-header__toggle-bars { background: transparent; }
.iw-header__toggle[aria-expanded="true"] .iw-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.iw-header__toggle[aria-expanded="true"] .iw-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Navigation: mobile panel under the header */
.iw-nav {
	position: fixed;
	top: var(--iw-header-height);
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	padding: var(--iw-space-2) var(--iw-gutter) var(--iw-space-12);
	background: var(--iw-color-bg);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s;
}

.admin-bar .iw-nav {
	top: calc(var(--iw-header-height) + var(--wp-admin--admin-bar--height, 0px));
}

.iw-nav.is-open {
	visibility: visible;
	opacity: 1;
}

.iw-nav__list,
.iw-nav__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iw-nav__list > li + li {
	border-top: 1px solid var(--iw-color-line);
}

.iw-nav__list a {
	display: block;
	padding: var(--iw-space-4) 0;
	color: var(--iw-color-brown);
	font-family: var(--iw-font-heading);
	font-size: var(--iw-text-lg);
	font-weight: 400;
	text-decoration: none;
}

.iw-nav__list a:hover,
.iw-nav__list .current-menu-item > a,
.iw-nav__list > .current-menu-ancestor > a {
	color: var(--iw-color-primary-dark);
}

.iw-nav__list .menu-item-has-children {
	position: relative;
}

.iw-nav__sub-toggle {
	position: absolute;
	top: 6px;
	right: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--iw-color-ink);
	cursor: pointer;
}

.iw-nav__sub-toggle::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin: -3px auto 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.iw-nav__sub-toggle[aria-expanded="true"]::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.iw-nav .sub-menu {
	display: none;
	padding-bottom: var(--iw-space-3);
}

.iw-nav .sub-menu.is-open {
	display: block;
}

.iw-nav .sub-menu a {
	padding: var(--iw-space-2) 0 var(--iw-space-2) var(--iw-space-4);
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-base);
}

/* Wide products menu in the mobile panel: link to everything first, groups always open with a small label,
   the highlighted card last */
.iw-nav .sub-menu .sub-menu {
	display: block;
	padding-bottom: 0;
}

.iw-nav .iw-mega__all a {
	color: var(--iw-color-brown);
	font-family: var(--iw-font-body);
	font-weight: 600;
}

.iw-nav .iw-mega__group > a,
.iw-nav .iw-mega__label {
	display: block;
	padding: var(--iw-space-4) 0 var(--iw-space-1) var(--iw-space-4);
	color: var(--iw-color-ink-muted);
	font-family: var(--iw-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.iw-nav .iw-mega__feature {
	padding: var(--iw-space-4) 0 0 var(--iw-space-4);
}

.iw-nav .iw-mega .iw-mega__card {
	display: flex;
	align-items: center;
	gap: var(--iw-space-4);
	padding: var(--iw-space-3);
	background: var(--iw-color-surface);
	border-radius: var(--iw-radius-lg);
}

.iw-mega__feature-image {
	flex: none;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--iw-radius);
}

.iw-mega__card-body {
	display: grid;
	gap: var(--iw-space-1);
}

.iw-mega__card-title {
	color: var(--iw-color-brown);
	font-family: var(--iw-font-heading);
	font-size: var(--iw-text-lg);
	line-height: var(--iw-leading-tight);
}

.iw-mega__card-text {
	color: var(--iw-color-ink-soft);
	font-family: var(--iw-font-body);
	font-size: var(--iw-text-sm);
	line-height: var(--iw-leading-body);
}

/* Call to action in the menu (Configurator): last item, far right on desktop */
.iw-nav__list > .iw-menu-cta {
	margin-top: var(--iw-space-6);
	border-top: 0;
}

.iw-nav__list > .iw-menu-cta > a {
	padding: var(--iw-space-4) var(--iw-space-6);
	background: var(--iw-color-primary);
	color: var(--iw-color-on-primary);
	font-family: var(--iw-font-body);
	font-size: var(--iw-text-base);
	font-weight: 600;
	text-align: center;
	border-radius: var(--iw-radius);
}

.iw-nav__list > .iw-menu-cta > a:hover {
	background: var(--iw-color-primary-dark);
	color: var(--iw-color-on-primary);
}

body.iw-nav-open {
	overflow: hidden;
}

/* Mobile panel extras under the menu: language switcher, main mail and phone, social icons.
   The panel is a column, so this block sits at the bottom when the menu is short. */
.iw-nav {
	display: flex;
	flex-direction: column;
}

.iw-nav__extra {
	display: grid;
	justify-items: center;
	gap: var(--iw-space-6);
	margin-top: auto;
	padding-top: var(--iw-space-10);
	text-align: center;
}

.iw-nav__langs,
.iw-nav__contact,
.iw-nav__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Languages: segmented control; only the look for now, BA is the current one */
.iw-nav__langs {
	border: 1px solid var(--iw-color-line);
	border-radius: var(--iw-radius);
	overflow: hidden;
}

.iw-nav__langs li + li {
	border-left: 1px solid var(--iw-color-line);
}

.iw-nav__langs span {
	display: block;
	min-width: 56px;
	padding: var(--iw-space-2) var(--iw-space-4);
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-sm);
	font-weight: 600;
	letter-spacing: 0.12em;
}

.iw-nav__langs .is-current {
	background: var(--iw-color-brown);
	color: var(--iw-color-on-ink);
}

.iw-nav__contact {
	flex-direction: column;
	gap: var(--iw-space-1);
}

.iw-nav .iw-nav__contact a {
	color: var(--iw-color-brown);
	font-size: var(--iw-text-base);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	text-decoration: none;
}

.iw-nav__social {
	gap: var(--iw-space-1);
	margin-bottom: -12px;
}

.iw-nav__social a {
	display: grid;
	place-items: center;
	/* 44px touch target around the 20px icon */
	width: 44px;
	height: 44px;
	color: var(--iw-color-ink-muted);
}

.iw-nav__social a:hover {
	color: var(--iw-color-brown);
}

/* Overlay header: transparent with white logo and menu over the dark hero photo.
   Once the page scrolls it turns into frosted white glass with the colored logo (client's choice).
   The negative margin keeps the header sticky while letting the hero start under it.
   With the mobile menu open the header takes the light look of the white panel. */
.iw-has-overlay-header .iw-header {
	/* The header is its content height plus a 1px bottom border; pull up by both, or a 1px white strip shows above the hero */
	margin-bottom: calc(var(--iw-header-height) * -1 - 1px);
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.iw-has-overlay-header .iw-header.is-scrolled {
	background: rgb(255 255 255 / 80%);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 1px 12px rgb(17 17 17 / 6%);
}

/* backdrop-filter would make the header the containing block of the fixed mobile menu panel,
   squeezing the panel into the header bar, so it is switched off while the menu is open */
.iw-has-overlay-header.iw-nav-open .iw-header {
	background: var(--iw-color-bg);
	border-bottom-color: var(--iw-color-line);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Over the photo: white logo, white menu (desktop rule below), white toggle */
.iw-has-overlay-header:not(.iw-nav-open) .iw-header:not(.is-scrolled) .iw-header__logo-dark {
	opacity: 0;
}

.iw-has-overlay-header:not(.iw-nav-open) .iw-header:not(.is-scrolled) .iw-header__logo-light {
	opacity: 1;
	visibility: visible;
}

.iw-has-overlay-header:not(.iw-nav-open) .iw-header:not(.is-scrolled) .iw-header__toggle {
	color: var(--iw-color-on-ink);
}

/* Desktop language switcher (look only for now); the mobile panel has its own */
.iw-header__langs {
	display: none;
}

/* Desktop */
@media (min-width: 1024px) {
	.iw-header__toggle,
	.iw-nav__sub-toggle {
		display: none;
	}

	.iw-header__logo img {
		height: 54px;
	}

	.iw-nav__extra {
		display: none;
	}

	/* Menu and languages sit together at the right; a thin rule sets the languages apart */
	.iw-nav {
		margin-left: auto;
	}

	.iw-header__langs {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--iw-space-3);
		margin: 0 0 0 var(--iw-space-2);
		padding: 0 0 0 var(--iw-space-6);
		border-left: 1px solid var(--iw-color-line);
		list-style: none;
		transition: border-color 0.25s ease;
	}

	.iw-header__langs span {
		display: block;
		padding: var(--iw-space-1) 0;
		color: var(--iw-color-ink-muted);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		transition: color 0.25s ease;
	}

	.iw-header__langs .is-current {
		color: var(--iw-color-brown);
		box-shadow: inset 0 -2px 0 var(--iw-color-primary);
	}

	/* Over the hero photo: light text and rule, like the menu */
	.iw-has-overlay-header .iw-header:not(.is-scrolled) .iw-header__langs {
		border-left-color: rgb(255 255 255 / 30%);
	}

	.iw-has-overlay-header .iw-header:not(.is-scrolled) .iw-header__langs span {
		color: rgb(255 255 255 / 65%);
	}

	.iw-has-overlay-header .iw-header:not(.is-scrolled) .iw-header__langs .is-current {
		color: var(--iw-color-on-ink);
	}

	.iw-nav {
		display: block;
		position: static;
		overflow: visible;
		padding: 0;
		background: transparent;
		visibility: visible;
		opacity: 1;
	}

	.iw-nav__list {
		display: flex;
		align-items: center;
		gap: var(--iw-space-10);
	}

	.iw-nav__list > li + li {
		border-top: 0;
	}

	/* Links span the full header height; the active/hover indicator sits on the header's bottom edge */
	.iw-nav__list > li:not(.iw-menu-cta) > a {
		position: relative;
		display: flex;
		align-items: center;
		height: var(--iw-header-height);
		padding: 0;
		font-family: var(--iw-font-body);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.iw-has-overlay-header .iw-header:not(.is-scrolled) .iw-nav__list > li:not(.iw-menu-cta) > a {
		color: var(--iw-color-on-ink);
	}

	.iw-nav__list > li:not(.iw-menu-cta) > a {
		transition: color 0.25s ease;
	}

	.iw-nav__list > li:not(.iw-menu-cta) > a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -1px;
		left: 0;
		height: 3px;
		background: var(--iw-color-primary);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.2s ease;
	}

	.iw-nav__list > li:not(.iw-menu-cta):hover > a::after,
	.iw-nav__list > li:not(.iw-menu-cta):focus-within > a::after,
	.iw-nav__list > li.current-menu-item > a::after,
	.iw-nav__list > li.current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	.iw-nav__list > .iw-menu-cta {
		margin: 0 0 0 var(--iw-space-2);
	}

	.iw-nav__list > .iw-menu-cta > a {
		padding: var(--iw-space-3) var(--iw-space-6);
		font-size: 0.9375rem;
	}

	/* Dropdown: attached to the header bar, opens on hover and keyboard focus */
	.iw-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: calc(var(--iw-space-6) * -1);
		display: block;
		min-width: 280px;
		padding: var(--iw-space-2) 0;
		background: var(--iw-color-bg);
		border: 1px solid var(--iw-color-line);
		border-top: 0;
		border-radius: 0 0 var(--iw-radius-lg) var(--iw-radius-lg);
		box-shadow: var(--iw-shadow-md);
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.15s ease, visibility 0.15s;
	}

	.iw-nav .menu-item-has-children:hover > .sub-menu,
	.iw-nav .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
	}

	.iw-nav .sub-menu a {
		padding: var(--iw-space-3) var(--iw-space-6);
		color: var(--iw-color-brown);
		font-size: 1rem;
		font-weight: 400;
	}

	.iw-nav .sub-menu a:hover {
		background: var(--iw-color-surface);
		color: var(--iw-color-primary-dark);
	}

	/* Wide products menu: a full-width panel under the header bar, groups in columns, the highlighted card on the
	   right and the link to everything under the groups. The panel content lines up with the header content. */
	.iw-nav .iw-menu-mega {
		position: static;
	}

	.iw-nav .sub-menu.iw-mega {
		top: calc(100% + 1px);
		right: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(var(--iw-mega-groups, 4), minmax(0, 1fr)) clamp(220px, 22vw, 300px);
		grid-template-rows: auto 1fr auto;
		column-gap: clamp(var(--iw-space-6), 2.5vw, var(--iw-space-8));
		min-width: 0;
		max-height: calc(100vh - var(--iw-header-height) - 1px - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		padding: var(--iw-space-10) max(var(--iw-gutter), calc((100% - var(--iw-container)) / 2 + var(--iw-gutter))) var(--iw-space-10);
		border: 0;
		border-radius: 0;
	}

	/* Items of a group: always shown inside the panel, never a dropdown of their own */
	.iw-nav .iw-mega .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		visibility: inherit;
		opacity: 1;
		transition: none;
	}

	/* Groups share the panel rows, so a label that wraps keeps every label rule on one line */
	.iw-nav .iw-mega .iw-mega__group {
		display: grid;
		grid-row: 1 / 3;
		grid-template-rows: subgrid;
	}

	.iw-nav .iw-mega .iw-mega__group > a,
	.iw-nav .iw-mega .iw-mega__label {
		display: block;
		align-self: end;
		margin-bottom: var(--iw-space-3);
		padding: 0 0 var(--iw-space-3);
		border-bottom: 1px solid var(--iw-color-line);
		color: var(--iw-color-ink-muted);
		font-family: var(--iw-font-body);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.iw-nav .iw-mega .iw-mega__group > a:hover {
		background: none;
		color: var(--iw-color-primary-dark);
	}

	.iw-nav .iw-mega .sub-menu a {
		padding: var(--iw-space-2) 0;
		font-size: 1.0625rem;
		line-height: var(--iw-leading-tight);
	}

	.iw-nav .iw-mega .sub-menu a:hover {
		background: none;
	}

	.iw-mega__all {
		grid-row: 3;
		grid-column: 1 / -2;
		margin-top: var(--iw-space-8);
		padding-top: var(--iw-space-6);
		border-top: 1px solid var(--iw-color-line);
	}

	.iw-nav .iw-mega .iw-mega__all a {
		display: inline-block;
		padding: 0;
		font-family: var(--iw-font-body);
		font-size: 0.9375rem;
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--iw-color-line);
		text-decoration-thickness: 1px;
		text-underline-offset: 8px;
		transition: color 0.2s ease, text-decoration-color 0.2s ease;
	}

	.iw-nav .iw-mega .iw-mega__all a:hover {
		background: none;
		text-decoration-color: currentColor;
	}

	.iw-nav .iw-mega__feature {
		grid-row: 1 / 4;
		grid-column: -2;
		padding: 0;
	}

	.iw-nav .iw-mega .iw-mega__card {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: 100%;
		padding: 0;
		overflow: hidden;
		background: var(--iw-color-surface);
		border-radius: var(--iw-radius-lg);
	}

	.iw-mega__feature-image {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		border-radius: 0;
		transition: transform 0.4s ease;
	}

	.iw-mega__card:hover .iw-mega__feature-image {
		transform: scale(1.03);
	}

	.iw-mega__card-body {
		display: grid;
		gap: var(--iw-space-2);
		padding: var(--iw-space-4) var(--iw-space-6) var(--iw-space-6);
	}

	.iw-mega__card-title {
		color: var(--iw-color-brown);
		font-family: var(--iw-font-heading);
		font-size: 1.25rem;
		line-height: var(--iw-leading-tight);
		transition: color 0.2s ease;
	}

	.iw-mega__card:hover .iw-mega__card-title {
		color: var(--iw-color-primary-dark);
	}

	.iw-mega__card-text {
		color: var(--iw-color-ink-soft);
		font-family: var(--iw-font-body);
		font-size: var(--iw-text-sm);
		line-height: var(--iw-leading-body);
	}

	/* Over the hero photo the header turns solid while the panel is open (header.js), so the panel does not
	   hang under a transparent bar */
	.iw-has-overlay-header .iw-header.is-mega-open {
		background: var(--iw-color-bg);
		border-bottom-color: var(--iw-color-line);
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}