/*
 * Paganini Congressi — site header (Carta Tecnica §3.1)
 * A two-row drawing-sheet lockup: a thin ink DWG strip (topbar), then the solid
 * white header bar — Mark + mono wordmark/descriptor on the left, numbered nav +
 * IT/EN pill on the right. Sticky, solid white (NO glassmorphism / backdrop-blur).
 * Tokens come from theme.json presets (--wp--preset--*) and base.css :root; the
 * only enumerated hex are the drawing-sheet hairlines via --pc-hairline.
 *
 * Skip-link note: WordPress core auto-injects the styled `.skip-link` and assigns
 * #wp--skip-link--target to the page's first <main>, so this header deliberately
 * does NOT add a second skip link (that would be a duplicate landmark/a11y smell).
 */

/* The DWG topbar strip (DWG. 01 · CONSORZIO PAGANINI · REV. 2026 | coordinates)
 * was dropped for v6 — the editorial boards open straight on the white header
 * bar. Markup removed from parts/header.html; the sticky shell below is the sole
 * header element. */

/* --- Sticky shell ---------------------------------------------------------- */
/*
 * The template part renders .pc-header as the bar; stick it so the behaviour is
 * self-contained. The header is SOLID WHITE (no backdrop-filter / frosting — the
 * Carta Tecnica header is a flat drawing-sheet bar, not glass). `isolation`
 * establishes a stacking context WITHOUT making the header a containing block for
 * the position:fixed mobile overlay (the broken-hamburger gotcha).
 */
.pc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--pc-hairline);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
	isolation: isolate;
}

.pc-header__inner {
	width: 100%;
	min-height: 4.5rem;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
	/*
	 * Inline gutters: the bar is alignfull with no max-width, so without inline
	 * padding the brand (left) and nav/lang (right) sit flush against the viewport
	 * edges. This gutter scales 20px → 40px and is preserved through the scroll-
	 * condense keyframes (which set padding-top/bottom only, never the inline axis).
	 */
	padding-left: clamp(1.25rem, 4vw, 2.5rem);
	padding-right: clamp(1.25rem, 4vw, 2.5rem);
	gap: clamp(1rem, 3vw, 2.5rem);
}

/* --- Brand: square ink Mark + mono wordmark/descriptor lockup -------------- */
.pc-header__brand {
	gap: 0.875rem;
	flex: 0 1 auto;
	min-width: 0;
}

/* Mark: a plain brand-orange house glyph (Monumentale — no ink square). */
.pc-header__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 26px;
	/* drives the ink strokes (currentColor); the orange building is set below */
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/* Brand skyline mark, extracted from the Paganini Congressi logo: width follows
 * the icon's intrinsic 94:75 aspect so it is never squished. */
.pc-header__mark svg {
	display: block;
	width: auto;
	height: 24px;
}

.pc-header__mark .pc-mark-acc {
	stroke: var(--wp--preset--color--primary);
}

.pc-header__mark:hover,
.pc-header__mark:focus-visible {
	opacity: 0.72;
}

.pc-header__lockup {
	gap: 1px;
	min-width: 0;
}

.pc-header__wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem; /* 20px serif (Monumentale board) */
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.05;
	color: var(--wp--preset--color--ink);
}

.pc-header__wordmark a {
	color: inherit;
	text-decoration: none;
}

.pc-header__wordmark a:hover,
.pc-header__wordmark a:focus-visible {
	color: var(--wp--preset--color--primary-strong);
}

.pc-header__descriptor {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs); /* 10px */
	font-weight: 400;
	letter-spacing: var(--pc-ls-mono-xwide);
	line-height: 1;
	color: var(--wp--preset--color--primary-strong);
}

/* Wordmark sub-line is decorative on the narrowest phones; keep the wordmark. */
@media (max-width: 380px) {
	.pc-header__descriptor {
		display: none;
	}
}

/* --- Right cluster: navigation + language switcher ------------------------- */
.pc-header__end {
	gap: clamp(1rem, 2.4vw, 1.875rem);
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}

/* Numbered nav: each item is a vertical stack — a mono index (00–04) over the
 * Inter label. The index is injected by CSS counter() so the nav post markup
 * stays plain links (per-lang swap via inc/i18n.php is untouched).
 *
 * Counter scope (Carta Tecnica §3.1 hard-check): the folio sequence runs over
 * the FIVE top-level entries only — 00 Chi Siamo … 04 Contatti. The counter is
 * therefore reset on the top container and incremented ONLY by its direct
 * navigation-item children (`> .wp-block-navigation-item`); submenu children
 * live inside `.wp-block-navigation__submenu-container` and must never advance
 * it (otherwise the visible top items read 00, 04, 09, … because every nested
 * item counted). Submenu containers also re-reset to none so a stray nested
 * counter can't leak. */
.pc-header__nav.wp-block-navigation__container,
.pc-header__nav .wp-block-navigation__container {
	counter-reset: pc-nav -1;
	align-items: flex-end;
}

/* Only the direct top-level items of the nav advance the folio counter. The
 * container can render either as `.pc-header__nav` itself (the block root) or as
 * an inner `.wp-block-navigation__container`, so cover both as the direct
 * parent of the counted items. */
.pc-header__nav.wp-block-navigation__container > .wp-block-navigation-item,
.pc-header__nav
	> .wp-block-navigation__container
	> .wp-block-navigation-item {
	counter-increment: pc-nav;
}

/* Nested (submenu) items: never increment, never reset — they are out of the
 * folio sequence entirely. */
.pc-header__nav .wp-block-navigation__submenu-container,
.pc-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	counter-increment: none;
	counter-reset: none;
}

.pc-header__nav .wp-block-navigation-item__content {
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.875rem; /* 14px (Monumentale nav) */
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	line-height: 1.1;
}

/* Monumentale nav: plain Inter labels — the Carta Tecnica 00–04 mono folio prefix
 * is dropped. */
.pc-header__nav .wp-block-navigation-item__content::before {
	content: none;
}

/* Label wipe-underline (§4.14 primitive) on the label baseline. Because the
 * content is a flex column the underline rides the whole box; keep it crisp by
 * painting it on the label text only via background-size on the content box. */
.pc-header__nav .wp-block-navigation-item__content:hover,
.pc-header__nav .wp-block-navigation-item__content:focus,
.pc-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-strong);
}

.pc-header__nav .wp-block-navigation-item__content:hover::before,
.pc-header__nav .wp-block-navigation-item__content:focus::before,
.pc-header__nav .current-menu-item > .wp-block-navigation-item__content::before {
	color: var(--wp--preset--color--primary-strong);
}

@media (prefers-reduced-motion: no-preference) {
	.pc-header__nav .wp-block-navigation-item__content {
		transition: color var(--pc-dur-fast) var(--pc-ease);
	}
}

/* Submenu (dropdown) surface: white card, hairline border. */
.pc-header__nav .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--pc-hairline);
	border-radius: 0;
	box-shadow: var(--wp--preset--shadow--card);
	padding: 0.5rem;
}

/* --- Language switcher: bordered IT/EN pill pair (Carta Tecnica §3.1) -------
 * Two cells inside a 1px ink frame. Active cell = ink fill / white mono label;
 * inactive cell = white fill / ink-soft mono label. The Polylang PHP filter
 * (inc/i18n.php) outputs <a class="pc-lang__item ..."> joined by a
 * <span class="pc-lang__sep">; the separator becomes the shared inner border. */
/* Monumentale lang switcher: plain mono "IT / EN" pair (no bordered pill). The
 * active language is ink, the other is muted, the "/" separator a light hairline
 * grey — matching the board header. */
.pc-lang {
	gap: 0.4rem;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	border: 0;
}

.pc-lang .pc-lang__item,
.pc-lang .pc-lang__sep {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-md); /* 12px */
	letter-spacing: var(--pc-ls-mono);
	line-height: 1;
}

.pc-lang .pc-lang__sep {
	display: inline;
	color: #c8c0b6;
}

.pc-lang .pc-lang__item a,
.pc-lang a.pc-lang__item {
	display: inline-flex;
	align-items: center;
	/* Enlarge the tap target to ~40px (WCAG 2.5.8) without changing the 12px label;
	 * the negative margin absorbs the extra height so the header rhythm is unchanged. */
	padding: 0.85rem 0.4rem;
	margin-block: -0.6rem;
	color: var(--pc-mute);
	background-color: transparent;
	text-decoration: none;
	font-weight: 400;
}

.pc-lang .pc-lang__item a:hover,
.pc-lang .pc-lang__item a:focus-visible,
.pc-lang a.pc-lang__item:hover,
.pc-lang a.pc-lang__item:focus-visible {
	color: var(--wp--preset--color--primary-strong);
}

/* Active language: ink, weight 600 — "you are here". */
.pc-lang .pc-lang__item--current a,
.pc-lang a.pc-lang__item--current {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	cursor: default;
}

/* --- Mobile overlay (core/navigation overlayMenu="mobile") ----------------- */
/* The open/close controls pick up brand ink. The OPEN control shows a literal
 * "MENU" text label (Carta Tecnica §3.1) — hide the core icon, render the word. */
.pc-header__nav .wp-block-navigation__responsive-container-open,
.pc-header__nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

.pc-header__nav .wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
	margin: -10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/* Replace the hamburger glyph with the "MENU" word on the open trigger. */
.pc-header__nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.pc-header__nav .wp-block-navigation__responsive-container-open::after {
	content: "MENU";
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-md); /* 12px */
	font-weight: 500;
	letter-spacing: var(--pc-ls-mono-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/*
 * Desktop: re-hide the open trigger (the inline nav is visible >=600px). The
 * touch-target block above sets `display: inline-flex` with no media query, which
 * would override core's desktop-hiding rule; restore core's intent at core's
 * exact min-width:600px breakpoint and (0,2,1) specificity.
 */
@media (min-width: 600px) {
	.pc-header__nav
		.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

.pc-header__nav .wp-block-navigation__responsive-container-close {
	padding: 10px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pc-header__nav
	.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding-top: var(--wp--preset--spacing--60);
}

/* In the open overlay the items are a vertical stack of serif-scale links (the
 * column index prefix stays mono). Drop the inline flex-column so the index sits
 * inline-left of the label for the larger overlay list. */
.pc-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	flex-direction: row;
	align-items: baseline;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
}

.pc-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::before {
	font-size: var(--pc-fs-mono-sm);
}

/* In the open mobile overlay, submenus expand INLINE (full-width, in flow). */
.pc-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	padding: 0;
	margin: 0;
	opacity: 1;
	visibility: visible;
}

.pc-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 600px) {
	/* Keep the IT/EN pill clean next to the MENU trigger. */
	.pc-header .pc-header__mark {
		height: 34px;
	}

	.pc-header .pc-header__mark svg {
		height: 30px;
	}

	.pc-header__inner {
		/* Mobile gutter floor (mission rule): lift to 1.5rem (24px) so the bar
		 * breathes well above the >=20px minimum. Inline axis only. */
		padding-left: clamp(1.5rem, 4vw, 2.5rem);
		padding-right: clamp(1.5rem, 4vw, 2.5rem);
	}
}

/* --- Scroll state: subtle lift + hairline (Carta Tecnica §6) ---------------
 * The header keeps a hairline at rest and gains a faint shadow once scrolled.
 * Browsers with scroll-driven animations get it via scroll-timeline; older
 * engines fall back to the JS-toggled `.pc-header--scrolled` class. No frosting,
 * no condense-to-glass — the bar stays solid white, just lifts off the page. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.pc-header {
			animation: pc-header-lift linear both;
			animation-timeline: scroll();
			animation-range: 0 120px;
		}

		.pc-header__inner {
			animation: pc-header-condense linear both;
			animation-timeline: scroll();
			animation-range: 0 120px;
		}

		@keyframes pc-header-lift {
			from {
				box-shadow: none;
				border-bottom-color: var(--pc-hairline);
			}
			to {
				box-shadow: var(--wp--preset--shadow--soft);
				border-bottom-color: var(--pc-hairline);
			}
		}

		@keyframes pc-header-condense {
			from {
				min-height: 4.5rem;
				padding-top: 0.875rem;
				padding-bottom: 0.875rem;
			}
			to {
				min-height: 3.75rem;
				padding-top: 0.5rem;
				padding-bottom: 0.5rem;
			}
		}
	}
}

/* Condense fallback: browsers without scroll-driven animations. The motion.js
 * fallback toggles `.pc-header--scrolled` (scrollY > 8). Scoped under @supports
 * not so it never fights the scroll-timeline path. */
@supports not (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.pc-header__inner {
			transition: min-height var(--pc-dur-fast) var(--pc-ease),
				padding-top var(--pc-dur-fast) var(--pc-ease),
				padding-bottom var(--pc-dur-fast) var(--pc-ease);
		}

		.pc-header {
			transition: box-shadow var(--pc-dur-fast) var(--pc-ease);
		}
	}

	.pc-header--scrolled {
		box-shadow: var(--wp--preset--shadow--soft);
	}

	.pc-header--scrolled .pc-header__inner {
		min-height: 3.75rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}