/*
* Language switcher.
*
* Loaded ONLY when two or more languages are released, so an English-only site
* requests nothing extra.
*
* IT DELIBERATELY DOES NOT INHERIT THE NAVIGATION'S EYEBROW STYLE.
*
* The primary navigation is set in uppercase through `text-transform`. The
* switcher must not be, and this is a correctness rule rather than a taste
* one:
*
* - GREEK DROPS ACCENTS IN UPPERCASE. `Ελληνικά` set with
* `text-transform: uppercase` becomes `ΕΛΛΗΝΙΚΆ` in browsers that keep the
* tonos and `ΕΛΛΗΝΙΚΑ` in those that follow the Greek convention. The
* correct uppercase form is not derivable from the lowercase string by any
* CSS rule, so a language's own name is never machine-cased here.
* - SPANISH AND GREEK DISAGREE about accents in caps in the first place, so
* one declaration cannot be right for both.
* - A language name is a proper noun. It is set the way its own language sets
* it, which is what makes it recognisable to the reader who needs it.
*
* The switcher therefore reads as quiet sentence-case type beside the
* navigation, with the same font, size and colour logic and none of its
* casing.
*/
.eu-langs {
display: flex;
align-items: center;
}
.eu-langs__list {
display: flex;
align-items: center;
/* A thin em-based gap so it tracks the type rather than the viewport. */
gap: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
.eu-langs__item {
margin: 0;
padding: 0;
}
.eu-langs__link {
font-family: var(--wp--preset--font-family--text, inherit);
font-size: var(--wp--preset--font-size--nav, 0.8125rem);
font-weight: 500;
/* Sentence case, always. See the file header. */
text-transform: none;
letter-spacing: 0.02em;
text-decoration: none;
/*
* The same 74% resting contrast as a navigation item, so the switcher sits
* in the header's hierarchy rather than competing with it.
*/
color: color-mix(in srgb, var(--eu-ink, #1a1a1a) 74%, var(--eu-page, #fff));
/* A comfortable target without changing the bar's 96px arithmetic. */
padding-block: 6px;
transition: color 180ms var(--eu-ease, ease-out);
}
.eu-langs__link:hover,
.eu-langs__link:focus-visible {
color: var(--eu-ink, #1a1a1a);
}
/*
* The current language is marked by WEIGHT AND CONTRAST TOGETHER, never by
* colour alone, and `aria-current` carries it for assistive technology
* independently of any of this.
*/
.eu-langs__link[aria-current] {
color: var(--eu-ink, #1a1a1a);
font-weight: 700;
}
/*
* Focus is the theme's own visible ring. Never removed, never replaced with a
* colour change: this is a keyboard user's only position indicator.
*/
.eu-langs__link:focus-visible {
outline: 2px solid var(--eu-ink, #1a1a1a);
outline-offset: 3px;
}
/* ==========================================================================
* THE OWNER'S INSTRUCTION OF 2026-09-25 — the language row is gone.
* ==========================================================================
*
* WHAT WAS HERE BEFORE, AND WHY IT IS DELETED.
*
* This file used to end with four rules that gave the switcher a dedicated
* second row inside the brand bar and paid for it by making the header taller:
*
* html:has(.eu-bar .eu-langs) { --eu-header-h: 128px } (112px narrow)
* .eu-bar:has(.eu-langs), .eu-bar:has(.eu-langs).is-condensed { ... }
* .eu-bar__inner:has(> .eu-langs) { display:grid; rows 88px 40px }
* @media (max-width: 1179px) { ...rows 72px 40px; justify-self:center }
*
* Measured on the running preview before removal: the bar was 128px at
* >=1180px and 112px below it, against the frozen parent's designed 96px/72px.
* The language row cost +32px on desktop and +40px on narrow, and below
* 1180px it was a full-width centred band — exactly the "persistent full-width
* language bar" the owner asked to be removed.
*
* TWO OF THOSE RULES USED DESCENDANT COMBINATORS (`.eu-bar .eu-langs`,
* `.eu-bar:has(.eu-langs)`), so they would have KEPT MATCHING after the
* switcher moved inside the navigation — it is still inside `.eu-bar`. They
* are deleted rather than left to go inert, because they would not have.
*
* A LIVE DEFECT THEY WERE CAUSING, fixed by their removal: the parent condenses
* the bar 96px -> 72px and the lockup 150px -> 120px on scroll
* (base.css:729-738). `.eu-bar:has(.eu-langs).is-condensed` is (0,3,0) and beat
* the parent's (0,2,0) height rule, but nothing overrode the LOGO rule — so on
* scroll the lockup shrank while the bar stayed 128px tall.
*
* --eu-header-h now resolves to the parent's own 96px/72px again. It drives
* `.eu-header-region`'s first grid track, `.eu-bar`'s height,
* `--eu-header-sticky-h` (every anchor's scroll-margin-top), `.eu-main`'s and
* `.eu-plate`'s top padding. It does NOT drive `--eu-signature-h`, which is
* `--eu-region-h / 6`; the Graphic Charter p.20 1/6 rule is untouched in both
* directions. (The parent's own comment at base.css:54-58 says otherwise and
* is stale; recorded rather than edited, because the parent is frozen.)
*/
/*
* THE CONTROL IS NOW A NAVIGATION ITEM.
*
* core wraps it in , so it inherits the
* row's flex placement and gap and needs no positioning of its own. The
* is selected through :has() so no core class has to be assumed.
*/
.wp-block-navigation__container > .wp-block-navigation-item:has(> .eu-langs) {
display: flex;
align-items: center;
}
.eu-langs {
display: flex;
align-items: center;
position: relative;
}
.eu-langs__disclosure {
position: relative;
}
/*
* The trigger. is a real disclosure button to the browser and to
* assistive technology, so the expanded state, Enter and Space are native and
* no script is required for the control to work.
*/
.eu-langs__trigger {
display: inline-flex;
align-items: center;
gap: 8px;
/* Remove the UA disclosure triangle in every engine. */
list-style: none;
cursor: pointer;
/* 44px of target height without changing the bar's 96px arithmetic. */
min-block-size: 44px;
padding-block: 6px;
font-family: var(--wp--preset--font-family--text, inherit);
font-size: var(--wp--preset--font-size--nav, 0.8125rem);
font-weight: 500;
/*
* Sentence case, always — see this file's header. The navigation beside it
* is tracked uppercase; that contrast is what marks the switcher as the
* utility tier without a box, a chip or a pill.
*/
text-transform: none;
letter-spacing: 0.02em;
color: color-mix(in srgb, var(--eu-ink, #1a1a1a) 74%, var(--eu-page, #fff));
transition: color 180ms var(--eu-ease, ease-out);
}
.eu-langs__trigger::-webkit-details-marker {
display: none;
}
.eu-langs__trigger::marker {
content: "";
}
.eu-langs__trigger:hover,
.eu-langs__disclosure[open] > .eu-langs__trigger {
color: var(--eu-ink, #1a1a1a);
}
.eu-langs__trigger:focus-visible {
outline: 2px solid var(--eu-ink, #1a1a1a);
outline-offset: 3px;
}
/* A 1px caret, drawn not imaged. Zero radius, zero shadow, like everything else. */
.eu-langs__caret {
inline-size: 5px;
block-size: 5px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 140ms var(--eu-ease, ease-out);
}
.eu-langs__disclosure[open] > .eu-langs__trigger .eu-langs__caret {
transform: translateY(1px) rotate(-135deg);
}
/*
* The panel. It is the submenu this theme already has — 1px hairline, page
* ground, no radius, no shadow, no fade — so the header gains no new vocabulary.
*/
.eu-langs__list {
position: absolute;
inset-block-start: calc(100% + 6px);
inset-inline-end: 0;
z-index: 20;
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding-block: 8px;
min-inline-size: 11.5rem;
list-style: none;
background-color: var(--eu-page, #fff);
border: 1px solid var(--eu-hair, rgba(26, 26, 26, 0.16));
}
.eu-langs__item {
margin: 0;
padding: 0;
}
.eu-langs__link {
display: flex;
align-items: center;
min-block-size: 44px;
padding: 8px 16px;
/* The active item's 2px rule lives on the leading edge; reserve it for all. */
border-inline-start: 2px solid transparent;
font-family: var(--wp--preset--font-family--text, inherit);
font-size: var(--wp--preset--font-size--nav, 0.8125rem);
font-weight: 500;
text-transform: none;
letter-spacing: 0.02em;
text-decoration: none;
color: color-mix(in srgb, var(--eu-ink, #1a1a1a) 74%, var(--eu-page, #fff));
transition: color 180ms var(--eu-ease, ease-out);
}
.eu-langs__link:hover,
.eu-langs__link:focus-visible {
color: var(--eu-ink, #1a1a1a);
}
/*
* THREE cues for the current language, never colour alone: full ink contrast,
* 700 weight, and a 2px rule on the leading edge — the navigation's own active
* device, rotated for a vertical list. `aria-current` carries it for assistive
* technology independently of all three.
*/
.eu-langs__link[aria-current] {
color: var(--eu-ink, #1a1a1a);
font-weight: 700;
border-inline-start-color: var(--eu-ink, #1a1a1a);
}
.eu-langs__link:focus-visible {
outline: 2px solid var(--eu-ink, #1a1a1a);
outline-offset: -2px;
}
/*
* ---------------------------------------------------------------------------
* THE ROW HAS TO FIT, AND IN GERMAN IT ONLY JUST DOES.
* ---------------------------------------------------------------------------
*
* Measured free space between the lockup and the first navigation item, on the
* running preview, at every width from 1180px to 1600px:
*
* 1180 1280 1360 1440 1600
* en 147.6 157.0 222.5 216.3 204.8
* de 24.0 24.0 70.3 64.1 52.6 <- binding
* es 25.0 26.2 91.6 85.5 73.9
* el 52.4 51.2 116.7 110.5 99.0
*
* 24.0px is `.eu-bar__inner`'s own flex `gap`: the row is pinned at its floor.
* The trigger needs ~63px plus separation, so two concessions are spent here,
* both of them the cheapest available:
*
* 1. `letter-spacing: 0.1em -> 0.08em` above 1280px. 0.08em is not a new
* value — it is the tracking the parent itself already uses in the
* 1180-1279px band. ~25px on the German row.
* 2. `--eu-nav-gap`'s upper bound 32px -> 20px. The parent's
* `clamp(16px, 1.8vw, 32px)` keeps growing on `vw` while `.eu-bar__inner`
* stops at 1280px, so above ~1360px the current clamp actively LOSES row
* width as the viewport grows. Capping it stops that.
*
* NOT spent, deliberately: the nav font size (12.5px is the documented floor
* and the parent forbids going below it), the approved labels (must never be
* shortened), the 150px lockup cap (set so the EU emblem stays at least as
* prominent), and the bar's height.
*/
@media (min-width: 1280px) {
.eu-bar .wp-block-navigation {
letter-spacing: 0.08em;
--eu-nav-gap: clamp(16px, 1.4vw, 20px);
}
}
/*
* ---------------------------------------------------------------------------
* THE OVERLAY THRESHOLD MOVES 1180px -> 1300px. THIS IS THE ONE REAL COST.
* ---------------------------------------------------------------------------
*
* Even with both concessions above, German cannot seat a legible trigger below
* ~1300px. The absolute maximum recoverable at 1180px without breaking a
* documented floor is 24.0px of gap + 11.8px from the lockup's own clamp =
* 35.8px, and the word "Deutsch" alone measures 47.6px at the 12.5px floor.
* There is no arrangement of the approved labels, the lockup and a visible
* language control that fits 1180px in German. The row simply is full.
*
* So the navigation folds into core's overlay from 1259.98px down instead of
* 1179.98px, and the switcher folds with it — which is what the owner asked
* for on narrow layouts. This is the same move, by the same method, that the
* parent already made once: its own comment records the threshold going
* 1023.98px -> 1179.98px "when the label set grew from five to six full
* approved headings". A seventh element in the row is that change again.
*
* The band this affects is 1180-1299px. Below 1180px nothing changes.
*
* THE THRESHOLD IS DERIVED FROM LINE-BOX COUNTS, NOT FROM THE GAP. With the
* trigger in the row and the 12.5px hatch applied, the last width at which any
* approved heading still wraps to two lines is 1290px (German; Spanish 1260).
* 1300px is the first width at which no label wraps in any of the four
* languages. Re-derive it that way if the label set or a translation changes.
*/
@media (min-width: 1180px) and (max-width: 1299.98px) {
.eu-bar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
.eu-bar .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex;
}
}
/*
* ---------------------------------------------------------------------------
* THE PARENT'S 12.5px ESCAPE HATCH NOW COVERS THE WHOLE TIGHT BAND.
* ---------------------------------------------------------------------------
*
* WHAT WENT WRONG THE FIRST TIME, so it is not reintroduced: the first cut of
* this change measured only the FREE GAP between the lockup and the first
* navigation item and read 24px — the flex `gap` — as "it fits". It did not.
* The navigation items are flex children that shrink below their max-content
* width, so the row absorbed the trigger by WRAPPING four approved headings
* onto two lines while the measured gap stayed at exactly 24px. Counted by
* line boxes (Range.getClientRects) rather than by gap, the first cut wrapped
* labels on de 1260-1340, es 1260-1310 and el 1280 — and es and el had not
* wrapped at those widths before the change at all.
*
* A GAP MEASUREMENT CANNOT SEE A WRAP. Count line boxes.
*
* The fix is the parent's own documented concession, applied over a wider band
* rather than a new one invented here: 12.5px at 0.08em with 16px gaps, which
* `assets/css/blocks/navigation.css:200-212` calls "the documented escape
* hatch" and sets as the floor. It was scoped to 1180-1279px; the tight band
* is now 1300-1399px, because the row carries one more element. The type
* difference is half a pixel and the alternative was hiding the entire primary
* navigation behind a hamburger on a 1280px laptop.
*/
@media (min-width: 1300px) and (max-width: 1399.98px) {
.eu-bar .wp-block-navigation {
--eu-nav-gap: 16px;
font-size: 12.5px;
letter-spacing: 0.08em;
}
}
/*
* ---------------------------------------------------------------------------
* INSIDE CORE'S OVERLAY.
* ---------------------------------------------------------------------------
*
* The switcher is now a real child of
* `.wp-block-navigation__responsive-container-content`, so for the first time
* the overlay rules in this file can actually match — the previous version's
* `.is-menu-open .eu-langs__list` selector never could, because the switcher
* sat outside the responsive container entirely.
*
* It is the LAST item, separated by one hairline: language is utility, the
* overlay's job is the campaign's content, and the desktop position is also
* last, so the mental model is the same at both breakpoints.
*
* THE DISCLOSURE IS FLATTENED HERE: the trigger is hidden and all four
* languages are shown at once. There is room for them inside the overlay — the
* four endonyms measure 262px against 390px of content width — and asking for a
* tap to reveal four items on a screen that has space for them is the kind of
* indirection the owner asked to be removed, not reproduced.
*
* IT IS DONE WITHOUT JAVASCRIPT AND WITHOUT DEPENDING ON THE UA'S DISCLOSURE
* MACHINERY. `display: flex` on the list is enough in Chromium today, but that
* is an accident of how this engine currently hides closed content,
* so the `::details-content` override below states the intent explicitly rather
* than relying on it. If a future engine ignores both, the failure mode is the
* list staying collapsed behind a trigger that is hidden — so the trigger is
* hidden with `visibility`/size rather than `display: none`, keeping it
* focusable and operable as the fallback.
*/
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> .eu-langs) {
inline-size: 100%;
margin-block-start: 32px;
padding-block-start: 24px;
border-block-start: 1px solid var(--eu-hair, rgba(26, 26, 26, 0.16));
}
.wp-block-navigation__responsive-container.is-menu-open .eu-langs,
.wp-block-navigation__responsive-container.is-menu-open .eu-langs__disclosure {
inline-size: 100%;
position: static;
}
/*
* Overlay type. `.eu-langs__link` does not carry
* `.wp-block-navigation-item__content`, so the parent's overlay sizing
* (clamp(1.375rem, 5vw, 1.625rem), 56px rows) does not reach it and the
* switcher would otherwise render at 13px inside a 22-26px menu.
*/
/*
* The trigger is redundant once the list is open in place — it would name the
* current language immediately above a list that already marks it. Collapsed to
* zero, not display:none, so it remains in the tab order as the fallback path
* if an engine does keep the list collapsed.
*/
.wp-block-navigation__responsive-container.is-menu-open .eu-langs__trigger {
position: absolute;
inline-size: 1px;
block-size: 1px;
min-block-size: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.wp-block-navigation__responsive-container.is-menu-open .eu-langs__trigger:focus-visible {
position: static;
inline-size: auto;
block-size: auto;
min-block-size: 56px;
clip-path: none;
font-size: clamp(1.0625rem, 4vw, 1.25rem);
}
/* State the intent; do not rely on `display` happening to beat the UA. */
.wp-block-navigation__responsive-container.is-menu-open .eu-langs__disclosure::details-content {
content-visibility: visible;
block-size: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .eu-langs__list {
position: static;
inset: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* The menu items are end-aligned in this overlay; the switcher matches. */
justify-content: flex-end;
gap: 0 24px;
border: 0;
padding-block: 8px 0;
padding-inline: 0;
min-inline-size: 0;
background: none;
}
.wp-block-navigation__responsive-container.is-menu-open .eu-langs__link {
font-size: clamp(1.0625rem, 4vw, 1.25rem);
min-block-size: 48px;
padding-inline: 0 0;
padding-block: 8px;
border-inline-start: 0;
/* The active cue becomes an underline here; a leading rule would read as an indent. */
border-block-end: 2px solid transparent;
}
.wp-block-navigation__responsive-container.is-menu-open .eu-langs__link[aria-current] {
border-block-end-color: var(--eu-ink, #1a1a1a);
}
@media (prefers-reduced-motion: reduce) {
.eu-langs__trigger,
.eu-langs__link,
.eu-langs__caret {
transition: none;
}
}
/*
* ---------------------------------------------------------------------------
* THE OVERLAY HAD NO HORIZONTAL PADDING. FOUND 2026-09-25, NOT CAUSED HERE.
* ---------------------------------------------------------------------------
*
* The frozen parent asks for `padding: clamp(24px, 6vw, 48px)` on the open
* overlay at `assets/css/blocks/navigation.css:218`, with specificity (0,2,0).
* WordPress core ships
*
* .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
* padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem); ... }
*
* at (0,3,0), which wins on specificity regardless of load order — and
* `--wp--style--root--padding-left` is NOT DEFINED on this site, so the whole
* clamp() is invalid at computed-value time and the property falls back to its
* initial value. Measured on the running preview: `padding-left` and
* `padding-right` both compute to **0px**. The parent's 24px never applied.
*
* In English nobody could see it: the menu list shrink-to-fits to 336.4px at a
* 390px viewport, so there is 53.6px of accidental margin. In Greek the widest
* label makes the list exactly 390px and the type sits hard against both edges
* of the screen; German is the same. It was invisible until today for the
* blunt reason that the overlay COULD NOT OPEN in de/es/el at all — see the
* directive-corruption fix in draft-pages.php.
*
* Restored here, at (0,4,0), rather than in the parent, which is frozen.
*/
.eu-bar .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
padding-inline: clamp(24px, 6vw, 48px);
}