/*
Theme Name: ESYD
Theme URI: https://esyd.gr
Author: Panagiotis Bitos
Description: Custom theme for ESYD. Hybrid theme: PHP templates with theme.json design tokens. Bilingual EL/EN via Polylang. Targets WCAG 2.1 AA.
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esyd
Domain Path: /languages
*/

/* -----------------------------------------------------------------------------
   One colour the palette does not hold.

   The orange is a brand colour and small text set in it does not carry: 13px
   bold #c94317 measures 4.29:1 on the palest of the card blues and 1.4.3 asks
   4.5:1. This is the same orange taken down to where it does, 4.97:1 on that
   blue and 5.65:1 on white, and it is used only where the orange is words. The
   preset accent keeps its value for rules, bullets and hover states, none of
   which are text.
   -------------------------------------------------------------------------- */

:root {
	--esyd-accent-ink: #b83d15;
}

/* -----------------------------------------------------------------------------
   Manrope, self-hosted.
   One variable file per subset covers every weight from 200 to 800 in 47 KB, and
   self-hosting keeps visitor IP addresses away from a font CDN — a GDPR
   consideration for a public body, not a preference.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/manrope-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
		U+03A3-03FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--base);
	-webkit-font-smoothing: antialiased;
}

/*
 * Form controls do not inherit the page's typeface on their own — a <button>
 * falls back to whatever the browser uses for its own widgets. So the search
 * button in the header was set in Arial while the Documents link beside it,
 * being an <a>, was in Manrope. The same split ran through every page with a
 * button on it.
 */
button,
input,
select,
textarea {
	font-family: inherit;
}

/*
 * The arrow on a <select>.
 *
 * Drawn here because the browser's own one ignores padding-inline-end: it is
 * painted against the border box, so a select with 12px of padding still had
 * its arrow against the border, touching it. Measured, before this: the three
 * selects on the site reported appearance:auto and no background image, and
 * the arrow sat flush to the edge in all of them.
 *
 * So appearance:none takes the native one off and this puts the site's own
 * chevron where it can be placed — the same shape as the one on the menus and
 * on a register's rows, in the same navy. Each select then keeps enough
 * padding on that side for the text never to run under it.
 */
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23213264' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/*
 * Windows high-contrast throws background images away. A select with the
 * native arrow removed and ours dropped is a select with no arrow at all, so
 * there the browser's own comes back — ugly beside our padding, and the only
 * one that will be drawn.
 */
@media (forced-colors: active) {
	select { appearance: auto; background-image: none; }
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
   Accessibility — WCAG 2.1 AA baseline
   -------------------------------------------------------------------------- */

/*
 * 2.4.7 Focus Visible, and never removed — a missing focus ring is the single
 * most common keyboard-accessibility failure.
 *
 * Two rings, in the site's own amber and navy, because one is not enough. Amber
 * against white measures 1.78:1 and 1.4.11 asks for 3:1, so amber alone would
 * be a focus indicator that cannot be seen on most of this site. Navy against
 * white is 12.3:1 and amber against navy is 6.9:1, so whichever surface the
 * ring lands on, one of the two carries it.
 *
 * The navy is drawn as a shadow that fills the outline's offset and continues
 * past it, which puts the amber between two bands of navy. Four pixels in all:
 * enough to read at a glance, not a halo around every field.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--amber);
	outline-offset: 1px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--primary);
	border-radius: 2px;
}

/*
 * In forced-colours mode the browser paints the ring itself, and a shadow it
 * ignores would leave the amber alone on an unknown background.
 */
@media (forced-colors: active) {
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
	.sectortile:focus-visible,
	.linkcard:focus-visible {
		outline-color: Highlight;
		box-shadow: none;
	}
}

/* 2.5.5 Target Size: interactive controls keep a 44px touch target. */
:where(a.button, button, input[type="submit"], .esyd-control) {
	min-height: 44px;
	min-width: 44px;
}

/* 1.4.12 Text Spacing must survive user overrides — no fixed heights on text. */

/* 2.3.3 / prefers-reduced-motion: honour the system setting site-wide. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100000;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	/* Its own lift, and the focus ring's navy after it, which this would otherwise replace. */
	box-shadow: 0 2px 8px rgb(17 26 53 / 25%), 0 0 0 4px var(--wp--preset--color--primary);
	clip-path: none;
}

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* Every section in the design is a 1280px box with 24px gutters. */
.container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* -----------------------------------------------------------------------------
   Status badges
   The design's own colours and its 4px corners, with one change: its orange on
   its peach measured 4.32:1, below AA, so the text is one step darker. Every
   other pair passed as drawn.
   -------------------------------------------------------------------------- */

.esyd-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	white-space: nowrap;
}

.esyd-status__icon { font-size: 12px; line-height: 1; }

.esyd-status--energi { background-color: #e6f2ec; color: #1f7a4d; }
.esyd-status--anastoli { background-color: #fdeee7; color: #b83c12; }
.esyd-status--anaklisi { background-color: #fbeaea; color: #c02626; }
.esyd-status--se-exelixi { background-color: #eef1f8; color: #213264; }

/* =============================================================================
   Header — values from the export's markup and style constants
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: #fff;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * The bar runs the full width, and never breaks.
 *
 * It used to be a 1280px column centred in the page, which on a wide monitor
 * left the logo and the tools marooned in the middle with empty margins either
 * side. The fifth round of the design takes the cap off: the logo goes hard
 * left, the tools hard right, and the menu takes the room between them.
 *
 * nowrap on both, because a header that wraps is a header that changes height,
 * and the second line always lands somewhere nobody designed.
 */
.site-header__bar {
	/* The drawer hangs from the bottom edge of this bar. */
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px 20px;
	padding: 18px clamp(24px, 3vw, 48px);
	min-height: 104px;
}

.site-header__brand { display: flex; align-items: center; flex-shrink: 0; padding: 4px; }
/* The negative block margin is the design's: the logo's own whitespace is
   trimmed so the 104px bar is not pushed taller by it. */
/*
 * Sized by height rather than width, so the bar cannot change height when the
 * reader changes language. The two marks are cut to the same frame and need no
 * help today; the English file arrived with 413px of empty margin on every side
 * and was rendering at half size until it was trimmed to match. The rule stays
 * as the guard against the next one that arrives shaped differently.
 */
.site-header__brand img, .custom-logo { display: block; width: auto; height: 83px; max-width: 184px; margin-block: -14px; }
.site-header__title { font-weight: 800; font-size: 20px; color: var(--wp--preset--color--primary); text-decoration: none; }

/* The middle of the bar, and able to give ground before anything else does. */
.esyd-nav { flex: 1 1 auto; min-width: 0; margin-inline: 16px; }
.esyd-nav__list { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.esyd-nav__item { position: relative; display: flex; align-items: center; }

.esyd-nav__link,
.esyd-nav__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

/*
 * The design draws one button per section; here the label navigates and the
 * caret opens the panel, so the caret sits inside the label's right padding
 * and the pair measures the same width as the design's single button. It keeps
 * a 24x44 target — above the 24px floor — rather than the global 44px minimum,
 * which would otherwise push every section apart.
 */
.esyd-nav__item > .esyd-nav__link + .esyd-nav__toggle {
	justify-content: center;
	width: 24px;
	min-width: 24px;
	padding: 0;
	margin-inline-start: -8px;
}

/* The open or current section is marked with an inset amber rule. */
.esyd-nav__item.is-current > .esyd-nav__link,
.esyd-nav__item.is-current > .esyd-nav__toggle,
.esyd-nav__item:hover > .esyd-nav__link,
.esyd-nav__item:hover > .esyd-nav__toggle,
.esyd-nav__toggle[aria-expanded="true"] { box-shadow: inset 0 -3px 0 #f7b817; }

/*
 * A thin caret, matching the export's 10px stroked polyline. Drawn as a stroke
 * and not as a filled shape: it was a solid wedge cut out with clip-path, and
 * beside the thin type of the menu that read as a different weight of mark.
 */
.esyd-nav__chevron {
	display: block;
	width: 10px;
	height: 10px;
	transition: transform 160ms ease-out;
}

.esyd-nav__toggle[aria-expanded="true"] .esyd-nav__chevron { transform: rotate(180deg); }

.esyd-nav__drop {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 60;
	min-width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: 0 14px 32px rgb(33 50 100 / 16%);
}

.esyd-nav__droplink {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border-radius: 6px;
	color: var(--wp--preset--color--primary);
	font-size: 15px;
	font-weight: 600;
	text-align: start;
	text-decoration: none;
	white-space: nowrap;
}

.esyd-nav__droplink:hover { background-color: #f7f9fc; }

/*
 * Hard right, whether or not there is a menu.
 *
 * The auto margin looks redundant beside a nav that already grows to fill the
 * bar, and is not: below the breakpoint the nav is display:none, and without
 * it the tools came and sat against the logo. Measured, at 1024px they ended
 * 258px short of the edge.
 */
.site-header__tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-inline-start: auto; }

/*
 * Sign in: a link, not a button, in a blue of its own.
 *
 * ESYD asked for "another colour, perhaps the light blue of our logo". The
 * logo's #86bbe5 measures 2.05:1 against white and the design's own #3d8fd1
 * measures 3.47:1, where 1.4.3 asks 4.5:1 for text this size — so neither can
 * carry a word. #1f6fb8 is 5.22:1 and is still plainly the lighter blue beside
 * the navy, which is what was being asked for.
 */
/*
 * Intranet and Έγγραφα in the logo's own light blue, Αναζήτηση in the amber,
 * as ESYD asked: two colours in the bar, the words in the navy the mark uses.
 *
 * #86bbe5 is the mark's blue exactly, and #213264 on it measures 6.01:1 — the
 * same navy the logo's letters are. It can go darker if ever wanted: at this
 * hue and saturation #5ca3dc is the floor, 4.53:1, and below that the words
 * stop carrying.
 */
.site-header .site-header__signin,
.site-header .site-header__docs {
	gap: 8px;
	min-height: 48px;
	/*
	 * The blue of the standards chip, which ESYD asked these to match. It was
	 * #86bbe5; #c9d6ea is paler and the navy on it reads at 8.38:1, so the
	 * label is no harder to read for being quieter.
	 */
	border-color: #c9d6ea;
	background-color: #c9d6ea;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	white-space: nowrap;
}

.site-header .site-header__signin:hover,
.site-header .site-header__docs:hover {
	border-color: #b4c6e0;
	background-color: #b4c6e0;
	color: var(--wp--preset--color--primary);
}

/*
 * On a narrow bar it keeps the drawing and gives up the word, which is what
 * Έγγραφα beside it does. It was set to disappear instead, and then the rule
 * stopped working the moment it became a button — .button sets display too and
 * comes later — so it stayed and pushed the bar 55px past the edge of a 768px
 * screen. Giving up the word is the better answer anyway: a way to sign in
 * that vanishes on a phone is a way to sign in that is not there.
 *
 * Scoped to the header for the same reason the other two are: so it outranks
 * .button rather than racing it.
 */
/*
 * One of the two, never both: the drawer's copy only appears at the width
 * where the bar's is gone, so nothing is read out twice.
 */
.esyd-nav__signin { display: none; }

@media (width <= 1460px) {
	.site-header .site-header__signin { padding-inline: 12px; }

	.site-header__signinword {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* Scoped to the header so it outranks the generic .button rules further down. */
.site-header .site-header__search-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	/* Asymmetric, as in the design: the magnifier sits tight to the left edge. */
	padding: 0 34px 0 16px;
	border: 0;
	border-radius: 8px;
	background-color: #f7b817;
	color: #111a35;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.site-header .site-header__search-toggle:hover { background-color: #ffca42; }

/*
 * Below 620px the search button becomes the icon alone, as the design draws it
 * there. With the word in it the bar wrapped to a second row and the header
 * took 156px of a 360px-wide phone screen — 212px at 320px, a quarter of the
 * viewport, on every page. The word stays in the markup for a screen reader.
 */
/*
 * Where the bar can no longer hold the words.
 *
 * It was 619px, chosen when the row carried four things. It carries five now,
 * and measured, the row needs 724: between 620 and 768 the menu button was
 * pushed past the edge of the screen and the page scrolled sideways. The
 * pieces give up their words at 779 instead, which is before the row runs out
 * rather than after.
 */
@media (max-width: 779px) {
	.site-header .site-header__search-toggle {
		justify-content: center;
		width: 48px;
		padding: 0;
	}

	/*
	 * And the logo down to 128px, which is what lets the bar hold the logo,
	 * Intranet, the documents, the search, the language switcher and the menu
	 * button on one row. At 184px it took the whole first row on its own.
	 */
	.site-header__bar { gap: 8px 12px; min-height: 0; padding: 12px 16px; }
	.site-header__brand img, .site-header .custom-logo { height: 58px; max-width: 128px; margin-block: -10px; }
	.site-header__tools { gap: 10px; }

	.site-header__search-word {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/*
 * Five things on one row now, not four, and every pixel is spoken for.
 *
 * Measured with Intranet in the bar: at 436px the row has nothing left over, so
 * the gaps and the mark give up what they can from here down rather than the
 * link disappearing on the phones most people hold.
 */
@media (max-width: 435px) {
	.site-header__bar { gap: 4px; padding-inline: 10px; }
	.site-header__tools { gap: 4px; }
	.site-header__brand img, .site-header .custom-logo { height: 46px; max-width: 102px; }

	/*
	 * Every target to 44 and no lower. That is the floor 2.5.5 puts under a
	 * thing a thumb has to find, and the row is built up from it rather than
	 * down from what would look neat.
	 */
	.site-header .site-header__signin,
	.site-header .site-header__docs,
	.site-header .site-header__search-toggle { min-width: 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; }

	.language-switcher__button { width: 44px; height: 44px; }
}

/*
 * The small phones. Four targets at their floor plus a hamburger need 224px,
 * which leaves the mark whatever is left — and what is left is small. It is
 * still the mark, legibly, and Intranet stays in the bar where ESYD asked for
 * it rather than disappearing into the drawer at the width most phones are.
 */
@media (max-width: 389px) {
	.site-header__bar { padding-inline: 8px; }

	.site-header__brand img, .site-header .custom-logo { height: 40px; max-width: 86px; }
}

/*
 * Narrower than any phone still sold. Below this the mark would stop being
 * readable before the targets stopped being reachable, so Intranet steps into
 * the drawer instead, where it has been all along.
 */
@media (max-width: 355px) {
	.site-header .site-header__signin { display: none; }
}

.site-header__search-icon { display: block; flex-shrink: 0; }

.site-header__search { border-top: 1px solid var(--wp--preset--color--border); background-color: #f7f9fc; }
.site-header__searchform { display: flex; gap: 12px; max-width: 1280px; margin-inline: auto; padding: 16px 24px; }

.language-switcher { position: relative; }

.language-switcher__toggle {
	display: flex; align-items: center; gap: 6px;
	height: 44px; padding: 0 8px; border: 0; background: none;
	color: var(--wp--preset--color--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}

.language-switcher__toggle:hover,
.language-switcher__toggle[aria-expanded="true"] { color: var(--wp--preset--color--primary); }
.language-switcher__globe { display: block; flex-shrink: 0; }

.language-switcher__menu {
	position: absolute; top: 100%; inset-inline-end: 0; z-index: 60;
	min-width: 150px; margin: 0; padding: 6px; list-style: none;
	background-color: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 8px;
	box-shadow: 0 12px 28px rgb(33 50 100 / 16%);
}

.language-switcher__option {
	display: block; padding: 10px 12px; border-radius: 6px;
	color: var(--wp--preset--color--primary); font-size: 15px; font-weight: 600;
	text-decoration: none; white-space: nowrap;
}

.language-switcher__option:hover { background-color: #f7f9fc; box-shadow: inset 2px 0 0 0 #f7b817; }
.language-switcher__option.is-current { background-color: #eaf1fa; font-weight: 700; }

.site-header__drawer-toggle {
	display: none; margin-inline-start: auto; align-items: center; justify-content: center;
	width: 48px; height: 48px; background: none;
	border: 1px solid var(--wp--preset--color--border); border-radius: 8px; cursor: pointer;
}

.site-header__burger,
.site-header__burger::before,
.site-header__burger::after { display: block; width: 20px; height: 2px; background-color: var(--wp--preset--color--primary); content: ""; }
.site-header__burger::before { transform: translateY(-6px); }
.site-header__burger::after { transform: translateY(4px); }

/*
 * Where the menu goes into the drawer.
 *
 * 1120 while the tools were three; with Intranet they are 523px wide and the
 * menu was left less than it needs — measured at 1300 it wanted 499px and had
 * 435, so the items were clipped rather than wrapped. Measured again after:
 * the menu fits beside the full tools down to about 1420, and beside the
 * tools with Intranet reduced to its drawing down to about 1340. So the word
 * goes at 1460 and the menu itself at 1340.
 */
@media (max-width: 1340px) {
	.site-header__bar { min-height: 76px; }
	.site-header__drawer-toggle { display: inline-flex; order: 3; }
	.site-header__tools { order: 2; margin-inline-start: auto; }
	/*
	 * The open menu sits over the page, not in the bar. As a fourth flex item
	 * it grew the header from 77px to 329 and pushed everything below it down
	 * by the height of the menu — the reader's place on the page moved because
	 * they opened a menu.
	 */
	.esyd-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: 40;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin-inline: 0;
		padding-inline: 16px 16px;
		background-color: #fff;
		border-bottom: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 18px 32px rgb(17 26 53 / 18%);
	}

	.esyd-nav.is-open { display: block; }
	.esyd-nav__list { flex-direction: column; align-items: stretch; }

	/*
	 * A row is a grid, not a wrapping flex line: the label in the first
	 * column, the chevron in a column of its own, and the submenu across
	 * both. The chevron was absolutely positioned at the top of the row,
	 * which left it level with the first line of a label that ran to two —
	 * and it sits in the middle of the row now whatever the label does.
	 */
	.esyd-nav__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 48px;
		align-items: stretch;
	}

	/*
	 * height, not min-height. In the bar every row is one line and the two
	 * are fixed at 44px; in the drawer a label runs to two, and a fixed
	 * height does not grow for it — the second line simply came out over the
	 * hairline under the row. The minimum keeps the tap target.
	 */
	.esyd-nav__link, .esyd-nav__toggle {
		height: auto;
		min-height: 48px;
		font-size: 17px;
		font-weight: 700;
	}

	/*
	 * Room to breathe. At 48px and no padding the rows of a two-line label
	 * ran into the hairline above and below it.
	 */
	.esyd-nav__link {
		grid-column: 1;
		align-items: center;
		padding: 14px 8px 14px 12px;
		white-space: normal;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.esyd-nav__item:not(:has( > .esyd-nav__toggle )) > .esyd-nav__link { grid-column: 1 / -1; }

	/*
	 * Named with the same three classes the bar's rule uses, which pulls the
	 * chevron to 24px and tucks it 8px under the label. In a column of its
	 * own it is the whole column, and the tap target is the 48px the rest of
	 * the site keeps.
	 */
	.esyd-nav__item > .esyd-nav__link + .esyd-nav__toggle {
		position: static;
		grid-column: 2;
		width: 48px;
		min-width: 48px;
		margin: 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	/*
	 * No amber rules in here. In the bar an inset rule under a word reads as
	 * the mark on the section you are in; down a list of rows that already
	 * carry a hairline each, a second coloured line under some of them reads
	 * as a mistake. The state is a tint instead, which is quieter and does
	 * not depend on noticing a colour to be understood — the current row
	 * keeps its weight as well.
	 */
	.esyd-nav__item.is-current > .esyd-nav__link,
	.esyd-nav__item.is-current > .esyd-nav__toggle,
	.esyd-nav__item:hover > .esyd-nav__link,
	.esyd-nav__item:hover > .esyd-nav__toggle,
	.esyd-nav__toggle[aria-expanded="true"],
	.esyd-nav__item:has( > .esyd-nav__toggle[aria-expanded="true"] ) > .esyd-nav__link { box-shadow: none; }

	.esyd-nav__item.is-current > .esyd-nav__link,
	.esyd-nav__item.is-current > .esyd-nav__toggle,
	.esyd-nav__item:has( > .esyd-nav__toggle[aria-expanded="true"] ) > .esyd-nav__link,
	.esyd-nav__item:has( > .esyd-nav__toggle[aria-expanded="true"] ) > .esyd-nav__toggle { background-color: rgb(134 187 229 / 14%); }

	.esyd-nav__drop { grid-column: 1 / -1; position: static; width: 100%; padding-block: 4px 12px; box-shadow: none; border: 0; border-radius: 0; }
	/*
	 * In the drawer a submenu item has the whole width and no neighbour to
	 * crowd, so the nowrap that keeps a desktop panel tidy only ran the longer
	 * labels — "Πολιτική του Ε.ΣΥ.Δ. για τη διαχείριση της ποιότητας" — off the
	 * right of the screen.
	 */
	.esyd-nav__droplink {
		border: 0;
		border-radius: 6px;
		padding: 12px 14px 12px 24px;
		font-size: 16px;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.esyd-nav__droplink:hover { background-color: var(--wp--preset--color--surface-alt); }
	.esyd-nav__droplink.is-current { background-color: #eaf1fa; box-shadow: none; }
}

/* =============================================================================
   Footer
   ========================================================================== */

.site-footer { background: linear-gradient(180deg, #213264 0%, #1a2850 100%); color: #fff; margin-top: auto; }

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 40px;
	align-items: start;
	max-width: 1280px;
	margin-inline: auto;
	padding: 64px 24px 32px;
}

/* The logo already paid for the space above. */
.site-footer__brand + .site-footer__grid { padding-block-start: 32px; }

/*
 * No frame: the export sets the contact details as a column like the four
 * beside it. The tinted panel and its hairline made it read as a card dropped
 * into a row of lists.
 */
.site-footer__brand { max-width: 1280px; margin-inline: auto; padding: 40px 24px 0; }
.site-footer__logo { display: block; width: 168px; height: auto; }   /* 120 + 40%, as ESYD asked */
/* The same heading as the four columns beside it, because it is now one. */
.footer-card__label { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #86bbe5; }
.footer-card__contact { margin: 0 0 16px; max-width: 320px; font-size: 14px; line-height: 1.7; color: #fff; }
.footer-card__tel { color: #fff; text-decoration: none; }
.footer-card__tel:hover { text-decoration: underline; }
.footer-card__mail { color: #86bbe5; }
.footer-card__hours { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #86bbe5; }

/* Under the email, as on the current site. 2.5.8 sets the floor at 24px. */
.footer-card__social { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }

.footer-card__sociallink {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgb(134 187 229 / 40%);
	border-radius: 8px;
	color: #fff;
}

.footer-card__sociallink:hover { background-color: rgb(134 187 229 / 18%); border-color: #86bbe5; }
.footer-card__socialicon { display: block; }

.footer-cols { display: contents; }
.footer-col__title { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #86bbe5; }
.footer-col__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
/*
 * Block, so the row is the link's own height. The footer hands its children a
 * 20px/33px line-height; an inline link of 14px left each item in a 33px line
 * box, which pushed the rows 43px apart where the export has them 31.
 */
.footer-col__list a { display: block; font-size: 14px; line-height: 1.5; color: #fff; text-decoration: none; }
.footer-col__list a:hover { color: #86bbe5; }
/*
 * The mark on a link that opens its own tab — an external site, or one of the
 * PDFs the menu points straight at. The words are next to it in a span only a
 * screen reader reads, so this is hidden from one and drawn for the other.
 */
.esyd-away,
.footer-col__ext { font-size: 11px; }

.esyd-nav__droplink .esyd-away { margin-inline-start: 2px; opacity: 0.75; }

.site-footer__bottom { border-top: 1px solid rgb(134 187 229 / 30%); background-color: #111a35; }

.site-footer__bottominner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: 1280px;
	margin-inline: auto;
	/*
	 * The same inherited 33px line box made this bar 62px tall against the
	 * export's 47. The text is 13px; it does not need a 20px line.
	 */
	line-height: 1.5;
	padding: 13px 24px;
}

.site-footer__copyright { margin: 0; min-width: 0; font-size: 13px; color: #86bbe5; }
/* 13px links do not need the footer's inherited 20px line either. */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; list-style: none; }
.site-footer__legal a { font-size: 13px; color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* =============================================================================
   Home page
   Values below are taken from the design export's own markup and style strings,
   not measured off screenshots.
   ========================================================================== */

/* Buttons ------------------------------------------------------------------ */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.button:hover { background-color: var(--wp--preset--color--primary-deep); }
.button--ghost { background-color: transparent; border-color: rgb(255 255 255 / 70%); color: #fff; }
.button--ghost:hover { background-color: rgb(255 255 255 / 15%); }
.button--light { background-color: #fff; color: var(--wp--preset--color--primary); }
.button--light:hover { background-color: var(--wp--preset--color--surface); }

/* Amber is reserved for the search action, with dark text: white on amber
   fails contrast by a wide margin. */
.button--accent { background-color: #f7b817; color: #111a35; }
.button--accent:hover { background-color: #e0a60f; }

/* Hero --------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	/*
	 * min-height, not height. The export sizes the hero by viewport width, and
	 * at 320px the title takes seven lines: a fixed 560px centred the content
	 * and then clipped 160px off the top of it, so the eyebrow and the first
	 * line of the heading were simply gone. A floor lets it grow instead.
	 */
	min-height: clamp(560px, 56.25vw, 880px);
	padding-block: 32px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	overflow: hidden;
	/*
	 * The wash below multiplies, and multiply reaches for whatever is painted
	 * behind it. Without this it would reach past the hero and tint the page.
	 */
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The columns meet near the top of the frame; 40% keeps that in view. */
	object-position: center 40%;
	display: block;
	/* In its own colour now, taken down a fifth. */
	filter: brightness(0.8);
}

/*
 * Two layers, as in the design. The first multiplies a flat blue into the
 * grey photograph, which keeps the brand hue over any frame; the second is a
 * pale wash that fades from left to right, lightest under the words.
 *
 * They were one element and one dark gradient before, with white text over
 * it. The banner now reads light and blue, so the words are the navy.
 */
/*
 * The blur, masked so it is absent in the middle and full at the edges.
 *
 * ESYD did not want the previous background and described what they did want
 * as a photograph with a blur or an abstract quality. This is the design's
 * answer: the centre of the frame stays sharp and the edges soften, which
 * keeps the columns legible and stops the frame competing with the words.
 *
 * mask-image needs the -webkit- prefix in Safari, and a browser that has
 * neither backdrop-filter nor mask simply gets the photograph, which is the
 * next thing down and not a broken one.
 */
.hero__veil {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	mask-image: radial-gradient(ellipse 70% 80% at center, transparent 45%, #000 100%);
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at center, transparent 45%, #000 100%);
}

/* And the navy over all of it, so the words have one ground to sit on. */
.hero__wash {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--primary);
	mix-blend-mode: multiply;
	opacity: 0.6;
}

/*
 * The fade is a desktop idea: it lightens the half the words sit in and lets
 * the photograph through on the other. On a phone the words run the full
 * width, so the thin end of it fell behind the eyebrow and took the line to
 * 3.8:1. Flat instead, where there is no second half to show.
 */
@media (width <= 900px) {
	.hero__wash { background: rgb(234 241 250 / 80%); }
}

.hero__inner {
	position: relative;
	width: 100%;
	max-width: 1328px;
	/* The bottom margin is the design's: it lifts the block off dead centre. */
	margin: 0 auto 16px;
	/*
	 * 56px is the design's inset and it is a desktop measurement. Held on a
	 * phone it left the hero's text in a 208px column, indented forty pixels
	 * further than everything else on the page. It scales to the page's own
	 * gutter instead.
	 */
	padding-inline: clamp(24px, 4.5vw, 56px);
}

.hero__eyebrow {
	display: block;
	margin: 0 0 16px;
	/*
	 * The mark's own blue, which the banner can carry now that it is dark:
	 * #86bbe5 on the navy measures 6.01:1. Over the pale banner this replaced
	 * it was 1.5:1 and had to be darkened to #1f5c8f to pass at all.
	 */
	color: #86bbe5;
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: 0.08em;
}

.hero__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: clamp(34px, 4vw, 56px);
	/*
	 * Bold and upright. The lean was here and ESYD moved it to the line
	 * underneath, where it belongs to the sentence rather than to the name.
	 */
	font-weight: 800;
	line-height: 1.1;
}

.hero__text { margin: 0 0 24px; max-width: 920px; font-size: 18px; font-style: italic; line-height: 1.6; color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/*
 * Two filled buttons, as ESYD asked for contrast between them: the amber and
 * the mark's light blue, both with the deep navy on them — 9.67:1 and 8.38:1.
 * They were two outlines over a pale banner, which read as one.
 */
.hero .button {
	min-height: 44px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--wp--preset--color--primary-deep);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
}

.hero .button--ghost { background-color: var(--wp--preset--color--amber); border-color: var(--wp--preset--color--amber); }
.hero .button--light { background-color: #86bbe5; border-color: #86bbe5; }

.hero .button--ghost:hover { background-color: #ffca42; border-color: #ffca42; }
.hero .button--light:hover { background-color: #6fadde; border-color: #6fadde; }

@media (prefers-reduced-motion: reduce) {
	video.hero__media { display: none; }
}

/* Register search ---------------------------------------------------------- */

.searchcard-wrap { background-color: #fff; padding-block: 40px; }

/* The card sits in a wider gutter than the rest of the page. */
.searchcard-wrap > .container { padding-inline: 64px; }

.searchcard {
	max-width: 1040px;
	margin-inline: auto;
	padding: 40px;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 12px 32px rgb(33 50 100 / 14%);
}

.searchcard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

.searchcard__title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--wp--preset--color--primary); }
.searchcard__hint { margin: 0; font-size: 14px; color: var(--wp--preset--color--muted); }

.searchcard__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.searchcard__tab input { position: absolute; opacity: 0; pointer-events: none; }

.searchcard__tab span {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background-color: #fff;
	color: var(--wp--preset--color--text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.searchcard__tab input:checked + span {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
}

.searchcard__tab input:focus-visible + span { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 1px; box-shadow: 0 0 0 4px var(--wp--preset--color--primary); }

.searchcard__row { display: flex; flex-wrap: wrap; gap: 12px; }
/*
 * min() rather than a flat 320px: the floor is there to stop the field
 * collapsing beside its neighbours, and on a 320px screen a 320px floor plus
 * the page's gutters made the whole page scroll sideways — 1.4.10.
 */
.searchcard__field { position: relative; flex: 1; min-width: min(320px, 100%); }

.searchcard__icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.searchcard__input {
	width: 100%;
	height: 56px;
	padding: 0 16px 0 48px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background-color: #f6f8fc;
	font: inherit;
	font-size: 18px;
}

/*
 * The 48px on the left is room for the magnifier that sits inside the field on
 * the home card. The header's search form has no icon in it, so there it was
 * forty-eight pixels of nothing — a fifth of the field on a phone.
 */
.site-header__searchform .searchcard__input { padding-inline-start: 16px; }

.searchcard__submit { height: 56px; padding: 0 32px; border: 0; }

/*
 * The suggestions under the field.
 *
 * Capped and scrolled inside itself, because the card sits over the hero and a
 * panel that grew with its contents would push the page about as somebody
 * typed. Eight rows fit; the ninth is the «all results» button, which is the
 * form's own submit and therefore always reachable without scrolling past the
 * list — it is pinned to the bottom.
 */
.searchcard__suggest {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	top: calc(100% + 6px);
	max-height: min(22rem, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}

.searchcard__suggest-item {
	display: block;
	padding: 10px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: inherit;
	text-decoration: none;
}

.searchcard__suggest-item:last-of-type { border-bottom: 0; }

/*
 * One rule for the pointer and for the arrow keys. Keyboard movement sets the
 * class rather than the focus — the field keeps that — so without this the
 * highlighted row would be invisible to anybody not using a mouse.
 */
.searchcard__suggest-item:hover,
.searchcard__suggest-item:focus,
.searchcard__suggest-item.is-active { background: #f6f8fc; }

.searchcard__suggest-name { display: block; font-weight: 600; line-height: 1.35; }

.searchcard__suggest-meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--wp--preset--color--muted, #5a6478);
}

.searchcard__suggest-empty { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--wp--preset--color--muted, #5a6478); }

.searchcard__suggest-all {
	position: sticky;
	bottom: 0;
	display: block;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	background: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--esyd-accent-ink);
	text-align: start;
	cursor: pointer;
}

.searchcard__suggest-all:hover,
.searchcard__suggest-all:focus { background: #f6f8fc; }

@media (prefers-reduced-motion: no-preference) {
	.searchcard__suggest { scroll-behavior: smooth; }
}

/*
 * 16px on a phone rather than 18: it is still above the size that makes iOS
 * zoom the page on focus, and it buys back a tenth of the room the hint has to
 * fit in. The hint itself is smaller again — it is a hint, and what the reader
 * types stays at the size the field is set in.
 */
@media (max-width: 619px) {
	.searchcard__input { height: 52px; padding-inline: 44px 12px; font-size: 16px; }
	.site-header__searchform .searchcard__input { padding-inline-start: 12px; }
	/*
	 * The hints are written for a desktop field and a phone gives them about
	 * 280px. At 14px "Επωνυμία, αρ. πιστοποιητικού ή πόλη" and "Αναζήτηση σε
	 * τίτλο, κωδικό ή στο κείμενο" both fit where at 16 neither did.
	 *
	 * The home card's is longer than any size will fix — "π.χ. φορέας
	 * πιστοποίησης, 1317-4, Θεσσαλονίκη" wants 309px at 14 and has 236 — so it
	 * still ends in an ellipsis rather than mid-word. That one is text to
	 * shorten, not a size to change.
	 */
	.searchcard__input::placeholder,
	.results__field input::placeholder { font-size: 14px; text-overflow: ellipsis; }

	.searchcard__submit { height: 52px; padding: 0 24px; }
}

/* International recognition ------------------------------------------------ */

.recognition { background-color: #1a2850; color: #fff; }

.recognition__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px 24px;
	padding-block: 14px;
}

.recognition__label { flex-shrink: 0; font-size: 13px; font-weight: 600; color: #86bbe5; letter-spacing: 0.06em; }

/*
 * The marks, each on a plate of its own.
 *
 * Lettered chips stood here — EA MLA, ILAC MRA, IAF MLA — drawn as outlines on
 * the navy. The marks that replaced them are both dark blue, so they get white
 * to sit on instead, which is what EA and Global ACI both ask for on a dark
 * ground. The plates are one height and the logos are sized inside them rather
 * than filling them, so two marks of different proportion read as a pair.
 */
.recognition__marks { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; }

.recognition__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding-inline: 16px;
	border-radius: 6px;
	background-color: #fff;
}

/*
 * 40px, because the EA mark is a stacked lockup: the letters sit above two
 * lines reading EUROPEAN ACCREDITATION, and below about this the second line
 * stops being a word and becomes a texture. Global ACI is drawn along one
 * line, so the same height leaves it the wider of the two, which is the
 * proportion each was drawn in.
 */
.recognition__mark img { display: block; width: auto; height: 40px; }

.recognition__text { min-width: 0; font-size: 13px; color: #86bbe5; }

/* Entry cards -------------------------------------------------------------- */

.entrycards { background-color: #fff; }

/*
 * Three cards, so one column or three and never two: auto-fit gave two between
 * 600 and 1023px, which leaves the third alone on a row of its own.
 */
.entrycards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding-block: 96px 64px;
}

@media (min-width: 900px) {
	.entrycards__grid { grid-template-columns: repeat(3, 1fr); }
}

.entrycard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 200px;
	padding: 28px 24px;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 12px;
	background-color: #eaf1fa;
	transition: box-shadow 0.15s, transform 0.15s;
}

.entrycard:hover { box-shadow: 0 4px 12px rgb(33 50 100 / 10%); transform: translateY(-2px); }
.entrycard--blue { border-top-color: #4e89b7; background-color: #eef5fb; }
.entrycard--amber { border-top-color: #f7b817; background-color: #fef6e4; }

.entrycard__label { margin: 0; font-size: 13px; font-weight: 700; line-height: normal; color: var(--esyd-accent-ink); letter-spacing: 0.08em; }
.entrycard__title { margin: 0; font-size: 24px; font-weight: 700; color: var(--wp--preset--color--primary); line-height: 1.3; }
.entrycard__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--muted); }
/* The links sit at the foot of the card, one or two of them, wrapping if narrow. */
.entrycard__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: auto 0 0; }
.entrycard__cta { padding-block: 2px; font-size: 16px; font-weight: 600; line-height: normal; color: var(--wp--preset--color--primary); text-decoration: none; }
.entrycard__cta:hover { text-decoration: underline; }

/* Corporate video ---------------------------------------------------------- */

.corporate { background-color: var(--wp--preset--color--surface); }
.corporate__inner { width: 100%; padding: 20px 40px; box-sizing: border-box; }
.corporate__video { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--wp--preset--color--primary-deep); object-fit: cover; }

/* Sectors ------------------------------------------------------------------ */

.sectors { background-color: #fff; }
.sectors__inner { padding-block: 96px; }

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.section__title { margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.25; font-weight: 700; color: var(--wp--preset--color--primary); }
.section__intro { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.section__more {
	display: inline-flex;
	align-items: flex-end;
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/*
 * The design's own grid: as many 200-pixel columns as fit, which is five at the
 * container's full width and fewer as it narrows, down to one on a phone.
 *
 * It had been pinned to three. There were six standards at the time and three
 * divides six, where auto-fit reached five and stranded the sixth on a row of
 * its own. There are eight sectors now that 17025 is two, so nothing divides
 * neatly any more and the reason for pinning it has gone with the sixth card.
 */
.sectors__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sectorcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-height: 164px;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	/*
	 * A very light ground inside the frame, as ESYD asked: the section is
	 * white and the cards were white too, so the whole band read as one sheet
	 * of paper with lines drawn on it. #f5f8fc is the same tint the registers
	 * band their rows with, which is the lightest the site already uses.
	 */
	background-color: #f5f8fc;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.sectorcard:hover { border-color: #f7b817; box-shadow: 0 4px 12px rgb(33 50 100 / 10%); }

/*
 * The standard's number, over the sector name.
 *
 * Taken out once because nothing was feeding it, which left the card mostly the
 * gap where it used to be. It belongs back: it is the one thing on the card that
 * is not ours — 17025 is what the certificate says — and since the standard was
 * split into testing and calibration, two cards now carry the same number under
 * different names, which is the fact about them worth showing.
 *
 * Tabular numerals so the chips line up down the column rather than wandering by
 * a digit's width.
 */
.sectorcard__code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 36px;
	padding: 0 12px;
	border-radius: 4px;
	/*
	 * Deep enough to read as a chip on the card's own tint. It was #eaf1fa,
	 * chosen when the card behind it was white; against the #f5f8fc the card
	 * carries now it measured 1.07:1, which is a difference nobody can see.
	 * #c9d6ea is the site's own blue — until now only as text on navy — and
	 * comes out at 1.38:1, with the number still at 8.38:1 against it.
	 */
	background-color: #c9d6ea;
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

/*
 * Blue for the bodies, amber for the laboratories.
 *
 * The prototype rotated three tints by position — the fourth card got the first
 * colour again, and nothing more was meant by it. That reads as a system until
 * you look for the system, and once the grid went to five columns a cycle of
 * three drew diagonal stripes across it.
 *
 * Both colours are the design's own. What is new is that they now answer the one
 * question the cards differ on: which register the card opens. Testing and
 * calibration laboratories come out the same colour, which is right — they are
 * two cards into the same register.
 */
/* Darkened with the blue, and to the same weight: 1.35:1 against the card to
 * the blue's 1.38:1, so neither kind of chip looks like the louder one. */
.sectorcard--lab .sectorcard__code { background-color: #f5d0b3; }

.sectorcard__name { font-size: 16px; font-weight: 600; color: var(--wp--preset--color--primary); line-height: 1.4; text-wrap: pretty; }
.sectorcard__count { margin-top: auto; font-size: 13px; line-height: normal; color: var(--wp--preset--color--muted); }

/* News --------------------------------------------------------------------- */

.newsfeed { background-color: #f7f9fc; }
.newsfeed__inner { padding-block: 80px 96px; }

/* This head carries a rule under it, unlike the sectors one. */
.newsfeed .section__head {
	align-items: flex-end;
	padding-bottom: 16px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.newsfeed__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The design gives these cards no side padding, so the text runs to the edge of
 * the white. Padded here on purpose — the card reads as a card.
 */
.newsitem {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px 20px;
	background-color: #fff;
	border-top: 3px solid #f7b817;
	transition: border-color 0.15s;
}

.newsitem:hover { border-top-color: #d99f0b; }
/*
 * margin: 0, like the title and the excerpt under it. It was the one child of
 * the card without it, so it kept a paragraph's default twenty pixels top and
 * bottom on top of the card's own eight of gap — which is why the date sat in a
 * pocket of air while the two lines below it were close together. The card is a
 * flex column; the gap is what spaces it.
 */
.newsitem__meta { display: flex; align-items: center; gap: 8px; margin: 0; }

/* Category colours come from the term itself, with a neutral fallback. */
.newsitem__cat {
	align-self: flex-start;
	padding: 4px 8px;
	border-radius: 4px;
	background-color: var(--esyd-cat, #5a6478);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.04em;
}

.newsitem__date { font-size: 13px; color: var(--wp--preset--color--muted); }
.newsitem__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--wp--preset--color--text); text-wrap: pretty; }
.newsitem__title a { color: inherit; text-decoration: none; }
.newsitem__title a:hover { text-decoration: underline; }
.newsitem__excerpt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--muted); }

/* Closing call to action --------------------------------------------------- */

.ctaband { background-color: var(--wp--preset--color--primary); }

.ctaband__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-block: 36px;
}

/*
 * Wide enough for the line under the title to stay one line. It measures
 * 739px in Greek and 669px in English at this size, and 720 cut the Greek
 * one in two. The cap still holds: there is room for 1095px beside the
 * button, and a measure that long reads badly.
 */
.ctaband__copy { max-width: 820px; min-width: 0; }
.ctaband__title { margin: 0 0 6px; font-size: 26px; line-height: 1.25; font-weight: 700; color: #fff; }
.ctaband__text { margin: 0; font-size: 16px; line-height: 1.5; color: #86bbe5; }
.ctaband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }

.ctaband .button { padding: 12px 20px; font-size: 15px; line-height: normal; white-space: nowrap; }
.ctaband .button--accent { border: 0; font-weight: 700; }
.ctaband .button--accent:hover { background-color: #fff; }
/*
 * Επικοινωνία takes the same chip blue as the two in the header. It was an
 * outline on the navy with white lettering, and white on #c9d6ea is 1.47:1 —
 * so the lettering goes navy with it, where it reads at 8.38:1.
 */
.ctaband .button--ghost {
	border-color: #c9d6ea;
	background-color: #c9d6ea;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.ctaband .button--ghost:hover { border-color: #b4c6e0; background-color: #b4c6e0; }

@media (max-width: 782px) {
	.hero__inner { padding-block: 56px; }
	.searchcard-wrap > .container { padding-inline: 24px; }
	.searchcard { padding: 24px; }
	.entrycards__grid { padding-block: 56px 40px; }
	.sectors__inner { padding-block: 56px; }
	.newsfeed__inner { padding-block: 48px 56px; }
	.corporate__inner { padding: 16px; }
}

/* =============================================================================
   Register pages — values from the export's own markup
   ========================================================================== */

.pagehead {
	background: linear-gradient(180deg, #f6f8fc 0%, #eaf1fa 100%);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pagehead__inner { padding-block: 32px 64px; }

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* Three pixels of padding takes an 18px line to a 24px target. */
.breadcrumb a { display: inline-block; padding-block: 3px; color: inherit; }
.pagehead__title { margin: 0 0 12px; font-size: clamp(30px, 4vw, 40px); line-height: 1.2; font-weight: 700; color: var(--wp--preset--color--primary); }
.pagehead__lead { margin: 0; max-width: 720px; font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--muted); }

.registry {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
	padding-block: 48px 112px;
}

/* Filters ------------------------------------------------------------------ */

.filters {
	position: sticky;
	/* Clears the sticky header, which is 104px tall. */
	top: 104px;
	flex: 1 1 260px;
	max-width: 320px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background-color: #fff;
	overflow: hidden;
}

.filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 16px 20px;
	background-color: #eaf1fa;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.filters__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--wp--preset--color--primary); }
.filters__clear { font-size: 13px; font-weight: 700; color: var(--esyd-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

.filtergroup { padding: 14px 20px; border-bottom: 1px solid var(--wp--preset--color--border); }
.filtergroup:last-child { border-bottom: 0; }
.filtergroup__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.filtergroup__label { margin: 0; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--text); }

/* Appears only when the group has a choice in it, so it never competes for attention. */
.filtergroup__clear { flex-shrink: 0; font-size: 12px; color: var(--wp--preset--color--muted); text-decoration: underline; }
.filtergroup__clear:hover,
.filtergroup__clear:focus-visible { color: var(--wp--preset--color--text); }
.filtergroup__list { margin: 0; padding: 0; list-style: none; }
.filtergroup__list--scroll { max-height: 240px; overflow-y: auto; padding-inline-end: 10px; scrollbar-width: thin; }

/*
 * The document categories are a long tree, and a sticky panel taller than the
 * window cannot be reached at all: its lower half sits below the fold and
 * scrolling the page moves the panel with it. Capping it and scrolling inside
 * is the same answer the design gives the region list, applied where the list
 * is longest. The cap is in vh so it adapts to the window rather than assuming
 * a laptop.
 */
.filtergroup--flush > .filtergroup__list {
	max-height: min(52vh, 520px);
	overflow-y: auto;
	padding-inline-end: 10px;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}

/*
 * 44px is a finger, and it is what this keeps wherever the pointer is a finger.
 * With a mouse the same 44px is mostly air: thirteen options on the register of
 * bodies made a panel 890 pixels tall, most of which is the gaps between them.
 * A precise pointer gets 34, which is still well clear of the 24px a target is
 * asked to be.
 */
.filteropt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 8px 4px;
	border-radius: 4px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

@media (pointer: fine) {
	.filteropt { min-height: 34px; padding: 4px; }
}

.filteropt:hover { background-color: var(--wp--preset--color--surface); }

/*
 * A link, not a checkbox: the filters work without JavaScript, and a link that
 * looks like a checkbox is clearer than a checkbox that needs a submit button.
 * aria-current on the link carries the state.
 */
.filteropt__box {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 3px;
	background-color: #fff;
}

.filteropt.is-on .filteropt__box {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
}

/*
 * A tick is two borders of a rotated box. Its optical centre sits below its
 * geometric one, which is what the extra 8% in the translate corrects.
 */
.filteropt.is-on .filteropt__box::after {
	position: absolute;
	inset-inline-start: 50%;
	top: 50%;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -58%) rotate(45deg);
	content: "";
}

.filteropt__label { flex: 1; font-size: 14px; line-height: 1.5; }
.filteropt__count { flex-shrink: 0; font-size: 13px; color: var(--wp--preset--color--muted); }
.filteropt.is-on .filteropt__label { font-weight: 700; }

/*
 * Where the accreditation is exercised.
 *
 * On a laboratory accredited at four sites this is the only thing that differs
 * between the rows — same standard, same certificate, same date — so it carries
 * the whole burden of telling them apart, and it was set as a grey footnote
 * under the standard and disappeared into it.
 *
 * On its own line, because beside the standard it read as the end of the
 * standard — but as a block sized to its text, not a table box: under the
 * theme's border-box sizing a table box resolves its height to the line alone
 * and eats the padding, which left the chip clamped to the text.
 */
.acctable__site {
	display: block;
	width: fit-content;
	margin-top: 7px;
	padding: 5px 11px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 45%, #fff);
	border-radius: 3px;
}

/*
 * The head office is a place too, but it is not one of the towns listed, and
 * it is the one the contact block above belongs to — so it takes the darker
 * blue rather than sitting among the towns as a paler version of them.
 */
.acctable__site--main {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
}

/* The standard's own code, under the plain-language name we give it. */
.filteropt__note {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/*
 * A value the current combination of filters leaves nothing for. Greyed rather
 * than dropped, so the list does not reflow as choices are made, and not a link
 * because there is nothing to go to. Kept above the 3:1 that WCAG asks of a
 * disabled control's text, since it still has to be readable.
 */
.filteropt.is-off { color: var(--wp--preset--color--muted); cursor: default; opacity: 0.55; }
.filteropt.is-off:hover { background-color: transparent; }

/* Results ------------------------------------------------------------------ */

.results { flex: 1 1 560px; min-width: 0; }

.results__tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.results__field { position: relative; flex: 1; min-width: 280px; }
.results__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.results__field input {
	width: 100%;
	height: 48px;
	padding: 0 16px 0 44px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--text);
}

/* Four pixels back off the icon's side on a phone, which the hint then gets. */
@media (max-width: 619px) {
	.results__field input { padding-inline-start: 40px; }
}

.results__tools select {
	min-width: 200px;
	height: 48px;
	padding: 0 44px 0 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background-color: #fff;
	font: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--text);
}

.activefilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.activefilters__label { font-size: 13px; color: var(--wp--preset--color--muted); }

.activefilters__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 8px 12px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
}

.activefilters__chip:hover { background-color: #1a2850; }
/*
 * The navy, like every other text link on the page. It was the accent ink —
 * a rust red kept for destructive actions — and beside a panel and a list
 * that are now navy and pale blue it was the only warm thing on the screen.
 */
.activefilters__clear { padding: 8px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 2px; }

.results__count {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
}

.results__count p { margin: 0; font-size: 16px; }

/*
 * On the news page the tally is not drawn. It stays in the page because the
 * script that filters in place makes it a live region — choosing a category has
 * to be announced and not only seen, which is 4.1.3 — and because without the
 * script it is still the answer to "how many". Hidden the way everything else
 * meant for a screen reader is hidden here, not with display: none, which would
 * take it away from the reader it is for.
 *
 * Focus after filtering is unaffected: the script sends it to the first of
 * .results__count p and .newsfilters in the document, and on this page the
 * filters come first.
 */
.results__count--quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Entries ------------------------------------------------------------------ */

.entry { border-bottom: 1px solid var(--wp--preset--color--border); }

.entry__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
}

.entry__row::-webkit-details-marker { display: none; }
.entry__row:hover { background-color: var(--wp--preset--color--surface); }
.entry__name { flex: 3 1 240px; min-width: 0; }
.entry__title { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--wp--preset--color--primary); text-wrap: pretty; }
.entry__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--wp--preset--color--muted); }
.entry__cert { flex: 1 1 110px; font-size: 14px; font-variant-numeric: tabular-nums; }
.entry__std { flex: 1 1 140px; font-size: 14px; }
.entry__status { flex: 1 1 120px; }

.entry__toggle {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	/*
	 * A circle with nothing in it but the chevron, which the export draws as a
	 * stroke at 2.4 on a 24 box. Ours was a filled amber wedge in a square with
	 * a hairline, which read as a different kind of mark beside this type.
	 */
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	transition: background-color 140ms ease-out;
}

.entry__toggle svg { display: block; transition: transform 160ms ease-out; }
.entry[open] .entry__toggle svg { transform: rotate(180deg); }
.entry__row:hover .entry__toggle { background-color: rgb(33 50 100 / 10%); }

/*
 * Contact and validity share the top row, and they are not the same size: an
 * address with a city, two phone numbers and two email addresses needs room,
 * while the validity is one line of dates. An auto-fit grid gave them equal
 * 220px columns, which wrapped every address and left the rest of the row
 * empty, so the split is stated rather than computed.
 */
.entry__detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px 32px;
	padding: 24px 20px;
	background-color: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
}

@media (min-width: 783px) {
	.entry__detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.entry__blocklabel { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--wp--preset--color--muted); text-transform: uppercase; }
.entry__blocktext { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--text); }
.entry__block--files { grid-column: 1 / -1; }
.entry__block--accs { grid-column: 1 / -1; }

/*
 * The accreditations an entry holds, as the portal prints them: standard,
 * scope, certificate number and the date it came into force. One organisation
 * can hold fifteen, so the table scrolls sideways on a narrow screen rather
 * than squeezing the scope column into two words a line.
 */
.acctable__scroll { overflow-x: auto; }

.acctable {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.acctable th,
.acctable td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.acctable th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom-width: 2px;
}

/*
 * One accreditation, one card.
 *
 * Four accreditations differing only by town were separated by the same
 * hairline that ran through the middle of each, and the row and its detail
 * were shaded differently — so the eye grouped a white strip with the grey
 * strip belonging to the accreditation above it. A rule was never going to be
 * enough against that. Each accreditation is now a white block on the grey the
 * panel already sits on, and the gap between them is that grey showing
 * through: a border in the background colour, which is the one way to put
 * space between rows of a collapsed table.
 */
.acctable__group > tr > td {
	background-color: var(--wp--preset--color--base);
	border-bottom: 0;
}

.acctable__group > tr:last-child > td {
	padding-bottom: 14px;
	border-bottom: 0;
}

/*
 * And the block is the standard, not the row.
 *
 * A body with fourteen scopes under 17021 is fourteen accreditations and one
 * thing to read: the standard is written once over them, so they have to sit on
 * one white block or the writing belongs to the first row alone. The grey shows
 * through above each standard instead of between every row, and a hairline
 * inside the block keeps one scope from running into the next.
 */
.acctable__group:not( .acctable__group--again ) > tr:first-child > td {
	border-top: 10px solid var(--wp--preset--color--surface);
}

.acctable tbody.acctable__group:first-of-type > tr:first-child > td {
	border-top: 0;
}

.acctable__group--again > tr:first-child > td {
	border-top: 1px solid var(--wp--preset--color--border);
}

.acctable__group:last-of-type > tr:last-child > td {
	border-bottom: 10px solid var(--wp--preset--color--surface);
}

/*
 * One column carries prose and the rest are fixed shapes, so the fixed ones are
 * sized to their content — width 1% with nowrap is the old table trick for "as
 * narrow as this can be" — and the prose column absorbs what is left. Left to
 * itself the browser split the width evenly and broke each pair of scope
 * documents onto two lines while the certificate column sat half empty.
 *
 * Which column that is depends on the table. A body's table has a scope, and
 * the scope is the long one. A laboratory's has none, and then the longest
 * thing in the row is the standard with the place under it — so these were
 * written by position and the positions moved when the scope column went:
 * «Αρ. πιστοποιητικού» inherited the width meant for the scope and took 670px
 * to say «64-10», while the standard was held to 198px.
 */
.acctable th:nth-child(3),
.acctable td:nth-child(3),
.acctable th:nth-child(4),
.acctable td:nth-child(4),
.acctable th:nth-child(5),
.acctable td:nth-child(5) { width: 1%; white-space: nowrap; }

.acctable th:nth-child(1),
.acctable td:nth-child(1) { width: 17%; }

/* No scope column: the standard is the prose, and the other three are shapes. */
.acctable--nos th:nth-child(1),
.acctable--nos td:nth-child(1) { width: auto; }

.acctable--nos th:nth-child(2),
.acctable--nos td:nth-child(2) { width: 1%; white-space: nowrap; }

.acctable td:nth-child(3),
.acctable td:nth-child(4) { font-variant-numeric: tabular-nums; }

.acctable--nos td:nth-child(2) { font-variant-numeric: tabular-nums; }

/* One language per line: side by side they read as a single broken label. */
.acctable__files { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.filelink--compact { gap: 6px; }

/*
 * The portal puts a laboratory's scope, and any branch it was granted for, in
 * a full-width row under the accreditation rather than in a column. Keeping it
 * there keeps the two readable as what they are: one is the row, the other is
 * what the row expands to.
 */
.acctable__detail > td { padding-top: 0; }

/*
 * The detail sits directly under its own row, with the head row's padding
 * taken away so the two read as one block rather than two stacked ones.
 */
.acctable__head > td { padding-bottom: 4px; }

/*
 * Where this accreditation is exercised, set off from the list of tests it was
 * running into. It takes the panel's own grey now that the card around it is
 * white — the two swapped when the card appeared, and a white block on white
 * is no block at all.
 */
.acctable__place {
	margin: 0 0 10px;
	padding: 8px 12px;
	background: var(--wp--preset--color--surface);
	border-inline-start: 3px solid var(--wp--preset--color--secondary);
	border-radius: 3px;
}

.acctable__branch { margin: 0 0 4px; font-weight: 700; }

.acctable__branchfields { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; }
.acctable__branchfields dt { font-weight: 700; color: var(--wp--preset--color--muted); }
.acctable__branchfields dt::after { content: ":"; }
.acctable__branchfields dd { margin: 0 12px 0 0; }

.acctable__scopehead { margin: 8px 0 2px; font-weight: 700; }
.acctable__scopehead:first-child { margin-top: 0; }
.acctable__scopelist { margin: 0; padding-inline-start: 20px; }
/* Said once over the rows that share it; see registry-detail.php. */
.acctable__standard--again { display: none; }
.acctable__scopeline { display: block; }
.acctable__scopeline + .acctable__scopeline { margin-top: 8px; }

/*
 * Below the table's breakpoint each row becomes its own block and every cell
 * carries the column name it lost, so the reading order still says which
 * number is a certificate and which a date.
 */
@media (max-width: 782px) {
	.acctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

	/*
	 * The same card as above, drawn by the group itself now that it is a block.
	 * The rule this replaced sat between a row and its own detail, which is
	 * exactly where an accreditation does not end.
	 */
	.acctable__group { display: block; padding: 12px 14px; background-color: var(--wp--preset--color--base); }
	.acctable__group + .acctable__group { margin-top: 10px; }
	.acctable__group > tr { display: block; }
	.acctable__group > tr > td,
	.acctable__group > tr:last-child > td { padding-bottom: 0; background-color: transparent; border-top: 0; border-bottom: 0; }

	/*
	 * And the same borders again, by name.
	 *
	 * The space between accreditations is drawn as a border on the cells —
	 * the one way to put a gap between the rows of a table. Here each group is
	 * already a card with a margin, so those borders have nothing left to
	 * separate: they land inside the card, between a label and the value under
	 * it, as grey bands across it. The rules that set them carry :not() and
	 * :first-child and so outrank the reset above, which is why undoing them
	 * has to name them.
	 */
	.acctable__group:not( .acctable__group--again ) > tr:first-child > td,
	.acctable__group--again > tr:first-child > td,
	.acctable tbody.acctable__group:first-of-type > tr:first-child > td,
	.acctable__group:last-of-type > tr:last-child > td { border-top: 0; border-bottom: 0; }

	.acctable td { display: block; padding: 2px 0; border-bottom: 0; }
	.acctable td::before {
		display: block;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--wp--preset--color--muted);
		text-transform: uppercase;
		content: attr(data-label);
	}

	/* Each row is a card of its own, so each one says its standard again. */
	.acctable__standard--again { display: inline; }

	/* Once each row is a block, the column widths above no longer apply. */
	.acctable td { width: auto !important; white-space: normal !important; }
	.acctable__files { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }

	/* The expanded row has no column of its own to be labelled by. */
	.acctable__detail td::before { content: none; }
	.acctable__detail > td { padding: 8px 0 0; }
	.acctable__branchfields { display: block; }
	.acctable__branchfields dt { display: inline; }
	.acctable__branchfields dd { display: inline; }
	.acctable__branchfields dd::after { display: block; content: ""; }
}

.filelist__lang { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--muted); }
.filelist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 4px 24px; margin: 0; padding: 0; list-style: none; }

.filelink {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.filelink:hover .filelink__name { text-decoration: underline; }
.filelink__name { min-width: 0; overflow-wrap: anywhere; }
.filelink__size { flex-shrink: 0; font-weight: 400; color: var(--wp--preset--color--muted); }

.filelink__type {
	flex-shrink: 0;
	padding: 3px 6px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--muted);
	color: #fff;
	/* 12px: the smallest this chip should be, and it is read as a word. */
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
}

.filelink__type--pdf { background-color: #c02626; }
.filelink__type--doc,
.filelink__type--docx { background-color: var(--wp--preset--color--primary); }

/* Empty state and pagination ----------------------------------------------- */

/*
 * Open at the top, because on a register this box hangs off the toolbar above
 * it and a line between the two would be a line too many.
 */
.noresults {
	padding: 64px 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	text-align: center;
}

/*
 * On the search page there is nothing above it to hang off — the form stops a
 * clear gap higher up — so the same box was drawn with three sides and an open
 * edge where its top should be. Closed here rather than in the shared rule,
 * which is right where it is used.
 */
.sitesearch .noresults {
	border-top: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

.noresults__title { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--wp--preset--color--primary); }
.noresults__text { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--muted); }

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
}

.pagination__range { margin: 0; font-size: 14px; color: var(--wp--preset--color--muted); }
.pagination__pages { display: flex; flex-wrap: wrap; gap: 4px; }

.pagination__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background-color: #fff;
	color: var(--wp--preset--color--text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.pagination__pages .page-numbers.current {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
}

.pagination__pages .page-numbers.dots { border-color: transparent; background: none; }

@media (max-width: 900px) {
	.filters { position: static; max-width: none; flex-basis: 100%; }
	.registry { padding-block: 32px 64px; }
	.pagehead__inner { padding-block: 24px 40px; }
}

.perpage { display: flex; align-items: center; gap: 8px; margin: 0; }
.perpage__label { font-size: 13px; color: var(--wp--preset--color--muted); }

.perpage__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background-color: #fff;
	color: var(--wp--preset--color--text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.perpage__option.is-on {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
}

/* Document register --------------------------------------------------------- */

.filtergroup--flush { padding: 8px 12px; }

.documents { margin: 0; padding: 0; list-style: none; }

.document {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * Every other row tinted, as the registers do it and as ESYD asked for here
 * too — the list of documents and the lists of application forms under it were
 * white rows separated only by a hairline, which is hard to follow across to
 * the file at the far end of the row.
 *
 * The same two colours the registers use, so the two kinds of list read alike.
 */
.document:nth-of-type(even) { background-color: #f5f8fc; }
.document:hover,
.document:nth-of-type(even):hover { background-color: #eaf1fa; }
.document__main { flex: 3 1 240px; min-width: 0; }
.document__title { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--wp--preset--color--primary); text-wrap: pretty; }
.document__cat { display: block; margin-top: 2px; font-size: 13px; color: var(--wp--preset--color--muted); }
.document__code { flex: 1 1 110px; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.document__ver { flex: 0 0 56px; font-size: 14px; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.document__date { flex: 1 1 100px; font-size: 14px; font-variant-numeric: tabular-nums; }

/*
 * One column for the downloads, however many copies a document is published in:
 * stacked, and each of them on a line of its own so the file-type chip does not
 * end up over the words that describe it.
 */
.document__files { display: flex; flex: 1 1 170px; flex-direction: column; gap: 6px; min-width: 0; }

.document__download {
	display: inline-flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 32px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}

/* A single download keeps the 44px it had when it was the only thing here. */
.document__files > .document__download:only-child { min-height: 44px; }
/*
 * The words, not the badge. The whole link was underlined on hover, and the
 * badge is a coloured chip with its own shape — a line under «PDF» reads as
 * part of the chip having come loose. The file lists elsewhere already
 * underline only their name; this is the one that did not.
 */
.document__download:hover .document__downloadtext { text-decoration: underline; }
.document__missing { flex: 1 1 150px; font-size: 14px; color: var(--wp--preset--color--muted); }

.filtergroup__list--sub { margin-inline-start: 18px; border-inline-start: 1px solid var(--wp--preset--color--border); padding-inline-start: 8px; }

/* =============================================================================
   News feed and articles
   ========================================================================== */

.newsarchive { padding-block: 48px 112px; }

.newsfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 32px; }
.newspills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

.newspill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background-color: #fff;
	color: var(--wp--preset--color--text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.newspill:hover { border-color: var(--wp--preset--color--primary); }
.newspill.is-on { border-color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--primary); color: #fff; }
.newspill__count { font-size: 13px; font-weight: 400; opacity: 0.75; }

.newsyear { margin-inline-start: auto; }

.newsyear select {
	height: 44px;
	/* Wider on the arrow's side, so «Όλα τα έτη» never runs under it. */
	padding: 0 40px 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background-color: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--wp--preset--color--text);
}

.lead-article {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	margin-bottom: 48px;
	border-radius: 12px;
	overflow: hidden;
	background-color: #eaf1fa;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s;
}

/*
 * The whole card is the link, and it already answers — a shadow here, a ground
 * on the rows below. Underlining the title as well says "this word is a link"
 * about a word inside something that is entirely a link, and on a page of them
 * it reads as the page flickering.
 */
.lead-article:hover { box-shadow: 0 4px 12px rgb(33 50 100 / 10%); }
.lead-article__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 4vw, 48px); }
.lead-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lead-article__date { font-size: 13px; color: var(--wp--preset--color--muted); }
/* margin: 0 because these are headings now and carried the browser's own. */
.lead-article__title { margin: 0; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.25; font-weight: 700; color: var(--wp--preset--color--primary); text-wrap: pretty; }
.lead-article__excerpt { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.lead-article__more { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--wp--preset--color--primary); }
.lead-article__image { min-height: 320px; }
.lead-article__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.newsrows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--wp--preset--color--primary); }
.newsrow { border-bottom: 1px solid var(--wp--preset--color--border); }

.newsrow__link {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 24px;
	padding: 24px 20px;
	color: inherit;
	text-decoration: none;
}

.newsrow__link:hover { background-color: var(--wp--preset--color--surface); }
.newsrow__side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 0 1 120px; }
.newsrow__date { font-size: 14px; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.newsrow__main { flex: 4 1 320px; min-width: 0; }
.newsrow__title { display: block; margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--wp--preset--color--primary); text-wrap: pretty; }
.newsrow__excerpt { display: block; margin-top: 6px; max-width: 680px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.newsrow__thumb { flex: 0 0 128px; }
.newsrow__thumb img { display: block; width: 128px; height: 96px; object-fit: cover; border-radius: 4px; }

/* Article ------------------------------------------------------------------ */

.article { padding-block: 40px 96px; }
.article .breadcrumb { margin-bottom: 32px; }
.article__layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; }

.article__body { flex: 5 1 480px; min-width: 0; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 13px; color: var(--wp--preset--color--muted); }
.article__title { margin: 0 0 24px; font-size: clamp(30px, 4vw, 40px); line-height: 1.2; font-weight: 700; color: var(--wp--preset--color--primary); text-wrap: pretty; }
.article__image { margin: 0 0 32px; }
.article__image img { display: block; width: 100%; height: auto; border-radius: 12px; }

.article__content { font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--text); }
.article__content > * + * { margin-top: 16px; }
.article__content h2 { margin: 48px 0 16px; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; font-weight: 700; color: var(--wp--preset--color--primary); text-wrap: pretty; }
.article__content h3 { margin: 32px 0 12px; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--wp--preset--color--primary); }
.article__content ul, .article__content ol { padding-inline-start: 24px; }
.article__content li + li { margin-top: 8px; }
.article__content img { max-width: 100%; height: auto; border-radius: 8px; }
.article__content table { width: 100%; border-collapse: collapse; }
.article__content th, .article__content td { padding: 8px 12px; border: 1px solid var(--wp--preset--color--border); text-align: start; }

.article__files { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--border); }
.article__filestitle { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--wp--preset--color--primary); }
.article__back { margin-top: 40px; }
.article__back a { font-size: 16px; font-weight: 600; color: var(--wp--preset--color--primary); }

@media (max-width: 900px) {
	.newsarchive { padding-block: 32px 64px; }
}

/* While a filtered list is being fetched, the old one stays but stops inviting
   clicks. No spinner: the swap is usually faster than one would appear. */
.registry.is-loading .results,
.newsarchive.is-loading .newsrows,
.newsarchive.is-loading .lead-article { opacity: 0.55; transition: opacity 120ms ease-out; }
.registry.is-loading, .newsarchive.is-loading { cursor: progress; }
.results__count p:focus-visible, .newsfilters:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 3px; box-shadow: 0 0 0 6px var(--wp--preset--color--primary); }

.esyd-nav__droplink.is-current { background-color: #eaf1fa; box-shadow: inset 2px 0 0 0 #f7b817; font-weight: 700; }

/* The indicator under a list being fetched. It carries a word as well as the
   spinner, so it still says something when motion is switched off. */
/* The attribute has to win over the display, or the element is never hidden. */
.listloader[hidden] { display: none; }

.listloader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 24px 0 0;
	padding: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.listloader__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--wp--preset--color--border);
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: esyd-spin 700ms linear infinite;
}

@keyframes esyd-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.listloader__spinner { border-top-color: var(--wp--preset--color--border); }
}

/* =============================================================================
   Site-wide search
   ========================================================================== */

.sitesearch { padding-block: 40px 96px; }
.sitesearch__title { margin: 0 0 24px; font-size: clamp(30px, 4vw, 40px); line-height: 1.2; font-weight: 700; color: var(--wp--preset--color--primary); }

.sitesearch__form { position: relative; display: flex; flex-wrap: wrap; gap: 12px; max-width: 800px; margin-bottom: 24px; }
.sitesearch__icon { position: absolute; left: 16px; top: 28px; transform: translateY(-50%); pointer-events: none; }

.sitesearch__form input {
	flex: 1;
	min-width: 260px;
	height: 56px;
	padding: 0 16px 0 48px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font: inherit;
	font-size: 18px;
	color: var(--wp--preset--color--text);
}

.sitesearch__form .button { height: 56px; }

.sitesearch__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--border); }

.sitesearch__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sitesearch__tab:hover { background-color: var(--wp--preset--color--surface); }
.sitesearch__tab.is-on { border-bottom-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); font-weight: 700; }
.sitesearch__count { font-weight: 600; opacity: 0.7; }

.sitesearch__recap { margin: 0 0 16px; font-size: 16px; color: var(--wp--preset--color--muted); }
.sitesearch__results { margin: 0; padding: 0; list-style: none; }
.hit { border-bottom: 1px solid var(--wp--preset--color--border); }
.hit__link { display: flex; flex-direction: column; gap: 6px; padding: 20px; color: inherit; text-decoration: none; }
.hit__link:hover { background-color: var(--wp--preset--color--surface); }
.hit__link:hover .hit__title { text-decoration: underline; }
.hit__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.hit__type {
	padding: 3px 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.hit__detail { font-size: 13px; color: var(--wp--preset--color--muted); }
.hit__title { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--wp--preset--color--primary); text-wrap: pretty; overflow-wrap: anywhere; }
/*
 * A result's snippet can be a Zoom invitation seventy characters long with
 * nowhere to break. Left alone it makes the page scroll sideways on a phone.
 */
.hit__snippet { max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--muted); overflow-wrap: anywhere; }

.noresults__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.button--outline { background-color: #fff; border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); font-weight: 600; }
.button--outline:hover { background-color: var(--wp--preset--color--surface-alt); }

/* =============================================================================
   Page not found
   ========================================================================== */

.notfound {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
	padding: clamp(48px, 9vw, 96px) 24px;
}

/* 4.89:1 on white — the design's own accent, and it clears AA as drawn. */
.notfound__code { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--esyd-accent-ink); text-transform: uppercase; }
.notfound__title { margin: 0 0 16px; font-size: clamp(30px, 4vw, 40px); line-height: 1.2; font-weight: 700; color: var(--wp--preset--color--primary); }
.notfound__text { margin: 0 0 32px; font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--muted); }

.notfound__form { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.notfound__icon { position: absolute; left: 16px; top: 28px; transform: translateY(-50%); pointer-events: none; }

.notfound__form input {
	flex: 1;
	min-width: 240px;
	height: 56px;
	padding: 0 16px 0 48px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font: inherit;
	font-size: 18px;
	color: var(--wp--preset--color--text);
}

.notfound__form .button { height: 56px; }

/*
 * One pixel of gap over a grey background is how the design draws the dividing
 * lines between these tiles, so a single border surrounds the lot.
 */
.notfound__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
}

.notfound__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	height: 100%;
	padding: 20px;
	background-color: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.notfound__links a:hover { background-color: var(--wp--preset--color--surface); }

/* Single register entry and single document ---------------------------------- */

.orgsummary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0; }
.orgsummary__item { display: flex; flex-direction: column; gap: 2px; }
.orgsummary__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--wp--preset--color--muted); text-transform: uppercase; }
.orgsummary__value { font-size: 16px; font-weight: 600; color: var(--wp--preset--color--text); font-variant-numeric: tabular-nums; }

.organisation, .documentpage { padding-block: 40px 96px; }

/* The shared detail block is a panel inside a row; on its own page it is the page. */
.organisation .entry__detail { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; padding: 32px; }

.docfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px 32px; margin: 0 0 32px; }
.docfacts__row dt { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--wp--preset--color--muted); text-transform: uppercase; }
.docfacts__row dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--text); }
.docdownload { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.docdownload--missing { color: var(--wp--preset--color--muted); }

.entry__permalink { grid-column: 1 / -1; margin: 8px 0 0; }
.entry__permalink a { font-size: 15px; font-weight: 600; color: var(--wp--preset--color--primary); }

/* ---------------------------------------------------------------------------
 * Static pages. The design gives these no coloured head band: the breadcrumb,
 * the title and the lead sit in the reading column, with a contents list to
 * the left once the page has enough sections to need one.
 * ------------------------------------------------------------------------ */

.pagewrap { display: grid; gap: 40px; align-items: start; padding-block: 36px 72px; }

@media (min-width: 960px) {
	/*
	 * The panel goes beside the content rather than above it, and second in the
	 * source as well as on the page: it is what to do next, and a reader on a
	 * phone should reach it after the thing it follows from.
	 */
	.pagewrap--panel { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 64px; }
}

/* Under the navy band the title has already been said, so the gap above is smaller. */
.pagewrap--underbanner { padding-block-start: 44px; }

.pagewrap__main { min-width: 0; }

.breadcrumb--plain { margin-bottom: 18px; }

.pagetitle { margin: 0 0 14px; font-size: clamp(32px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.015em; color: var(--wp--preset--color--primary); }
.pagelead { max-width: 56rem; margin: 0 0 34px; font-size: 19px; line-height: 1.6; color: var(--wp--preset--color--muted); }

/* The contents list. Sticky, because it is there to be used while reading. */

/* A heading jumped to should not land under the sticky header. */
/*
 * Clear of the sticky header when something jumps to it. Measured, the header
 * is 105px on a desktop and 77px on a phone; at 90 the heading landed under it
 * and the reader arrived at a section whose name was hidden.
 */
.prose h2, .attached { scroll-margin-top: 124px; }

/* The header is 77px below 620px and 100–105px above it. */
@media (max-width: 619px) {
	.prose h2, .attached { scroll-margin-top: 96px; }
}

/*
 * The imported content.
 *
 * The measure is on the text, not on the container: past about seventy
 * characters a line is hard to track back from its end to the start of the
 * next, but a roster or a table has no reason to stop there, and the design
 * runs both to the full width of the column.
 *
 * In rem rather than ch. Greek at this size is wider than ch assumes — 76ch
 * measured 646px and 64 characters, against the design's 888px and 73 — so the
 * unit that was meant to express the measure was the thing distorting it.
 */
.prose { font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--text); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 18px; }
/* The rule under a section heading runs the width of the column, as the design draws it. */
.prose h2 { margin: 40px 0 14px; padding-bottom: 10px; font-size: 25px; line-height: 1.25; color: var(--wp--preset--color--primary); border-bottom: 2px solid var(--wp--preset--color--primary); }
.prose h3 { margin: 28px 0 10px; font-size: 19px; line-height: 1.35; color: var(--wp--preset--color--primary); }
.prose h4 { margin: 24px 0 8px; font-size: 17px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-inline-start: 22px; }
.prose li { margin: 0 0 6px; }
.prose a { color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover, .prose a:focus-visible { text-decoration-thickness: 2px; }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 0 0 18px; padding-inline-start: 16px; border-inline-start: 3px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--muted); }
.prose .ext { font-size: 0.8em; vertical-align: 0.15em; color: var(--wp--preset--color--muted); }

/*
 * A roster: the board, the council and their like. The source draws them as
 * two-column layout tables and the design shows a list of people, so they are
 * rendered as one — see esyd_roster_tables().
 *
 * Three columns become two lines on a narrow screen, with the name above the
 * role, because a role like "Εκπρόσωπος του Υπ. Ανάπτυξης, Μέλος" has nowhere
 * to go beside a name at 390px.
 */
/*
 * A roster is a grid of people, three across, as the export sets it out —
 * it was a stacked list with a disc of initials beside each name. The bands
 * run a row at a time, and :nth-child can do them here because nothing in
 * this list is ever hidden.
 */
/* Both shapes are a list of people, and neither wants a bullet or an indent. */
.prose .roster {
	max-width: none;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.prose .roster:not(.roster--list) {
	display: grid;
	column-gap: 24px;
	row-gap: 0;
}

.prose .roster:not(.roster--list):not(.roster--pairs) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.roster__count {
	padding: 4px 12px;
	border-radius: 999px;
	background-color: rgb(134 187 229 / 18%);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(6n+1),
.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(6n+2),
.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(6n+3) { background-color: #f5f8fc; }

@media (width <= 1023px) {
	.prose .roster:not(.roster--list):not(.roster--pairs) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(6n+1),
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(6n+2),
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(6n+3) { background-color: transparent; }
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(4n+1),
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(4n+2) { background-color: #f5f8fc; }
}

@media (width <= 600px) {
	.prose .roster:not(.roster--list):not(.roster--pairs) { grid-template-columns: 1fr; }
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(4n+1),
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(4n+2) { background-color: transparent; }
	.roster:not(.roster--list):not(.roster--pairs) .roster__row:nth-child(odd) { background-color: #f5f8fc; }
}

.roster .roster__row {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 64px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
}

.roster__name { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--wp--preset--color--text); }
/* One part of a role to a line, so a long one is read rather than parsed. */
.roster__role { display: block; font-size: 13px; line-height: 1.45; color: var(--wp--preset--color--muted); }

/*
 * The board, which the design draws as a list rather than a grid: one person
 * to a line, the name at the front and the role beside it, ruled between. The
 * grid is for a directory, where what is scanned is the posts — the staffing
 * and the council, where every entry is a department or a represented body.
 * Here the people are the content, and seven of them in a grid of three
 * strand the seventh on a row of its own.
 *
 * The design's row carries a photograph and a chevron onto a biography. ESYD
 * publishes neither, so neither is here; what is left is the name, the role
 * and the rule.
 */
/*
 * Two across, which is what the design gives the council: the same cards as
 * the directory, but its roles are a sentence long — "Εκπρόσωπος της
 * Επαγγελματικής – Επιστημονικής Ένωσης Τεχνολογικής Εκπαίδευσης Μηχανικών" —
 * and a third of 1280 wraps that to four lines. The design asks 340px of a
 * column here against 260 for the directory, so the second column goes at
 * 752 rather than 1023 and the bands follow two at a time.
 */
.prose .roster--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.roster--pairs .roster__row:nth-child(4n+1),
.roster--pairs .roster__row:nth-child(4n+2) { background-color: #f5f8fc; }

@media (width <= 751px) {
	.prose .roster--pairs { grid-template-columns: 1fr; }

	.roster--pairs .roster__row:nth-child(4n+1),
	.roster--pairs .roster__row:nth-child(4n+2) { background-color: transparent; }

	.roster--pairs .roster__row:nth-child(odd) { background-color: #f5f8fc; }
}

.prose .roster--list { display: block; }

/*
 * The heading over a group of people, as the design rules it on this page:
 * navy, and a 2px rule in the navy rather than the hairline a directory's
 * heading gets. No count beside it — the design does not put one here, and
 * two names under "Πρόεδρος και Διευθύνων Σύμβουλος" do not need counting.
 */
.prose h2:has( + .roster.roster--list ) {
	padding-bottom: 12px;
	color: var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

.roster--list .roster__row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 4px 16px;
	align-items: center;
	min-height: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: transparent;
}

.roster--list .roster__row:last-child { border-bottom: 0; }

/*
 * The design puts a photograph here. There are none — the source publishes
 * names and roles — so the initials hold the place rather than an empty frame.
 */
.roster--list .roster__mark {
	display: flex;
	grid-row: span 2;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

/*
 * Without the initials there is no first column to leave room for, so the row
 * starts at the edge. Everything else about it — the rule under each line, the
 * second column saying what the first one is — stays as it is.
 *
 * Both classes in the selector on purpose. The widths for .roster--list are
 * set again further down inside a media query, and at equal weight the later
 * rule would win wherever this one sat; carrying the extra class settles it by
 * specificity instead of by position.
 */
.roster--list.roster--plain .roster__row { grid-template-columns: minmax(0, 1fr); }

@media (width >= 720px) {
	.roster--list.roster--plain .roster__row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.roster--list .roster__name { font-size: 17px; line-height: 1.35; color: var(--wp--preset--color--primary); }
.roster--list .roster__role { font-size: 15.5px; line-height: 1.5; }

/* Wide enough for the role to stand beside the name rather than under it. */
@media (width >= 720px) {
	.roster--list .roster__row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 16px 0; }
	.roster--list .roster__mark { grid-row: auto; width: 56px; height: 56px; font-size: 17px; }
}

/* A post with no name against it: the frame is there but empty, and says so. */
.roster--list .roster__row--unnamed .roster__mark {
	color: var(--wp--preset--color--muted);
	background-color: transparent;
	border-style: dashed;
}

/*
 * The heading over a roster, with the count beside it: the export rules it
 * with a hairline in the border grey rather than the heavy amber the earlier
 * design used, and sets it at 24px.
 */
.prose .prose--panels h2,
.prose h2:has( + .roster ) {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding-bottom: 16px;
	font-size: 24px;
	font-weight: 700;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * The space between one directorate and the next: the roster's own 26px and
 * this, which together make the export's 64. Named with the wrapper, because
 * the heading rule above is two classes and would otherwise hold it at zero.
 */
.prose .roster + h2 { margin-block-start: 50px; }

.prose--panels .roster { margin-bottom: 8px; }

/*
 * The steps of a process, as the design sets them: boxes in one frame with a
 * hairline between them.
 *
 * The lines are borders on the boxes, not a 1px gap over a grey ground and
 * not a shadow. The gap leaves grey showing wherever a last row runs out,
 * and a shadow is painted over by the next box's own background, which is
 * why the lines between them were not there. A border is inside the box and
 * nothing paints over it.
 *
 * Each box draws the line to its right and the one below it; the frame draws
 * only the top and the left. So a last row that does not fill ends where the
 * steps end, with the line stopping at the last box rather than running on
 * under nothing.
 */
.prose .steps {
	display: grid;
	grid-template-columns: repeat(var(--steps-cols, 4), minmax(0, 1fr));
	gap: 0;
	max-width: none;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	background-color: #fff;
	border-top: 1px solid var(--wp--preset--color--border);
	border-left: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
}

/*
 * The margin is named with the list, because the prose puts 6px under every
 * list item and 6px here left each box short of its own row: the line below
 * it stopped above the frame and the line down its side stopped with it.
 */
.prose .steps .steps__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 28px 24px;
	background-color: #fff;
	border-right: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The design's amber on the number, and the navy on the words. */
.steps__n { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--wp--preset--color--amber); }
.steps__title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--primary); }
.steps__body { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--muted); }

/*
 * Where the line stops, it turns the same corner the frame does. On a full
 * last row this falls on the frame's own rounded corner and is not seen; on
 * a short one it is the end of the shape, and a right angle there was the
 * only hard corner on the component.
 */
.prose .steps .steps__step:last-child { border-bottom-right-radius: 12px; }

/* Two across where four no longer fit, then one. */
@media (width <= 1023px) {
	.prose .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 599px) {
	.prose .steps { grid-template-columns: 1fr; }
}

/*
 * Any table that is genuinely tabular. It scrolls sideways inside its own box
 * rather than pushing the page wider, and the scroller is focusable so it can
 * be reached from the keyboard.
 */
.wp-block-table { margin: 0 0 24px; overflow-x: auto; }
.prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 16.5px; }
.prose caption { margin-bottom: 8px; font-weight: 700; text-align: left; }
.prose th, .prose td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wp--preset--color--border); }
.prose th { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--wp--preset--color--muted); text-transform: uppercase; }
.prose tr:last-child th, .prose tr:last-child td { border-bottom: 0; }

/*
 * Documents attached to the page, as the design's "Συνημμένα έγγραφα" panel:
 * a bordered card, one row per file, the type and size on the right. It keeps
 * the text's measure, because it is read with the text.
 */
/* overflow:hidden so a row's hover stops at the panel's rounded corner. */
/*
 * Not overflow: hidden, for the reason above — the rows are links, and a link’s
 * focus ring is drawn outside it. The last row carries the curve instead.
 */
.attached__list li:last-child .attached__item { border-radius: 0 0 9px 9px; }
.attached { max-width: 56rem; margin: 44px 0 0; background-color: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 10px; }
.attached__label { margin: 0; padding: 14px 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--wp--preset--color--muted); text-transform: uppercase; border-bottom: 1px solid var(--wp--preset--color--border); }
.attached__list { margin: 0; padding: 0; list-style: none; }
.attached__list li + li { border-top: 1px solid var(--wp--preset--color--border); }

.attached__item {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.attached__item:hover,
.attached__item:focus-visible { background-color: var(--wp--preset--color--surface); }
.attached__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.attached__name { font-size: 16.5px; font-weight: 600; color: var(--wp--preset--color--primary); }
.attached__meta { font-size: 13.5px; color: var(--wp--preset--color--muted); }
.attached__file { display: flex; flex-shrink: 0; gap: 10px; align-items: center; }
.attached__size { font-size: 13.5px; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.attached__go { font-size: 16px; font-weight: 700; color: var(--wp--preset--color--primary); }

/*
 * The same panel standing on its own rather than under a page's prose: it is
 * the content, so it does not need the gap that separates it from what it was
 * attached to, and it keeps a link's underline off the row.
 */
.attached--plain { margin-top: 0; }

/*
 * Inside the prose the row would take the underline every link there gets, and
 * it would run under the file size and the arrow as well as the name. The row
 * is a row; the name is what underlines, and only on hover.
 */
/*
 * The whole row is the link and the whole row lights up, so an underline on
 * top of that is a second signal for the same thing.
 */
.prose .attached__item,
.prose .attached__item:hover { text-decoration: none; }

/*
 * Inside the prose the list would take the indent and the spacing every list
 * there gets, which insets each row from the panel's own edge and leaves the
 * hover covering less than the row.
 */
.prose .attached__list { margin: 0; padding: 0; list-style: none; }
.prose .attached__list li { margin: 0; }

/*
 * A heading that labels one of these panels loses its rule: the panel's own
 * border is the line, and two of them one above the other read as a mistake.
 */
.prose h2:has(+ .attached) { padding-bottom: 0; border-bottom: 0; }

/*
 * The panel that says what to do next. Navy along the top rather than a full
 * border, which is how the design separates it from the page without boxing it.
 */
/*
 * The page's last section and the panel that closes it, side by side as the
 * design has them. auto-fit rather than two fixed columns, so they stack
 * below 320px of each and the panel does not squeeze the list it belongs to.
 */
.pagefoot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 48px 64px;
	align-items: start;
	margin-block-start: 48px;
}

.pagefoot > .prose { margin: 0; }
.pagefoot .applypanel { margin: 0; }

.applypanel {
	/* It closes the page now rather than standing beside it. */
	margin-block-start: 44px;
	padding: 32px;
	background-color: var(--wp--preset--color--surface);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 12px;
}

@media (max-width: 480px) { .applypanel { padding: 22px; } }

.applypanel__title { margin: 0 0 8px; font-size: 24px; line-height: 1.3; color: var(--wp--preset--color--primary); }
.applypanel__text { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.applypanel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/*
 * The band a section opens on.
 *
 * Three layers, as the export draws them: a diagonal gradient, a drawn grid
 * over it, and a glow in two corners. The grid is the designer's own file
 * rather than a data URI — it is eleven kilobytes, which belongs in a cached
 * request and not in every page's stylesheet.
 */
/*
 * Drawn as pseudo-elements rather than as two spare divs, so that every band
 * on the site gets them from its class alone — the section hubs and the pages
 * that open on one both land here.
 */
.pageband,
.sectorhead {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #1a2850 0%, #213264 45%, #2b3f7a 100%);
	color: #fff;
}

/*
 * The drawn grid. Masked, which is the part that makes it a drawing in the
 * corner rather than wallpaper: an ellipse over the right of the band, full
 * strength at its centre and gone by three quarters out. Without it the grid
 * ran edge to edge at one weight and read as a texture over the whole thing.
 *
 * The prefixed property is for Safari, which still wants it.
 */
.pageband::before,
.sectorhead::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("assets/img/band-grid.svg");
	background-size: 1200px 420px;
	background-position: right top;
	-webkit-mask-image: radial-gradient(ellipse 55% 120% at 88% 20%, #000 0%, rgb(0 0 0 / 35%) 45%, transparent 75%);
	mask-image: radial-gradient(ellipse 55% 120% at 88% 20%, #000 0%, rgb(0 0 0 / 35%) 45%, transparent 75%);
}

/* The light in the top right corner and the weight in the bottom left. */
.pageband::after,
.sectorhead::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 92% 0%, rgb(134 187 229 / 35%) 0%, rgb(134 187 229 / 0%) 45%),
		radial-gradient(circle at 0% 100%, rgb(17 26 53 / 55%) 0%, rgb(17 26 53 / 0%) 50%);
}

/*
 * Everything real inside a band sits above its two painted layers. Written
 * as a child selector rather than against the inner wrapper's class, because
 * a pseudo-element is not a child and so cannot match it — and because not
 * every band wraps its content in the same class. Without this the glow,
 * being the element's last layer, was painted over the words.
 */
.pageband > *,
.sectorhead > * { position: relative; z-index: 1; }

.pageband__inner { padding-block: 32px 64px; }

.pageband .breadcrumb { margin-bottom: 32px; line-height: 1.4; color: #c9d6ea; }
.pageband .breadcrumb a { color: #c9d6ea; text-decoration: underline; text-underline-offset: 2px; }
.pageband .breadcrumb a:hover { color: #fff; }
.pageband .breadcrumb [aria-current] { color: #fff; font-weight: 600; }

.pageband__eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: 0.08em;
	color: #86bbe5;
}

.pageband__title {
	margin: 0;
	max-width: 880px;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.12;
	color: #fff;
	text-wrap: balance;
}

.pageband__lead { margin: 16px 0 0; max-width: 720px; font-size: 18px; line-height: 1.6; color: #e4eaf5; text-wrap: pretty; }

/* The band has paid for the space above the cards. */
.pagewrap--underband { padding-block-start: 48px; }

.hubgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * One line each, laid across rather than down. They were tall columns four
 * abreast, and most of a card was the empty space under a two-word title.
 */
.hubcard {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 80px;
	height: 100%;
	padding: 16px 24px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%);
	/*
	 * Its own, so the rows inside are the height of their own type. Inherited,
	 * the page's 20px line box made the summary and the arrow taller than the
	 * export's and pushed the card two pixels over.
	 */
	line-height: 1.4;
}

/* The mark that makes a row a card rather than a list item. */
.hubcard::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 32px;
	border-radius: 2px;
	/* The export's amber, the same one the buttons use. */
	background-color: #f7b817;
}

.hubcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }

.hubcard:hover,
.hubcard:focus-visible {
	border-color: #86bbe5;
	box-shadow: 0 1px 3px rgb(33 50 100 / 10%), 0 4px 8px 3px rgb(33 50 100 / 8%);
}
.hubcard__title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--wp--preset--color--primary); }
/*
 * One line, clipped. The summary is a hint at what is behind the link and the
 * export treats it as one; left to wrap it took a row of cards from 80px to
 * 208 on a phone, which is the tall card this change was meant to undo.
 */
.hubcard__text {
	overflow: hidden;
	font-size: 14px;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hubcard__more { flex-shrink: 0; font-size: 18px; font-weight: 700; line-height: 1.33; color: var(--wp--preset--color--primary); }

/*
 * The one card a section sets apart: the whole row, in the pale blue, with
 * the mark turned navy so it still reads against it.
 */
.hubgrid__wide { grid-column: 1 / -1; }

.hubcard--feature {
	background-color: #86bbe5;
	border-color: #86bbe5;
}

.hubcard--feature::before { background-color: var(--wp--preset--color--primary); }
.hubcard--feature .hubcard__title,
.hubcard--feature .hubcard__text,
.hubcard--feature .hubcard__more { color: var(--wp--preset--color--primary); }

.hubcard--feature:hover,
.hubcard--feature:focus-visible { border-color: var(--wp--preset--color--primary); }

/* A post the source lists with no name against it. */
.roster__row--unnamed .roster__name { color: var(--wp--preset--color--muted); font-weight: 400; }

/* ---------------------------------------------------------------------------
 * The organisation chart. Four levels and two kinds of line, drawn in CSS so
 * the text stays text: readable by a screen reader, findable by search,
 * translatable, and legible on a phone, none of which a JPEG manages.
 * ------------------------------------------------------------------------ */

/*
 * --org-gap is the space between rows, --org-box the height of a box holding a
 * single line of title. The elbows out to the side columns are expressed in
 * those terms, so they hold as long as the chart keeps the shape the founding
 * law gives it; below 860px the stacked layout carries any other shape.
 */
/*
 * The chart's name, at the size the design gives it — larger than the page's
 * other headings, because what follows it is a diagram rather than prose and
 * the two need telling apart.
 */
.prose h2:has( + .orgchart ) {
	margin: 0 0 24px;
	padding-bottom: 0;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.25;
	/* The rule a heading over prose carries would double the chart's frame. */
	border-bottom: 0;
}

.orgchart {
	/*
	 * The elbows out to the side columns are absolute, so they are expressed
	 * in the heights of the rows they cross. Every one of these is measured
	 * off the rendered chart, and orgchart-test asserts each elbow still
	 * lands on the box it points at — in both languages, to the pixel.
	 */
	--org-gap: 40px;
	/* A box holding one line of title. */
	--org-box: 68px;
	/* The council and the officer's row, fixed so the drop below it is known. */
	--org-side: 86px;
	/* The service's name on its own, without its departments. */
	--org-pill: 48px;
	margin: 26px 0 32px;
	padding: 32px 24px;
	background-color: #f5f8fc;
	border-radius: 12px;
}

/*
 * Stacked on a narrow screen, in reading order, with the kind of line shown as
 * the border down the side of each box. Elbows across three columns are
 * unreadable at 390px.
 */
.orgchart__flow { display: grid; gap: 14px; }
.orgchart__wire { display: none; }


@media (min-width: 860px) {
	/*
	 * The source's own layout: the chain of command down the middle, the
	 * council to one side and the data protection officer to the other.
	 */
	.orgchart__flow {
		position: relative;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
		grid-template-areas:
			".       board     ."
			".       md        ."
			"council .         dpo"
			".       service   ."
			".       assessors .";
		grid-template-rows: auto auto var(--org-side) auto auto;
		row-gap: var(--org-gap);
		column-gap: 28px;
		align-items: stretch;
	}

	.orgchart__cell--board { grid-area: board; }
	.orgchart__cell--md { grid-area: md; }
	.orgchart__cell--council { grid-area: council; }
	.orgchart__cell--dpo { grid-area: dpo; }
	.orgchart__cell--service { grid-area: service; }
	.orgchart__cell--assessors { grid-area: assessors; }

	/*
	 * No edge down the inside of a box here — the elbows say which line is
	 * which, and the design borders a box alike on every side. It is added
	 * back below 860px, where the elbows are not drawn and it is the only
	 * thing saying it.
	 */
	.orgchart__cell { position: relative; z-index: 1; }

	/*
	 * The spine down the centre column, drawn once behind the boxes. They are
	 * opaque, so it shows only in the gaps between them — which is the
	 * continuous line the source draws.
	 */
	.orgchart__flow::before {
		position: absolute;
		top: 0;
		/*
		 * Stops at the foot of the service, because from there down two
		 * lines arrive at the assessors instead of one — and the pair is
		 * drawn below. Left running, it was a third line between them.
		 */
		bottom: calc(var(--org-box) + var(--org-gap));
		left: 50%;
		/* Half its own width back, so the line is on the centre and not beside it. */
		margin-left: -1px;
		z-index: 0;
		content: "";
		border-left: 2px solid var(--wp--preset--color--primary);
	}

	/*
	 * Into the assessors both lines arrive — who manages them and how the
	 * work reaches them — so they are drawn as a pair either side of the
	 * centre rather than one on it and one off to the right.
	 */
	.orgchart__cell--assessors::before,
	.orgchart__cell--assessors::after {
		position: absolute;
		bottom: 100%;
		height: var(--org-gap);
		margin-left: -1px;
		content: "";
	}

	.orgchart__cell--assessors::before {
		left: calc(50% - 8px);
		border-left: 2px solid var(--wp--preset--color--primary);
	}

	.orgchart__cell--assessors::after {
		left: calc(50% + 8px);
		border-left: 2px dashed var(--wp--preset--color--primary);
	}

	.orgchart__wire { position: absolute; z-index: 0; display: block; }

	.orgchart__wire--dpo,
	.orgchart__wire--council {
		top: calc(var(--org-box) / 2);
		width: 16%;
		height: calc(var(--org-gap) * 2 + var(--org-box) * 1.5);
	}

	.orgchart__wire--dpo {
		right: 13.6%;
		border-top: 2px solid var(--wp--preset--color--primary);
		border-right: 2px solid var(--wp--preset--color--primary);
	}

	.orgchart__wire--council {
		left: 13.6%;
		border-top: 2px dashed var(--wp--preset--color--primary);
		border-left: 2px dashed var(--wp--preset--color--primary);
	}

	/*
	 * And back from the council into the service, landing on the middle of
	 * its name. The service is a pill with its departments under it now, not
	 * one tall box, so the drop is measured to the pill rather than to a
	 * share of a box that is no longer there.
	 */
	.orgchart__wire--council-out {
		top: calc(var(--org-gap) * 2 + var(--org-box) * 2 + var(--org-side));
		left: 13.6%;
		width: 16%;
		height: calc(var(--org-gap) + var(--org-pill) / 2);
		border-bottom: 2px dashed var(--wp--preset--color--primary);
		border-left: 2px dashed var(--wp--preset--color--primary);
	}
}

/*
 * The boxes, as the v5 design draws them: a pill rather than a card, the
 * title centred at 15px, and the elevation the rest of the site uses.
 *
 * The 4px down the inside edge stays. It is not decoration — it is how the
 * two kinds of line are told apart once the chart stacks, and the stacked
 * chart is what a phone gets.
 */
.orgchart__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	text-align: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%);
	position: relative;
	transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}

/*
 * A box that leads somewhere is the button, not the words in it. The link
 * covers the box, so the whole of it is the target and the whole of it
 * rises — an underline under four words in the middle of a card was the
 * only thing answering the pointer.
 */
.orgchart .orgchart__link::after {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: inherit;
}

.orgchart__box:has( .orgchart__link:hover ),
.orgchart__box:has( .orgchart__link:focus-visible ) { box-shadow: 0 1px 3px rgb(33 50 100 / 10%), 0 4px 8px 3px rgb(33 50 100 / 8%); }

/*
 * Except the service, whose box is its name and its departments together.
 * The link covers the name alone, and the name alone answers — hovering a
 * department was lifting the service above it.
 */
.orgchart__cell--service > .orgchart__box:has( .orgchart__link:hover ),
.orgchart__cell--service > .orgchart__box:has( .orgchart__link:focus-visible ) { box-shadow: none; outline: 0; }

.orgchart__cell--service .orgchart__title:has( .orgchart__link:hover ),
.orgchart__cell--service .orgchart__title:has( .orgchart__link:focus-visible ) { box-shadow: 0 1px 3px rgb(33 50 100 / 10%), 0 4px 8px 3px rgb(33 50 100 / 8%); }

.orgchart__cell--service .orgchart__title:has( .orgchart__link:focus-visible ) { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 1px; }

/*
 * And the focus ring goes round the box with it. The link's own would ring
 * the words inside, which is where the pointer is not.
 */
.orgchart__box:has( .orgchart__link:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--amber);
	outline-offset: 1px;
}

.orgchart .orgchart__link:focus-visible { outline: 0; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.orgchart__box { transition: none; }
}

/*
 * Who is filled and who is outlined is the design's: the chain of command in
 * the navy, the two bodies beside it outlined in the pale blue, the data
 * protection officer in the plain border.
 */
.orgchart__cell--board > .orgchart__box,
.orgchart__cell--md > .orgchart__box {
	color: #fff;
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.orgchart__cell--council > .orgchart__box,
.orgchart__cell--assessors > .orgchart__box { border-color: #86bbe5; }

/*
 * Stacked, the edge down the inside is the only thing left saying which line
 * is which, so it comes back — after the box is defined, or the shorthand
 * that borders it alike would win by coming later.
 */
@media (width <= 859px) {
	.orgchart__box { border-inline-start: 4px solid var(--wp--preset--color--primary); }
	.orgchart__cell--line-dashed > .orgchart__box { border-inline-start-style: dashed; }
	.orgchart__cell--line-both > .orgchart__box { border-inline-start-style: double; border-inline-start-width: 6px; }
}

.orgchart__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--wp--preset--color--primary); }
.orgchart__cell--board .orgchart__title,
.orgchart__cell--md .orgchart__title { color: #fff; }

/*
 * No underline: the design draws these as buttons, and the box is what
 * answers the pointer. Two classes, because `.prose a` paints every link in
 * the body navy and underlines it.
 */
.orgchart .orgchart__link { color: inherit; text-decoration: none; border-bottom: 0; }
.orgchart .orgchart__link:hover, .orgchart .orgchart__link:focus-visible { color: var(--wp--preset--color--accent); }

/* On the navy, amber: the orange would be 3.3:1 against it. */
.orgchart__cell--board .orgchart__link:hover,
.orgchart__cell--board .orgchart__link:focus-visible,
.orgchart__cell--service .orgchart__link:hover,
.orgchart__cell--service .orgchart__link:focus-visible { color: var(--wp--preset--color--amber); }

/* The officer's abbreviation above the name, as the design sets it out. */
.orgchart__abbr { display: block; margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--wp--preset--color--muted); }

/*
 * The service's departments. The design gives each one a card of its own
 * under a rule in the pale blue, rather than a bullet in a list — so the
 * service's own box holds only its name and the cards sit beneath it,
 * inside the same cell and on the same line into it.
 */
.orgchart__cell--service > .orgchart__box {
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Except stacked, where it carries the kind of line like every other box. */
@media (width <= 859px) {
	.orgchart__cell--service > .orgchart__box { border-inline-start: 4px solid var(--wp--preset--color--primary); }
}

.orgchart__cell--service .orgchart__title {
	position: relative;
	align-self: stretch;
	padding: 14px 20px;
	color: #fff;
	background-color: var(--wp--preset--color--primary);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%);
}

/* Two classes: `.prose ul` indents every list in the body and sets its margin. */
.orgchart .orgchart__units {
	display: grid;
	background-color: #f5f8fc;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 12px;
	width: 100%;
	margin: 16px 0 0;
	padding: 16px 0;
	list-style: none;
	border-block: 2px solid #86bbe5;
}

.orgchart .orgchart__units li { margin: 0; }

.orgchart__units li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
	text-align: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.orgchart__aside { display: grid; gap: 14px; }
.orgchart__branch { position: relative; }
.orgchart__branch .orgchart__box { border-inline-start-width: 4px; }
.orgchart__branch--dashed .orgchart__box { border-inline-start-style: dashed; }

/*
 * Clear of the chart and ruled off it: it reads the diagram, it is not in
 * it. Two classes, because the legend is a <p> and `.prose p` sets a margin
 * of its own that would otherwise win.
 */
.orgchart .orgchart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 40px 0 0;
	padding-block-start: 20px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}
.orgchart__key { display: inline-flex; gap: 10px; align-items: center; }
.orgchart__key::before { width: 28px; content: ""; border-top: 2px solid var(--wp--preset--color--primary); }
.orgchart__key--dashed::before { border-top-style: dashed; }

/* How many are in the list, beside the heading that names it. */
.namelist__count {
	display: inline-block;
	padding: 2px 9px;
	margin-inline-start: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	vertical-align: 3px;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
}

.namefilter__input {
	width: 100%;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--text);
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

.namefilter__input:focus-visible { border-color: var(--wp--preset--color--primary); }

/* The count of matches, read out as it changes rather than shown twice. */
.namefilter__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.namefilter__none { margin: 0 0 26px; font-size: 15.5px; color: var(--wp--preset--color--muted); }

/* ---------------------------------------------------------------------------
 * Outbound links as cards: the name, the domain under it, and the arrow that
 * says the link leaves the site.
 * ------------------------------------------------------------------------ */

/*
 * Two to a row on a wide screen, not five. At 200px a card held a name, a
 * web address and an arrow in the width of a column of text, and the longer
 * names broke across three lines; the export gives each one 420.
 */
.prose .linkcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
	max-width: none;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.prose .linkcards li { margin: 0; }

.linkcard {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 88px;
	height: 100%;
	padding: 16px 24px;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%);
	transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

/*
 * The tile in front of each address, with the site's own logo in it.
 *
 * The design's is a 56px disc holding a favicon. These are the logos off the
 * sites themselves, and most of them are wordmarks: ΕΛΟΤ, HellasLab, Eurachem,
 * European Accreditation are all three or four times as wide as they are tall,
 * and a circle gives a shape like that a thirty-pixel diagonal to live on.
 *
 * So the disc becomes a rounded rectangle, 104 by 56 — the design's height, its
 * white, its hairline — and the logo is fitted rather than filled inside it, so
 * a wide one is scaled and never cropped. Everything else is the design's.
 */
.linkcard__mark {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 56px;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #e6eaf2;
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
}

.linkcard__icon { width: 88px; height: 40px; object-fit: contain; }

.linkcard__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: -8px;
	border-radius: 9px;
	background-color: rgb(134 187 229 / 18%);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary);
}

.linkcard__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
	.linkcard { transition: none; }
}

/* A card is the link; the underline the prose puts on one belongs to running text. */
.prose .linkcard,
.prose .linkcard:hover,
.prose .linkcard:focus-visible { text-decoration: none; }

.linkcard:hover {
	border-color: #86bbe5;
	box-shadow: 0 1px 3px rgb(33 50 100 / 10%), 0 4px 8px 3px rgb(33 50 100 / 8%);
}

/*
 * The same lift on a keyboard, and the focus ring's navy after it — a card
 * that sets a box-shadow replaces the ring's rather than adding to it, and
 * the amber outline alone on white is 1.78:1 where 1.4.11 asks for 3.
 */
.linkcard:focus-visible {
	border-color: #86bbe5;
	box-shadow: 0 1px 3px rgb(33 50 100 / 10%), 0 4px 8px 3px rgb(33 50 100 / 8%), 0 0 0 4px var(--wp--preset--color--primary);
}

.linkcard__name { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--wp--preset--color--primary); }

/*
 * The address is underlined and in the navy, not grey: it is the one line on
 * the card that says where the link actually goes, and the export marks it
 * as the part you read rather than as a footnote.
 */
.linkcard__host {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.linkcard__go { flex-shrink: 0; font-size: 18px; font-weight: 800; color: var(--wp--preset--color--primary); }

/*
 * On a phone the tile gives ground.
 *
 * At 390px the card is 358 wide; a 104px tile, the gap and the arrow left the
 * words 166px, and european-accreditation.org is one unbreakable string longer
 * than that — measured, it pushed the page sideways. The tile comes down to
 * 76px and the address is allowed to break, which costs a wordmark a little
 * width and costs the reader nothing.
 */
@media (width <= 600px) {
	.linkcard { gap: 14px; padding: 14px 16px; }
	.linkcard__mark { width: 76px; height: 48px; padding: 6px; }
	.linkcard__icon { width: 64px; height: 36px; }
	.linkcard__initials { margin: -6px; }
	.linkcard__host { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------------
 * The fields of accreditation: a navy band with what the section can count
 * about itself, then the source's own sixteen pictures.
 * ------------------------------------------------------------------------ */

.sectorhead { padding-block: 32px 64px; }
.sectorhead__inner { display: grid; gap: 28px; align-items: start; }

@media (min-width: 900px) {
	.sectorhead__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; }
}

/* One band, one set of sizes: these are the export's, the same as .pageband's. */
.sectorhead__title {
	margin: 0;
	max-width: 880px;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: normal;
	color: #fff;
	text-wrap: balance;
}

.sectorhead__lead { margin: 16px 0 0; max-width: 720px; font-size: 18px; line-height: 1.6; color: #e4eaf5; text-wrap: pretty; }

/* The line of amber above a title, saying what the page is for. */
.sectorhead__eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: 0.08em;
	color: #86bbe5;
}

.breadcrumb--onnavy { margin-bottom: 32px; line-height: 1.4; color: #c9d6ea; }
.breadcrumb--onnavy a { color: #c9d6ea; text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb--onnavy a:hover, .breadcrumb--onnavy a:focus-visible { color: #fff; }
.breadcrumb--onnavy [aria-current] { color: #fff; font-weight: 600; }

/* Counted from the register, not written down: see esyd_page_figures(). */
/*
 * Two to a row rather than all three across, as the design sets them: it keeps
 * them beside the title instead of running the width of the band, and the
 * third drops under the first where the eye is already going.
 */
.figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: 24px 48px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

@media (width <= 600px) {
	.figures { grid-template-columns: 1fr; gap: 18px; }
}

/*
 * Under the title rather than beside it. The space below a title here is the
 * lead paragraph's margin, so on a page without a lead the figures came to
 * rest against the words above them.
 */
.figures--underhead { margin-block-start: 26px; }
/*
 * The mark is a rule the height of the figure rather than a border on the
 * item, because the export stretches it to whatever the two lines come to.
 */
.figures li { display: flex; align-items: stretch; gap: 16px; padding: 0; border: 0; }

.figures li::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	border-radius: 2px;
	background-color: #f7b817;
}

/* Tabular figures, so the box does not twitch as the count runs through 8s and 1s. */
.figures__value { display: block; font-size: clamp(32px, 4vw, 44px); font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.figures__label { display: block; font-size: 15px; font-weight: 600; line-height: normal; color: #86bbe5; }

.sectorwrap { padding-block: 36px 64px; }

/*
 * Sixteen tiles, so one, two or four columns — three left the sixteenth alone
 * at the bottom of the page.
 */
.sectorgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sectortile {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 180px;
	height: 100%;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background-color: #fff;
	text-decoration: none;
	box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%);
	transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}

/*
 * The same lift the link cards have, which is the design's: a tile sits on a
 * shadow at rest and rises on hover, rather than flattening into the page
 * until it is touched. The border goes pale blue, not navy — navy is the
 * colour of the words inside it and reads as pressed rather than pointed at.
 */
.sectortile:hover {
	border-color: #86bbe5;
	box-shadow: 0 1px 3px rgb(33 50 100 / 10%), 0 4px 8px 3px rgb(33 50 100 / 8%);
}

/* Back down under the finger, as the design has it. */
.sectortile:active { box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%); }

/*
 * Keyboard focus gets the border too, and the focus ring's navy after the
 * tile's own lift — a box-shadow here replaces the ring's rather than adding
 * to it, and the amber alone on white is 1.78:1 where 1.4.11 asks for 3.
 */
.sectortile:focus-visible {
	border-color: #86bbe5;
	box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%), 0 0 0 4px var(--wp--preset--color--primary);
}

/*
 * The face, in the design's pale disc. 64px, centred, and the glyph at 32 on
 * its own 0 -960 960 960 grid.
 */
.sectortile__icon {
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: rgb(134 187 229 / 18%);
	color: var(--wp--preset--color--primary);
}

.sectortile__icon svg { display: block; width: 32px; height: 32px; }

/*
 * A field's own page: the way back, then the face beside the title.
 *
 * The design opens a field on white rather than on the band every other inner
 * page opens on — one link back to the fields instead of the whole chain, and
 * the same disc the tile carried, in the pale blue it carried it in.
 *
 * On a narrow screen the disc moves above the title: 64px beside «ΤΡΟΦΙΜΑ –
 * ΑΓΡΟΤΙΚΟΣ ΤΟΜΕΑΣ» left the words four to a line.
 */
.pageback {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-block-end: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.pageback:hover { text-decoration: underline; text-underline-offset: 3px; }
.pageback__arrow { font-size: 18px; line-height: 1; }

.pagetitle__heading {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-block-end: 16px;
}

.pagetitle__heading .pagetitle { margin: 0; }

@media (width <= 600px) {
	.pagetitle__heading { flex-direction: column; align-items: flex-start; gap: 14px; }
	.pagetitle__heading .sectortile__icon { width: 52px; height: 52px; }
	.pagetitle__heading .sectortile__icon svg { width: 26px; height: 26px; }
}

/*
 * margin-block-start: auto so the titles line up along the bottom of the row
 * however many lines each one takes — the tiles are a grid of equal height and
 * «ΤΡΟΦΙΜΑ – ΑΓΡΟΤΙΚΟΣ ΤΟΜΕΑΣ» takes two where «ΥΓΕΙΑ» takes one.
 */
.sectortile__title {
	margin-block-start: auto;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary);
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
	.sectortile { transition: none; }
}

/* ---------------------------------------------------------------------------
 * The contact page: where ESYD is on one side, how to write to it on the other,
 * and the directions to the building underneath.
 * ------------------------------------------------------------------------ */

/* The directions below need air between them and the card above. */
.contactgrid { display: grid; gap: 48px; align-items: start; margin-bottom: 52px; }

@media (min-width: 900px) {
	.contactgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
}

.contactgrid__col { min-width: 0; }
.contactgrid__heading { margin: 32px 0 16px; font-size: 24px; line-height: 1.3; color: var(--wp--preset--color--primary); }

.contactcard { overflow: hidden; background-color: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; }
/*
 * The map band across the top of the card. Full bleed, where the photograph
 * it replaced was inset on a tinted ground — a map is the card's own content
 * and reads better edge to edge, which is also how the design draws it.
 */
.contactcard__map {
	border-block-end: 1px solid var(--wp--preset--color--border);
	line-height: 0;
	background-color: var(--wp--preset--color--surface);
}

.contactcard__map iframe { display: block; width: 100%; height: 280px; border: 0; }

@media (width <= 600px) {
	.contactcard__map iframe { height: 220px; }
}
.contactcard__line--where { flex-direction: column; align-items: flex-start; gap: 2px; }

.contactcard__body { padding: 24px; }
.contactcard__title { margin: 0 0 12px; font-size: 20px; line-height: 1.3; color: var(--wp--preset--color--primary); }
.contactcard__address { display: flex; flex-direction: column; gap: 6px; font-style: normal; font-size: 16px; line-height: 1.6; }
.contactcard__line { display: flex; flex-wrap: wrap; gap: 4px 8px; }

/* The label before a number is smaller than the number: the number is the answer. */
.contactcard__key { flex-shrink: 0; min-width: 76px; font-size: 13.5px; color: var(--wp--preset--color--muted); align-self: center; }
.contactcard__social { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; font-size: 15px; }

.deptlist { margin: 0; padding: 0; list-style: none; background-color: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; }
.deptlist li { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: center; padding: 16px 20px; }
.deptlist li + li { border-top: 1px solid var(--wp--preset--color--border); }
.deptlist__name { font-size: 16px; font-weight: 600; color: var(--wp--preset--color--text); }
.deptlist__mail { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }

.cform { padding: 32px; background-color: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; }
.cform__title { margin: 0 0 8px; font-size: 24px; line-height: 1.3; color: var(--wp--preset--color--primary); }
.cform__note { margin: 0 0 24px; font-size: 14px; color: var(--wp--preset--color--muted); }
.cform__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; }
.cform__field label { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--text); }

.cform__field input,
.cform__field textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background-color: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.cform__field input { min-height: 48px; padding-block: 0; }
.cform__field textarea { resize: vertical; }

/*
 * A field with a problem is marked three ways, because colour alone fails
 * 1.4.1: the border, the message under it, and aria-invalid for anything that
 * is listening.
 */
.cform__field--invalid input,
.cform__field--invalid textarea { border-color: var(--wp--preset--color--error, #c02626); border-width: 2px; }
.cform__error { font-size: 14px; font-weight: 600; color: #a71d1d; }

.cform__errors {
	margin: 0 0 24px;
	padding: 16px 20px;
	background-color: #fbeaea;
	border: 1px solid #c02626;
	border-inline-start-width: 4px;
	border-radius: 4px;
}

.cform__errortitle { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #a71d1d; }
.cform__errorlist { margin: 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.6; }

.cform__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0 0 24px; font-size: 15px; }

/*
 * Drawn rather than left to the browser.
 *
 * It was the only control on the site still wearing the operating system's
 * own checkbox — the system blue next to the navy the register's filters are
 * drawn in, on the one form a visitor is asked to tick something before
 * sending. The filters build theirs out of a span beside a hidden input; this
 * one has no such span, so it is drawn on the input itself, which keeps the
 * thing you click and the thing that takes focus as one element.
 *
 * 24px, which is what 2.5.8 asks of a target that is not inline in a sentence,
 * and larger than the filters' 18px for the same reason.
 */
.cform__consent input {
	appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 3px;
	background-color: #fff;
	cursor: pointer;
}

.cform__consent input:checked {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
}

/* The same tick as the filters: two borders of a box turned on its corner. */
.cform__consent input:checked::after {
	position: absolute;
	inset-inline-start: 50%;
	top: 50%;
	width: 7px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -58%) rotate(45deg);
	content: "";
}

/*
 * Both rules are one class and one type, so they tie on specificity and the
 * later one — the box above — would win. Named with the wrapper as well, so
 * the complaint is the one that shows.
 */
.cform__field--invalid.cform__consent input { border-color: var(--wp--preset--color--error, #c02626); border-width: 2px; }

.cform__consent .cform__error { grid-column: 2; }
.cform__actions { margin: 0; }

/* The honeypot: off the screen rather than display:none, which some bots skip. */
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform--sent { border-inline-start: 4px solid var(--wp--preset--color--amber); }
.cform--sent .cform__note { margin: 0; }

.cf-turnstile { margin: 0 0 20px; }

/*
 * A section that opens. The marker is drawn rather than the browser's, so it is
 * the same everywhere and turns rather than swaps glyph.
 */
/*
 * Full width, because the directions are not prose to read through; they are a
 * list to pick from. overflow:hidden so the head's hover stays inside the
 * rounded corners it is drawn in.
 */
.dropdown { overflow: hidden; background-color: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; }
.dropdown + .dropdown { margin-top: 10px; }

.dropdown__summary {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 13px 18px;
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle unless told otherwise. */
.dropdown__summary::-webkit-details-marker { display: none; }
.dropdown__summary:hover { background-color: var(--wp--preset--color--surface); }

/*
 * Scoped to .prose, which sets a heading's own margins and would otherwise win
 * on specificity and make every summary twice the height it needs.
 */
.prose .dropdown__title {
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
	border: 0;
}

.dropdown__mark {
	position: relative;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid var(--wp--preset--color--primary);
	border-block-end: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 150ms ease;
}

.dropdown[open] .dropdown__mark { transform: rotate(-135deg) translate(-4px, -4px); }
/* An open section says so with its head, not only with its arrow. */
.dropdown[open] > .dropdown__summary { background-color: var(--wp--preset--color--surface); border-block-end: 1px solid var(--wp--preset--color--border); }
.dropdown__body { padding: 14px 18px 16px; }
.prose .dropdown__body p { max-width: none; margin-bottom: 10px; }
.dropdown__body > :first-child { margin-top: 0; }
.dropdown__body > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.dropdown__mark { transition: none; }
}

/* A closed section still prints: paper has no disclosure triangle. */
@media print {
	.dropdown__body { display: block !important; }
	.dropdown__mark { display: none; }
}

/* ---------------------------------------------------------------------------
 * The filter panel as a sheet.
 *
 * Beside the list there is room for it. Below 900px there is not: the panel is
 * nine hundred pixels tall and the first result starts under all of it. There
 * it slides in from the side over the results, and the button that opens it
 * takes its place at the top of the list.
 * ------------------------------------------------------------------------ */

.filterstoggle {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	background-color: #fff;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.filterstoggle[hidden] { display: none; }
.filterstoggle:hover { background-color: var(--wp--preset--color--surface); }

/* How many are on, so the button says what it is hiding. */
.filterstoggle__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 13px;
}

.filters__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--wp--preset--color--primary);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.filters__close[hidden] { display: none; }
.filters__close:hover { background-color: rgb(33 50 100 / 8%); }

.filters__backdrop {
	position: fixed;
	inset: 0;
	/* Under the sheet, over everything else — the accessibility button too. */
	z-index: 10000;
	background-color: rgb(17 26 53 / 55%);
}

.filters__backdrop[hidden] { display: none; }

@media (max-width: 899px) {
	/* Off the side until asked for, and never sticky while it is a sheet. */
	.filters {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		/*
		 * Over everything, the accessibility button included. As a sheet this
		 * is a modal: at 70 the button sat on top of it, and the backdrop
		 * behind both, so a control the sheet had covered was still reachable
		 * and still drawn.
		 */
		z-index: 10001;


		width: min(360px, 88vw);
		max-width: none;
		border-radius: 0;
		border-inline-start: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-102%);
		transition: transform 180ms ease;
	}

	.filters.is-sheet-open { transform: none; box-shadow: 0 0 40px rgb(17 26 53 / 30%); }

	/* The head stays put while the groups under it scroll. */
	.filters__head { position: sticky; top: 0; z-index: 1; }

	/* The page behind does not scroll while the sheet is over it. */
	body.has-sheet { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.filters { transition: none; }
}

/*
 * The result rows give most of their side padding back on a phone.
 *
 * The page already gives them a 24px gutter, and another 20px inside it put a
 * title 44px from the edge of a 390px screen with 302px left to say a name in
 * — "A CERT ΕΥΡΩΠΑΪΚΟΣ ΟΡΓΑΝΙΣΜΟΣ ΠΙΣΤΟΠΟΙΗΣΗΣ ΑΝΩΝΥΜΗ ΕΤΑΙΡΙΑ" over three
 * lines.
 *
 * Eight pixels rather than none: an expanded row shows its details on a tinted
 * panel, and text against the edge of a tint reads as a mistake. Eight keeps
 * that panel looking like a panel and still returns twenty-four pixels of the
 * forty to the text.
 */
@media (max-width: 619px) {
	.entry__row,
	.entry__detail,
	.document,
	.newsrow__link { padding-inline: 8px; }
}

/* ---------------------------------------------------------------------------
 * The corporate video's own controls, as the design draws them.
 * ------------------------------------------------------------------------ */

/*
 * As wide as there is room for, but never taller than the window.
 *
 * It was width:100% with a 16/9 ratio and nothing else, so on a wide screen the
 * height followed the width off the bottom of the page. Measured at realistic
 * window heights — the screen less the browser's own chrome — it overran by
 * 98px on a 1920x1080 monitor, 59px at 1536x864 and 50px at 1366x768, and
 * cleared a 1440x900 MacBook by 24px, which is no air at all. A film nobody can
 * see all of at once is a film with a scrollbar through the middle of it.
 *
 * The cap is written as a max-width rather than a max-height on purpose: with a
 * fixed ratio, limiting the height alone leaves the width where it was and the
 * video is cropped to fit it. Turning the height limit into a width limit
 * through the same ratio keeps the frame whole and lets the width come down
 * with it, which is the point.
 *
 * The 160px is the header plus air: the header is sticky at the top and 105px
 * tall, so the window a reader actually has below it is that much shorter, and
 * the first cut of this left the top of the frame under it.
 *
 * dvh with vh beneath it, because on a phone the address bar comes and goes and
 * vh does not know. On a phone neither matters: the column is narrower than the
 * cap, so the width wins and nothing here applies.
 */
.corporate__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: calc((100vh - 160px) * 16 / 9);
	max-width: calc((100dvh - 160px) * 16 / 9);
	margin-inline: auto;
}
.corporate__frame .corporate__video { width: 100%; height: 100%; cursor: pointer; }

.videobar {
	position: absolute;
	inset-inline: 16px;
	inset-block-end: 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	border-radius: 10px;
	background-color: rgb(17 26 53 / 72%);
	/*
	 * Out of the way until it is wanted — and *in* the way the moment anything
	 * in it takes focus, which a hover-only bar never is for a keyboard.
	 */
	opacity: 0;
	transition: opacity 150ms ease;
}

.videobar[hidden] { display: none; }
.corporate__frame:hover .videobar,
.corporate__frame:focus-within .videobar,
.corporate__frame:not(.is-playing) .videobar { opacity: 1; }

/*
 * No hover, no floating bar.
 *
 * A bar that appears on hover appears never on a touch screen: once the film
 * is playing it sat at opacity 0 with no way to bring it back, so there was no
 * way to pause it or turn the sound on. focus-within rescues a keyboard and
 * nothing else.
 *
 * So on anything that cannot hover it comes out from over the picture and sits
 * under it, permanently. (hover: none) rather than a width, because the width
 * is not what is wrong: a touch laptop at 1400px has the same problem and gets
 * the same answer.
 *
 * The frame gives up its ratio to the video so that the bar can add its own
 * height underneath instead of being squeezed inside a fixed box. The height
 * cap above still applies to the frame, and on a touch screen the width is
 * what limits it in practice anyway.
 */
@media (hover: none) {
	.corporate__frame { aspect-ratio: auto; }
	.corporate__frame .corporate__video { height: auto; aspect-ratio: 16 / 9; }

	.videobar {
		position: static;
		opacity: 1;
		margin-block-start: 10px;
	}
}

.videobar__button {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: rgb(255 255 255 / 14%);
	color: #fff;
	cursor: pointer;
}

.videobar__button:hover { background-color: rgb(255 255 255 / 28%); }

/* One icon per state, and only ever one of them showing. */
.videobar__icon { display: none; }
.corporate__frame:not(.is-playing) .videobar__icon--play,
.corporate__frame.is-playing .videobar__icon--pause,
.corporate__frame.is-muted .videobar__icon--muted,
.corporate__frame:not(.is-muted) .videobar__icon--sound { display: block; }

.videobar__volume { flex: 0 1 140px; accent-color: #f7b817; cursor: pointer; }

@media (max-width: 619px) {
	.videobar { inset-inline: 10px; inset-block-end: 10px; gap: 8px; padding: 8px 10px; }

	/*
	 * min-width:0, because a range input will not shrink below the width the
	 * browser gives it by default — about 129px — and with three buttons beside
	 * it that pushed the bar five pixels wider than a 320px screen.
	 */
	.videobar__volume { flex: 1 1 40px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.videobar { transition: none; }
}

/* The searches people make most, counted rather than chosen. */
.searchcard__chips { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 16px 0 0; }
.searchcard__chipslabel { font-size: 13px; color: var(--wp--preset--color--muted); }

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 12px;
	border: 0;
	border-radius: 4px;
	background-color: #eaf1fa;
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
}

.chip:hover { background-color: var(--wp--preset--color--primary); color: #fff; }

/* The full-screen button, and the frame once it is. */
.videobar__button--last { margin-inline-start: auto; }
.videobar__button[hidden] { display: none; }
.corporate__frame:not(.is-full) .videobar__icon--exit,
.corporate__frame.is-full .videobar__icon--enter { display: none; }
.corporate__frame:not(.is-full) .videobar__icon--enter,
.corporate__frame.is-full .videobar__icon--exit { display: block; }

.corporate__frame:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; background-color: #000; }
.corporate__frame:fullscreen .corporate__video { object-fit: contain; }

.intranet__section {
	margin-bottom: 8px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

.intranet__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 16px;
	font-weight: 700;
	cursor: pointer;
}

.intranet__head::-webkit-details-marker { display: none; }

/*
 * The same answer to the pointer as a row in the attached-documents panel: a
 * soft ground and nothing else. The border was changing colour here too, which
 * made a heading behave unlike every other thing on the site you can press.
 * Focus is left to the global rule, which already covers summary.
 */
/*
 * The corners are the heading’s own rather than clipped by the box. Clipping
 * would have been shorter — overflow: hidden on the section — but the focus
 * ring is drawn outside the heading, an outline at 1px offset and a shadow at
 * 4px, and an ancestor that clips its children clips that too. A square corner
 * on hover is untidy; a focus ring nobody can see is a keyboard nobody can use.
 *
 * One pixel less than the box, which is what the box’s border leaves inside it.
 */
.intranet__head { border-radius: 3px; }
.intranet__section[open] .intranet__head { border-radius: 3px 3px 0 0; }

.intranet__head:hover,
.intranet__head:focus-visible { background-color: var(--wp--preset--color--surface); }

/* A caret of our own, so its direction is ours to turn. */
.intranet__head::before {
	flex-shrink: 0;
	align-self: center;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wp--preset--color--steel);
	border-bottom: 2px solid var(--wp--preset--color--steel);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
	content: "";
}

.intranet__section[open] .intranet__head::before { transform: rotate(45deg); }

.intranet__title { flex: 1; }

.intranet__count {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.intranet__files {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 2px 24px;
	margin: 0;
	padding: 0 16px 16px;
	list-style: none;
}

/* The eleven the old page leaves under no heading keep that, and a rule. */
.intranet__loose {
	margin-bottom: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.intranet__loose .intranet__files { padding-inline: 0; }

/* Named in the list but not on the server: said, not hidden. */
.filelink--gone { color: var(--wp--preset--color--muted); }

/*
 * Searching the library.
 *
 * Drawn only once the script has said it can work — the form carries `hidden`
 * in the markup and the script takes it off. A search box that does nothing is
 * worse than no search box.
 */
.intranet__find { margin-bottom: 18px; }
.intranet__findlabel { display: block; margin-bottom: 6px; font-weight: 600; }
.intranet__findrow { position: relative; }
.intranet__findicon { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); pointer-events: none; }

.intranet__q {
	width: 100%;
	padding: 12px 14px 12px 40px;
	font: inherit;
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

.intranet__q:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 1px; }
.intranet__found { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; color: var(--wp--preset--color--muted); }
.intranet__nothing { padding: 18px 0; color: var(--wp--preset--color--muted); }
.intranet__files li[hidden], .intranet [data-intranet-section][hidden] { display: none; }

/*
 * Signing out.
 *
 * Staff have no toolbar — they are kept out of the administration, so the bar
 * that usually carries the way out is not there. Without this there was no way
 * to leave except clearing cookies.
 */
.intranet__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.intranet__out { font-weight: 600; color: var(--wp--preset--color--primary); }
.intranet__out:hover { text-decoration: underline; }
.filelink--gone .filelink__type { background: var(--wp--preset--color--muted); }
.filelink__note { font-size: 13px; font-style: italic; }

/* A document read on its own page, in the browser's own viewer. */
.pdfread { margin-block: 24px 8px; }

/*
 * The frame takes the whole reading column and a share of the window's height.
 * Shaping it like the A4 inside it was the first attempt and the wrong one:
 * an aspect-ratio under a max-height makes the browser give back width to keep
 * the ratio, so the reader came out 522px wide in a 1232px column. The height
 * is capped so that on a tall screen the reader is not scrolling the page in
 * order to scroll the document.
 */
.pdfread__frame {
	height: min(82vh, 1000px);
	min-height: 420px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
}

.pdfread__object { display: block; width: 100%; height: 100%; border: 0; }

/* Shown in place of the viewer wherever the browser declines to draw one. */
.pdfread__fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	padding: 24px;
	text-align: center;
}

.pdfread__sorry { margin: 0; color: var(--wp--preset--color--muted); }

.pdfread__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 16px 0; }

/*
 * On a phone the frame would be taller than the screen and the built-in viewer
 * is often refused anyway, so the document is offered rather than embedded.
 */
@media (max-width: 600px) {
	.pdfread__frame { height: 68vh; min-height: 0; }
}

/*
 * The word for each column, above the rows. It borrows the row's own flex
 * sizes through the same class names, so a label cannot drift away from the
 * column it names.
 */
/*
 * The container the column labels measure themselves against. Lost in a
 * sweep of the old filter styles, and with it the labels: the query below
 * can never match without it, so the head stayed at display:none.
 */
.entries { container-type: inline-size; }

.entries__head {
	display: flex;
	flex-wrap: wrap;
	/* A label of two lines sits level with one of a single line. */
	align-items: center;
	gap: 10px 16px;
	padding: 12px 20px;
	/*
	 * A third of the pale blue: darker than both the banded rows (#f5f8fc) and
	 * the colour one takes under the pointer (#eaf1fa), so the labels are not
	 * read as one more entry — and lighter than the navy, which turned the
	 * strip into a second header. It was #f3f4f8, the same colour as the
	 * bands to the eye.
	 */
	border-bottom: 0;
	background-color: rgb(134 187 229 / 35%);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
/*
 * The navy rule that separates the count from the list.
 *
 * It was drawn under the count bar, which put it above the band of labels.
 * It goes under the band instead — and where the band is not shown, under
 * nothing, so it falls to the first entry rather than disappearing. Both
 * halves are inside the one container query, so there is no second
 * breakpoint that has to agree with this one.
 */
.entries__head { display: none; }
.entries > .entry:first-of-type { border-top: 2px solid var(--wp--preset--color--primary); }

@container (min-width: 800px) {
	.entries__head { display: flex; border-bottom: 2px solid var(--wp--preset--color--primary); }
	.entries > .entry:first-of-type { border-top: 0; }
}

/* Holds the chevron's column open without drawing one. */
.entries__gap { flex: 0 0 44px; }

@media (max-width: 619px) {
	.entries__head { padding-inline: 8px; }
}

.registers__tab {
	padding: 9px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
}

.registers__tab:hover {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
}

.registers__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.registers__tab[aria-pressed='true'] {
	color: #fff;
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.registers__tab[aria-pressed='true']:hover {
	background-color: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--primary-deep);
}

@media (max-width: 480px) {
	.registers__tab { padding: 8px 13px; font-size: 14px; }
}

/* ---------------------------------------------------------------------------
 * Who accreditation is worth something to.
 *
 * The three cards the home page uses, written in the editor as groups carrying
 * those classes, so ESYD can change the words, reorder them or add a fourth
 * without anybody touching a template. Each one leads to its own section
 * further down the same page.
 * ------------------------------------------------------------------------ */

/* The home page's grid has a band's worth of air around it; here it is a block
 * inside the reading column and takes the spacing of one. */
.prose .entrycards__grid { padding-block: 0; margin-block: 32px 40px; }

/* Three narrow cards in a reading column would be slivers, so they go wide
 * later than on the home page. */
@media (max-width: 1099px) {
	.prose .entrycards__grid { grid-template-columns: 1fr; }
}

/*
 * The grid is the gap. WordPress's own flow layout adds a block gap between
 * siblings, which here fell on the second and third card and started them a
 * row's gap below the first.
 */
.prose .entrycards__grid > * { margin-block: 0; }

.prose .entrycard { min-height: 0; }
.prose .entrycard > * { margin: 0; }

/*
 * The link goes to the floor of the card, so that three cards whose text runs
 * to different lengths still finish on one line.
 */
.prose .entrycard .entrycard__links { margin-block-start: auto; padding-block-start: 12px; }

/* The mark each card carries, matching the icons the rest of the site uses. */
.prose .entrycard::before {
	width: 34px;
	height: 34px;
	margin-block-end: 2px;
	content: '';
	background-repeat: no-repeat;
	background-position: center;
	background-size: 34px 34px;
}

.prose .entrycard--cab::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213264' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6L4.6 18.4A1.8 1.8 0 0 0 6.2 21h11.6a1.8 1.8 0 0 0 1.6-2.6L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E");
}

.prose .entrycard--business::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213264' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
}

.prose .entrycard--gov::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213264' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8h18z'/%3E%3Cpath d='M6 11v7M10 11v7M14 11v7M18 11v7'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}

/* A quotation from the law it cites, with the source under it. */
.prose blockquote { margin-block: 24px; padding: 4px 0 4px 20px; font-size: 17px; }
.prose blockquote p { margin: 0 0 8px; }
.prose blockquote cite { display: block; font-size: 14px; font-style: normal; color: var(--wp--preset--color--muted); }
.prose blockquote p:last-child { margin-bottom: 0; }

/*
 * A table too wide for the column scrolls inside its own frame. Without this
 * the widest of the imported notices moved the whole page sideways on a phone,
 * which is the two-directional scrolling 1.4.10 exists to prevent.
 */
.tablescroll { max-width: 100%; overflow-x: auto; }

/* The frame takes focus, so the outline has to be worth seeing. */
.tablescroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/*
 * Documents, beside search in the header. The same height as the search
 * button next to it — the design sets both at 48 and ours was inheriting the
 * 44 every other button has, which left the two sitting unevenly.
 */
.site-header__docs { min-height: 48px; }

/* The drawing is for the narrow bar below; on a wide one the word is enough. */
.site-header__docsicon { display: none; }

/*
 * Below this the bar cannot hold the logo, three tools and the menu button on
 * one line at their full size, and it was breaking into two — the logo alone
 * on the first and everything else beneath it. Rather than wrap, the pieces
 * give up what they can spare: the logo a little height, and Έγγραφα its
 * word, which stays in the markup for anything that reads rather than looks.
 */
/*
 * Below this the bar needs 404px for what is already in it and has 390. The
 * fifth control goes into the drawer rather than away: a phone is where
 * somebody is most likely to be signing in from.
 */
@media (width <= 355px) {
	.esyd-nav__signin {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 8px 0 0;
		padding: 14px 16px;
		border-top: 1px solid var(--wp--preset--color--border);
		color: #1f6fb8;
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
	}
}

@media (width <= 520px) {
	.site-header__docs {
		min-width: 44px;
		padding-inline: 0;
		flex: 0 0 44px;
		justify-content: center;
	}

	.site-header__docsicon { display: block; }

	.site-header__docsword {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* Registers of names ------------------------------------------------------- */

/*
 * The register of assessors, set out as the redesign sets it out: each group
 * with its own search and its own index, then a heading per letter and the
 * names four across in alternating bands.
 *
 * Every number here is read off the export rather than chosen.
 */

.namesec { margin-block-end: 64px; scroll-margin-top: 128px; }

.namesec__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0 0 16px;
}

/*
 * Prose headings in this theme carry a rule under them. This one does not:
 * the register's own rule is the one over the index, which runs the full
 * width of the section rather than stopping under the words.
 */
.namesec .namesec__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	color: var(--wp--preset--color--primary);
}

.namesec__count {
	padding: 4px 12px;
	border-radius: 999px;
	background-color: rgb(134 187 229 / 18%);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* The search sits at the right of the heading's line, and shrinks before it wraps. */
.namesearch {
	position: relative;
	flex: 0 1 320px;
	min-width: 220px;
	margin-inline-start: auto;
}

.namesearch__icon {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.namesearch__input {
	width: 100%;
	height: 44px;
	box-sizing: border-box;
	padding: 0 16px 0 42px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background-color: #fff;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--text);
}

.namesearch__input:focus-visible { border-color: var(--wp--preset--color--primary); }

/* The index ---------------------------------------------------------------- */

.namealpha {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	margin: 0 0 32px;
	padding: 16px 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.namealpha__rule {
	align-self: stretch;
	flex-shrink: 0;
	width: 1px;
	min-height: 44px;
	background-color: var(--wp--preset--color--border);
}

/*
 * As many letters to a row as fit, each in a circle of the same 44px the
 * rest of this site uses for anything a finger has to find.
 */
.namealpha__letters {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	justify-items: center;
	gap: 8px;
}

.namealpha__all,
.namealpha__letter {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border);
	background-color: #fff;
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(33 50 100 / 10%), 0 1px 3px 1px rgb(33 50 100 / 6%);
	transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}

.namealpha__all {
	flex-shrink: 0;
	padding: 0 20px;
	border-radius: 999px;
}

.namealpha__letter {
	width: 44px;
	padding: 0;
	border-radius: 50%;
}

.namealpha__all:hover,
.namealpha__letter:hover { background-color: var(--wp--preset--color--surface-alt); }

.namealpha__all[aria-pressed="true"],
.namealpha__letter[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: none;
}

/* A letter with nothing under it after a search is not worth offering. */
.namealpha__letter[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.namealpha__all,
	.namealpha__letter { transition: none; }
}

/* The names ---------------------------------------------------------------- */

.namegroups { display: flex; flex-direction: column; gap: 32px; }
.namegroup { display: flex; flex-direction: column; gap: 8px; }
.namegroup[hidden] { display: none; }

.namegroup__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block-end: 10px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.namegroup__letter {
	font-size: 24px;
	line-height: 1;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}

.namegroup__count { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--muted); }

/*
 * Written with two classes on purpose. These lists are inside .prose, whose
 * own `ul` and `li` rules are a class plus a type and so outrank a single
 * class: left at one, the grid kept prose's indent and every name kept its
 * margin, which put the rows 50px apart where the export has them 44.
 */
.namegroups .namegrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.namegrid .namegrid__item {
	margin: 0;
	padding: 10px 14px;
}

.namegrid__item {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.35;
	color: var(--wp--preset--color--text);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/*
 * The band is a class and not :nth-child, because a search hides names and
 * nth-child would go on counting the hidden ones. The script re-marks them
 * whenever the list changes; this is the state the page arrives in.
 */
.namegrid__item.is-band { background-color: #f5f8fc; }
.namegrid__item[hidden] { display: none; }

@media (width <= 1023px) {
	.namegroups .namegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 600px) {
	.namegroups .namegrid { grid-template-columns: 1fr; }
	.namesearch { flex-basis: 100%; margin-inline-start: 0; }
	.namesec .namesec__title { font-size: 20px; }

	/*
	 * On a phone the index is one wrapping row. Όλα joins the letters instead
	 * of standing in a column of its own beside them — which left it alone on
	 * the left with the alphabet squeezed into what was left — and the
	 * letters come down to 36px, still half again the 24px floor 2.5.8 sets.
	 */
	.namealpha { flex-wrap: wrap; gap: 8px; }
	.namealpha__rule { display: none; }
	.namealpha__letters { display: contents; }

	/*
	 * The theme holds every control at 44px for 2.5.5, which is the AAA
	 * figure; these come down to 36, still half again the 24px that 2.5.8
	 * asks for at AA. The min-* have to be named: they are their own
	 * properties and a smaller height does not undo them.
	 */
	.namealpha__all,
	.namealpha__letter {
		height: 36px;
		min-height: 36px;
		min-width: 36px;
		font-size: 14px;
	}

	.namealpha__all { padding: 0 14px; }
	.namealpha__letter { width: 36px; }
}

.namesec__none { margin: 0 0 26px; font-size: 15px; color: var(--wp--preset--color--muted); }
.namesec__none[hidden] { display: none; }

/* The figures in the band point into the page. */
.figures__link,
.figures__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: 2px;
	color: inherit;
	text-decoration: none;
}

.figures__link:hover { opacity: 0.85; }

.figures__link:hover .figures__label { color: #fff; }

/* The agreements timeline ---------------------------------------------------
 *
 * Prose on one side, the dates at a glance on the other, as the export sets
 * them out. Every figure below is read off it.
 * ------------------------------------------------------------------------ */

.prose .withtimeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 48px 64px;
	align-items: start;
	max-width: none;
	margin-block: 0 32px;
}

.withtimeline__text { max-width: 680px; }
.prose .withtimeline__text > :first-child { margin-block-start: 0; }

/*
 * The hairlines between rows are the gap: a grey panel showing through a
 * single pixel between white rows, which keeps them to the card's rounded
 * corners without a border on the first and last.
 */
.timeline {
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow: hidden;
	background-color: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.timeline__row {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 20px;
	align-items: baseline;
	padding: 20px 24px;
	background-color: #fff;
}

.timeline__year { font-size: 20px; font-weight: 800; color: var(--wp--preset--color--primary); }
.timeline__what { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--text); }

@media (width <= 520px) {
	.timeline__row { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px; }
}

/*
 * The three marks of membership, in the row of cards the export draws for
 * them. They carry no caption — the live site shows them without one — so
 * the organisation's name is in the alt, where it reaches a reader who
 * cannot see the mark.
 */
.prose .esyd-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 24px;
	max-width: none;
	margin-block: 32px;
}

.prose .esyd-logos .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 32px 24px;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.prose .esyd-logos img {
	height: 64px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* The register's filters, in the navy the redesign gives them ---------------
 *
 * The panel was a white card with a hairline and a pale blue head. The export
 * sets it in the brand navy, full height beside the list, with the groups
 * divided by a rule in white at 14% and the group names in the pale blue.
 *
 * Only the look: the options are links here, not checkboxes, because the
 * filtering happens on the server and a reader without JavaScript still has
 * to be able to use it. The box beside each one is drawn, and it keeps its
 * tick.
 * ------------------------------------------------------------------------ */

.filters {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 0;
	color: #fff;
	/*
	 * Flush against the band, as the export has it: the navy starts the pixel
	 * the band ends, which is why the negative margin — it takes back the
	 * row's own top padding, which the list across from it keeps. The space
	 * before the head is inside the panel instead.
	 */
	margin-block-start: -48px;
	padding-block-start: 24px;
}

/*
 * The clear-all in the head. It is the accent ink on white elsewhere, which
 * on this navy is all but unreadable; on the panel it is white, held back a
 * little so it does not compete with the heading beside it.
 */
.filters .filters__clear { color: rgb(255 255 255 / 70%); }
.filters .filters__clear:hover,
.filters .filters__clear:focus-visible { color: #fff; }

/*
 * The panel's own navy and not transparent. In the sheet this head is sticky,
 * so the options scrolled behind it and showed through the words — on a wide
 * screen it is navy on navy and nothing changes.
 */
.filters__head {
	background-color: var(--wp--preset--color--primary);
	border-bottom-color: rgb(255 255 255 / 14%);
}

.filters__title { color: #fff; }

/*
 * The mark itself on the line, not the button's box.
 *
 * The box already ended where the counts end, but the × is centred in a 40px
 * target, so what the eye sees sat twenty pixels inside the line — which is
 * why squaring the boxes changed nothing visible. The content goes flush
 * right and the box keeps its width, so the target is untouched.
 */
.filters .filters__close {
	justify-content: flex-end;
	color: #fff;
}

.filtergroup { padding: 16px 20px; border-bottom-color: rgb(255 255 255 / 14%); }

/* The pale blue, as the export names its groups. */
.filtergroup__label { color: #86bbe5; }

.filtergroup__clear { color: rgb(255 255 255 / 70%); }
.filtergroup__clear:hover,
.filtergroup__clear:focus-visible { color: #fff; }

/*
 * Everything in the panel ends on the same line: the × in the head, each
 * group's own clear, and every count beside an option.
 *
 * The option's 4px of side padding and the 10px a scrolling group leaves for
 * its scrollbar both pushed the counts in from that line — by 4px in a short
 * group and by 14 in a long one. The padding stays, so the tint under the
 * pointer still reaches past the words, and a negative margin of the same
 * size puts the text back on the edge.
 */
.filters .filteropt { color: #fff; margin-inline: -4px; }
.filters .filtergroup__list--scroll { margin-inline-end: -10px; }
.filters .filteropt:hover { background-color: rgb(255 255 255 / 10%); }
.filters .filteropt__count { color: #c9d6ea; }
.filters .filteropt__note { color: #c9d6ea; }

/*
 * The box is the pale blue when ticked rather than the navy it used to be:
 * navy on navy is a box that cannot be seen at all.
 */
.filters .filteropt__box { border-color: rgb(255 255 255 / 55%); }

.filters .filteropt.is-on .filteropt__box {
	border-color: #86bbe5;
	background-color: #86bbe5;
}

.filters .filteropt.is-on .filteropt__box::after { border-color: var(--wp--preset--color--primary); }

/* A value with nothing behind it, still readable on the navy. */
.filters .filteropt.is-off { color: #c9d6ea; opacity: 0.75; }
.filters .filteropt.is-off:hover { background-color: transparent; }

/*
 * Every other row of the register carries the export's tint. On the summary
 * and not on the <details>, so an entry the reader has opened shows its own
 * rows against white rather than against a band.
 */
.entry:nth-of-type(even) > .entry__row { background-color: #f5f8fc; }

/* Hover still has to read on both. */
.entry > .entry__row:hover,
.entry:nth-of-type(even) > .entry__row:hover { background-color: #eaf1fa; }

/*
 * The sheet's own top, which has to come after the panel's base rule rather
 * than in the breakpoint above it: that block is earlier in this file, so the
 * negative margin written later won for it. On a wide screen the margin pulls
 * the panel up to meet the band; as a sheet it pulled the heading off the top
 * of the screen, where it was cut in half.
 */
@media (width <= 899px) {
	.filters { margin-block-start: 0; padding-block-start: 0; }

	/*
	 * The space goes in the head, not above it. The sheet is the scrolling
	 * box, so padding at its top is inside the scroller: the sticky head
	 * came to rest 16px down and the options passed through the strip above
	 * it. With the head carrying its own space it holds at 0 and nothing
	 * passes over it.
	 */
	.filters__head { padding-block-start: 32px; }
}