/**
 * Nav styles — Homepage
 *
 * Sticky navigation bar with three zones:
 *   Left (200px fixed)   — Logo wordmark
 *   Center (flex: 1)     — Desktop nav links
 *   Right (200px fixed)  — Contact CTA + burger
 *
 * Mobile (≤ 960px): links and CTA hidden, burger shown,
 * full-screen overlay nav with staggered fade-in animation.
 *
 * Burger: three <span> child lines that animate to an X when open.
 * Close button: two <span> lines forming an X, top-right of overlay.
 *
 * @package parfumsabsoluta
 * @since   1.0.0
 */


/* ================================================================
   NAV HEIGHT — single source of truth
   ================================================================
   Consumed by the archive toolbar and the boutique filter bar (sticky at
   top: var(--pa-nav-h)), and by every full-height surface that sizes itself
   as calc(100svh - var(--pa-nav-h)) — home, contact, 404 — plus the
   Notre Histoire timeline's sticky offset.
   These values are MEASURED from the rendered nav, not derived. Height is
   driven by the vertical padding plus the tallest control in the right
   zone, plus the 0.5px bottom border (which computes to 1px):
     Desktop: 18 + 18 padding + 31px .pa-nav__cta  + 1px border = 68px
     Mobile:  16 + 16 padding + 28px .pa-nav__burger + 1px border = 61px
   The logo (26px) is NOT the tallest child and does not set the height.
   If you change the CTA, the burger, the padding or the border, re-measure
   .pa-nav at 1440 and 375 and update both values here. Edit here only.
   ================================================================ */

:root {
	--pa-nav-h: 68px;
}

@media (max-width: 960px) {
	:root {
		--pa-nav-h: 61px;
	}
}


/* ================================================================
   DESKTOP NAV BAR
   ================================================================ */

.pa-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Gutters ease with the viewport. At a flat 52px the desktop nav needed
	   1059px but only had 947px at 962px, so it overflowed every page by 61px
	   between the 960px collapse and roughly 1007px. Every clamp in this file
	   returns to its original value at 1280px, so wide desktop is untouched. */
	padding: 18px clamp(24px, 4.06vw, 52px);
	border-bottom: 0.5px solid rgba(var(--color-accent-rgb), 0.14);
	position: sticky;
	top: 0;
	background: rgba(var(--color-primary-rgb), 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 100;
}


/* ── Logo ── */

/* Image wordmark (inscription variant, intrinsic 880x121 ≈ 7.3:1).
   26px height is a visual choice, not a height contract: the right zone's
   CTA (31px) is taller and is what sets --pa-nav-h. See the NAV HEIGHT
   block above. The old 200px reserved width stays so the centered links
   zone is unchanged. */
.pa-nav__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
	/* The wordmark is 189px wide and is deliberately NOT scaled, so this floor
	   sits just above it. */
	width: clamp(190px, 15.6vw, 200px);
}

.pa-nav__logo-img {
	display: block;
	height: 26px;
	width: auto;
}


/* ── Desktop nav links — centered ── */

.pa-nav__links {
	flex: 1;
	display: flex;
	justify-content: center;
}

.pa-nav__links ul {
	display: flex;
	gap: clamp(16px, 2.19vw, 28px);
	list-style: none;
	align-items: center;
	margin: 0;
	padding: 0;
}

.pa-nav__links a {
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: clamp(1.5px, 0.195vw, 2.5px);
	text-transform: uppercase;
	color: var(--color-neutral);
	text-decoration: none;
	opacity: 0.6;
	transition: opacity var(--transition-base), color var(--transition-base);
}

.pa-nav__links a:hover,
.pa-nav__links a:focus-visible {
	opacity: 1;
	color: var(--color-accent);
}


/* Professionnels — permanent gold highlight */

.pa-nav__pro {
	color: var(--color-accent) !important;
	opacity: 1 !important;
	padding: 7px 14px;
	border: 0.5px solid rgba(var(--color-accent-rgb), 0.35);
	font-weight: 500 !important;
	transition: background var(--transition-base) !important;
}

.pa-nav__pro:hover,
.pa-nav__pro:focus-visible {
	background: rgba(var(--color-accent-rgb), 0.1);
}


/* ── Right zone ── */

.pa-nav__right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
	/* Content here is only 136px (cart + gap + CTA); the rest was symmetry
	   padding. Eases to 150px at 962px so the links fit, and is back to 200px
	   from 1282px up. */
	width: clamp(150px, 15.6vw, 200px);
	justify-content: flex-end;
}


/* Contact CTA */

.pa-nav__cta {
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 9px 20px;
	border: 0.5px solid var(--color-accent);
	color: var(--color-accent);
	background: transparent;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--transition-base), color var(--transition-base);
}

.pa-nav__cta:hover,
.pa-nav__cta:focus-visible {
	background: var(--color-accent);
	color: var(--color-primary);
}

/* Current page — the CTA sits outside .pa-nav__links, so the shared
   is-active rule at the foot of this file does not reach it. Filled
   rather than underlined: it is a button, and the fill already reads
   as "here" from the hover state. */
.pa-nav__cta.is-active {
	background: var(--color-accent);
	color: var(--color-primary);
}


/* ================================================================
   BURGER BUTTON — mobile only
   Three horizontal lines that animate to an X.
   ================================================================ */

.pa-nav__burger {
	display: none; /* shown at ≤ 960px */
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pa-nav__burger-line {
	display: block;
	width: 22px;
	height: 1px;
	background-color: var(--color-neutral);
	transition: transform var(--transition-slow), opacity var(--transition-slow);
	pointer-events: none;
}

/* Animated state — set via JS class on <button> */
.pa-nav__burger.is-active .pa-nav__burger-line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.pa-nav__burger.is-active .pa-nav__burger-line:nth-child(2) {
	opacity: 0;
}

.pa-nav__burger.is-active .pa-nav__burger-line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}


/* ================================================================
   MOBILE OVERLAY
   Full-screen, dark background, centered links.
   ================================================================ */

.pa-nav__mobile {
	position: fixed;
	inset: 0;
	background: var(--color-primary);
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* `safe` centre, not plain centre. In portrait the list fits and this
	   behaves identically. In LANDSCAPE it does not fit — measured 439px of
	   content in a 375px viewport — and plain centring overflows equally in
	   both directions, putting the first items above the top edge where no
	   scrolling can ever reach them. `safe` falls back to flex-start the
	   moment it overflows, so overflow-y below can actually get at it. */
	justify-content: safe center;
	overflow-y: auto;
	overscroll-behavior: contain;
	gap: 48px;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

/* Landscape phones: the full-height rhythm does not fit in ~375px of height.
   Tightening the gap and padding gets the whole list back on screen without
   needing to scroll at all on most handsets. */
@media (max-width: 960px) and (orientation: landscape) {
	.pa-nav__mobile {
		gap: 20px;
		padding: 64px 24px 28px;
	}
}

.pa-nav__mobile.is-open {
	opacity: 1;
	visibility: visible;
}


/* Close button — X in top-right corner */

.pa-nav__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pa-nav__close-line {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 1px;
	background-color: var(--color-neutral);
	pointer-events: none;
}

.pa-nav__close-line:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.pa-nav__close-line:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}


/* Mobile nav links */

.pa-nav__mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
	text-align: center;
}

.pa-nav__mobile li {
	opacity: 0;
	transform: translateY(12px);
}

.pa-nav__mobile.is-open li {
	animation: pa-nav-fade-in 0.4s ease forwards;
}

.pa-nav__mobile.is-open li:nth-child(1) { animation-delay: 0.05s; }
.pa-nav__mobile.is-open li:nth-child(2) { animation-delay: 0.10s; }
.pa-nav__mobile.is-open li:nth-child(3) { animation-delay: 0.15s; }
.pa-nav__mobile.is-open li:nth-child(4) { animation-delay: 0.20s; }
.pa-nav__mobile.is-open li:nth-child(5) { animation-delay: 0.25s; }
.pa-nav__mobile.is-open li:nth-child(6) { animation-delay: 0.30s; }

.pa-nav__mobile a {
	font-family: var(--font-display);
	font-size: clamp(24px, 5vw, 36px);
	font-weight: 300;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-neutral);
	text-decoration: none;
	transition: color var(--transition-base);
}

.pa-nav__mobile a:hover,
.pa-nav__mobile a:focus-visible {
	color: var(--color-accent);
}


/* Tagline at bottom of mobile overlay */

.pa-nav__mobile-tagline {
	font-family: var(--font-display);
	font-size: 13px;
	font-style: italic;
	font-weight: 300;
	letter-spacing: 1px;
	color: var(--color-muted);
	opacity: 0;
}

.pa-nav__mobile.is-open .pa-nav__mobile-tagline {
	animation: pa-nav-fade-in 0.4s ease 0.35s forwards;
}


/* ── Staggered fade-in keyframes ── */

@keyframes pa-nav-fade-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ================================================================
   RESPONSIVE — ≤ 960px (tablet + mobile)
   Nav collapses to burger at 960px to prevent link wrapping
   on devices like iPad 10th gen (820px) and Galaxy Tab S9 (800px).
   ================================================================ */

@media (max-width: 960px) {

	.pa-nav {
		padding: 16px 24px;
	}

	/* Shrink logo fixed width */
	.pa-nav__logo {
		width: auto;
	}

	/* Hide desktop-only elements */
	.pa-nav__links,
	.pa-nav__cta {
		display: none;
	}

	/* Auto-size right zone */
	.pa-nav__right {
		width: auto;
	}

	/* Show burger */
	.pa-nav__burger {
		display: flex;
	}
}


/* ================================================================
   CART ICON
   ================================================================ */

.pa-nav__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-neutral);
	text-decoration: none;
	transition: color var(--transition-base), opacity var(--transition-base);
}

.pa-nav__cart-icon {
	display: block;
}

.pa-nav__cart {
	position: relative;
}

.pa-nav__cart-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: 8px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}


/* ================================================================
   NAV ACTIVE STATE
   ================================================================
   Marks the currently-active top-level nav link with a gold
   underline indicator. Applied via pa_nav_active_class() helper
   (inc/template-helpers.php).

   Works in both desktop .pa-nav__links and mobile .pa-nav__mobile
   overlay (selector is global, not nested).
   ================================================================ */

.pa-nav__links a.is-active,
.pa-nav__mobile a.is-active {
	color: var(--color-accent);
	position: relative;
}

.pa-nav__links a.is-active::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-accent);
}