/* ==========================================================================
   Utility bar, header, navigation, mobile drawer
   ========================================================================== */

/* --- Utility bar -------------------------------------------------------- */

.tpl-utility {
	background-color: var(--c-forest);
	color: var(--c-ivory);
	font-size: var(--fs-small);
}

.tpl-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-block-size: var(--utility-h);
}

.tpl-utility__list {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.tpl-utility__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	white-space: nowrap;
}

.tpl-utility__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.tpl-utility__link:hover {
	color: var(--c-sage-200);
}

.tpl-utility .tpl-icon {
	inline-size: 16px;
	block-size: 16px;
}

@media (max-width: 899px) {
	.tpl-utility__list {
		gap: var(--sp-2);
	}

	/* Keep the bar to one line on small screens: location and WhatsApp label
	   drop away, the phone link stays. */
	.tpl-utility__item:first-child span,
	.tpl-utility__item--wa span {
		display: none;
	}
}

/* --- Language switcher -------------------------------------------------- */

.tpl-langs {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-small);
}

.tpl-langs__item {
	text-decoration: none;
	color: var(--c-sage-200);
	transition: color var(--speed) var(--ease);
}

.tpl-langs__item + .tpl-langs__item {
	position: relative;
	padding-inline-start: var(--sp-2);
}

.tpl-langs__item + .tpl-langs__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 4px;
	inline-size: 1px;
	background-color: var(--c-line-dark);
}

.tpl-langs__item:hover {
	color: var(--c-white);
}

.tpl-langs__item.is-current {
	color: var(--c-white);
	font-weight: 500;
}

/* --- Header ------------------------------------------------------------- */

.tpl-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background-color: var(--c-ivory);
	border-block-end: 1px solid transparent;
	transition: box-shadow var(--speed) var(--ease),
		border-color var(--speed) var(--ease);
}

.tpl-header.is-stuck {
	border-block-end-color: var(--c-line);
	box-shadow: var(--shadow-sm);
}

.tpl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-block-size: var(--header-h);
}

.tpl-header__brand {
	display: inline-flex;
	flex: none;
}

/* Brand minimum for the horizontal lockup is 300px wide. */
.tpl-header__brand .tpl-logo {
	inline-size: 300px;
	block-size: auto;
}

/* Brand minimum for the symbol is 64px wide. */
.tpl-header__brand .tpl-logo-symbol {
	display: none;
	inline-size: 64px;
	block-size: auto;
}

.tpl-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex: none;
}

/* --- Primary navigation ------------------------------------------------- */

.tpl-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.tpl-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.tpl-nav__link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap);
	padding-block: var(--sp-1);
	border-radius: var(--radius-pill);
	color: var(--c-forest);
	font-size: var(--fs-small);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--speed) var(--ease),
		background-color var(--speed) var(--ease);
}

/* Header and drawer only: the footer reuses this walker on a dark panel and
   keeps its own lighter weight. */
.tpl-nav .tpl-nav__link {
	font-weight: var(--fw-nav);
}

/*
 * No underline here, by design.
 *
 * This nav used to draw one with a pseudo-element pinned 18px from the bottom
 * of the 44px link box. That offset only ever suited the Latin line box:
 * Arabic sets --lh-body to 1.85, so the glyph band sits lower and the bar
 * landed at the baseline, striking through the text instead of underlining
 * it - clearly visible on the current item, which holds the bar at full width.
 *
 * Hover and current are marked with a soft Sage pill instead, which carries no
 * such dependency on the script's vertical metrics.
 */
.tpl-nav .tpl-nav__item:hover > .tpl-nav__link,
.tpl-nav .tpl-nav__item.is-current > .tpl-nav__link,
.tpl-nav .tpl-nav__link:focus-visible {
	background-color: var(--c-sage-200);
	color: var(--c-forest-900);
}

/*
 * The pill's inline padding is cancelled by an equal negative margin, so it
 * bleeds into the 24px gap rather than widening the bar: the header keeps the
 * width it had, and adjacent pills stay 4px apart.
 */
.tpl-nav:not(.tpl-nav--drawer) .tpl-nav__list > .tpl-nav__item > .tpl-nav__link {
	padding-inline: 10px;
	margin-inline: -10px;
}

.tpl-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: var(--tap);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.tpl-nav__chevron {
	inline-size: 16px;
	block-size: 16px;
	transition: transform var(--speed) var(--ease);
}

.tpl-nav__toggle[aria-expanded="true"] .tpl-nav__chevron {
	transform: rotate(180deg);
}

/* --- Dropdown ----------------------------------------------------------- */

.tpl-nav__submenu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 20;
	min-inline-size: 220px;
	padding: var(--sp-1);
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--speed) var(--ease),
		transform var(--speed) var(--ease),
		visibility var(--speed);
}

.tpl-nav__item--has-children:hover > .tpl-nav__submenu,
.tpl-nav__item--has-children:focus-within > .tpl-nav__submenu,
.tpl-nav__toggle[aria-expanded="true"] + .tpl-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tpl-nav__submenu .tpl-nav__item {
	display: block;
}

.tpl-nav__submenu .tpl-nav__link {
	inline-size: 100%;
	padding-inline: var(--sp-2);
	border-radius: var(--radius-sm);
}

.tpl-nav__submenu .tpl-nav__link:hover {
	background-color: var(--c-ivory);
}

/* --- Burger ------------------------------------------------------------- */

.tpl-burger {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--tap);
	block-size: var(--tap);
	padding: 0;
	background: none;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.tpl-burger .tpl-icon {
	inline-size: 22px;
	block-size: 22px;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1199px) {
	.tpl-header__brand .tpl-logo {
		inline-size: 300px;
	}

	.tpl-nav__list {
		gap: var(--sp-2);
	}
}

@media (max-width: 1099px) {
	.tpl-header > .tpl-container > .tpl-nav,
	.tpl-header__cta {
		display: none;
	}

	.tpl-burger {
		display: inline-flex;
	}
}

/* Below this width the 300px lockup cannot sit beside the menu button without
   eating the page gutter, so the header falls back to the symbol. */
@media (max-width: 599px) {
	.tpl-header {
		--header-h: 72px;
	}

	.tpl-header__brand .tpl-logo {
		display: none;
	}

	.tpl-header__brand .tpl-logo-symbol {
		display: block;
	}
}

/* --- Mobile drawer ------------------------------------------------------ */

.tpl-drawer[hidden] {
	display: none;
}

.tpl-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
}

.tpl-drawer__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 42, 37, 0.5);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

.tpl-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(380px, 88vw);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-3) var(--sp-5);
	background-color: var(--c-ivory);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--speed) var(--ease);
}

[dir="rtl"] .tpl-drawer__panel {
	transform: translateX(-100%);
}

.tpl-drawer.is-open .tpl-drawer__backdrop {
	opacity: 1;
}

.tpl-drawer.is-open .tpl-drawer__panel {
	transform: translateX(0);
}

.tpl-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
}

.tpl-drawer__brand {
	display: inline-flex;
	min-inline-size: 0;
}

/* The drawer panel is too narrow for the lockup's 300px minimum, so it uses
   the symbol at its own 64px minimum. */
.tpl-drawer__brand .tpl-logo-symbol {
	inline-size: 64px;
	block-size: auto;
}

.tpl-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--tap);
	block-size: var(--tap);
	flex: none;
	background: none;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.tpl-nav--drawer .tpl-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.tpl-nav--drawer .tpl-nav__item {
	flex-wrap: wrap;
	justify-content: space-between;
	border-block-end: 1px solid var(--c-line);
}

.tpl-nav--drawer .tpl-nav__link {
	flex: 1;
	min-block-size: 56px;
	font-size: var(--fs-lead);
}

.tpl-nav--drawer .tpl-nav__toggle {
	inline-size: var(--tap);
	block-size: 56px;
}

.tpl-nav--drawer .tpl-nav__submenu {
	position: static;
	flex-basis: 100%;
	display: none;
	min-inline-size: 0;
	padding: 0 0 var(--sp-1);
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.tpl-nav--drawer .tpl-nav__toggle[aria-expanded="true"] + .tpl-nav__submenu {
	display: block;
}

.tpl-nav--drawer .tpl-nav__submenu .tpl-nav__link {
	padding-inline-start: var(--sp-3);
	min-block-size: 48px;
	font-size: var(--fs-body);
	color: var(--c-muted);
}

.tpl-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-block-start: auto;
}

.tpl-drawer__foot .tpl-langs {
	justify-content: center;
	margin-block-start: var(--sp-2);
}

.tpl-drawer__foot .tpl-langs__item {
	color: var(--c-muted);
}

.tpl-drawer__foot .tpl-langs__item.is-current {
	color: var(--c-forest);
}

.tpl-drawer__foot .tpl-langs__item + .tpl-langs__item::before {
	background-color: var(--c-line);
}

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