/* =========================================================================
   Produkta Volvo Cars Mbombela — site header
   -------------------------------------------------------------------------
   Unlayered and scoped to .pv-header. Volvo's own @layer structure is
   deliberately NOT reproduced: unlayered CSS beats layered CSS, and Astra and
   Elementor both ship unlayered.

   SPECIFICITY RULE FOR THIS FILE
   The element reset below is .pv-header button / .pv-header a, which is
   (0,1,1). Every component rule therefore carries the .pv-header prefix to
   reach (0,2,0) and beat it. Dropping that prefix on a rule that styles a
   <button> silently reverts it to the reset: that is what made the root menu
   render at 16px with no padding in 1.0.

   Volvo's private tokens (--_vb4469f and friends) are build-mangled and rotate
   on every deploy. Everything below is re-implemented from the published token
   values under a --pv- prefix.

   [CONFIRM] font family string. tokens_64c4f99b.css declares "Volvo Centum" as
   --v-font-sans-family, but the project setup document refers to Volvo Novum.
   Both are listed so the header renders either way. Open the child theme
   @font-face block, check which family name is actually declared, delete the
   other. If neither matches, the header silently falls back to Helvetica and
   the whole CI read is wrong.
   ========================================================================= */

.pv-header {

	/* Colour */
	--pv-fg: #000;
	--pv-fg-secondary: #5e5e5e;
	--pv-fg-inverted: #fff;
	--pv-bg: #fff;
	--pv-bg-secondary: #fafafa;
	--pv-surface-neutral: #000;
	--pv-ornament: #0000001f;

	/* Interaction state overlays, light mode */
	--pv-state-hover: 4%;
	--pv-state-active: 12%;

	/* Space */
	--pv-4: .25rem;
	--pv-8: .5rem;
	--pv-12: .75rem;
	--pv-16: 1rem;
	--pv-24: 1.5rem;
	--pv-32: 2rem;
	--pv-48: 3rem;

	--pv-pagemargin: clamp(1rem, 4.286vw - .286rem, 4rem);
	--pv-gutter: clamp(1rem, 1.429vw + .571rem, 2rem);
	--pv-inset: clamp(1.5rem, .8vw + 1.1rem, 1.75rem);

	/* Type */
	--pv-font-sans: "Volvo Centum", "Volvo Novum", "Helvetica Neue", Helvetica, "Noto Sans", "Segoe UI", Arial, sans-serif;
	--pv-heading-2: clamp(1.5rem, .714vw + 1.286rem, 2rem);

	/* Motion */
	--pv-dur: .22s;
	--pv-dur-micro: .11s;
	--pv-ease-entrance: cubic-bezier(0, 0, .1, 1);
	--pv-ease-exit: cubic-bezier(.9, 0, 1, 1);

	/* Layout */
	--pv-bar-h: 3rem;
	--pv-admin-offset: 0px;
	--pv-car-media: 8.5rem;
	--pv-z: 10;
}

/* Volvo rounds fluid space to a 2px grid. Progressive: browsers without
   round() keep the plain clamp above. */
@supports (width: round(1px, 1px)) {

	.pv-header {
		--pv-pagemargin: round(clamp(1rem, 4.286vw - .286rem, 4rem), 2px);
		--pv-gutter: round(clamp(1rem, 1.429vw + .571rem, 2rem), 2px);
	}
}

/* -------------------------------------------------------------------------
   Reset. (0,1,1), beating Astra's bare element selectors and tying with
   .ast-* element selectors, where source order wins because this sheet is
   enqueued after astra-theme-css.
   ---------------------------------------------------------------------- */

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

.pv-header button {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-align: inherit;
	line-height: inherit;
	border-radius: 0;
	box-shadow: none;
	width: auto;
	min-width: 0;
	min-height: 0;
	cursor: pointer;
}

.pv-header a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	background: none;
}

.pv-header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-header li {
	margin: 0;
	padding: 0;
}

.pv-header p {
	margin: 0;
}

.pv-header img,
.pv-header svg {
	display: block;
	max-width: 100%;
}

.pv-header .pv-icon {
	flex: 0 0 auto;
}

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

/* Focus. Volvo uses one treatment everywhere, nothing else. */
.pv-header :focus-visible {
	outline: 2px solid var(--pv-fg);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Bar
   ---------------------------------------------------------------------- */

.pv-header {
	position: sticky;
	top: var(--pv-admin-offset);
	z-index: var(--pv-z);
	background-color: var(--pv-bg);
	color: var(--pv-fg);
	font-family: var(--pv-font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.admin-bar .pv-header {
	--pv-admin-offset: 32px;
}

/* Below 782px the WordPress admin bar is absolutely positioned and scrolls
   away, so the offset must go. */
@media screen and (max-width: 782px) {

	.admin-bar .pv-header {
		--pv-admin-offset: 0px;
	}
}

.pv-header .pv-bar {
	display: flex;
	align-items: center;
	padding-inline: var(--pv-24);
	border-block-end: 1px solid var(--pv-ornament);
	background-color: var(--pv-bg);
}

.pv-header .pv-bar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: 100%;
	min-height: var(--pv-bar-h);
	max-height: var(--pv-bar-h);
}

.pv-header .pv-bar__start {
	display: flex;
	align-items: center;
	gap: var(--pv-8);
	min-width: 0;
	grid-column: 1;
}

.pv-header .pv-bar__centre {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline: var(--pv-24);
	grid-column: 2;
}

.pv-header .pv-bar__end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--pv-8);
	min-width: 0;
	grid-column: 3;
}

/* Menu toggles. Text below 64rem, icon above, exactly as volvocars.com. */
.pv-header .pv-bar__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1.5;
	white-space: nowrap;
	transition: background-color var(--pv-dur) ease;
}

.pv-header .pv-bar__menu--text {
	padding-block: var(--pv-8);
}

.pv-header .pv-bar__menu--icon {
	display: none;
	padding: var(--pv-8);
}

.pv-header .pv-bar__sections {
	display: none;
}

.pv-header .pv-bar__section {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding-inline: var(--pv-8);
	font-size: 1rem;
	line-height: 1.5;
	white-space: nowrap;
	transition: background-color var(--pv-dur) ease;
}

.pv-header .pv-bar__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--pv-8);
	height: 2.5rem;
	padding-inline: var(--pv-8);
	border-radius: 9999px;
	transition: background-color var(--pv-dur) ease;
}

.pv-header .pv-bar__tel-text {
	display: none;
}

.pv-header .pv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	min-width: max-content;
	padding-inline: var(--pv-24);
	border-radius: 9999px;
	background-color: var(--pv-surface-neutral);
	color: var(--pv-fg-inverted);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	transition: background-color var(--pv-dur) ease;
}

/* Bar CTA. It is also a .pv-btn, and .pv-btn sets display at the same
   specificity, so this rule must stay below it or the button shows at every
   width. Below 64rem the bar carries the phone icon only; the 64rem block
   brings the CTA back. */
.pv-header .pv-bar__cta {
	display: none;
}

/* Wordmark. Volvo masks the SVG and paints it with currentColor so it inverts
   on dark surfaces without a second asset. The <img> itself is pushed out of
   frame; only the mask renders. */
.pv-header .pv-wordmark {
	--pv-wordmark-h: .5rem;

	width: calc(var(--pv-wordmark-h) * 13);
	min-width: calc(var(--pv-wordmark-h) * 13);
	height: var(--pv-wordmark-h);
	min-height: var(--pv-wordmark-h);
	background-color: currentColor;
	object-position: 0 -999px;
	-webkit-mask-image: var(--pv-mask);
	mask-image: var(--pv-mask);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	user-select: none;
}

/* Dealer line under the word mark, 1.2 (07 Oct 2026). volvocars.com/za has no
   precedent: its header carries the word mark alone. Set as Volvo's primary
   plus secondary text pairing: Volvo's smallest body size in the secondary
   foreground, centred under the mark, with clear space equal to the mark's
   height (8px) from the foot of the mark to the top of the capitals.

   The modifier is printed only while the line is shown (PV_HEADER_DEALER_LIVE
   or an admin), so the bar is untouched without it. Below 30rem the centre's
   side padding drops to 8px so the wider logo still clears the Menu and phone
   buttons at 320px. The mask is centred in its 104px box so the line centres
   on the visible mark, not the box. */
.pv-header .pv-bar__centre--dealer {
	padding-inline: var(--pv-8);
}

.pv-header .pv-bar__centre--dealer .pv-bar__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pv-header .pv-bar__centre--dealer .pv-wordmark {
	-webkit-mask-position: center;
	mask-position: center;
}

/* Volvo Novum: ascent .98em, descent .22em, cap height .688em. In a 16px line
   box the cap top sits 4.3px below the box, so 3.7px of margin makes the 8px
   gap. The negative bottom margin trims the 3.4px under the baseline (the
   line has no descenders), so the bar centres the mark-to-baseline group. */
.pv-header .pv-bar__dealer {
	display: block;
	margin-block: .23rem -.215rem;
	font-size: .75rem;
	font-weight: 400;
	line-height: 1rem;
	color: var(--pv-fg-secondary);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Panel. A modal <dialog>, so it renders in the top layer and cannot be
   trapped, clipped or out-z-indexed by Astra or Elementor. Escape, focus trap
   and inertness of the page behind it are native.
   ---------------------------------------------------------------------- */

.pv-header .pv-nav {
	position: fixed;
	inset-block-start: calc(var(--pv-bar-h) + var(--pv-admin-offset));
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--pv-bg);
	color: var(--pv-fg);
	font-family: var(--pv-font-sans);
	font-size: 1rem;
	line-height: 1.5;
	overflow: clip;
	overscroll-behavior: contain;
	flex-direction: column;

	/* Closed state. Below 30rem the sheet rises from the bottom, at 30rem and
	   above it slides in from the inline start. Both are Volvo's values. */
	opacity: 0;
	translate: 0 min(100%, 50vh);
	transition:
		opacity var(--pv-dur) var(--pv-ease-exit),
		translate var(--pv-dur) var(--pv-ease-exit),
		display var(--pv-dur) allow-discrete,
		overlay var(--pv-dur) allow-discrete;
}

.pv-header .pv-nav[open] {
	display: flex;
	opacity: 1;
	translate: 0 0;
	transition-timing-function: var(--pv-ease-entrance);
}

@starting-style {

	.pv-header .pv-nav[open] {
		opacity: 0;
		translate: 0 min(100%, 50vh);
	}
}

/* ::backdrop does not reliably inherit custom properties from the originating
   element across engines, so the scrim value is written literally. It is
   Volvo's --v-color-ornament-scrim. */
.pv-header .pv-nav::backdrop {
	background-color: #171717a3;
	opacity: 0;
	transition:
		opacity var(--pv-dur) linear,
		display var(--pv-dur) allow-discrete,
		overlay var(--pv-dur) allow-discrete;
}

.pv-header .pv-nav[open]::backdrop {
	opacity: 1;
}

@starting-style {

	.pv-header .pv-nav[open]::backdrop {
		opacity: 0;
	}
}

.pv-header .pv-nav__head {
	display: grid;
	grid-template-columns: var(--pv-24) 1fr auto 1fr var(--pv-24);
	align-items: center;
	min-height: var(--pv-bar-h);
	padding-block: var(--pv-12);
	text-align: center;
	flex: 0 0 auto;
}

.pv-header .pv-nav__back,
.pv-header .pv-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	transition: background-color var(--pv-dur) ease;
}

.pv-header .pv-nav__back {
	grid-column: 2;
	justify-self: start;
	margin-inline-start: calc(var(--pv-12) * -1);
}

.pv-header .pv-nav__back[hidden] {
	display: none;
}

.pv-header .pv-nav__title {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pv-8);
	min-width: 0;
}

.pv-header .pv-nav__title-text {
	font-size: 1rem;
	line-height: 1.5;
}

.pv-header .pv-nav__title-text[hidden],
.pv-header .pv-nav__title .pv-wordmark[hidden] {
	display: none;
}

.pv-header .pv-nav__close {
	grid-column: 4;
	justify-self: end;
	margin-inline-end: calc(var(--pv-12) * -1);
}

.pv-header .pv-nav__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.pv-header .pv-nav__panel {
	padding-inline: var(--pv-16);
	padding-block: var(--pv-16) var(--pv-32);
}

.pv-header .pv-nav__panel[hidden] {
	display: none;
}

/* Only surfaced in the no-JS and no-dialog fallbacks. */
.pv-header .pv-nav__panel-title {
	display: none;
}

/* Large rows */
.pv-header .pv-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pv-16);
	width: 100%;
	padding-block: var(--pv-24);
	padding-inline: var(--pv-8);
	border-block-end: 1px solid var(--pv-ornament);
	font-size: var(--pv-heading-2);
	font-weight: 400;
	line-height: calc(1em + .5rem);
	text-align: start;
	text-wrap: balance;
	transition: background-color var(--pv-dur) ease;
}

.pv-header .pv-nav__row .pv-icon {
	transition: translate var(--pv-dur) ease;
}

/* Car rows. Sized from volvocars.com/za: thumbnail is roughly a third of the
   panel width, model name is 20px at weight 600, supporting lines 16px. */
.pv-header .pv-nav__group + .pv-nav__group {
	margin-block-start: var(--pv-32);
}

.pv-header .pv-nav__group-label {
	padding-inline: var(--pv-8);
	padding-block-end: var(--pv-8);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.pv-header .pv-nav__car {
	display: flex;
	align-items: center;
	gap: var(--pv-8);
	width: 100%;
	padding-block: var(--pv-4);
	padding-inline-end: var(--pv-8);
	border-block-end: 1px solid var(--pv-ornament);
	text-align: start;
	transition: background-color var(--pv-dur) ease;
}

.pv-header .pv-nav__car-media {
	display: block;
	flex: 0 0 var(--pv-car-media);
	width: var(--pv-car-media);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.pv-header .pv-nav__car-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: scale var(--pv-dur) ease;
}

.pv-header .pv-nav__car-text {
	flex: 1 1 auto;
	min-width: 0;
	padding-block: var(--pv-16);
	padding-inline-start: var(--pv-8);
}

.pv-header .pv-nav__car-flag {
	display: block;
	padding-block-end: var(--pv-4);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.pv-header .pv-nav__car-name {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
}

.pv-header .pv-nav__car-price {
	display: block;
	padding-block-start: var(--pv-4);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.pv-header .pv-nav__car-chevron {
	flex: 0 0 auto;
	display: flex;
}

/* Small links */
.pv-header .pv-nav__links {
	margin-block-start: var(--pv-32);
}

.pv-header .pv-link {
	display: flex;
	align-items: center;
	gap: var(--pv-8);
	min-height: 2.5rem;
	font-size: 1rem;
	line-height: 1.5;
	text-underline-offset: .125em;
}

.pv-header .pv-link .pv-icon--ext {
	opacity: .7;
}

/* Panel foot. Carries the actions that only live in the bar from 64rem up. */
.pv-header .pv-nav__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pv-16);
	padding-inline: var(--pv-16);
	padding-block: 0 var(--pv-32);
}

/* -------------------------------------------------------------------------
   Hover and active. Gated behind (hover: hover) so touch devices never get a
   stuck hover state, which is how Volvo ships it.
   ---------------------------------------------------------------------- */

@media (hover: hover) {

	.pv-header .pv-bar__menu:hover,
	.pv-header .pv-bar__section:hover,
	.pv-header .pv-bar__tel:hover,
	.pv-header .pv-nav__back:hover,
	.pv-header .pv-nav__close:hover,
	.pv-header .pv-nav__row:hover,
	.pv-header .pv-nav__car:hover {
		background-color: color-mix(in lab, var(--pv-bg), var(--pv-fg) var(--pv-state-hover));
	}

	.pv-header .pv-nav__car:hover .pv-nav__car-media img {
		scale: 1.06;
	}

	.pv-header .pv-nav__row:hover .pv-icon {
		translate: var(--pv-4) 0;
	}

	.pv-header .pv-link:hover {
		text-decoration-line: underline;
		text-decoration-thickness: .125em;
		text-decoration-skip-ink: none;
	}

	.pv-header .pv-btn:hover {
		background-color: color-mix(in hsl, var(--pv-surface-neutral), var(--pv-fg-inverted) var(--pv-state-active));
	}
}

.pv-header .pv-bar__menu:active,
.pv-header .pv-bar__section:active,
.pv-header .pv-bar__tel:active,
.pv-header .pv-nav__back:active,
.pv-header .pv-nav__close:active,
.pv-header .pv-nav__row:active,
.pv-header .pv-nav__car:active {
	background-color: color-mix(in lab, var(--pv-bg), var(--pv-fg) var(--pv-state-active));
}

.pv-header .pv-btn:active {
	background-color: color-mix(in hsl, var(--pv-surface-neutral), var(--pv-fg-inverted) 20%);
}

/* Open section keeps a persistent surface, matching volvocars.com. */
.pv-header .pv-bar__section[aria-expanded="true"],
.pv-header .pv-bar__menu[aria-expanded="true"] {
	background-color: color-mix(in lab, var(--pv-bg), var(--pv-fg) var(--pv-state-hover));
}

/* -------------------------------------------------------------------------
   30rem / 480px
   ---------------------------------------------------------------------- */

@media (width >= 30rem) {

	.pv-header {
		--pv-bar-h: 4rem;
	}

	.pv-header .pv-bar {
		padding-inline: 0;
		border-block-end: 0;
	}

	.pv-header .pv-bar__inner {
		max-width: min(calc(100% - var(--pv-pagemargin) * 2), 160rem);
		margin-inline: auto;
	}

	.pv-header .pv-bar__centre--dealer {
		padding-inline: var(--pv-24);
	}

	.pv-header .pv-nav {
		translate: -80% 0;
	}

	@starting-style {

		.pv-header .pv-nav[open] {
			translate: -80% 0;
		}
	}

	.pv-header .pv-nav__panel,
	.pv-header .pv-nav__foot {
		padding-inline: var(--pv-48);
	}
}

/* -------------------------------------------------------------------------
   64rem / 1024px
   ---------------------------------------------------------------------- */

@media (width >= 64rem) {

	.pv-header .pv-bar__menu--text {
		display: none;
	}

	.pv-header .pv-bar__menu--icon {
		display: inline-flex;
	}

	/* Volvo's own overflow mechanism: the row wraps, and anything on a second
	   line is clipped. Items drop from the end as the viewport narrows, and
	   everything stays reachable through the menu button. Raise this media
	   query to 100rem if all-or-nothing is preferred. */
	.pv-header .pv-bar__sections {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pv-16);
		max-height: 2.5rem;
		overflow: hidden;
	}

	.pv-header .pv-bar__tel-text {
		display: inline;
	}

	.pv-header .pv-bar__cta {
		display: inline-flex;
		margin-inline-start: var(--pv-8);
	}

	.pv-header .pv-nav__foot {
		display: none;
	}

	.pv-header .pv-nav {
		inset-block-start: 0;
		width: min(
			calc(
				(
					(min(81rem, 100vw - var(--pv-inset) * 2) - var(--pv-gutter) * 11) / 12 * 6
				) + var(--pv-gutter) * 5
			),
			calc(100vw - 3rem)
		);
	}
}

/* -------------------------------------------------------------------------
   Scroll lock. The only rule outside the wrapper. Namespaced so it cannot
   collide, and only live while the panel is open.
   ---------------------------------------------------------------------- */

html.pv-locked {
	overflow: hidden;
	padding-inline-end: var(--pv-sbw, 0px);
}

/* -------------------------------------------------------------------------
   Fallback: dialog unsupported. The panel flattens into a static list so the
   navigation still works. The no-JS equivalent is printed from wp_head.
   ---------------------------------------------------------------------- */

.pv-header:has(.pv-nav--static) {
	position: static;
}

.pv-header .pv-nav--static {
	position: static;
	inset: auto;
	width: auto;
	max-width: none;
	height: auto;
	opacity: 1;
	translate: none;
	border-block-end: 1px solid var(--pv-ornament);
}

.pv-header .pv-nav--static .pv-nav__head {
	display: none;
}

.pv-header .pv-nav--static [data-pv-panel][hidden] {
	display: block;
}

.pv-header .pv-nav--static [data-pv-go] {
	display: none;
}

.pv-header .pv-nav--static .pv-nav__panel-title {
	display: block;
	padding-block: var(--pv-24) var(--pv-8);
	font-size: 1.25rem;
	font-weight: 600;
}

.pv-header:has(.pv-nav--static) .pv-bar__menu,
.pv-header:has(.pv-nav--static) .pv-bar__section--panel {
	display: none;
}

/* -------------------------------------------------------------------------
   Reduced motion. Volvo collapses the duration tokens and then kills
   transitions outright. Both, scoped.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.pv-header {
		--pv-dur: .05s;
		--pv-dur-micro: .025s;
	}

	.pv-header,
	.pv-header *,
	.pv-header *::before,
	.pv-header *::after,
	.pv-header .pv-nav,
	.pv-header .pv-nav *,
	.pv-header .pv-nav::backdrop {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   Forced colours. The masked wordmark has no pixels of its own, so it
   disappears in forced-colors mode unless the mask is dropped.
   ---------------------------------------------------------------------- */

@media (forced-colors: active) {

	.pv-header .pv-wordmark {
		-webkit-mask-image: none;
		mask-image: none;
		object-position: 0 0;
		background-color: transparent;
	}

	.pv-header .pv-nav {
		border-inline-end: 1px solid CanvasText;
	}
}