/**
 * Shared site header and primary navigation.
 *
 * Scope: the persistent top bar shown on every public page (Figma
 * "Header" component, top row shared by the Default/Breadcrumb/Mobile
 * varieties — node 68:1078 / 72:150 / 188:1028). The page-specific hero
 * area below it (page title, breadcrumb, "Next up" preview) is a later
 * Phase 3 block, not styled here.
 *
 * Mobile-first: base rules are the off-canvas mobile layout; the desktop
 * inline nav takes over at the --ld-bp-desktop breakpoint. Figma
 * provides a 402px mobile frame and a 1440px desktop frame with no
 * intermediate breakpoint, so 900px is an implementation choice, not a
 * value taken from Figma.
 *
 * Section colour (docs/technical-spec.md §3.2): the header bar, the
 * mobile off-canvas panel, and the desktop dropdown submenu all carry
 * the current section surface colour, so each consumes the shared
 * `--ld-section-color` custom property (set on `<body>` in header.php)
 * rather than a fixed colour, falling back to the theme's Peach token
 * (`--ld-color-peach`, defined below) where no section identity is
 * resolved. This replaces what were three separate hardcoded Peach
 * backgrounds with one reusable rule each.
 */

:root {
	--ld-color-peach: var( --wp--preset--color--peach, #fb4d4e );
	--ld-color-black: var( --wp--preset--color--black, #1a1a1a );
	--ld-color-white: var( --wp--preset--color--white, #fffdf8 );
	--ld-font-inter: var( --wp--preset--font-family--inter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
	--ld-bp-desktop: 900px;

	/* Display 2 typography (Figma Style Guide & Components, node 68:589):
	 * the shared heading scale — one theme-owned primitive every Display 2
	 * consumer reads, rather than each redeclaring its own font-size/
	 * weight/line-height. --ld-display-2-size is redefined below at the
	 * shared desktop breakpoint so a consumer only ever needs this one
	 * custom property to respond correctly at both widths. */
	--ld-display-2-weight: 700;
	--ld-display-2-line-height: 1.2;
	--ld-display-2-size: 32px;
}

@media ( min-width: 900px ) {
	:root {
		--ld-display-2-size: 60px;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ld-skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 1100;
	padding: 10px 16px;
	background: var( --ld-color-white );
	color: var( --ld-color-black );
	font-family: var( --ld-font-inter );
	font-weight: 600;
	text-decoration: none;
}

.ld-skip-link:focus {
	top: 0;
}

.ld-header {
	background: var( --ld-section-color, var( --ld-color-peach ) );
}

.ld-header__bar,
.ld-mobile-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ld-header__bar {
	margin-inline: auto;
	padding: 10px;
}

.ld-header__logo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var( --ld-font-inter );
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	color: var( --ld-color-black );
	text-decoration: none;
	white-space: nowrap;
}

.ld-header__logo span:first-child {
	letter-spacing: 0.11em;
}

.ld-header__nav-group {
	display: flex;
	align-items: center;
}

.ld-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Buttons and links reset ------------------------------------------- */

.ld-nav__link,
.ld-nav__toggle,
.ld-nav__cta {
	font-family: var( --ld-font-inter );
	color: var( --ld-color-black );
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.ld-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 12px;
	border-radius: 50px;
	background: var( --ld-color-black );
	color: var( --ld-color-white );
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
}

.ld-menu-toggle,
.ld-menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 0;
	color: var( --ld-color-black );
	cursor: pointer;
}

.ld-menu-toggle svg,
.ld-menu-close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ld-nav__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
}

.ld-nav__chevron svg {
	display: block;
	width: 6px;
	height: 10px;
	transform: rotate( 90deg );
	transition: transform 0.15s ease;
}

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

/* Mobile off-canvas panel -------------------------------------------- */

.ld-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
	background: var( --ld-section-color, var( --ld-color-peach ) );
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ld-mobile-nav[ hidden ] {
	display: none;
}

.ld-nav--mobile .ld-nav__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ld-nav--mobile .ld-nav__item--has-children {
	display: flex;
	flex-direction: column;
}

.ld-nav__item-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ld-nav--mobile .ld-nav__item-head .ld-nav__link,
.ld-nav--mobile .ld-nav__item--menu-only > .ld-nav__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-align: left;
}

.ld-nav--mobile .ld-nav__item-head .ld-nav__toggle {
	padding: 10px;
	margin: -10px;
}

.ld-nav--mobile .ld-nav__item:not( .ld-nav__item--has-children ) > .ld-nav__link {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
}

.ld-nav--mobile .ld-nav__submenu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.ld-nav--mobile .ld-nav__submenu[ hidden ] {
	display: none;
}

.ld-nav--mobile .ld-nav__submenu a {
	font-family: var( --ld-font-inter );
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	color: var( --ld-color-black );
	text-decoration: none;
}

/* Desktop inline nav --------------------------------------------------- */

.ld-nav--desktop {
	display: none;
}

@media ( min-width: 900px ) {
	.ld-header__bar {
		padding: 20px;
	}

	.ld-header__logo {
		font-size: 14px;
	}

	.ld-nav--desktop {
		display: block;
	}

	/* Nav list + actions (CTA, and future Phase 4 cart chrome) sit
	 * together as one right-aligned group so the header stays a two-item
	 * space-between row (logo, group) — matching Figma node 68:1078 —
	 * instead of drifting toward the centre as a third flex item. */
	.ld-header__nav-group {
		gap: 30px;
	}

	.ld-nav--desktop .ld-nav__list {
		display: flex;
		align-items: center;
		gap: 30px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ld-nav--desktop .ld-nav__item {
		position: relative;
	}

	.ld-nav--desktop .ld-nav__item-head {
		gap: 5px;
	}

	.ld-nav--desktop .ld-nav__link,
	.ld-nav--desktop .ld-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-weight: 600;
		font-size: 14px;
		line-height: 1.5;
	}

	.ld-nav--desktop .ld-nav__submenu {
		position: absolute;
		top: 100%;
		left: -20px;
		z-index: 20;
		margin: 10px 0 0;
		padding: 15px 20px;
		display: flex;
		flex-direction: column;
		gap: 16px;
		list-style: none;
		min-width: 200px;
		background: var( --ld-section-color, var( --ld-color-peach ) );
	}

	/* Bridges the visual gap (the 10px margin above) between a parent item
	 * and its submenu with an invisible hoverable strip, sized to the
	 * submenu's own rendered width so it covers the actual approach path
	 * regardless of the parent link's width. Without this, the pointer
	 * crosses a dead zone that belongs to neither the item nor the
	 * submenu while moving from one to the other, :hover/:focus-within on
	 * .ld-nav__item is lost mid-transit, and the submenu (display: none
	 * via [hidden]) closes before a child link can be reached. */
	.ld-nav--desktop .ld-nav__submenu::before {
		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		right: 0;
		height: 10px;
	}

	.ld-nav--desktop .ld-nav__submenu[ hidden ] {
		display: none;
	}

	/* No-JS baseline: hover/focus reveals the dropdown even before
	 * header-nav.js attaches its click handling. */
	.ld-nav--desktop .ld-nav__item:hover > .ld-nav__submenu[ hidden ],
	.ld-nav--desktop .ld-nav__item:focus-within > .ld-nav__submenu[ hidden ] {
		display: flex;
	}

	.ld-nav--desktop .ld-nav__submenu a {
		font-family: var( --ld-font-inter );
		font-weight: 600;
		font-size: 14px;
		line-height: 1.5;
		color: var( --ld-color-black );
		text-decoration: none;
		white-space: nowrap;
	}

	.ld-menu-toggle,
	.ld-mobile-nav {
		display: none;
	}
}

/* Navigation interaction states --------------------------------------- */

/* Every ordinary navigation link turns white on hover / keyboard focus. */
.ld-nav__link:hover,
.ld-nav__link:focus-visible,
.ld-nav__submenu a:hover,
.ld-nav__submenu a:focus-visible {
	color: var( --ld-color-white );
}

/*
 * Linked dropdown parents (e.g. In person / Online):
 * hovering or focusing anywhere within the parent item keeps both the
 * label and its chevron white, including while moving into the submenu.
 */
.ld-nav__item--has-children:hover > .ld-nav__item-head .ld-nav__link,
.ld-nav__item--has-children:hover > .ld-nav__item-head .ld-nav__toggle,
.ld-nav__item--has-children:focus-within > .ld-nav__item-head .ld-nav__link,
.ld-nav__item--has-children:focus-within > .ld-nav__item-head .ld-nav__toggle {
	color: var( --ld-color-white );
}

/*
 * Menu-only dropdown parents (e.g. Private Workshops):
 * the button contains both the label and chevron, so one colour change
 * handles both.
 */
.ld-nav__item--menu-only > .ld-nav__toggle:hover,
.ld-nav__item--menu-only > .ld-nav__toggle:focus-visible,
.ld-nav__item--menu-only:hover > .ld-nav__toggle,
.ld-nav__item--menu-only:focus-within > .ld-nav__toggle {
	color: var( --ld-color-white );
}