/*
 * Primary navigation adapter.
 *
 * The static build renders a top-level entry with children as a <button>
 * (see site/assets/js/main.js and the nav styles in main.css), which opens the
 * dropdown but cannot navigate. The label of a top-level item is also the name
 * of a real section page (ABOUT -> /company/, PRODUCTS -> /products/, ...), so
 * a dead label is a dead end.
 *
 * The walker therefore emits, for those items:
 *
 *   <li class="primary-nav__item">
 *     <a class="primary-nav__link primary-nav__link--parent" href="…">LABEL</a>
 *     <button class="primary-nav__caret-btn" aria-expanded="false">▾</button>
 *     <ul class="submenu"> … </ul>
 *   </li>
 *
 * The link navigates; the caret only exposes the submenu to keyboard/touch.
 * The dropdown itself still opens on :hover / :focus-within exactly as
 * main.css defines it - no JavaScript is involved, which keeps this file free
 * of behavioural changes.
 *
 * main.css stays byte-identical to the static build.
 */

/* Keep the label and the caret together as one flex row. */
.primary-nav__item {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* The label keeps main.css's own look; only the underline is suppressed. */
.primary-nav__link--parent {
	text-decoration: none;
}

/* The caret button: same metrics as the label, but square and tappable. */
.primary-nav__caret-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: var(--h-header);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	/* Far enough from the label that a click on the text navigates. */
	margin-left: -2px;
}

.primary-nav__caret-btn:hover,
.primary-nav__caret-btn:focus-visible {
	color: var(--c-gold);
}

/* Keyboard users need the focus ring; pointer users should not see it. */
.primary-nav__caret-btn:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: -2px;
}

/*
 * Nested entries (DOOR HANDLE, ...) are split into a label that navigates and
 * a caret that opens the next level.
 *
 * The row behaves as one full-width block: the label stretches across it, so
 * hovering anywhere on the row lights up the whole line. The caret is a
 * position:absolute overlay pinned to the right edge, on top of the label,
 * rather than a flex sibling that would split the row into two hit areas and
 * leave a dead strip beside the text.
 *
 * main.css sizes .submenu__toggle as a full-row control (width:100%;
 * padding:11px 20px); that width is cancelled below and replaced by the
 * absolute positioning.
 */
.submenu .primary-nav__item {
	position: relative;
	display: block;
	padding: 0;
}

.submenu .submenu__link--parent {
	display: block;
	padding-right: 44px;   /* room for the caret, which overlays the row */
	white-space: nowrap;
	text-decoration: none;
}

.submenu .submenu__link--parent:hover {
	color: var(--c-gold);
}

/* The caret floats above the row, on the right. */
.submenu__toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	/* Above the label it overlays. */
	z-index: 1;
}

.submenu__toggle:hover,
.submenu__toggle:focus-visible {
	color: var(--c-gold);
}

/*
 * Hovering either half must highlight the whole row. The label and the caret
 * are siblings, so the rule is expressed on the shared parent: any hover state
 * inside the row raises the label's background.
 */
.submenu .primary-nav__item:hover > .submenu__link--parent,
.submenu .primary-nav__item:focus-within > .submenu__link--parent,
.submenu .primary-nav__item:hover > .submenu__toggle,
.submenu .primary-nav__item:focus-within > .submenu__toggle {
	background: #2a2e31;
	color: #fff;
}

/*
 * Caret state is driven purely by hover/focus on the parent, so on touch the
 * caret button needs to expose the list explicitly. The button sits inside the
 * <li>, so focusing it satisfies main.css's
 * `.primary-nav__item:focus-within>.submenu` rule with no scripting.
 * This comment documents that the behaviour is CSS-only on purpose.
 */

/* Very small screens: keep the header from wrapping. */
@media (max-width: 900px) {
	.primary-nav__item {
		gap: 0;
	}
}