/* =====================================================================
   header.css — the floating pill nav.

   Every number here is measured off Figma node 175:3070, not estimated:
     pill   1550 x 86 at y=22, radius 100, inner padding 41
     menu   gap exactly 42px
     CTA    159 x 58, 32px horizontal padding
   The three groups sit at equal 180.9px gaps, so space-between is exact and
   no explicit widths are needed.
   ===================================================================== */

/* `fixed`, not `absolute`: the client's animation reference keeps the pill docked
   at the top of the viewport for the whole scroll (TASK-BRIEF.md §3), and the nav
   was already out of flow so nothing reflows. Anchor-scroll offset for the fixed
   bar lives once on `html { scroll-padding-block-start }` in global.css. */
.dk-nav {
	position: fixed;
	inset-block-start: 22px;
	inset-inline: 0;
	z-index: 1030;
	padding-inline: 185px;
	transition: inset-block-start .3s ease;
}

/* Docked state, added by initStickyNav() past 40px of scroll. Derived — the comp
   has no scrolled frame to copy — so it stays deliberately small: pull the pill
   a little closer to the edge and deepen its shadow so it reads as sitting above
   the page rather than floating in the hero. */
.dk-nav.is-stuck {
	inset-block-start: 12px;
}

.dk-nav.is-stuck .dk-nav__pill {
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

/* Pages without a dark hero behind the nav opt into a solid bar instead, so
   white-on-transparent text never lands on a light background. This variant is
   in flow, so it pins with `sticky` and needs no padding compensation.

   The sticky lives on the wrapping `.site-header--solid`, NOT on `.dk-nav--solid`.
   A sticky element can only travel inside its own parent's box, and `.site-header`
   is exactly nav-height — sticking the nav to it gives it 0px of travel, so it
   scrolls away with the header. Verified: it scrolled off at scrollY 215 before
   this was moved up a level. */
.dk-nav--solid {
	position: relative;
	inset-block-start: 0;
	padding-block: 22px;
	background: var(--bg-dark);
	transition: none;
}

.site-header--solid {
	position: sticky;
	inset-block-start: 0;
	z-index: 1030;
}

.dk-nav__pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 86px;
	padding-inline: 40px;
	border: 1px solid var(--line-white-08);
	border-radius: var(--radius-pill);
	background: var(--glass-dark-93);
	box-shadow: var(--shadow-nav);
	backdrop-filter: blur(10px);
}

/* ---------------- brand ---------------- */
.site-brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.site-brand__logo,
.site-brand .custom-logo {
	display: block;
	width: auto;
	height: 60px;
}

/* ---------------- menu ---------------- */
.dk-nav__menu {
	display: flex;
}

.dk-menu {
	display: flex;
	align-items: center;
	gap: 42px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-menu>li {
	position: relative;
}

.dk-menu a {
	display: block;
	font: 500 18px/1.65 var(--font-body);
	letter-spacing: .04em;
	color: var(--text-white);
	transition: color .2s ease;
}

.dk-menu a:hover,
.dk-menu a:focus-visible,
.dk-menu>.current-menu-item>a,
.dk-menu>.current-menu-ancestor>a,
.dk-menu>.current_page_item>a {
	color: var(--gold-primary) !important;
}

/* Dropdown indicator. Drawn as a rotated border-corner rather than an icon
   font or unicode glyph — same reasoning as .dk-nav__account::before. */
.dk-menu>.menu-item-has-children>a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dk-menu>.menu-item-has-children>a::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}

.dk-menu>.menu-item-has-children:hover>a::after,
.dk-menu>.menu-item-has-children:focus-within>a::after {
	transform: translateY(1px) rotate(225deg);
}

/* Mobile submenu toggle button, injected by global.js next to the top-level
   link — hidden on desktop, where hover/focus-within already reveals the
   dropdown (see below) and no separate control is needed. */
.dk-menu__toggle {
	display: none;
}

/* Second-level dropdown. The comp has no open dropdown to copy, so this is
   derived: same glass treatment as the pill, left-aligned under its parent. */
.dk-menu .sub-menu {
	position: absolute;
	inset-inline-start: -20px;
	inset-block-start: 100%;
	z-index: 10;
	min-width: 230px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	border: 1px solid var(--line-white-08);
	border-radius: var(--radius-md);
	background: var(--glass-dark-93);
	box-shadow: var(--shadow-nav);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.dk-menu>li:hover>.sub-menu,
.dk-menu>li:focus-within>.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(14px);
}

.dk-menu .sub-menu a {
	padding: 9px 20px;
	font-size: 17px;
	color: var(--text-white-75);
}

/* ---------------- actions ---------------- */
.dk-nav__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 0 0 auto;
}

.dk-nav__account {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 400 18px/1.65 var(--font-body);
	color: var(--text-white-82);
	white-space: nowrap;
	transition: color .2s ease;
}

/* The comp draws "◉" before the label — a filled dot inside a ring. Rendered as
   a shape rather than the literal character, which is in neither webfont's
   subset and would silently fall back to a system face. The ring is a box-shadow
   spread rather than a border so the dot stays optically centred. */
.dk-nav__account::before {
	content: "";
	flex: 0 0 5px;
	width: 5px;
	height: 5px;
	margin-inline-end: 3px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 2px transparent, 0 0 0 3.5px currentColor;
}

.dk-nav__account:hover,
.dk-nav__account:focus-visible {
	color: var(--gold-primary);
}

.dk-nav__cta {
	padding: 14px 32px;
	min-height: 58px;
	font-size: 18px;
	white-space: nowrap;
}

/* ---------------- cart ----------------
   The brief replaces the header's "Book Now" with a cart ("On header, where it
   says Book now, it should be cart" — TASK-BRIEF.md §1.1). The designer's updated
   header has not landed yet, so this deliberately occupies the CTA's measured
   slot and inherits `.btn-gold`: the pill's geometry was measured against a
   159x58 gold button in that position, and swapping it for a bare text link
   would shift the whole measured layout for a treatment we are about to be given.

   No icon on purpose. The comp contains no cart glyph to crop, and this build's
   rule is to crop real icons from the export rather than draw substitute SVGs —
   so the label carries it until the real artwork arrives. */
.dk-nav__cart {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	min-height: 58px;
	font-size: 18px;
	white-space: nowrap;
}

.dk-nav__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding-inline: 6px;
	border-radius: var(--radius-pill);
	background: var(--bg-dark);
	color: var(--gold-primary);
	font: 500 14px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
}

/* ---------------- mobile toggler ---------------- */
.dk-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 11px;
	border: 1px solid var(--line-white-12);
	border-radius: 50%;
	background: var(--glass-white-05);
	cursor: pointer;
}

.dk-nav__toggle span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--gold-primary);
	transition: transform .25s ease, opacity .25s ease;
}

.dk-nav__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.dk-nav__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.dk-nav__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------------- responsive ----------------
   Derived, not designed — the comp is desktop-only at 1920. The pill keeps its
   shape down to tablet, then becomes a full-width bar with a drawer, because a
   100px-radius pill containing a stacked menu reads as a mistake.
   ------------------------------------------------------------------ */
@media (max-width: 1599.98px) {
	.dk-nav {
		padding-inline: 60px;
	}

	.dk-menu {
		gap: 30px;
	}
}

@media (max-width: 1399.98px) {
	.dk-nav {
		padding-inline: 32px;
	}

	.dk-nav__pill {
		padding-inline: 26px;
	}

	.dk-menu {
		gap: 22px;
	}

	.dk-menu a {
		font-size: 17px;
	}

	.dk-nav__actions {
		gap: 16px;
	}

	.dk-nav__account {
		font-size: 16px;
	}

	.dk-nav__cta {
		padding: 12px 24px;
	}

	.dk-nav__cart {
		padding: 12px 20px;
		gap: 8px;
	}
}

/* 992-1199: the full menu, account link and cart only fit one row with
   tighter spacing — at 1024 the cart otherwise sat 55px past the viewport. */
@media (max-width: 1199.98px) {
	.dk-nav {
		padding-inline: 16px;
	}

	.dk-nav__pill {
		padding-inline: 18px;
	}

	.dk-menu {
		gap: 14px;
	}

	.dk-menu a {
		font-size: 15px;
	}

	.dk-nav__actions {
		gap: 10px;
	}

	.dk-nav__account {
		font-size: 14px;
	}

	.dk-nav__cart {
		padding: 10px 16px;
	}
}

@media (max-width: 991.98px) {
	.dk-nav {
		padding-inline: 20px;
	}

	.dk-nav__pill {
		flex-wrap: wrap;
		row-gap: 0;
		padding: 14px 20px;
		border-radius: var(--radius-lg);

		/* The nav is fixed, so an open drawer taller than the viewport would be
		   unreachable — the page scrolls underneath it and the pill does not.
		   Six menu items clear a 640px-tall phone today, but the menu is editable
		   and second-level items render in flow at this width, so cap it and let
		   the pill scroll itself. dvh accounts for mobile browser chrome. */
		max-height: calc(100vh - 28px);
		max-height: calc(100dvh - 28px);
		overflow-y: auto;
	}

	.dk-nav__toggle {
		display: flex;
		order: 3;
	}

	.dk-nav__actions {
		order: 2;
		margin-inline-start: auto;
	}

	.dk-nav__account {
		font-size: 15px;
	}

	/* Drawer. Grid-rows trick (0fr -> 1fr) rather than display:none/block, so
	   it slides open/closed instead of snapping — overrides the desktop
	   `display: flex` above, so this has to stay in the same file/media
	   query as that rule rather than in global.css's generic is-open
	   section (dk-header loads after sp-global; a rule there would win the
	   cascade only by accident of specificity). Works here because
	   .dk-nav__menu has exactly one child (.dk-menu) — the single grid
	   item's intrinsic height IS the 1fr track size, and it re-measures
	   live if a nested .sub-menu (below) grows after the drawer has opened.
	   Padding/margin/border ride the same transition so the drawer's chrome
	   eases in together with the height. */
	.dk-nav__menu {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		order: 4;
		width: 100%;
		padding-block: 0;
		margin-block-start: 0;
		border-block-start: 1px solid transparent;
		transition:
			grid-template-rows .3s ease,
			padding-block .3s ease,
			margin-block-start .3s ease,
			border-color .3s ease;
	}

	.dk-nav__menu.is-open {
		grid-template-rows: 1fr;
		padding-block: 18px 6px;
		margin-block-start: 14px;
		border-block-start-color: var(--line-white-08);
	}

	.dk-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
		min-height: 0;
	}

	.dk-menu a {
		padding-block: 10px;
		font-size: 18px;
	}

	/* A hover-revealed dropdown is unreachable on touch — collapsed by default,
	   expanded on tap via .dk-menu__toggle (global.js) rather than shown in
	   flow unconditionally. */
	.dk-menu>.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}

	/* Shrink to the label's width so .dk-menu__toggle sits right after the
	   text instead of being pushed to the far edge — one arrow, not two. Its
	   own ::after (desktop's hover indicator) is redundant with the toggle
	   button's arrow here, so it's hidden below. */
	.dk-menu>.menu-item-has-children>a {
		flex: 0 1 auto;
	}

	.dk-menu>.menu-item-has-children>a::after {
		display: none;
	}

	.dk-menu__toggle {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--text-white-75);
		cursor: pointer;
	}

	.dk-menu__toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		border-inline-end: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}

	.dk-menu>.menu-item-has-children.is-open>.dk-menu__toggle::after {
		transform: rotate(225deg);
	}

	/* max-height rather than display:none/block, so the accordion slides
	   instead of snapping. The 0/open px values are set inline by
	   global.js's initSubmenuToggle (measured off scrollHeight, which reads
	   the true content height even while clipped) — depth is capped at 2 by
	   wp_nav_menu, so there's no further-nested accordion whose growth this
	   would need to react to live, unlike the drawer's grid-fr trick above. */
	.dk-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		overflow: hidden;
		max-height: 0;
		min-width: 0;
		width: 100%;
		padding-inline-start: 16px;
		padding-block-end: 0;
		border: 0;
		background: none;
		box-shadow: none;
		backdrop-filter: none;
		transition: max-height .3s ease, padding-block-end .3s ease;
	}

	.dk-menu>.menu-item-has-children.is-open>.sub-menu {
		padding-block-end: 6px;
	}
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {

	.dk-nav__menu,
	.dk-menu .sub-menu,
	.dk-menu__toggle::after {
		transition: none;
	}
}

@media (max-width: 575.98px) {
	.dk-nav {
		inset-block-start: 14px;
	}

	.site-brand__logo,
	.site-brand .custom-logo {
		height: 46px;
	}

	.dk-nav__cta {
		padding: 11px 20px;
		font-size: 16px;
		min-height: 48px;
	}

	.dk-nav__cart {
		padding: 5px 10px;
		font-size: 14px;
		min-height: 42px;
		gap: 7px;
	}

	.dk-nav__cart-count {
		min-width: 21px;
		height: 21px;
		font-size: 13px;
	}
}

@media (max-width: 460px) {
	.dk-nav__pill {
		gap: 10px;
		align-items: center;
	}

	.dk-nav__toggle {
		gap: 3px;
		width: 35px;
		height: 35px;
	}

	.dk-nav__cart {
		min-height: 35px;
	}

	.site-brand__logo,
	.site-brand .custom-logo {
		height: 35px;
	}
}