/*
 * VLINZZA Header — the single header stylesheet.
 *
 * Scope
 * -----
 * Every selector below starts with .vlz-header, .vlz-nav or .vlz-panel (plus
 * two documented <html> state classes). No bare element selectors, no #id
 * selectors, no !important, no selector reaching outside the header.
 *
 * Independence
 * ------------
 * Nothing here depends on, or inherits from, Elementor / .elementor-kit-9,
 * Max Mega Menu (#mega-menu-*, .mega-*), ElementsKit, PowerPack, GP Premium
 * modules, or the parent theme's .main-navigation / off-canvas CSS.
 *
 * Breakpoint
 * ----------
 * ONE breakpoint: 1280px. Mobile-first base = drawer presentation; a single
 * @media (min-width: 1280px) block = desktop presentation. Its twin lives in
 * assets/js/header.js as matchMedia('(min-width: 1280px)') and the two values
 * must always be edited together.
 *
 * RTL
 * ---
 * Logical properties only (inset-inline-*, padding-inline-*, margin-inline-*,
 * text-align: start/end). No physical left/right is used for layout, no
 * [dir="rtl"] override block, no separate RTL stylesheet.
 *
 * Colour
 * ------
 * Design tokens from tokens.css wherever the reference value maps onto one —
 * several map EXACTLY (#f7f7f7 -> --vlz-color-surface-alt, #ffffff ->
 * --vlz-color-surface, #1e7dbf -> --vlz-color-primary, #6adfd7 ->
 * --vlz-color-accent). Two reference colours have no token equivalent and are
 * declared once, below, as header-local custom properties. The per-column tint
 * and heading-badge colours are also reference values; they are not here at all
 * but come from the icon registry in inc/header/icons.php through two inline
 * custom properties, so that panel colour stays reference-driven without ever
 * becoming a per-column control in the Menus UI.
 */

/* -------------------------------------------------------------------------
 * 1. Header-local custom properties (the only place geometry is declared)
 * ---------------------------------------------------------------------- */

.vlz-header {
	/*
	 * Geometry — reference-measured, then tightened by Owner correction 15
	 * (2026-09-06, header-to-hero spacing).
	 *
	 * Root cause, measured on Local before changing anything: on every rebuilt
	 * page the hero starts at EXACTLY the header's bottom edge — .site-content,
	 * .vlz-page, .vlz-main and .vlz-content all report top === header.bottom and
	 * margin-top: 0. There is no after-header gap, no wrapper margin and no hero
	 * top margin to remove. The space the Owner sees before the hero is the
	 * header's OWN height, so that is what is reduced here, at its single
	 * source, with no negative margin anywhere and no change to any hero.
	 *
	 *   Mobile/Tablet  118px -> 102px   (40 top bar + 62 bar)
	 *   Desktop        148px -> 132px   (40 top bar + 92 nav row)
	 */
	--vlz-header-topbar-height: 40px;
	--vlz-header-item-height: 92px;
	--vlz-header-bar-height: 62px;
	--vlz-header-toggle-size: 44px;
	--vlz-header-drawer-width: min(330px, 88vw);
	--vlz-header-z: 999;
	--vlz-header-col-padding: 32px 30px 16px;
	--vlz-header-col-padding-posts: 26px 30px 26px 20px;

	/* Controls — one button language, shared by both CTAs. */
	--vlz-header-cta-radius: var(--vlz-radius-pill);
	--vlz-header-cta-height-mobile: 38px;
	--vlz-header-cta-height-desktop: 48px;
	--vlz-header-card-radius: var(--vlz-radius-md);

	/* Colour — reference values with no tokens.css equivalent. */
	--vlz-header-panel-bg: #f9fbff;
	--vlz-header-heading: #283e71;

	/* Per-column values, overridden inline per column by the renderer. */
	--vlz-col-tint: transparent;
	--vlz-col-badge: var(--vlz-color-primary);

	position: static; /* Explicit: this header is not sticky, by design. */
	z-index: var(--vlz-header-z);
	background-color: var(--vlz-color-surface);
	font-family: var(--vlz-font-sans);
}

.vlz-header__inner {
	display: flex;
	align-items: center;
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--vlz-container-max);
	padding-inline: var(--vlz-container-gutter);
}

.vlz-header :focus-visible {
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus);
	outline-offset: var(--vlz-focus-offset);
}

/* -------------------------------------------------------------------------
 * 2. Top bar
 * ---------------------------------------------------------------------- */

.vlz-header__topbar {
	background-color: var(--vlz-color-surface-alt);
	min-block-size: var(--vlz-header-topbar-height);
}

.vlz-header__topbar .vlz-header__inner {
	justify-content: space-between;
	gap: var(--vlz-space-sm);
	min-block-size: var(--vlz-header-topbar-height);
	max-inline-size: var(--vlz-wide-max);
	padding-inline: var(--vlz-space-xs);
}

.vlz-header__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--vlz-space-2xs);
	color: var(--vlz-color-primary);
	/*
	 * Fluid, NOT a second breakpoint. At 320px the number used to wrap onto a
	 * second line, which grew the top bar by 10px and worked against the
	 * header-to-hero reduction at exactly the narrowest width. clamp() keeps the
	 * reference 18px from ~500px upwards and eases down to 15px on a 320px
	 * screen, so the row stays one line everywhere with no extra media query.
	 */
	font-size: clamp(0.9375rem, 3.6vw, 1.125rem);
	font-weight: var(--vlz-weight-regular);
	line-height: 1.4;
	direction: ltr;
}

/*
 * Owner correction (2026-09-06): only the number is a link now — the
 * suffix (e.g. "(+2)") is a plain sibling <span>, never inside the anchor. The
 * container above is no longer itself a link, so color/no-underline are
 * re-declared on the anchor itself.
 *
 * TOKEN ISOLATION (2026-09-07 phone visual order micro-fix): `unicode-bidi:
 * isolate` replaces the previous `plaintext` on both tokens. `plaintext`
 * IGNORES the element's own `direction`/`dir` and instead auto-detects a base
 * direction from the token's own characters — for a token with no strong
 * bidi character (a plain digit/`+`/`(`/`)` run, exactly this case) that
 * auto-detection is unreliable inside an RTL document. `isolate` keeps each
 * token a self-contained bidi unit that DOES honour `dir="ltr"` (set in
 * render.php on both elements), so the number and the country-code/suffix
 * token each render in their own true source/logical character order,
 * independent of the surrounding RTL page and of each other.
 */
.vlz-header__phone-number {
	color: inherit;
	text-decoration: none;
	unicode-bidi: isolate;
}

.vlz-header__phone-suffix {
	color: inherit;
	unicode-bidi: isolate;
}

/*
 * The icon is the LAST child of .vlz-header__phone (see inc/header/render.php),
 * and the row is direction: ltr because a phone number reads left-to-right — so
 * in the RTL document the glyph lands to the RIGHT of the digits, which is what
 * Owner correction 9 asks for. Source order does it; there is no `order`, no
 * `row-reverse` and no physical left/right.
 */
.vlz-header__phone-icon {
	color: var(--vlz-color-ink);
	font-size: 1.25rem;
	flex: none;
}

a.vlz-header__phone-number:hover,
a.vlz-header__phone-number:focus-visible {
	text-decoration: underline;
}

.vlz-header__tagline {
	display: inline-flex;
	align-items: center;
	gap: var(--vlz-space-3xs);
	margin: 0;
	color: var(--vlz-color-ink-soft);
	font-size: 0.625rem;
	line-height: 1.5;
}

.vlz-header__tagline-icon {
	color: var(--vlz-color-accent);
	font-size: 1.35rem;
	flex: none;
}

/* -------------------------------------------------------------------------
 * 3. Main bar — shared shell
 * ---------------------------------------------------------------------- */

.vlz-header__bar {
	position: relative; /* Positioning context for the desktop mega panel. */
	background-color: var(--vlz-color-surface);
}

.vlz-header__bar .vlz-header__inner {
	justify-content: space-between;
	gap: var(--vlz-space-sm);
	min-block-size: var(--vlz-header-bar-height);
}

/* Logo — order 3 below the breakpoint (inline-end), order 1 above it. */
.vlz-header__logo {
	order: 3;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.vlz-header__logo img {
	display: block;
	block-size: auto;
	max-block-size: 32px;
	inline-size: auto;
}

.vlz-header__logo--text a {
	color: var(--vlz-color-heading);
	font-size: var(--vlz-text-lead);
	font-weight: var(--vlz-weight-bold);
	text-decoration: none;
}

/* Drawer toggle — exactly one exists, at every width. */
.vlz-header__toggle {
	order: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--vlz-header-toggle-size);
	block-size: var(--vlz-header-toggle-size);
	padding: 0;
	border: 0;
	border-radius: var(--vlz-radius-md);
	background: none;
	color: var(--vlz-color-primary);
	font-size: 1.5rem;
	cursor: pointer;
}

.vlz-header__toggle-icon {
	display: inline-flex;
}

.vlz-header__toggle-icon--close {
	display: none;
}

.vlz-header.is-drawer-open .vlz-header__toggle-icon--open {
	display: none;
}

.vlz-header.is-drawer-open .vlz-header__toggle-icon--close {
	display: inline-flex;
}

/* -------------------------------------------------------------------------
 * 4. CTAs — two anchors, exactly one visible per breakpoint
 * ---------------------------------------------------------------------- */

/*
 * ONE button language for both CTAs (Owner correction 4, 2026-09-06). The
 * project's own button — .vlz-btn .wp-block-button__link in global-classes.css
 * — is a fully rounded, semibold, flat, content-width control with a colour
 * transition and no shadow. These two anchors now share that vocabulary
 * (radius, weight, transition, content sizing) while keeping their own compact
 * header proportions. Deliberately absent, per the correction: gradient, shadow,
 * uppercase, and any width that would let the button dominate the row.
 */
.vlz-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vlz-space-2xs);
	flex: 0 0 auto;
	border: var(--vlz-border-width-strong) solid var(--vlz-color-primary);
	border-radius: var(--vlz-header-cta-radius);
	background-color: var(--vlz-color-primary);
	box-shadow: none;
	color: var(--vlz-color-text-invert);
	font-weight: var(--vlz-weight-semibold);
	line-height: var(--vlz-leading-tight);
	text-decoration: none;
	white-space: nowrap;
}

.vlz-header__cta:hover,
.vlz-header__cta:focus-visible {
	border-color: var(--vlz-color-primary-strong);
	background-color: var(--vlz-color-primary-strong);
	color: var(--vlz-color-text-invert);
}

/*
 * Mobile CTA — no rocket (Owner decision), content width, and sized so the row
 * stays balanced between the toggle, the button and the logo.
 */
.vlz-header__cta--mobile {
	order: 2;
	block-size: var(--vlz-header-cta-height-mobile);
	padding-inline: 18px;
	font-size: 0.8125rem;
}

.vlz-header__cta--desktop {
	display: none;
}

.vlz-header__cta-icon {
	display: inline-flex;
	flex: none;
}

/* The reference's own rocket artwork — see vlz_header_cta_rocket(). */
.vlz-header__cta-rocket {
	display: block;
	inline-size: auto;
	block-size: 22px;
}

/* -------------------------------------------------------------------------
 * 5. Drawer (base presentation, below the breakpoint)
 * ---------------------------------------------------------------------- */

.vlz-header__drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: calc(-1 * var(--vlz-header-drawer-width));
	z-index: calc(var(--vlz-header-z) + 2);
	inline-size: var(--vlz-header-drawer-width);
	max-inline-size: 100%;
	padding-block: var(--vlz-space-md) var(--vlz-space-2xl);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	background-color: var(--vlz-color-surface);
	box-shadow: var(--vlz-shadow-md);
}

@supports (block-size: 100dvh) {
	.vlz-header__drawer {
		block-size: 100dvh;
	}
}

/*
 * Drawer close control (Owner correction 5). The drawer is a fixed overlay
 * ABOVE the header row, so the hamburger that opened it is covered while it is
 * open — "press it again" was never actually available to the user. The X is
 * the drawer's first focusable element, so the focus move-in on open lands on
 * it, and it is a full 44x44 touch target.
 */
.vlz-header__drawer-head {
	display: flex;
	justify-content: flex-end;
	padding-inline: var(--vlz-space-2xs);
	padding-block-end: var(--vlz-space-2xs);
}

.vlz-header__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--vlz-header-toggle-size);
	block-size: var(--vlz-header-toggle-size);
	padding: 0;
	border: 0;
	border-radius: var(--vlz-radius-pill);
	background: none;
	color: var(--vlz-color-heading);
	font-size: 1.5rem;
	cursor: pointer;
}

.vlz-header.is-drawer-open .vlz-header__drawer {
	inset-inline-start: 0;
	visibility: visible;
}

.vlz-header__scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--vlz-header-z) + 1);
	background-color: rgba(0, 0, 0, 0.45);
}

.vlz-header__scrim[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * 6. Nav list
 * ---------------------------------------------------------------------- */

.vlz-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlz-nav__item {
	margin: 0;
	padding: 0;
}

.vlz-nav__link,
.vlz-nav__trigger {
	display: flex;
	align-items: center;
	gap: var(--vlz-space-2xs);
	inline-size: 100%;
	min-block-size: 60px;
	padding-inline: var(--vlz-space-md);
	border: 0;
	background: none;
	color: var(--vlz-color-text);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: var(--vlz-weight-bold);
	line-height: 1.3;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.vlz-nav__trigger .vlz-nav__label {
	flex: 1 1 auto;
}

.vlz-nav__link:hover,
.vlz-nav__link:focus-visible,
.vlz-nav__trigger:hover,
.vlz-nav__trigger:focus-visible,
.vlz-nav__item.is-current > .vlz-nav__link,
.vlz-nav__item.is-current > .vlz-nav__trigger {
	color: var(--vlz-color-primary);
}

/*
 * The parent theme styles bare <button> elements, and its hover/focus/active
 * rules carry a pseudo-class, so they out-specify a plain single-class
 * declaration. Neutralised by ancestor-free double-class specificity here
 * rather than by !important — the same pattern already used for the 404/TOC
 * cascade fixes.
 */
.vlz-header__toggle:hover,
.vlz-header__toggle:focus,
.vlz-header__toggle:active,
.vlz-header__close:hover,
.vlz-header__close:focus,
.vlz-header__close:active,
.vlz-nav__trigger:hover,
.vlz-nav__trigger:focus,
.vlz-nav__trigger:active {
	background: none;
	box-shadow: none;
	color: var(--vlz-color-primary);
}

.vlz-nav__caret {
	display: inline-flex;
	flex: none;
	font-size: 1rem;
}

.vlz-nav__trigger[aria-expanded="true"] .vlz-nav__caret {
	transform: rotate(180deg);
}

/* An item that has both a destination and a panel: link + small disclosure. */
.vlz-nav__item--has-panel > .vlz-nav__link {
	inline-size: auto;
	flex: 1 1 auto;
}

.vlz-nav__trigger--disclosure {
	inline-size: auto;
	flex: 0 0 auto;
	padding-inline: var(--vlz-space-2xs);
}

/* -------------------------------------------------------------------------
 * 7. Panel — base presentation is an in-flow accordion inside the drawer
 * ---------------------------------------------------------------------- */

.vlz-panel[hidden] {
	display: none;
}

.vlz-panel__inner {
	display: block;
}

.vlz-panel__col {
	padding: var(--vlz-space-xs) var(--vlz-space-md) var(--vlz-space-sm);
	background-color: var(--vlz-col-tint);
}

/*
 * A column heading is a LABEL at every width (Owner correction 6). It is no
 * longer a disclosure button, so the drawer has exactly one accordion level and
 * a link is always one tap away from opening its top-level item.
 */
.vlz-panel__heading {
	display: flex;
	align-items: center;
	gap: var(--vlz-space-2xs);
	margin: 0;
	padding-block: var(--vlz-space-2xs);
	color: var(--vlz-header-heading);
	font-size: 1rem;
	font-weight: var(--vlz-weight-bold);
	line-height: 1.4;
	text-align: start;
}

.vlz-panel__heading-text {
	flex: 1 1 auto;
}

.vlz-panel__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 35px;
	block-size: 25px;
	border-radius: 2px;
	background-color: var(--vlz-col-badge);
	color: var(--vlz-color-text-invert);
	font-size: 0.9375rem;
}

.vlz-panel__body[hidden] {
	display: none;
}

.vlz-panel__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlz-panel__links a {
	display: block;
	padding-block: var(--vlz-space-3xs);
	color: var(--vlz-color-text);
	font-size: 1rem;
	line-height: 1.6;
	text-decoration: none;
}

.vlz-panel__links a:hover,
.vlz-panel__links a:focus-visible,
.vlz-panel__link-item.is-current > a {
	color: var(--vlz-color-primary);
}

/*
 * Article rows (Owner correction 7). These stay ARTICLE CARDS at every width —
 * they are not converted into project CTA buttons: no fill, no invert colour,
 * no centring, editorial left-aligned title, normal link weight. What changed is
 * the shape: the sharp separated list became a rounded, softly bordered card on
 * a white ground. The mobile card is deliberately lighter than the desktop one
 * (tighter padding, no hover lift) but it is the same object, not a different
 * component.
 */
.vlz-panel__posts {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vlz-panel__posts a {
	display: block;
	padding: 12px 14px;
	border: var(--vlz-border-width) solid var(--vlz-color-border);
	border-radius: var(--vlz-header-card-radius);
	background-color: var(--vlz-color-surface);
	color: var(--vlz-color-text);
	font-size: 0.875rem;
	line-height: 1.5;
	text-decoration: none;
}

.vlz-panel__posts a:hover,
.vlz-panel__posts a:focus-visible {
	border-color: var(--vlz-color-primary);
	color: var(--vlz-color-primary);
	text-decoration: none;
}

.vlz-panel__col--promo {
	text-align: center;
}

.vlz-panel__col--promo .vlz-panel__heading {
	justify-content: center;
	color: var(--vlz-color-heading);
	font-size: 1.125rem;
	text-align: center;
}

.vlz-panel__promo-body {
	margin: 0 0 var(--vlz-space-sm);
	color: var(--vlz-color-text);
	font-size: 0.9375rem;
	line-height: var(--vlz-leading-body);
	text-align: start;
}

.vlz-panel__promo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--vlz-space-2xs) var(--vlz-space-lg);
	border-radius: var(--vlz-header-cta-radius);
	background-color: var(--vlz-color-primary);
	color: var(--vlz-color-text-invert);
	font-size: 0.9375rem;
	font-weight: var(--vlz-weight-bold);
	text-decoration: none;
}

.vlz-panel__promo-button:hover,
.vlz-panel__promo-button:focus-visible {
	background-color: var(--vlz-color-primary-strong);
	color: var(--vlz-color-text-invert);
}

/* -------------------------------------------------------------------------
 * 8. Desktop presentation — the ONE breakpoint
 * ---------------------------------------------------------------------- */

@media (min-width: 1280px) {

	.vlz-header__bar .vlz-header__inner {
		gap: var(--vlz-space-md);
		min-block-size: var(--vlz-header-item-height);
	}

	.vlz-header__logo {
		order: 1;
	}

	.vlz-header__logo img {
		max-block-size: 50px;
	}

	.vlz-header__toggle,
	.vlz-header__cta--mobile {
		display: none;
	}

	.vlz-header__cta--desktop {
		order: 3;
		display: inline-flex;
		block-size: var(--vlz-header-cta-height-desktop);
		padding-inline: 26px;
		font-size: 0.9375rem;
	}

	.vlz-header__drawer-head {
		display: none;
	}

	/* The drawer stops being a drawer and becomes an ordinary row cell. */
	.vlz-header__drawer {
		position: static;
		order: 2;
		z-index: auto;
		inline-size: auto;
		block-size: auto;
		flex: 1 1 auto;
		padding-block: 0;
		overflow: visible;
		visibility: visible;
		background: none;
		box-shadow: none;
	}

	.vlz-header__scrim {
		display: none;
	}

	.vlz-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--vlz-space-lg);
	}

	.vlz-nav__item {
		position: static;
	}

	/*
	 * Batch 2 (2026-10-15 Desktop Header Typography): GeneratePress' own
	 * global control reset - 'button:not(.menu-toggle), html input[type=
	 * "button"], input[type="reset"], input[type="submit"], .button,
	 * .wp-block-button .wp-block-button__link { font-size: 19px; }' in
	 * main.min.css - has specificity (0,1,1), one level above this rule's
	 * (0,1,0). Measured live: every BUTTON-based trigger (من نحن/تحسين
	 * محركات البحث/التسويق الرقمي/التصميم والبرمجة) rendered GP's 19px/700
	 * instead of this rule's 14px, while المدونة (a plain <a>, matched by
	 * .vlz-nav__link only, never by GP's button selector) rendered correctly
	 * - the exact "المدونة looks different" symptom reported by the Owner.
	 * '.vlz-nav__trigger.vlz-nav__trigger' repeats the SAME existing class to
	 * reach specificity (0,2,0), the identical ancestor-free double-class
	 * technique already documented and used in Section 6 above for the same
	 * GeneratePress button-reset conflict - no !important, no new selector,
	 * no ancestor scoping. Scoped to this desktop (>=1280px) rule only; the
	 * base/drawer rule in Section 6 is untouched, so Mobile Menu is unaffected.
	 */
	.vlz-nav__link,
	.vlz-nav__trigger.vlz-nav__trigger {
		inline-size: auto;
		min-block-size: var(--vlz-header-item-height);
		padding-inline: 0;
		font-size: 0.875rem;
		font-weight: var(--vlz-weight-semibold);
		white-space: nowrap;
	}

	.vlz-nav__caret {
		font-size: 0.75rem;
	}

	/* Panel: absolute, full bar width, below the row. */
	.vlz-panel {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		z-index: var(--vlz-header-z);
		background-color: var(--vlz-header-panel-bg);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.vlz-panel__inner {
		display: grid;
		grid-template-columns: repeat(var(--vlz-panel-cols, 3), minmax(0, 1fr));
		align-items: stretch;
	}

	.vlz-panel__col {
		padding: var(--vlz-header-col-padding);
	}

	.vlz-panel__col--posts {
		padding: var(--vlz-header-col-padding-posts);
	}

	.vlz-panel__heading {
		padding-block: 0 var(--vlz-space-sm);
		font-size: 1.125rem;
	}

	.vlz-panel__links a {
		padding-block: 7px;
		line-height: 1.25;
	}

	/* Same card, roomier — still an article card, still not a button. */
	.vlz-panel__posts a {
		padding: 18px 20px;
		font-size: 0.8125rem;
	}

	.vlz-panel__col--promo .vlz-panel__heading {
		justify-content: center;
		font-size: 1.5rem;
	}

	.vlz-panel__promo-body {
		font-size: 1.0625rem;
		text-align: justify;
	}

	.vlz-panel__promo-button {
		padding: var(--vlz-space-sm) var(--vlz-space-2xl);
		font-size: 1rem;
	}
}

/* -------------------------------------------------------------------------
 * 9. Body scroll lock (drawer is a modal surface below the breakpoint)
 * ---------------------------------------------------------------------- */

.vlz-scroll-locked,
.vlz-scroll-locked body {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 10. No-JS fallback — nothing may become unreachable without JavaScript
 * ---------------------------------------------------------------------- */

.vlz-header.no-js .vlz-header__toggle,
.vlz-header.no-js .vlz-header__drawer-head {
	display: none;
}

.vlz-header.no-js .vlz-header__drawer {
	position: static;
	inset-inline-start: auto;
	inline-size: auto;
	block-size: auto;
	visibility: visible;
	box-shadow: none;
}

.vlz-header.no-js .vlz-panel[hidden],
.vlz-header.no-js .vlz-panel__body[hidden] {
	display: block;
}

/* -------------------------------------------------------------------------
 * 11. Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	.vlz-header__cta {
		transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	}

	.vlz-header__drawer {
		transition: inset-inline-start 250ms ease, visibility 0s linear 250ms;
	}

	.vlz-header.is-drawer-open .vlz-header__drawer {
		transition: inset-inline-start 250ms ease, visibility 0s linear 0s;
	}

	.vlz-nav__caret {
		transition: transform 200ms ease;
	}

	@media (min-width: 1280px) {

		.vlz-panel {
			animation: vlz-panel-in 200ms ease both;
		}
	}
}

@keyframes vlz-panel-in {

	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}