/*
 * Navigation. Six top-level items in the eyebrow style, one with a submenu.
 * Overlay below 1180px, using core's own overlay so focus trapping, Escape,
 * aria-expanded, aria-modal and close-on-activation are core's responsibility
 * rather than ours.
 *
 * THE 1180px BREAKPOINT. Phase 1 carried five labels and switched at 1024px.
 * Phase 2 carries six full approved headings, and they do not fit at 1024px at
 * any legible size: measured in a real browser at final font metrics, the six
 * labels plus their gaps need more room than 1024px leaves after the gutter,
 * the 150px lockup and a minimum clear gap. The measurements are recorded in
 * README.md.
 *
 * PROHIBITED SOLUTIONS to a fit problem, recorded so they are not reinvented:
 * truncating or abbreviating an approved label; reducing nav type below 12.5px;
 * removing the lockup's 150px upper bound (it is set so the campaign mark stays
 * measurable against the EU emblem); making the bar taller (96px is
 * load-bearing in the 1/6 signature arithmetic).
 */

.wp-block-navigation {
	--eu-nav-gap: clamp(16px, 1.8vw, 32px);
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--nav, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wp-block-navigation .wp-block-navigation__container {
	gap: var(--eu-nav-gap);
}

.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 6px;
	text-decoration: none;
	/*
	 * The active state is carried by THREE things at once, never by colour
	 * alone: a 2px ink rule (a shape cue), a step up in text contrast from ink
	 * at 74% to ink at 100%, and aria-current. The rule is ink rather than
	 * accent because --accent measures 2.60:1 against the bar and a functional
	 * indicator needs 3:1; a 1px accent companion sits under the ink rule as a
	 * brand cue without carrying the state.
	 */
	color: color-mix(in srgb, var(--eu-ink) 74%, var(--eu-page));
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content[aria-current] {
	color: var(--eu-ink);
}

/* Active indicator: a 2px INK rule with a 1px accent companion beneath it. */
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background-color: var(--eu-ink);
	border-bottom: 1px solid var(--eu-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 180ms ease-out;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .wp-block-navigation-item__content[aria-current]::after {
	transform: scaleX(1);
}

/*
 * An ancestor of the current page takes a subdued indicator. On a fruit route
 * that is EUROPEAN FRESH FRUITS; on a single news item it is NEWS & ACTIVITIES.
 * Server-rendered from WordPress's own nav-item classes on every route except
 * the homepage, which needs JavaScript because its targets are fragments.
 */
.wp-block-navigation .wp-block-navigation-item.is-child-active > .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item.is-child-active > .wp-block-navigation-submenu__toggle::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	opacity: 0.45;
}

.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content {
	color: var(--eu-ink);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/*
 * THE SUBMENU TOGGLE'S HIT AREA — WCAG 2.2 SC 2.5.8, Level AA.
 *
 * Core renders the chevron as an 8x8 SVG inside a button with zero padding, so
 * the measured target was 8 x 8 px against a 24 x 24 minimum. The spacing
 * exception did not rescue it either: the gap to the adjacent link was 3 px, so
 * a 24 px circle centred on the button overlapped the link's own.
 *
 * The BUTTON grows to 24 x 24 and centres the chevron; the CHEVRON stays 8 px,
 * so nothing about the visual design changes. Solving it by increasing the gap
 * instead would need 24 px of clearance and would cost far more of the
 * navigation row than 16 px does — README section 11 records 705 px used of
 * 938 px available at 1180 px, so there is room for this and nothing else has
 * to move. Re-verified after the change: no horizontal scroll at 1180 px.
 */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	inline-size: 24px;
	block-size: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/*
 * The CHEVRON does not grow with its button. Core sizes the SVG with
 * `width: inherit; height: inherit`, so growing the button to 24px tripled the
 * glyph — a visible design change where none was wanted. 0.6em is core's own
 * value for the button, so the mark is byte-for-byte the size it always was
 * and only the hit area changed.
 */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	inline-size: 0.6em;
	block-size: 0.6em;
}

/*
 * FOCUS-OPEN ON THE SUBMENU IS DELIBERATELY NOT ADDED HERE, and this comment is
 * the record of that decision because the Phase 2 specification section 3.6
 * asks for it ("Submenu opens on hover AND on keyboard focus").
 *
 * Core ships a :focus-within rule for exactly this, and it is written
 *   .has-child:not(.open-on-hover-click):focus-within > .submenu-container
 * — i.e. core EXCLUDES the mode this navigation runs in. The items here carry
 * `open-on-hover-click`, which is the mode where the chevron button is the
 * activation target and core's Interactivity handlers own `aria-expanded`.
 * Core syncs that attribute on mouseenter and on click, and has no focus
 * handler, so forcing the container visible on :focus-within was measured to
 * produce a submenu that is VISIBLE AND TABBABLE while its own toggle still
 * reports aria-expanded="false" — a state mismatch, and a plausible SC 4.1.2
 * problem introduced to satisfy a section 3.6 line.
 *
 * The current behaviour is not a WCAG failure: the six links are reachable and
 * operable with Enter or Space on the toggle, aria-expanded updates correctly
 * when they are, Escape closes, and the parent is a real link to
 * /fresh-fruits/, which lists all five products. The cost is two extra
 * keystrokes.
 *
 * So this is recorded as a DEVIATION FROM SECTION 3.6 requiring a written
 * amendment, which is one of the two resolutions the QA report itself allows.
 * Do not "fix" it with the one-line CSS rule; it was tried and measured.
 */

/* Submenu: a plain list on the page ground. Never a mega-menu. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--eu-hair);
	background-color: var(--eu-page);
	padding-block: 8px;
	min-inline-size: 15rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * One hairline separates OVERVIEW from the five products.
 *
 * OVERVIEW is an ACCESSIBILITY REQUIREMENT, not a courtesy: on touch the first
 * tap on a submenu parent opens the submenu rather than following the link, so
 * without it the overview page is unreachable from the menu on a touch device.
 * Recorded here so it is not "tidied away" as redundant.
 */
.wp-block-navigation .wp-block-navigation__submenu-container > .eu-nav-overview + .eu-nav-marker {
	border-top: 1px solid var(--eu-hair);
	margin-top: 8px;
	padding-top: 8px;
}

/* 4x4px product marker before a product label. Decorative: the label carries meaning. */
.eu-nav-marker > .wp-block-navigation-item__content::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 4px;
	block-size: 4px;
	background-color: var(--eu-marker, var(--eu-accent));
}

/*
 * The 1180-1279px band. The documented escape hatch, applied in this band only
 * and nowhere else: 12.5px at 0.08em tracking. Below 12.5px the labels stop
 * being legible tracked caps, so this is the floor, and the overlay takes over
 * beneath it rather than the type shrinking further.
 */
@media (min-width: 1180px) and (max-width: 1279.98px) {
	.wp-block-navigation {
		--eu-nav-gap: 16px;
		font-size: 12.5px;
		letter-spacing: 0.08em;
	}
}

/* Overlay (below 1180px). */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--eu-page) !important;
	color: var(--eu-ink) !important;
	padding: clamp(24px, 6vw, 48px);
	/* The overlay scrolls: 14 rows do not fit above the fold and need not. */
	overflow-y: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-block-start: 48px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(1.375rem, 5vw, 1.625rem);
	letter-spacing: 0.06em;
	min-block-size: 56px;
	display: flex;
	align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	padding-inline-start: 16px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: clamp(1.0625rem, 4vw, 1.25rem);
	letter-spacing: 0.08em;
	min-block-size: 56px;
}

/* The submenu hairline is a desktop device; in the overlay the indent carries it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .eu-nav-overview + .eu-nav-marker {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* Toggle: a 1px ink outline, zero radius, tracked caps. No fill, no shadow. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-block-size: 44px;
	min-inline-size: 44px;
	border: 1px solid var(--eu-ink);
	padding: 8px 12px;
	background: none;
	color: var(--eu-ink);
}

/*
 * Core switches its overlay on at 600px (wp-includes/blocks/navigation/
 * style.css). This project's breakpoint is 1180px, so the two core rules are
 * overridden for that range only. Core keeps ownership of the overlay's
 * BEHAVIOUR — focus trapping, Escape, aria-modal and close-on-activation —
 * which is the entire reason for using core/navigation rather than hand-rolling
 * a hamburger.
 *
 * The upper bound moved from 1023.98px to 1179.98px at Phase 2, when the label
 * set grew from five to six full approved headings.
 */
@media (min-width: 600px) and (max-width: 1179.98px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}