/* * SNACK SMART — campaign skin. * * Almost everything is in theme.json. What remains here is what tokens cannot * express: the mapping of the five fruit-marker colours onto individual * navigation items, and two type refinements specific to this identity. */ /* Fruit markers: 4x4px navigation swatches. Decorative — the label carries the meaning. */ .eu-nav-marker--peaches { --eu-marker: var(--wp--custom--fruit--peach); } .eu-nav-marker--nectarines { --eu-marker: var(--wp--custom--fruit--nectarine); } .eu-nav-marker--pears { --eu-marker: var(--wp--custom--fruit--pear); } .eu-nav-marker--plums { --eu-marker: var(--wp--custom--fruit--plum); } .eu-nav-marker--apricots { --eu-marker: var(--wp--custom--fruit--apricot); } /* * Fraunces carries the display voice. Optical sizing is left to the browser, so * a 6.5rem headline and a 1.75rem tagline are not the same drawing. The SOFT * axis is pinned at its default: requesting it costs 53KB on the latin slice * alone and would breach the font budget. */ .eu-hero__title, .eu-h2, .eu-lead, .eu-fruit__tagline { font-optical-sizing: auto; } /* * Taglines and leads are set in ink, not in the campaign accent: measured, * --accent on --page is 2.66:1, and a 20px tagline needs 4.5:1. Typography * carries the identity here; the accent stays on rules and markers. */ .eu-fruit__tagline, .eu-lead { color: var(--wp--preset--color--ink); } .eu-section--dark .eu-fruit__tagline { color: var(--wp--preset--color--page); opacity: 0.85; } /* * The logo's open circular arc is NOT used anywhere on the site. It is the one * borrowable identity device, but every way of drawing it needs a radius or a * decorative graphic, and this build holds a hard zero-radius, zero-shadow, * no-decoration rule. Leaving it out also removes any chance of a circular * graphic appearing near the signature or the EU emblem, where it could be * misread as part of an institutional mark. */ /* * HOME is an OVERLAY-ONLY item. * * On desktop the campaign lockup is the home link — universal convention, and * it recovers about 70px from a navigation row that has none to spare once the * six full approved headings are in it. In the overlay there is no density * constraint and the lockup's home link is less discoverable on touch, so HOME * appears there as the first item. * * display: none removes it from the accessibility tree as well as from the * layout, so desktop users are not offered an item they cannot see. */ @media (min-width: 1180px) { .wp-block-navigation > .wp-block-navigation__container > .eu-nav-home, .wp-block-navigation__container > .eu-nav-home { display: none; } } /* * The core hamburger is intentionally retained below 1180px, but an icon-only * control is too easy to miss. The English master therefore labels the toggle * explicitly while preserving core's aria-label, focus trap and Escape logic. */ @media (max-width: 1179.98px) { .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { gap: 8px; inline-size: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } /* * THE LABELS COME FROM THE TRANSLATION LAYER, not from this file. * * They were literals here — content: "Menu" / content: "Close" — and text in * a CSS content property cannot be translated: it is not a PHP string, it is * not in a .pot file, and no multilingual plugin can see it. On a German or * Spanish version this toggle would have read English on every route and * nobody reviewing the translated content would have found it. * * --eu-label-menu and --eu-label-close are set on :root by the parent from * _x() strings. The fallbacks are the English defaults, so the control is * never unlabelled even if the emitter is removed. */ .wp-block-navigation__responsive-container-open::after { content: var(--eu-label-menu, "Menu"); } .wp-block-navigation__responsive-container-close::after { content: var(--eu-label-close, "Close"); } } /* * OVERVIEW is the submenu's first item and is separated from the five products * by one hairline. It exists because on touch the first tap on a submenu parent * OPENS the submenu rather than following the link, so without it the overview * route is unreachable from the menu on a touch device. It is an accessibility * requirement, not a courtesy — do not tidy it away as redundant. */ .eu-nav-overview > .wp-block-navigation-item__content { font-weight: 500; } /* ========================================================================== * THE MANDATORY EU COMMUNICATION BAND — the owner's corrections of 2026-09-25. * * The markup these rules style is built by inc/owner-corrections-20260925.php, * which rewrites the frozen shared parent's band. Read that file's header * first; it carries the compliance reasoning and the sources. Everything here * is a consequence of it. * * WHY EVERY SELECTOR BELOW IS DOUBLED WITH `.eu-funding`, AND WHY THAT IS NOT * SPECIFICITY CREEP. These rules override declarations in the parent's BLOCK * stylesheet, inc/blocks/eu-funding/style.css, which carries single-class * selectors of exactly the same weight. A block stylesheet is enqueued when its * block renders — which for a band inside the footer template part can be after * this sheet — so on equal specificity the cascade would be decided by load * order, and the correction would silently stop applying the first time * WordPress changed when it prints block assets. The extra class makes the * outcome independent of that. Do not "simplify" these selectors. * ========================================================================== */ /* * THE TWO MARKS, SIDE BY SIDE, AND NEVER MERGED INTO ONE. * * AGRIP SIMPLE MGA Article 17.2: "The emblem must remain distinct and separate * and cannot be modified by adding other visual marks, brands or text." Graphic * Charter p.2: "Both elements (signature and separate EU emblem funding * statement) must be visible." * * So this group has NO ground, NO border, NO radius and NO shadow of its own. * It is a layout box and nothing else. NEITHER DOES EITHER MARK — see the * transparency note on .eu-funding__emblem below. What shows a reader that * these are two marks and not one logotype is the gutter between them, which * is wide enough to carry the emblem's protection area on its own. * DO NOT TIDY THE TWO MARKS INTO ONE BOX; that is the prohibited composite. * * `align-items: center` rather than `stretch`, deliberately. The two marks * keep their own heights — the emblem's short and wide, the signature's tall * and narrow — which reads as two objects. A common height would make them * read as two halves of one plate. * * HISTORICAL SINCE 2026-09-28, KEPT FOR ITS ARITHMETIC. The two marks no longer * sit side by side: the accompanying line stands between them and ENJOY is at * the far right (see "ENJOY AT THE FAR RIGHT" below, which carries the gaps * that now apply). The insets measured here are still the ones used there. * * THE PROTECTION AREA IS SATISFIED WITH ROOM TO SPARE, AND IT IS NOW THE GUTTER * THAT CARRIES IT. The emblem rules require the lockup's protection area to stay * free of competing text, logos and images, at X = half the flag height on every * side: 24px at the 56px floor, 32.5px at the 76px cap. * * Measured from each file's own painted edge, with H = the emblem canvas height: * * emblem canvas -> painted right edge 165/919 H = 0.1795 H * signature canvas -> painted left edge 38/348 x 1.2554 H = 0.1371 H * required X 0.856 H / 2 = 0.4280 H * * so the gutter must be at least 0.1114 H — 8.5px at the 76px cap, 6.2px at the * 56px floor. The 24px set below clears that by a factor of nearly three at * every width, and painted-edge to painted-edge comes to 48.1px at the cap and * 41.7px at the floor. The row gap to the accompanying line is 48px plus the * signature's own 10.4px inset on the same measure. */ .eu-funding .eu-funding__marks { /* * The emblem lockup's canvas height. Unchanged from the frozen rule at * every width where it binds, so the desktop rendering does not move. */ --eu-ss-mark-h: clamp(56px, 5.5vw, 76px); /* * This locale's canvas width/height, set inline on this element by * inc/owner-corrections-20260925.php. The declared value is the English * file's (4119/919) so an unfiltered band still resolves. * * en 4.4820 de 4.5539 es 4.1349 el 5.3264 */ --eu-ss-emblem-aspect: 4.482; /* * ZERO SINCE 2026-09-25, AND THE NAME IS KEPT ON PURPOSE. These were the * padding of the two white sub-panels. The panels are gone (below), so the * padding no longer buys clear space from anything — there is nothing on * the marks' outer sides but the band's own 40px gutter and 88px of block * padding. Left in place, it would only push both marks inboard of the * accompanying line and the disclaimer and read as a misalignment. * * They stay as variables rather than being deleted because --eu-ss-room * below is the width budget the emblem height is solved against, and that * budget must keep naming every horizontal inset by hand. A future inset * goes here, not into a magic number. */ --eu-ss-panel-pad-inline: 0px; --eu-ss-panel-pad-block: 0px; /* Everything between the viewport edges and the emblem's own canvas. */ --eu-ss-room: calc(2 * var(--eu-gutter, 20px) + 2 * var(--eu-ss-panel-pad-inline)); /* * THE RESOLVED MARK HEIGHT, AND WHY IT IS NOT JUST THE CLAMP. * * The frozen stylesheet pairs a specified `height` with `max-width: 100%`. * On a replaced element those two do not negotiate: the max-width wins on * the inline axis only and the artwork is COMPRESSED — non-uniform scaling * of an official mark, which is prohibited outright. It is not theoretical: * the Greek lockup is 18.8% wider than the English one for the same flag, * and at its 56px floor it needs 298.3px of canvas against the 302px a * 390px viewport leaves it. One step narrower and it would have compressed. * * So the height yields to the available width instead, and `max-inline-size` * is taken out of the argument below. MEASURED CONSEQUENCE, Greek, the * widest of the four: 56px of canvas down to 375px of viewport, 55.6px at * 360px, 48.1px at 320px. * * THE 44px FLOOR IS UNCONDITIONAL AND IS A FLAG FLOOR. The Graphic Charter's * 1cm minimum (p.6) binds the FLAG, which is 85.6% of every one of these * canvases, so 44px of canvas is 37.7px of flag in all four languages. */ --eu-ss-mark: max( 44px, min( var(--eu-ss-mark-h), calc((100vw - var(--eu-ss-room)) / var(--eu-ss-emblem-aspect)) ) ); /* * SINCE 2026-09-28 THE GROUP IS EMBLEM -> ACCOMPANYING LINE -> ENJOY, and * it spans the band's whole container so that ENJOY is at its far right. * Laid out further down, under "ENJOY AT THE FAR RIGHT"; the flex row and * 24px mark-to-mark gutter that stood here described the two marks side * by side, which the owner's later instruction replaced. */ flex: 1 1 100%; min-inline-size: 0; } /* * ============================================================================= * BOTH MARKS SIT DIRECTLY ON THE BAND. OWNER INSTRUCTION, 2026-09-25. * ============================================================================= * * The instruction is that the ENJOY and EU marks carry transparent backgrounds * in every language, every occurrence and every responsive size. This one * declaration is what delivers it: it overrides the two `background-color: * #fff` rules in the frozen parent's inc/blocks/eu-funding/style.css, which * were the ONLY opaque grounds behind either mark anywhere on this site. * * THE ARTWORK WAS ALREADY TRANSPARENT AND IS NOT TOUCHED. Every shipped file is * the official EC artwork, unchanged, palette PNG + tRNS, verified 2026-09-25 * by decoding each one: 60-65% of the emblem canvas and 36% of the signature * canvas are alpha 0, all four corners are alpha 0, and no white pixel outside * the painted mark exists in any of them. Nothing was keyed, matted, cropped, * re-encoded or regenerated. There was never a background to remove FROM the * files; the rectangles were CSS. * * WHAT IS INTRINSIC AND STAYS. The emblem's blue field, its twelve yellow stars * and its Reflex Blue wordmark; the signature's orange stamp, its white * lettering and its small blue flag chip. The emblem's own painted white * keyline — measured 23-24px on a 787px flag, i.e. 1/33.5, identically on EN, * DE, ES and EL — is part of the official file and stays: it is the EC's own * border, not a background, and it is now the visible edge of the mark rather * than something a white panel was hiding. * * MEASURED ON THE GROUND THE MARKS NOW ACTUALLY SIT ON, --eu-stone #E8E1D8: * * EU flag blue #003399 8.37:1 the emblem-vs-background contrast the * emblem rules (p.5) actually ask about * wordmark Reflex Blue 8.37:1 * ENJOY orange #DF5D28 2.82:1 logotype; see below * ENJOY blue chip 7.24:1 * * AND #E8E1D8 DOES NOT TRIGGER THE 1/25 WHITE BORDER. eu-emblem-rules_en.pdf * p.5 sets two sentences side by side — "sufficient contrast", then "if there is no * alternative to a coloured background, a white border ... one 25th of the * height of the rectangle". The operative test for a ready-made lockup is the * first. The guide's own worked examples on p.11 place this same supplied POS * lockup directly on a #E0E0E0 ground with no white plate and no enlarged * border, and Reflex Blue on #E0E0E0 is 8.23:1 — marginally WORSE than the * 8.37:1 published here. The issuer illustrates its own clause being satisfied, * bare, on a ground slightly darker than this one. Corroborating: the EC ships * the identical 23px keyline on the NEG variant, the one meant for dark * grounds, so if 1/25 governed the supplied lockups every EC file would breach * it in every use. 1/25 descends from the Graphics Guide and governs * compositing the BARE FLAG. Independently reviewed 2026-09-25. * * There is also no second route if anyone disagrees, and that is worth knowing * before reopening it: adding a border to the artwork is prohibited outright * (emblem rules p.4 and p.10, AGRIP SIMPLE MGA Article 17.2), and no supplied * EC variant carries a 1/25 border — all seven were measured. The only other * route is a white ground, which the owner ruled out by name. A disagreement * here goes back to the owner; it does not get resolved by altering the mark. * * THE SIGNATURE'S 2.82:1 IS A KNOWN AND ACCEPTED NUMBER, NOT AN OVERSIGHT. The * panel that used to lift it to 3.66:1 was an internal precaution, not a * requirement. Independently reviewed 2026-09-25 against every supplied source: * the Graphic Charter gives the stamp a colour and a B&W version and states no * ground, panel or contrast rule; programme-guide_agrip_en.pdf carries no * emblem or signature artwork rules at all; Annex 5 "Special logos" asks only * for English, vertical, colour or B&W, proportionate in size. Nothing sets a * floor. WCAG 1.4.11 is an external standard, not a project source, and it * exempts this mark twice over — the normative "essential" exception, which * bites hard here because the MGA and the Charter MANDATE the exact orange and * forbid modification, so recolouring to raise contrast is not lawfully * available; and the logotype exemption named in its Understanding document. * The owner's instruction is explicit and outranks the precaution. * * The mark's own white lettering sits on its own orange at 3.66:1 and is * unaffected by the page ground, which is why the stamp stays fully legible — * verified in the browser at every breakpoint, not computed. * * The project has in any case shipped this mark on a non-white ground since * launch: the hero seats it on unmodified photography, and Charter p.20, the * only website placement rule in any supplied source, puts it straight over a * halftone photographic composition with no plate. A white panel in the footer * band was the inconsistent treatment, not this one. * * DO NOT "FIX" THIS BY GIVING THE BAND A WHITE GROUND. That is the same white * rectangle at a larger size and the owner ruled it out by name. */ .eu-funding .eu-funding__emblem, .eu-funding .eu-funding__signature { margin: 0; padding: var(--eu-ss-panel-pad-block) var(--eu-ss-panel-pad-inline); background-color: transparent; flex: 0 0 auto; } /* * THE ONE DECLARATION THAT INVERTS THE WHOLE BAND IF IT IS DROPPED. * * The frozen block stylesheet sets `.eu-funding__signature { margin-inline-start: * auto }`, which is what pushed the signature to the far end of the row and put * the accompanying line between the two marks. With the signature now a child * of the marks group, that same `auto` would push it away from the emblem * INSIDE the group and the correction would be visually undone while the markup * looked right. */ .eu-funding .eu-funding__signature { margin-inline-start: 0; line-height: 0; } .eu-funding .eu-funding__emblem-img { display: block; block-size: var(--eu-ss-mark); inline-size: auto; /* * Deliberately released. The height above is already bounded by the room * the viewport leaves, so this can only ever compress the artwork. See the * note on --eu-ss-mark. */ max-inline-size: none; } /* * The signature is sized FROM the emblem so the two marks stay in proportion at * every width. 1.58 of artwork to emblem canvas is the ratio the band already * rendered at 1440px (120px against 76px); the canvas is 510/438 of the * artwork, so canvas = 1.58 x 1.164384 = 1.8397 x the emblem's canvas height. * * At the 76px cap that is 139.8px, which is the frozen 139.7px to within a * rounding — SO THE DESKTOP RENDERING IS UNCHANGED. What it fixes is the narrow * end, where the emblem clamped down to 56px and the signature did not, leaving * a stamp 2.14x the height of the emblem beside it. Nobody saw that while the * two were at opposite ends of the row. * * The official file's canvas padding is not cropped; only its ground changes. */ .eu-funding .eu-funding__signature .eu-signature__img { block-size: calc(var(--eu-ss-mark) * 1.8397); inline-size: auto; aspect-ratio: 348 / 510; max-inline-size: none; } /* * Row gap 32px, column gap 48px. Since 2026-09-28 .eu-funding__inner holds the * one institutional group and nothing beside it, so these gaps only bind if the * parent ever puts a second item there; the intervals inside the group are set * under "ENJOY AT THE FAR RIGHT". */ .eu-funding .eu-funding__inner { gap: var(--wp--preset--spacing--32, 32px) var(--wp--preset--spacing--48, 48px); } /* * ============================================================================= * ENJOY AT THE FAR RIGHT, THE PHRASE IMMEDIATELY TO ITS LEFT. OWNER, 2026-09-28. * ============================================================================= * * The owner's instruction of 2026-09-28 controls the relative layout of every * occurrence of the stamp: ENJOY at the far right of its institutional group, * the full localized accompanying line immediately to its left, the emblem at * the left. inc/owner-corrections-20260925.php moves the line into this group * between the two marks, so the DOCUMENT order is already emblem -> line -> * ENJOY; these rules only place the three, by EXPLICIT GRID COLUMN, never by * `order` and never by wrapping. A flex row that wraps could drop ENJOY under * the line or the line under the emblem at some width nobody sampled; grid * placement cannot, because each item's column is named. * * WIDE (>= 1024px), ONE ROW: * * [ emblem ] ......free space...... [ accompanying line ] [ ENJOY ] * * The line is pushed to the END of its 1fr column (justify-self), so it sits * against the stamp and the free space falls between the emblem and the line. * It keeps the frozen band's own 46ch measure. * * NARROW (< 1024px), TWO ROWS, THE SAME ORDER: * * [ emblem ] * [ ........... accompanying line ] [ ENJOY ] * * One row is arithmetically unavailable: the Greek lockup alone is 298px at * the 56px mark height, and at 768px that leaves the line about 240px beside a * 70px stamp — five or six lines of 17px type squeezed between two marks. The * emblem therefore takes the first row on its own, still at the left, and the * line and the stamp share the second, the line set against the stamp — it * fills its column when it is longer than the column, and otherwise ends at * the stamp rather than leaving a gap before it. Reading order, top-to-bottom and * left-to-right, is still emblem -> line -> ENJOY, and ENJOY is still the * rightmost thing in the group. The line may take as many lines as it needs; * it is never truncated. * * PROTECTION AREA AND CLEAR SPACE, from painted edges (H = emblem canvas): * * emblem -> line, one row X - right inset = 0.428H - 0.1795H = 0.249H * = 18.9px at 76px. The gap is at least 48px. * emblem -> row two, stacked X - bottom inset = 0.428H - 0.0457H = 0.382H * = 21.4px at 56px, 16.8px at 44px. 32px used. * line -> ENJOY the stamp's clear space 0.207 x its artwork * (1.58H) less its 38/348 left inset (0.137H) * = 0.190H = 14.4px at 76px. 24px used. * * THE STAMP'S PAINTED RIGHT EDGE is put on the container line by moving the * file's own transparent right inset (38/348 of its width, 0.1371H) into the * band's gutter, as the header does with the flag's left inset. Nothing is * cropped or drawn over; the gutter is at least 20px and the inset at most * 10.4px. */ .eu-funding .eu-funding__marks { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0; } .eu-funding .eu-funding__marks > .eu-funding__emblem { grid-column: 1; grid-row: 1; justify-self: start; } .eu-funding .eu-funding__marks > .eu-funding__statement { grid-column: 2; grid-row: 1; /* * `safe`: if a single word is ever wider than the column (measured * 2026-09-28: Spanish "PROMUEVEN" at a 32px browser default text size at * 320px), plain `end` pushes the overflow off the LEFT edge, where it can * never be scrolled into view. `safe end` falls back to start, so the * overflow goes right, where it is reachable. No other case changes. */ justify-self: safe end; margin: 0 var(--wp--preset--spacing--24, 24px) 0 var(--wp--preset--spacing--48, 48px); } /* * The line's text set against the stamp from 768px, as in the header: each of * its two or three lines ends 24px from ENJOY. Start-aligned, the ragged edge * ended up to 118px short (ES at 900px, measured 2026-09-28). Below 768px it * runs to four or five lines across its column and stays start-aligned. */ @media (min-width: 768px) { .eu-funding .eu-funding__marks > .eu-funding__statement { text-align: end; } } .eu-funding .eu-funding__marks > .eu-funding__signature { /* Always the last column, with or without a line before it. */ grid-column: 3; grid-row: 1; margin-inline-end: calc(var(--eu-ss-mark) * -0.1371); } @media (max-width: 1023.98px) { .eu-funding .eu-funding__marks { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--wp--preset--spacing--32, 32px); } .eu-funding .eu-funding__marks > .eu-funding__emblem { grid-column: 1 / -1; inline-size: fit-content; } .eu-funding .eu-funding__marks > .eu-funding__statement { grid-column: 1; grid-row: 2; /* Against the stamp, as in the wide row: a line shorter than its * column must not leave a gap before ENJOY (measured 2026-09-28: * 212px at 900px in English with `stretch`). A longer line fills the * column anyway. `safe`: see the one-row rule above. */ justify-self: safe end; max-inline-size: none; /* * A WORD WIDER THAN THE COLUMN BREAKS; IT NEVER OVERFLOWS. Measured * 2026-09-28 at a 32px browser default text size at 320px: Spanish * "PROMUEVEN" is 219px against a 217px column. Left to overflow it either * leaves the screen on the left (plain `end`) or runs into ENJOY's clear * space (`safe end`). `anywhere`, not `break-word`: a non-stretched * grid item is sized from its min-content width, which `break-word` * does not lower, so the box itself stayed 219px wide and still * collided (measured). Either value breaks ONLY a word that cannot * fit a line on its own, so at the default text size in every * language nothing changes; no character is removed or hidden. */ overflow-wrap: anywhere; margin: 0 var(--wp--preset--spacing--24, 24px) 0 0; } .eu-funding .eu-funding__marks > .eu-funding__signature { grid-column: 2; grid-row: 2; } } /* * THE BAND AFTER THE DIETARY-GUIDELINE REFERENCES LEAVE IT. * * On the two routes that carry their own dietary-guidance section the band * loses its two-column reference block, and the legal rule becomes the band's * only division. It takes the stronger hairline the reference block used to * carry, so one rule still means one thing, and more room above it so the * disclaimer reads as a lower tier rather than crowding the marks. * * These are safe on the ten routes that keep their references: a stronger rule * and 48px above the legal block are correct either way. */ .eu-funding .eu-funding__legal { margin-block-start: var(--wp--preset--spacing--48, 48px); border-block-start: 1px solid var(--eu-hair-strong, rgba(51, 49, 51, 0.14)); } @media (min-width: 1180px) { .wp-block-eu1144-eu-funding.eu-funding { padding-block: var(--wp--preset--spacing--88, 88px); } } /* * THE GERMANY AND SPAIN BLOCKS: REGROUPED, NOT REWRITTEN. * * Each block ends with two small grey paragraphs that name the same authority * within forty words — the approved "Source: …" attribution and the prescribed * dietary-guideline reference. They are NOT interchangeable and neither may be * dropped: the attribution is approved brochure copy that attributes the * paragraph above it, the reference is AGRIP-prescribed signpost wording that * carries the link. Both are structurally locked. NOT ONE CHARACTER OF EITHER * IS ALTERED HERE. * * What made them read as a mistake was the spacing: both sat 24px out with a * rule between them, so they grouped with EACH OTHER instead of with the copy * they belong to. The attribution now sits tight under the paragraph it * attributes, as a footnote to it; the reference keeps its hairline and becomes * the block's closing line; and the link — the only part of either sentence * that is not a repetition — carries a little more weight so the eye lands on * the payload. */ .eu-market .eu-attribution { margin-block-start: var(--wp--preset--spacing--16, 16px); border-block-start: 0; padding-block-start: 0; } .eu-market .eu-reference { margin-block-start: var(--wp--preset--spacing--32, 32px); } .eu-market .eu-reference a { font-weight: 500; } /* ========================================================================== * THE OWNER'S CORRECTIONS OF 2026-09-26 — 1 and 3. * * Correction 2, the Enjoy mark's place in the header, is further down. * ========================================================================== */ /* * CORRECTION 1 — THE NETWORK NAME IS THE LINK. * * The markup half is in inc/owner-corrections-20260926.php. What is left for * the stylesheet is telling the two row shapes apart, because they now carry * DIFFERENT MEANING IN THE SAME CELL: * * .eu-channel--website cell 1 is a label, cell 2 is the link * .eu-channel--social cell 1 IS the link * * The frozen parent gives .eu-channel__label `opacity: .7`, which is right for * a label and wrong for a link — a 13px tracked word at 0.7 of the body ink is * neither clearly a link nor comfortably readable. .eu-channel__link therefore * restores full ink and takes the same underline device the rest of the footer * uses (transparent by default, accent on hover and focus), so the LEARN MORE * column now reads like its two neighbouring columns instead of like a table * with three identical entries. * * Measured against --eu-page, the label at 0.7 is 5.6:1 and the link at full * ink is 12.0:1. Neither was a failure; the second is the one a reader is * asked to click. */ .eu-channels li { /* * The row's own padding went to the link so that the TARGET is 44px rather * than the row. Same rhythm as before to within a pixel: the row was * 12 + 19 + 12 = 52.2px, it is now a 44px target plus 4px either side. */ padding-block: var(--wp--preset--spacing--4, 4px); align-items: center; } .eu-channel__link, .eu-channel__name a { display: inline-flex; align-items: center; /* A real target, not a 19px word. Matches .eu-consent-control. */ min-block-size: 44px; text-decoration-line: underline; text-underline-offset: 6px; } .eu-channel__link { /* Full ink: this cell is the link, not the label beside one. */ opacity: 1; color: color-mix(in srgb, var(--eu-ink) 92%, var(--eu-page)); } /* * THE UNDERLINE IS NOT DECORATION HERE, IT IS THE AFFORDANCE. * * The footer's other two columns hide their underline until hover or focus, * which is right for a list where every item is a link and the heading above * says so. This column is different: after the owner's correction it holds a * label that is NOT a link (WEBSITE) in the same cell, the same type and the * same tracking as three that are. Measured on the first cut of this change, * with the underline transparent, FACEBOOK / INSTAGRAM / YOUTUBE were * indistinguishable from the WEBSITE label beside them — and only * eusnacksmart.eu, in the second cell, looked clickable. Colour alone is not * allowed to be the difference either (WCAG 1.4.1), and at 92% against 74% ink * it would not have been a usable one. */ .eu-channel__link, .eu-channel__name a { text-decoration-color: color-mix(in srgb, var(--eu-ink) 40%, transparent); text-decoration-thickness: 1px; } .eu-channel__link:hover, .eu-channel__link:focus-visible, .eu-channel__name a:hover, .eu-channel__name a:focus-visible { color: var(--eu-ink); text-decoration-color: var(--eu-accent); } /* * The first cell is `flex: 0 0 8rem` in the parent. A social row has only that * cell, so without this the link's target would be 8rem wide whatever the word * is — a 128px hit area around "YouTube" that a reader cannot see the edge of. * It shrinks to its own word and the ROW keeps the 8rem rhythm, because every * row still starts at the same inline edge. */ .eu-channel--social .eu-channel__link { flex: 0 1 auto; } /* * CORRECTION 3 — ONE COLUMN FOR THE LEGAL LINKS, AT EVERY BREAKPOINT. * * The footer meta row is a single wrapping flex row carrying four children: * the copyright, Privacy Policy, EU communication, and — injected into the * same row by the analytics mu-plugin — Measurement preferences. * * With all four in one wrap flow, where the line broke depended on how wide * the copyright and the translated labels happened to be. Measured on the * running preview at 390px before this change: the copyright sat at x=20 and * Privacy Policy at x=212.6 ON THE SAME LINE, while EU communication wrapped * to x=20 on the next one and Measurement preferences to x=177.9 beside it. * Three links in one list, at three different inline positions, in an order * that changes with the language. That is what the owner is looking at. * * THE FIX IS ONE DECLARATION AND IT NEEDS NO MEDIA QUERY, which is the point: * the copyright takes a full line of its own, so the legal links always begin * a fresh flex line together. Flex lines start at the line's main-start edge, * so link one aligns with link two aligns with link three — when they share a * line, and equally when a long German or Greek label pushes one onto the next * one. It is true at every width and in every language BY CONSTRUCTION, rather * than at the widths and in the languages somebody remembered to screenshot. * * Rejected: a media query putting the copyright and the links on one row above * some threshold. It reintroduces exactly this defect in the band just below * that threshold, which is the band nobody samples. * * Rejected: wrapping the three links in their own container. The third one is * injected by mu-plugins/eu1144-snacksmart-analytics/control.php, which * deliberately adds NO CSS and matches on the meta group's class token; a new * wrapper would have to be taught to it, and the fallback path — the one that * exists so a consent interface always has a withdrawal control — would then * place the control somewhere else entirely. */ .eu-footer__meta { align-items: center; row-gap: var(--wp--preset--spacing--8, 8px); } .eu-footer__copyright { flex: 1 0 100%; } /* * Equal targets for the three links, so the row is one list in behaviour as * well as in position. .eu-consent-control already carries min-block-size:44px * from the consent stylesheet; these two did not, and Privacy Policy measured * 19px tall at 390px before this change. */ .eu-footer__legal a { display: inline-flex; align-items: center; min-block-size: 44px; text-underline-offset: 2px; } /* ========================================================================== * THE ΥΠΑΑΤ INSTITUTIONAL HEADER OF 2026-09-28. * * The owner relayed four telephone instructions from ΥΠΑΑΤ, to be treated as * the current authoritative layout requirement and superseding the earlier * placement preferences — including the upper-right "mark shelf" of the * owner's correction 2 of 2026-09-26, which this section replaces: * * 1. the EU flag on the left; * 2. the Enjoy logo to the right of the EU flag; * 3. the grey localized supporting phrase next to the Enjoy logo; * 4. while scrolling down, Enjoy remains fixed/visible. * * AMENDED THE SAME DAY BY THE OWNER, and the later instruction controls the * relative layout: wherever Enjoy appears it is at the FAR RIGHT of its * institutional row, with the full localized phrase IMMEDIATELY to its left; * the flag stays at the left. So the tier reads lockup -> phrase -> ENJOY, * with the free space between the lockup and the phrase: * * [ co-funded lockup ] The European Union supports ... [ ENJOY ] * * The markup and the reasoning about the artwork are in * inc/ministry-header-20260928.php. This file owns the geometry. * * WHAT IT IS. An institutional TIER, the first row inside the fixed brand bar, * above the campaign lockup and the navigation. The brand-bar row underneath it * is exactly the row it was — same 96/72px height, same 150/120px lockup, same * navigation, same language switcher, same 1300px overlay threshold — because * that row has no width to give (SNACKSMART-RUNBOOK.md: a 40px insertion wraps * four German headings at every width from 1300 to 1600) and was not touched. * * WHY THE WHOLE GROUP STAYS FIXED, NOT ENJOY ALONE. .eu-bar is already * position: fixed in the frozen parent, so putting the tier inside it makes the * flag, the phrase and Enjoy stay on screen together, in the instructed order, * at every scroll position. An Enjoy mark docked on its own would be the * "floating ambiguously" case the instruction rules out, and it would also * detach the mark from the EU emblem's institutional group, which the owner * has required since 2026-09-25. * * NOTHING HERE MOVES ON SCROLL. The tier never resizes, fades or animates * (the parent's enjoy-signature stylesheet forbids transition and animation on * the mark). Only the brand-bar row keeps its existing 96 -> 72px condense. * ========================================================================== */ /* * THE TOKENS. Static values only, never measured in JavaScript — the parent's * own rule for the header, and the reason the reserves below cannot drift. * * --ss-id-h is the CANVAS HEIGHT of both official files in the tier, the * lockup and the stamp alike. At a common canvas height their PAINTED heights * are within a pixel of each other (lockup 835/919 = 0.909, stamp 438/510 = * 0.859; the vertical lockup 767/946 = 0.811), so the row reads as two marks of * one size rather than a big one and a small one. * * WHY THE SIZE IS WHAT IT IS — R-08, MEASURED ON THE PAINTED BOXES. * The emblem must be at least as prominent as any other logo shown with it * (themes/eu1144-snacksmart/README.md §3.4), and the campaign lockup is right * below it. Canvas height is not the test any more: a canvas's transparent * margin is invisible. The test is the lockup's PAINTED height against the * SNACK SMART lockup's painted height (the SVG has no padding), at every width * and in both bar states: * * >= 1024 logo = clamp(118px, 11vw, 150px) / 2.1782 = 54.2-68.9px on * landing, 55.1px condensed. Lockup painted = 0.909 x * clamp(61px, 5.6vw, 76px) = 55.4-69.1px. 0.909 x 5.6vw = 5.09vw * against the logo's 5.05vw, 69.1 against 68.9 at the cap, 55.4 * against the condensed 55.1 at the floor. Never smaller. * 768-1023 logo 118px = 54.2px. Lockup 60px -> 54.5px painted. * < 768 the official VERTICAL lockup at 76px -> 61.6px painted (ES * 63.2px) against 54.2px; its flag is 39.3px (ES 40.3px), above the * 1cm = 37.8px Charter minimum (p.6). See "below 768px" further down. * * At 76px the header lockup is the SAME size as the footer band's lockup at * its 76px cap: two emblems on a page, one size. */ :root { --ss-row-h: 72px; --ss-id-h: 76px; --ss-id-pad-top: 8px; /* * THE BOTTOM PADDING IS THE EMBLEM'S PROTECTION AREA, not a spacing step. * The emblem rules keep X = half the flag height free of other logos on * every side (p.9), and the SNACK SMART lockup sits directly below the * EU lockup at the same container edge. Measured from painted edges: * * X = 0.5 x flag height * lockup's own bottom inset = what the file already carries * the campaign lockup's top = (row height - logo height) / 2 inside the * row, i.e. 8.9px at 72px/54.2px and 8.45px * in the condensed 72px/55.1px row * the 1px tier rule * * plus 4px, because the emblem rules (p.11) recommend MORE than the * minimum from a beneficiary's logo. Below 768px (vertical lockup: flag * 0.517H, bottom inset 0.094H, ES 0.530H / 0.085H) that comes to 7.9px and * 10px is used. */ --ss-id-pad-bottom: 10px; --ss-id-rule: 1px; /* * Lockup to phrase. Since 2026-09-28 the PHRASE, not the stamp, follows the * lockup, and text gets no inset of its own, so the emblem's whole * protection area (X = half the flag height) has to be carried by this gap * less only the lockup's own painted right inset. Measured off the files: * * vertical flag 0.517H, right inset EN 37/946 DE 39/946 EL 44/946 * ES 74/922 (flag 0.530H) -> at most 0.2195H = 16.7px at 76px * horizontal flag 0.856H, right inset 164-171/919 -> 0.250H = 15.0px at * 60px, 19.0px at 76px * * 20px narrow (vertical lockup), 24px from 768px (horizontal). */ --ss-id-gap-emblem: 20px; /* * Phrase to stamp. The stamp's clear space is this project's documented * 0.207 x artwork height (NOT a Charter value; the Charter states none), * less the file's own 38/348 left inset: 0.1035H, 7.9px at 76px. */ --ss-id-gap-phrase: 12px; --ss-tier-h: calc(var(--ss-id-pad-top) + var(--ss-id-h) + var(--ss-id-pad-bottom) + var(--ss-id-rule)); /* * THE PARENT'S TWO HEADER TOKENS, REDEFINED ONCE, HERE. * * --eu-header-h is everything the parent reserves for the fixed header: * the home region's first grid track, .eu-bar's own block-size, the plate * and page paddings (base.css, portal.css). It is now the tier plus the * row, so every one of those reserves grows by the tier without a single * per-surface rule — which is what the four 2026-09-26 shelf reserves had * to do by hand, and could get wrong. * * This :root rule wins over the parent's own :root and its @media * (min-width: 1024px) :root at EQUAL specificity because this stylesheet is * printed after base.css (its handle depends on it). Media queries add no * specificity. Nothing below :root overrides either token. * * --eu-header-sticky-h is what stays over the content once the reader has * scrolled: the tier plus the CONDENSED row, which is 72px at every width. * Anchors and keyboard focus are offset by this (see "FOCUS" below). * * The 1/6 signature arithmetic is unaffected: --eu-signature-h is * --eu-region-h / 6, and --eu-region-h has never depended on either token. */ --eu-header-h: calc(var(--ss-row-h) + var(--ss-tier-h)); --eu-header-sticky-h: calc(var(--ss-tier-h) + 72px); } @media (min-width: 768px) { :root { --ss-id-h: 60px; --ss-id-pad-bottom: calc(var(--ss-id-h) * 0.3823 - 5.9px); --ss-id-gap-emblem: 24px; --ss-id-gap-phrase: 16px; } } @media (min-width: 1024px) { :root { --ss-row-h: 96px; --ss-id-h: clamp(61px, 5.6vw, 76px); /* 0.428H - 0.0457H - 8.45px - 1px + 4px: 18.2px at 61px, 23.6px at 76px. */ --ss-id-pad-bottom: calc(var(--ss-id-h) * 0.3823 - 5.45px); --ss-id-gap-phrase: 20px; } } /* * THE BAR. The frozen parent gives .eu-bar `block-size: var(--eu-header-h)`, * which is now tier + row by the token alone. Two things it does not know: * * - its condensed state sets `block-size: 72px` at (0,2,0), which would now * squeeze the TIER. Restated at (0,3,0) so load order cannot decide it. * - .eu-bar__inner is `block-size: 100%`, which would now be tier + row. * It is the row, so it is given the row's own height. */ .ss-bar.eu-bar > .eu-bar__inner { block-size: var(--ss-row-h); /* core's flow layout puts a block gap on every second child. */ margin-block-start: 0; } @media (min-width: 1024px) { .ss-bar.eu-bar.is-condensed { block-size: calc(var(--ss-tier-h) + 72px); } .ss-bar.eu-bar.is-condensed > .eu-bar__inner { block-size: 72px; } } /* * THE TIER. Full-bleed within the bar — it pulls itself out of the bar's own * gutter so its hairline runs edge to edge — and its content sits on the same * 1280px container the row below it uses, so the flag and the campaign lockup * start from one line. * * The ground is the bar's own --eu-page, not a band of a different colour: a * grey strip reads as a government template, and the marks were measured on * this ground already (the stamp's orange on --eu-page is 3.315:1, recorded in * SNACKSMART-RUNBOOK.md). No plate behind either mark, no border around the * group, no radius, no shadow. The hairline divides the institutional tier * from the campaign row; it does not frame the three items as one lockup * (MGA Article 17.2: the emblem stays "distinct and separate"). */ .ss-bar .ss-identity { box-sizing: border-box; block-size: var(--ss-tier-h); margin: 0 calc(var(--eu-gutter) * -1); padding: 0 var(--eu-gutter); border-block-end: var(--ss-id-rule) solid var(--eu-hair); background-color: var(--eu-page); } /* * THREE NAMED COLUMNS, SINCE 2026-09-28: lockup | phrase | ENJOY. * * The owner's instruction of 2026-09-28 puts ENJOY at the far right of the * tier with the phrase immediately to its left, and keeps the flag at the * left. The markup is already in that order; the grid only places it. Each * item names its own column, so ENJOY is in the last column whether or not a * phrase precedes it, and nothing can wrap under anything else at any width — * the row never wraps, and the phrase may wrap only within its own column. * The 1fr column absorbs the free space, between the lockup and the phrase. */ .ss-bar .ss-identity__inner { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; block-size: 100%; max-inline-size: var(--eu-container); margin: 0 auto; padding-block: var(--ss-id-pad-top) var(--ss-id-pad-bottom); } .ss-bar .ss-identity__inner > * { margin-block: 0; } /* * 1. THE LOCKUP. Height-driven, never width-bounded: a specified height with a * binding max-width compresses a replaced element horizontally, which is * non-uniform scaling of an official mark. The widest file (Greek) was checked * against the narrowest width it is served at. * * The negative start margin moves the file's own transparent left inset * (41-42 of 919px) into the empty gutter, so the FLAG's painted edge — not an * invisible canvas edge — lands on the line the campaign lockup starts from. * Nothing is cropped and nothing is drawn over. */ .ss-bar .ss-identity__emblem { grid-column: 1; grid-row: 1; margin-inline: calc(var(--ss-id-h) * -0.0446) 0; line-height: 0; } .ss-bar .ss-identity__emblem-img { display: block; block-size: var(--ss-id-h); inline-size: auto; max-inline-size: none; } /* * 3. THE STAMP — the parent's own block, LAST, at the far right (2026-09-28). * Neutralise the block's ">= 1024px" absolute branch and its grid-cell * alignment BY SPECIFICITY, not by order: block stylesheets have no guaranteed * enqueue order against this one. (0,2,0) against the block's (0,1,0). * * The negative end margin moves the file's own transparent right inset * (38/348 of its width = 38/510 of its height) into the gutter, so the * STAMP'S painted right edge — mirroring the flag's painted left edge — lands * on the container line the navigation and the language selector end on. * Nothing is cropped or drawn over; the gutter is at least 20px, the inset * at most 5.7px. */ .ss-bar .eu-signature { position: static; inset: auto; z-index: auto; grid-column: 3; grid-row: 1; align-self: center; justify-self: end; margin: 0 calc(var(--ss-id-h) * -0.0745) 0 0; line-height: 0; pointer-events: none; } .ss-bar .eu-signature__img { /* The canvas height; the artwork is 438/510 of it. */ block-size: var(--ss-id-h); inline-size: auto; max-inline-size: none; } /* * 2. THE PHRASE — between the lockup and the stamp since 2026-09-28, pushed to * the END of its column so that it sits immediately left of ENJOY and the free * space falls between it and the lockup. The locale's own mandatory * accompanying line, one unbroken text node, exactly as the footer band prints * it. * * Sentence case as written — no text-transform, no tracking, no italics — so * the painted text always equals the DOM text and the owner's upper-case * Spanish override stays exactly the bytes supplied. The body sans, not the * display face, so it reads as institutional furniture, not as a headline. * * GREY, AND MEASURED: ink at 76% on --eu-page is #626060, 5.66:1 — above the * 4.5:1 that body text needs at any size. Nothing lighter. * * SIZE. 14px narrow and up to 16px wide. The footer band keeps its own * >= 17px instance of the same sentence on every route; the internal spec's * 17px floor (§12.3) was written for that band and is not applied to this * header copy, which sits at the scale of the marks beside it. Recorded in * docs/reports/snacksmart-ministry-header-20260928.md. * * IN PX, NOT REM, AND DELIBERATELY. The tier is FIXED and its height is a * static reserve (--ss-tier-h) that every surface below it is offset by. Set in * rem, the phrase grew with the browser's default text size while the reserve * did not: measured 2026-09-28 at a 32px default (200%), the Spanish phrase * began 118px ABOVE the viewport at 390px — lines that can never be scrolled * into view — and painted over the campaign lockup and the menu button. A * rem-based reserve cannot fix that, because the LINE COUNT grows with the * text as well as the line height. Page zoom — the WCAG 1.4.4 mechanism — * scales px and the reserve together and was measured clean at 200% in every * language. The same sentence, in rem, is in the footer band on every route * and follows the reader's default text size there. * * IT MAY WRAP, AND IT MAY ONLY WRAP WITHIN ITSELF. It owns the middle grid * column and the row never wraps, so however many lines a translation takes, * the phrase stays between the lockup and the stamp, immediately left of the * stamp, and can never fall under either mark. The * number of lines is bounded by the tier's height at every width from 320px * to 1600px in all four languages — a measured property, asserted by * .work/qa/ministry-header-20260928/geometry.mjs, not a hope. */ .ss-bar .ss-identity__statement { grid-column: 2; grid-row: 1; /* `safe`, as in the band: an over-long word overflows right, never off-screen left. */ justify-self: safe end; min-inline-size: 0; max-inline-size: 40ch; margin: 0 var(--ss-id-gap-phrase) 0 var(--ss-id-gap-emblem); font-family: var(--wp--preset--font-family--text); font-size: 14px; font-weight: 400; font-style: normal; line-height: 1.3; letter-spacing: normal; text-transform: none; color: color-mix(in srgb, var(--eu-ink) 76%, var(--eu-page)); } /* * SET AGAINST THE STAMP FROM 768px. Where the phrase is shorter than its column * (two or three lines, from 768px up) its lines are aligned to its END, so every * line finishes the same --ss-id-gap-phrase from ENJOY and "immediately to the * left" is true of the text, not only of its box. Start-aligned, the ragged edge * ended up to 49.5px short of the stamp (measured 2026-09-28, EN at 1600px). * Below 768px the phrase fills its column and runs to four or five lines, so it * stays start-aligned there: a ragged left edge over five short lines reads * worse than it looks against a mark. */ @media (min-width: 768px) { .ss-bar .ss-identity__statement { text-align: end; } } @media (min-width: 1024px) { .ss-bar .ss-identity__statement { font-size: clamp(14px, 7.2px + 0.6vw, 16px); line-height: 1.35; } } /* * BELOW 768px: THE VERTICAL LOCKUP. * * Served by the in the markup — one , one accessible name — not * by hiding one of two images. The EC's emblem guidance recommends the * horizontal version at small sizes (p.9), and it is used down to 768px. Below * that it cannot serve the instruction: at the size R-08 requires (60px) the * Greek horizontal lockup alone is 320px wide, so at 390px it leaves no room * for the phrase and the stamp beside it, and the instructed row would become * a stack. The vertical file of the same language keeps lockup -> phrase -> * ENJOY on one row at every width down to 320px. */ @media (max-width: 767.98px) { .ss-bar .ss-identity__emblem { margin-inline-start: calc(var(--ss-id-h) * var(--ss-emblem-inset-v, 0.0391) * -1); } } /* * THE NARROWEST PHONES. Below 380px the phrase column is 110-170px wide, and * at 14px German, Greek and the upper-case Spanish run to five or six lines, * which the 76px mark height cannot hold. 12.5px on a 1.2 leading holds four * lines at 360px and five (75px) at 320px in every language: the full * sentence, never a truncation, never an ellipsis, never a "…more". Measured * per language at every width by geometry.mjs. */ @media (max-width: 379.98px) { .ss-bar .ss-identity__statement { font-size: 12.5px; line-height: 1.2; } } /* * SHORT VIEWPORTS: THE TIER STAYS, THE ROW SCROLLS AWAY. * * A phone held landscape (844x390, 740x360) or a desktop at 400% zoom * (1280x900 becomes 320x225 CSS px) has no height for a two-tier fixed header: * tier and row together are 158px, 40% of a 390px-tall screen and 70% of a * 225px one — the page would be read through a slot. The ministry's * requirement is that ENJOY stays visible, and the tier is what carries it, * so below 500px of height the tier alone stays fixed. The brand-bar row stays * where it is at the top of the document and scrolls away with it, exactly as * an unfixed header does; scrolling back to the top returns it, and nothing in * it is removed, hidden or re-ordered. * * Implemented without moving a single element: the bar becomes absolute (so * it keeps its place at the top of the document and its full height in the * reserves), and the tier inside it becomes fixed. The bar keeps its own * stacking context (z-index 20), so the fixed tier still paints above page * content and still below the navigation overlay, the questionnaire (80), the * consent notice (90) and the skip link (100). * * THIS IS A BEHAVIOUR FOR THE OWNER TO CONFIRM, recorded in the report, not a * quiet removal: it changes what stays on screen at under 500px of height. */ @media (max-height: 499.98px) { :root { --eu-header-sticky-h: var(--ss-tier-h); } .ss-bar.eu-bar { position: absolute; } .ss-bar .ss-identity { position: fixed; inset-block-start: 0; inset-inline: 0; margin: 0; } .ss-bar.eu-bar > .eu-bar__inner { margin-block-start: var(--ss-tier-h); } } /* * FOCUS NOT OBSCURED (WCAG 2.2 SC 2.4.11). The fixed header is now taller, so a * keyboard user tabbing down the page must never land on a control that is * underneath it. scroll-padding on the root is what the browser applies when it * scrolls a focused element into view, and it is also applied to fragment * navigation — so the parent's `[id] { scroll-margin-top: sticky-h + 24px }` * is reduced to the 24px breathing space, or every anchor would be offset * twice. Same landing position for every anchor; focus is now covered too. */ html { scroll-padding-block-start: var(--eu-header-sticky-h); } :root [id] { scroll-margin-top: 24px; } /* -------------------------------------------------------------------------- * THE HOME PAGE. * * The region's first grid track is --eu-header-h, so the hero now starts below * the tier with no rule of its own. Two consequences are handled here. * -------------------------------------------------------------------------- */ /* * 1. THE REGION MAY GROW, AT EVERY WIDTH. It is `block-size: --eu-region-h` in * the parent, a fixed frame; with the tier in its first track, the frame * left for the hero is up to 109px shorter than it was. Where the hero's * content no longer fits, a fixed frame makes that an overflow — below * 1024px the hero paints over the section beneath it, and at 1024px and up * (next rule) the display type overflows UPWARDS, under the fixed header. * min-block-size makes it growth instead. Wherever the content fits, 1fr * still fills the frame exactly and nothing changes. * * This was already the rule below 1024px (2026-09-26, Greek at 320px). It * now holds at every width. * * --eu-signature-h is one sixth of --eu-region-h, the frame the reader * LANDS on — not of however tall the region renders — and no mark in the * header region is sized from it any more. */ .eu-header-region { block-size: auto; min-block-size: var(--eu-region-h); } /* * 2. THE WIDE HERO'S TYPE MAY NOT BE PUSHED UNDER THE HEADER. The parent's wide * hero is `grid-template-rows: minmax(0, 1fr) …` with the display set * `justify-content: flex-end; min-block-size: 0`, so when the first track is * shorter than the type, the type overflows UPWARDS. Measured on the * release this replaces, before any change: the Greek eyebrow "Ευρωπαϊκά * φρέσκα φρούτα" at y=69.9 under a bar ending at y=96 at 1600x900, and * likewise at 1280x720, 1366x768 and 1920x1080 — a pre-existing defect that * the taller header would have extended to 1440x900 and to German. * * A min-content floor on that track sizes it to the type, and with the * region free to grow (rule 1) the photograph simply gets taller instead. */ @media (min-width: 1024px) { .eu-header-region > .eu-hero { grid-template-rows: minmax(min-content, 1fr) minmax(var(--eu-plinth-h), auto); } } /* -------------------------------------------------------------------------- * THE TWO RESERVATIONS THE DEPARTED HERO MARK LEFT BEHIND. * * Both are in the frozen parent, both are sized from --eu-signature-h, and * both now hold space open for a mark that is not there. Left alone they read * as a different defect: a hole in the plinth and a truncated standfirst. * -------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* * 156px of right padding at 1440x900, held for the old bottom-right mark's * clear space. It is why the standfirst broke mid-word at "programme, co-" * in the before capture. The mark has gone; the measure comes back. */ .eu-hero__standfirst { padding-inline-end: 0; } /* * --eu-plinth-h was the old mark's height plus 48px — 198px at 1440x900 — * and it is the minimum of the hero's second grid track, the inset of the * photograph and the inset of the scrim. With the mark gone it is three * lines of the standfirst plus the plinth's own 32px padding block, which * is the German case with the measure restored; the track is * minmax(--eu-plinth-h, auto), so a longer translation still grows it. */ .eu-hero { --eu-plinth-h: calc( 2 * var(--wp--preset--spacing--32, 32px) + 3 * 1.5 * var(--wp--preset--font-size--lead, 1.1875rem) ); } } /* * PRINT. The frozen parent removes .eu-bar from print altogether * (base.css, `@media print { .eu-bar { display: none } }`), and the tier is * inside it, so the header's marks do not print — and in particular a fixed * tier is never repeated over the text of every printed page. The footer band * prints the lockup, the stamp and the phrase once, as it always has. */