/*
Theme Name: CERTIFICA
Theme URI: https://certifica.org.uk
Author: CERTIFICA rebuild
Description: CERTIFICA custom design system — an institutional certification-body identity: a register-led visual language, official brand blue/gold/gray, Manrope typography with a monospace register face for numbers, and a component library shared by every public template. Owned by CERTIFICA and independent of WordPress core and plugin updates.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.2
Version: 0.6.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: certifica
*/

/* ==========================================================================
   CERTIFICA brand font.
   Manrope, approved 2026-09-17 as the CERTIFICA typeface (owner decision; no
   licensed Lama Sans files are coming). Self-hosted variable font.
   Certificate numbers use a system monospace stack instead (`--font-mono`);
   no extra font files are added for it.
   ========================================================================== */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("./assets/fonts/manrope-var.woff2") format("woff2");
}

/* ==========================================================================
   1. TOKENS
   --------------------------------------------------------------------------
   The brand guide fixes three colours: blue #3039c8, gold #ffd300, gray
   #4c4c4c. Everything else is a tint, shade or neutral built around them.
   Section order in this file:

     1. tokens · 2. base · 3. layout · 4. components · 5. templates
     6. utilities · 7. motion

   Breakpoints (media queries use literal rem because a custom property is not
   allowed in a media query condition):
     30rem =  480px  very small phone · two-column lists collapse
     40rem =  640px  large phone
     48rem =  768px  tablet           · nav collapses, register rows compact
     56rem =  896px  small desktop    · contact split collapses
     64rem = 1024px  desktop          · primary nav is horizontal
   ========================================================================== */
:root {
	/* Official brand */
	--c-blue: #3039c8;
	--c-gold: #ffd300;
	--c-gray: #4c4c4c;

	/* Blue ramp — the structural colour of the register */
	--c-blue-900: #10143f;
	--c-blue-800: #1a1f6e;
	--c-blue-700: #232a94;
	--c-blue-600: #2b32b4;
	--c-blue-400: #6a71d8;
	--c-blue-200: #bfc3ef;
	--c-blue-100: #dfe1f9;
	--c-blue-050: #f0f1fd;

	/* Gold ramp — a precise accent, never a large field under white text */
	--c-gold-700: #8a6d00;
	--c-gold-600: #c9a600;
	--c-gold-200: #ffe873;
	--c-gold-050: #fff8d9;

	/* Neutral ramp */
	--c-ink: #14161f;
	--c-body: #3f434f;
	--c-muted: #5d6270;
	--c-surface: #ffffff;
	--c-surface-2: #f8f9fc;
	--c-paper: #f4f5f9;
	--c-line: #e2e4ee;
	--c-line-strong: #cfd3e2;
	--c-on-dark: #e8eaf6;
	--c-on-dark-muted: #b9bfdc;

	/* Status palette. Every pair is WCAG AA for text on its own ground, and
	   each status word is always rendered, so no result is carried by colour
	   alone. */
	--c-valid: #15663d;
	--c-valid-bg: #e7f4ed;
	--c-valid-line: #bfe0cd;
	--c-expired: #7a5a00;
	--c-expired-bg: #fbf1d6;
	--c-expired-line: #eadb9f;
	--c-suspended: #9a3412;
	--c-suspended-bg: #fdeade;
	--c-suspended-line: #f3cdb4;
	--c-withdrawn: #9c1c16;
	--c-withdrawn-bg: #fbe8e7;
	--c-withdrawn-line: #f0c3c0;
	--c-future: #164e8c;
	--c-future-bg: #e7effa;
	--c-future-line: #c2d6ee;
	--c-neutral-status: #4a4550;
	--c-neutral-status-bg: #efedf2;
	--c-neutral-status-line: #d8d5de;
	--c-unknown: #525866;
	--c-unknown-bg: #eceef3;
	--c-unknown-line: #d3d7e0;

	/* Legacy token names kept as aliases so nothing that reads them breaks */
	--c-warn: var(--c-expired);
	--c-warn-bg: var(--c-expired-bg);

	/* Semantic tokens — what a surface or a piece of text *is* */
	--surface: var(--c-surface);
	--surface-alt: var(--c-paper);
	--surface-2: var(--c-surface-2);
	--surface-tint: var(--c-blue-050);
	--surface-inverse: var(--c-blue-900);
	--text: var(--c-body);
	--text-strong: var(--c-ink);
	--text-muted: var(--c-muted);
	--text-inverse: #ffffff;
	--text-inverse-muted: var(--c-on-dark-muted);
	--border: var(--c-line);
	--border-strong: var(--c-line-strong);
	--border-inverse: rgba(255, 255, 255, 0.18);
	--accent: var(--c-blue);
	--accent-strong: var(--c-blue-700);
	--accent-quiet: var(--c-blue-050);
	--accent-ink: var(--c-blue-700);
	--accent-ink-on-dark: var(--c-gold-200);
	--highlight: var(--c-gold);
	--highlight-quiet: var(--c-gold-050);
	--highlight-ink: var(--c-gold-700);

	/* Type */
	--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
	--step--2: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
	--step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--step-0: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--step-1: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--step-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--step-3: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
	--step-4: clamp(1.75rem, 1.4rem + 1.7vw, 2.625rem);
	--step-5: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
	--lh-tight: 1.14;
	--lh-snug: 1.36;
	--lh-body: 1.65;
	--tracking-label: 0.08em;

	/* Space */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--section-y: clamp(2.5rem, 1.4rem + 3.6vw, 5rem);
	--gutter: clamp(1.125rem, 4vw, 2.5rem);

	/* Shape */
	--r-xs: 3px;
	--r-sm: 6px;
	--r: 10px;
	--r-lg: 14px;
	--r-pill: 999px;
	--container: 1200px;
	--container-narrow: 768px;
	--container-text: 68ch;

	/* Elevation */
	--shadow-xs: 0 1px 2px rgba(16, 20, 63, 0.05);
	--shadow-sm: 0 1px 2px rgba(16, 20, 63, 0.06), 0 10px 24px -20px rgba(16, 20, 63, 0.4);
	--shadow-md: 0 2px 4px rgba(16, 20, 63, 0.06), 0 18px 44px -26px rgba(16, 20, 63, 0.5);
	--shadow-lg: 0 4px 10px rgba(16, 20, 63, 0.08), 0 40px 80px -40px rgba(16, 20, 63, 0.55);
	--shadow: var(--shadow-sm);
	--shadow-blue: 0 18px 44px -26px rgba(48, 57, 200, 0.55);

	/* Focus ring */
	--focus-ring: 0 0 0 3px rgba(48, 57, 200, 0.3);
	--focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, 0.45);

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-1: 120ms;
	--dur-2: 220ms;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--surface-alt);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: var(--lh-body);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* Progressive cookie-bar offset: the script measures the bar and publishes it
   here, so the bar never covers the end of the page. */
html.certifica-cookie-open .certifica-site-footer {
	padding-bottom: calc(var(--certifica-cookie-height, 0px) + var(--sp-2));
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--text-strong);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 {
	font-size: var(--step-4);
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-2);
}

h4 {
	font-size: var(--step-1);
}

p,
ul,
ol,
dl,
figure,
table,
blockquote {
	margin: 0 0 1em;
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
figure:last-child {
	margin-bottom: 0;
}

ul,
ol {
	padding-left: 1.15em;
}

li + li {
	margin-top: 0.25em;
}

a {
	color: var(--accent-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--c-blue);
	outline-offset: 2px;
}

/* On a dark ground the brand-blue ring is too low-contrast. */
.certifica-hero a:focus-visible,
.certifica-hero button:focus-visible,
.certifica-hero input:focus-visible,
.certifica-masthead a:focus-visible,
.certifica-cta a:focus-visible,
.certifica-cta button:focus-visible,
.certifica-site-footer a:focus-visible,
.certifica-site-footer button:focus-visible {
	outline-color: var(--c-gold-200);
}

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

img {
	display: block;
	height: auto;
}

figure {
	margin-inline: 0;
}

figcaption {
	margin-top: 0.5rem;
	color: var(--text-muted);
	font-size: var(--step--1);
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--step--1);
}

hr {
	margin: var(--sp-6) 0;
	border: 0;
	border-top: 1px solid var(--border);
}

code,
kbd,
samp {
	padding: 0.1em 0.35em;
	border: 1px solid var(--border);
	border-radius: var(--r-xs);
	background: var(--surface-2);
	font-family: var(--font-mono);
	font-size: 0.9em;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

th {
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 800;
}

input,
button,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

/* The theme's own reset, not the UA one: several components set `display`
   explicitly, so a bare `[hidden]` would otherwise be overridden. */
[hidden] {
	display: none !important;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.certifica-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.certifica-container--narrow {
	max-width: var(--container-narrow);
}

.certifica-page {
	padding-block: var(--section-y);
}

/* Block-template mains are not wrapped in .certifica-container, so they carry
   the same width and gutter themselves. */
main.wp-block-group.certifica-page-body {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-block: var(--section-y);
	padding-inline: var(--gutter);
}

.certifica-page-body--prose > * + * {
	margin-block-start: 1.25rem;
}

.certifica-page-body--prose > * {
	max-width: var(--container-text);
}

.certifica-page-body--prose p > .certifica-button-primary,
.certifica-page-body--prose p > .certifica-button-secondary,
.certifica-page-body--prose p > .certifica-button-ghost {
	margin: 0 0.5rem 0.5rem 0;
}

/* Section bands */
.certifica-section {
	padding-block: var(--section-y);
}

.certifica-section--tight {
	padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.certifica-section--surface {
	background: var(--surface);
}

.certifica-section--paper {
	background: var(--surface-alt);
}

.certifica-section--tint {
	background: var(--surface-tint);
}

.certifica-section-head {
	max-width: 62ch;
	margin-bottom: var(--sp-6);
}

.certifica-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.certifica-section-head > :last-child {
	margin-bottom: 0;
	color: var(--text-muted);
	font-size: var(--step-1);
}

.certifica-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.625rem;
	color: var(--accent-ink);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	border-radius: 2px;
	background: var(--highlight);
}

.certifica-hero .certifica-eyebrow,
.certifica-cta .certifica-eyebrow,
.certifica-masthead .certifica-eyebrow {
	color: var(--accent-ink-on-dark);
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   One small radius, never a pill, and a 44px minimum height so every control
   is a real touch target. */
.certifica-button-primary,
.certifica-button-secondary,
.certifica-button-ghost,
.certifica-button-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.625rem 1.125rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-family: var(--font);
	font-size: var(--step--1);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
		color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.certifica-button-primary {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--surface);
}

.certifica-button-primary:hover,
.certifica-button-primary:focus-visible {
	border-color: var(--accent-strong);
	background: var(--accent-strong);
	color: var(--surface);
}

.certifica-button-secondary {
	border-color: var(--border-strong);
	background: var(--surface);
	color: var(--text-strong);
}

.certifica-button-secondary:hover,
.certifica-button-secondary:focus-visible {
	border-color: var(--accent);
	background: var(--surface-2);
	color: var(--accent-ink);
}

.certifica-button-ghost {
	border-color: transparent;
	background: transparent;
	color: var(--accent-ink);
}

.certifica-button-ghost:hover,
.certifica-button-ghost:focus-visible {
	background: var(--accent-quiet);
	color: var(--accent-strong);
}

/* Gold is a field colour, so its label is a near-black warm ink, never white. */
.certifica-button-gold {
	border-color: var(--c-gold-600);
	background: var(--highlight);
	color: #2a2200;
}

.certifica-button-gold:hover,
.certifica-button-gold:focus-visible {
	border-color: var(--c-gold-700);
	background: var(--c-gold-200);
	color: #2a2200;
}

.certifica-button-ghost--on-dark {
	border-color: var(--border-inverse);
	background: transparent;
	color: var(--text-inverse);
}

.certifica-button-ghost--on-dark:hover,
.certifica-button-ghost--on-dark:focus-visible {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.12);
	color: var(--text-inverse);
}

.certifica-button-lg {
	min-height: 52px;
	padding: 0.8125rem 1.5rem;
	font-size: var(--step-0);
}

.certifica-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0;
}

/* --- Fields ------------------------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-strong);
	font-size: var(--step-0);
	font-weight: 500;
}

input::placeholder,
textarea::placeholder {
	color: var(--c-muted);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--c-withdrawn);
	background: var(--c-withdrawn-bg);
}

/* The field note is a small uppercase label above its control. */
.certifica-field-label,
.certifica-catalog-search-label,
.certifica-verify-form > label,
.certifica-contact-form label,
.certifica-apply-form label {
	display: block;
	color: var(--text-muted);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-inquiry-row > label {
	display: block;
	color: #334155;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	margin-bottom: 0.375rem;
}

.certifica-form-help {
	margin: 0.4rem 0 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-form-error,
.certifica-inquiry-error {
	display: block;
	margin-top: 0.375rem;
	color: var(--c-withdrawn);
	font-size: var(--step--1);
	font-weight: 700;
}

.certifica-inquiry-error:empty {
	display: none;
}

/* The honeypot is removed from the layout, not merely made transparent, and it
   stays out of the tab order (`tabindex="-1"` in the markup). */
.certifica-inquiry-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Notices and live regions ------------------------------------------- */
[role="status"] {
	display: block;
	margin: 0 0 var(--sp-5);
	padding: 0.8125rem 1rem;
	border: 1px solid var(--border-strong);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 600;
}

[role="status"] p {
	margin: 0 0 0.5em;
}

[role="status"] > :last-child {
	margin-bottom: 0;
}

/* Result states. Each carries its own word, so the state never depends on the
   colour of the marker. */
.certifica-verify-result {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	margin: var(--sp-5) 0 0;
	padding: 0.875rem 1rem;
	border-color: var(--border-strong);
	border-left-width: 3px;
	font-weight: 600;
}

.certifica-verify-result::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.6em;
	border-radius: 50%;
	background: currentColor;
}

.certifica-verify-result--valid {
	border-color: var(--c-valid-line);
	border-left-color: var(--c-valid);
	background: var(--c-valid-bg);
	color: var(--c-valid);
}

.certifica-verify-result--expired {
	border-color: var(--c-expired-line);
	border-left-color: var(--c-expired);
	background: var(--c-expired-bg);
	color: var(--c-expired);
}

.certifica-verify-result--suspended {
	border-color: var(--c-suspended-line);
	border-left-color: var(--c-suspended);
	background: var(--c-suspended-bg);
	color: var(--c-suspended);
}

.certifica-verify-result--withdrawn {
	border-color: var(--c-withdrawn-line);
	border-left-color: var(--c-withdrawn);
	background: var(--c-withdrawn-bg);
	color: var(--c-withdrawn);
}

.certifica-verify-result--not_yet_valid {
	border-color: var(--c-future-line);
	border-left-color: var(--c-future);
	background: var(--c-future-bg);
	color: var(--c-future);
}

.certifica-verify-result--not_currently_valid,
.certifica-verify-result--unknown {
	border-color: var(--c-neutral-status-line);
	border-left-color: var(--c-neutral-status);
	background: var(--c-neutral-status-bg);
	color: var(--c-neutral-status);
}

.certifica-verify-result--miss,
.certifica-verify-result--invalid,
.certifica-verify-result--limited,
.certifica-verify-result--unavailable {
	border-color: var(--border-strong);
	border-left-color: var(--c-muted);
	background: var(--surface-2);
	color: var(--text-strong);
}

/* --- Status pills -------------------------------------------------------- */
.certifica-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.15rem 0.625rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-pill);
	background: var(--surface-2);
	color: var(--text-strong);
	font-size: var(--step--2);
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}

.certifica-status::before {
	content: "";
	flex: 0 0 auto;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
}

.certifica-status--valid {
	border-color: var(--c-valid-line);
	background: var(--c-valid-bg);
	color: var(--c-valid);
}

.certifica-status--expired {
	border-color: var(--c-expired-line);
	background: var(--c-expired-bg);
	color: var(--c-expired);
}

.certifica-status--suspended {
	border-color: var(--c-suspended-line);
	background: var(--c-suspended-bg);
	color: var(--c-suspended);
}

.certifica-status--withdrawn {
	border-color: var(--c-withdrawn-line);
	background: var(--c-withdrawn-bg);
	color: var(--c-withdrawn);
}

.certifica-status--not_yet_valid {
	border-color: var(--c-future-line);
	background: var(--c-future-bg);
	color: var(--c-future);
}

.certifica-status--not_currently_valid {
	border-color: var(--c-neutral-status-line);
	background: var(--c-neutral-status-bg);
	color: var(--c-neutral-status);
}

.certifica-status--unknown {
	border-color: var(--c-unknown-line);
	background: var(--c-unknown-bg);
	color: var(--c-unknown);
}

/* --- Badges ------------------------------------------------------------- */
.certifica-service-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.certifica-service-card__badge {
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--c-blue-200);
	border-radius: var(--r-xs);
	background: var(--accent-quiet);
	color: var(--accent-ink);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- Skip link ----------------------------------------------------------- */
.certifica-skip {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	padding: 0.75rem 1rem;
	border-radius: var(--r-sm);
	background: var(--c-blue-900);
	color: var(--text-inverse);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transform: translateY(-200%);
}

.certifica-skip:focus {
	color: var(--text-inverse);
	transform: none;
}

/* --- Site header ---------------------------------------------------------
   Two render paths use the same classes: the block part, where WordPress wraps
   the markup in `<header class="wp-block-template-part">` (the page's single
   banner landmark), and the plugin-owned verify chrome, which renders
   `.certifica-site-header` itself. In the part path the wrapper is the sticky
   box, because a sticky element cannot stick beyond its own parent's box. */
header.wp-block-template-part:has(> .certifica-site-header),
.certifica-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.certifica-site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

body.admin-bar header.wp-block-template-part:has(> .certifica-site-header),
body.admin-bar .certifica-site-header {
	top: 32px;
}

@media (max-width: 48rem) {
	body.admin-bar header.wp-block-template-part:has(> .certifica-site-header),
	body.admin-bar .certifica-site-header {
		top: 46px;
	}
}

.certifica-site-header.is-stuck {
	box-shadow: var(--shadow-sm);
}

.certifica-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	max-width: var(--container);
	min-height: 4.25rem;
	margin-inline: auto;
	padding-block: 0.5rem;
	padding-inline: var(--gutter);
}

.certifica-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--text-strong);
	text-decoration: none;
}

.certifica-brand:hover {
	color: var(--text-strong);
}

.certifica-brand__mark,
.certifica-brand img {
	width: 40px;
	height: 40px;
}

.certifica-brand__word,
.certifica-brand-word {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.certifica-brand__tag {
	display: none;
	padding-left: 0.75rem;
	border-left: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--step--2);
	font-weight: 700;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-nav {
	flex: 1 1 100%;
}

.certifica-nav ul {
	display: block;
	margin: 0;
	padding: 0.25rem 0 0.5rem;
	list-style: none;
}

.certifica-nav li + li {
	margin-top: 0.125rem;
}

.certifica-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border-radius: var(--r-sm);
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 600;
	text-decoration: none;
}

.certifica-nav a:hover {
	background: var(--accent-quiet);
	color: var(--accent-ink);
}

.certifica-nav a[aria-current="page"] {
	color: var(--accent-ink);
	box-shadow: inset 0 -2px 0 0 var(--accent);
}

.certifica-nav__cta {
	margin-top: 0.5rem;
}

.certifica-nav a.certifica-button-primary {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--surface);
}

.certifica-nav a.certifica-button-primary:hover {
	border-color: var(--accent-strong);
	background: var(--accent-strong);
	color: var(--surface);
}

/* The toggle only ever appears once the script has taken over the nav, so a
   no-JS visit keeps every primary link visible and usable. */
.certifica-nav-toggle {
	display: none;
}

@media (max-width: 63.999rem) {
	.certifica-nav-ready .certifica-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 44px;
		min-height: 44px;
		margin-left: auto;
		padding: 0.5rem 0.875rem;
		border: 1px solid var(--border-strong);
		border-radius: var(--r-sm);
		background: var(--surface);
		color: var(--text-strong);
		font-size: var(--step--1);
		font-weight: 700;
	}

	.certifica-nav-toggle__bars {
		position: relative;
		width: 1rem;
		height: 2px;
		background: currentColor;
	}

	.certifica-nav-toggle__bars::before,
	.certifica-nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
		width: 1rem;
		height: 2px;
		background: currentColor;
	}

	.certifica-nav-toggle__bars::before {
		top: -5px;
	}

	.certifica-nav-toggle__bars::after {
		top: 5px;
	}

	.certifica-nav-ready .certifica-nav {
		display: none;
		border-top: 1px solid var(--border);
	}

	.certifica-nav-ready .certifica-nav.is-open {
		display: block;
	}
}

@media (min-width: 64rem) {
	.certifica-header-inner {
		flex-wrap: nowrap;
	}

	.certifica-brand__tag {
		display: block;
	}

	.certifica-nav {
		flex: 0 1 auto;
		margin-left: auto;
	}

	.certifica-nav ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.125rem;
		padding: 0;
	}

	.certifica-nav li + li {
		margin-top: 0;
	}

	.certifica-nav a {
		padding-inline: 0.6875rem;
	}

	.certifica-nav__cta {
		margin-top: 0;
		margin-left: 0.5rem;
	}
}

/* --- Site footer --------------------------------------------------------- */
.certifica-site-footer {
	background: var(--c-blue-900);
	color: var(--c-on-dark);
	font-size: var(--step--1);
}

.certifica-footer-inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--sp-7) var(--gutter) var(--sp-5);
}

/* One grid row per breakpoint, so no column is pushed onto a row of its own and
   no column is squeezed: brand + 3 link columns on desktop, 2 columns on
   tablet, 1 on mobile. */
.certifica-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--border-inverse);
}

.certifica-footer-brand {
	max-width: 34rem;
}

.certifica-site-footer .certifica-brand {
	color: var(--text-inverse);
}

.certifica-site-footer .certifica-brand:hover {
	color: var(--c-gold-200);
}

.certifica-footer-mark {
	width: 38px;
	height: 38px;
}

.certifica-footer-note {
	margin: 0.875rem 0 0;
	color: var(--c-on-dark-muted);
	font-size: var(--step--1);
}

.certifica-footer-col h2,
.certifica-footer-col h3 {
	margin: 0 0 0.75rem;
	color: var(--text-inverse);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-footer-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.certifica-footer-col li + li {
	margin-top: 0.125rem;
}

.certifica-footer-col a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--c-on-dark);
	font-weight: 600;
	text-decoration: none;
}

.certifica-footer-col a:hover {
	color: var(--c-gold-200);
	text-decoration: underline;
}

.certifica-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	padding-top: var(--sp-5);
	color: var(--c-on-dark-muted);
	font-size: var(--step--2);
}

@media (min-width: 48rem) {
	.certifica-footer-top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.certifica-footer-top {
		grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	}

	.certifica-footer-brand {
		grid-column: auto;
	}
}

/* --- Cookie notice -------------------------------------------------------
   A compact bar pinned to the bottom edge: the notice on the left and its two
   controls on the right, on one row at every width, so it stays short on a
   phone. It is rendered `hidden` and only revealed by the script, which also
   publishes its measured height as `--certifica-cookie-height`; the document
   therefore reserves exactly that space and the bar can never cover the
   footer's last line. */
.certifica-cookie {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	padding: 0.5rem 0;
	border-top: 3px solid var(--highlight);
	background: var(--c-blue-900);
	color: var(--c-on-dark);
	box-shadow: 0 -14px 30px -22px rgba(16, 20, 63, 0.7);
}

.certifica-cookie__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem 0.75rem;
	align-items: center;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.certifica-cookie__text {
	margin: 0;
	font-size: var(--step--2);
	line-height: 1.4;
}

.certifica-cookie__text strong {
	color: var(--text-inverse);
}

.certifica-cookie__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.625rem;
	align-items: center;
	margin: 0;
}

.certifica-cookie__text a {
	color: var(--c-gold-200);
	font-weight: 700;
	text-underline-offset: 0.15em;
}

.certifica-cookie .certifica-button-primary {
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	font-size: var(--step--2);
	border-color: var(--c-gold-600);
	background: var(--highlight);
	color: #2a2200;
}

.certifica-cookie .certifica-button-primary:hover {
	border-color: var(--c-gold-200);
	background: var(--c-gold-200);
	color: #2a2200;
}

/* Legacy consent chrome from the dump must never render. */
.cookie-notice-container,
.iubenda-cs-container,
.iubenda-tp-btn,
.iubenda-cs-overlay,
.hu-banner,
.hu-wrapper,
.elementor-location-popup,
.dialog-type-lightbox,
[id^="iubenda"],
[id^="hu-"] {
	display: none !important;
}

/* --- Page masthead -------------------------------------------------------
   Every non-home template opens with the same institutional band: breadcrumb,
   one h1, and a standfirst. It replaces the old bare heading crammed under the
   header, and gives each page a single, predictable entry point. */
.certifica-masthead {
	position: relative;
	padding-block: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
	background: var(--c-blue-900);
	color: var(--text-inverse);
	overflow: hidden;
}

.certifica-masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 130% at 8% 0%, rgba(48, 57, 200, 0.55), transparent 62%);
	pointer-events: none;
}

.certifica-masthead::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(90deg, var(--c-gold) 0 5rem, var(--c-blue) 5rem 100%);
}

.certifica-masthead > .certifica-container {
	position: relative;
}

.certifica-masthead h1 {
	margin: 0 0 0.5rem;
	color: var(--text-inverse);
	font-size: var(--step-4);
}

.certifica-masthead__lede {
	max-width: var(--container-text);
	margin: 0;
	color: var(--c-on-dark);
	font-size: var(--step-1);
	line-height: 1.55;
}

.certifica-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.875rem;
	color: var(--c-on-dark-muted);
	font-size: var(--step--1);
	font-weight: 600;
}

.certifica-breadcrumb a {
	color: var(--text-inverse);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

.certifica-breadcrumb a:hover {
	color: var(--c-gold-200);
	border-bottom-color: var(--c-gold-200);
}

.certifica-breadcrumb [aria-hidden="true"] {
	color: var(--c-gold-200);
}

/* ==========================================================================
   5. TEMPLATES
   ========================================================================== */

/* --- Home hero -----------------------------------------------------------
   A two-column band: the statement on the left, the verification box as the
   primary action on the right, and the register facts along the bottom. There
   is no empty half. Texture is a CSS gradient, not an image, so hero text
   contrast is deterministic. */
.certifica-hero {
	position: relative;
	padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
	background: var(--c-blue-900);
	color: var(--text-inverse);
	overflow: hidden;
}

.certifica-hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(80% 120% at 6% 0%, rgba(48, 57, 200, 0.6), transparent 60%),
		linear-gradient(180deg, rgba(16, 20, 63, 0) 40%, rgba(16, 20, 63, 0.65) 100%);
	pointer-events: none;
}

.certifica-hero > .certifica-container {
	position: relative;
}

.certifica-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 2.75rem);
	align-items: start;
}

.certifica-hero__copy {
	max-width: 34rem;
}

.certifica-hero h1 {
	margin: 0 0 0.75rem;
	color: var(--text-inverse);
	font-size: var(--step-5);
	letter-spacing: -0.025em;
}

.certifica-hero__badge {
	display: inline-block;
	margin-bottom: 0.875rem;
	padding: 0.2rem 0.625rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-xs);
	color: var(--c-on-dark);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-hero__lede {
	margin: 0 0 1rem;
	color: var(--c-on-dark);
	font-size: var(--step-1);
	line-height: 1.55;
}

.certifica-accent {
	color: var(--c-gold-200);
}

.certifica-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-on-dark-muted);
	font-size: var(--step--1);
	font-weight: 600;
}

.certifica-hero__meta li,
.certifica-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.certifica-hero__meta li::before,
.certifica-hero__meta span::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--c-gold);
}

/* The verification box. Sized and worded so a first-time visitor sees at a
   glance that this is where the number printed on their certificate goes. */
.certifica-hero__panel {
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
	border: 1px solid var(--border);
	border-top: 5px solid var(--c-gold);
	border-radius: var(--r-lg);
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow-lg);
}

.certifica-hero__panel-head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 0.875rem;
}

.certifica-hero__panel-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--accent-quiet);
	color: var(--accent);
}

.certifica-hero__panel-eyebrow {
	display: block;
	color: var(--highlight-ink);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-hero__search-label {
	display: block;
	margin: 0;
	color: var(--text-strong);
	font-size: var(--step-3);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: -0.015em;
}

.certifica-hero__panel-lede {
	margin: 0 0 1rem;
	color: var(--text);
	font-size: var(--step-0);
	line-height: 1.55;
}

.certifica-hero__panel-lede strong {
	color: var(--text-strong);
}

/* A miniature certificate pointing at where the number is printed. */
.certifica-hero__sample {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.75rem;
	border: 1px dashed var(--border-strong);
	border-radius: var(--r);
	background: var(--surface-2);
}

.certifica-hero__sample-doc {
	display: grid;
	gap: 0.3rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	box-shadow: var(--shadow-xs);
}

.certifica-hero__sample-line {
	display: block;
	width: 70%;
	height: 0.375rem;
	border-radius: var(--r-pill);
	background: var(--border);
}

.certifica-hero__sample-line--short {
	width: 45%;
}

.certifica-hero__sample-no {
	justify-self: start;
	margin-top: 0.2rem;
	padding: 0.15rem 0.45rem;
	border-radius: var(--r-xs);
	background: var(--highlight-quiet);
	outline: 2px solid var(--c-gold);
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 700;
}

.certifica-hero__sample-note {
	color: var(--highlight-ink);
	font-size: var(--step--1);
	font-weight: 800;
}

.certifica-hero__sample-note::before {
	content: "\2191\00a0";
}

.certifica-hero__search {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
}

.certifica-hero__field {
	position: relative;
}

.certifica-hero__field-icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	color: var(--text-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.certifica-hero__search input {
	width: 100%;
	min-height: 3.75rem;
	padding: 0.75rem 1rem 0.75rem 3rem;
	border: 2px solid var(--border-strong);
	border-radius: var(--r);
	font-family: var(--font-mono);
	font-size: var(--step-2);
	letter-spacing: 0.03em;
}

.certifica-hero__search input:hover {
	border-color: var(--accent);
}

.certifica-hero__search button {
	width: 100%;
	min-height: 3.5rem;
	font-size: var(--step-1);
}

.certifica-hero__hint,
.certifica-hero__more {
	margin: 0.875rem 0 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-hero__more a {
	font-weight: 700;
}

@media (min-width: 64rem) {
	.certifica-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
		align-items: center;
	}
}

/* --- Register facts band -------------------------------------------------- */
.certifica-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--border-inverse);
	border: 1px solid var(--border-inverse);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.certifica-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 1rem 1.25rem;
	background: rgba(255, 255, 255, 0.04);
}

.certifica-stat__value {
	color: var(--text-inverse);
	font-size: var(--step-3);
	font-weight: 700;
	line-height: 1.1;
}

.certifica-stat__label {
	color: var(--c-on-dark-muted);
	font-size: var(--step--1);
	font-weight: 600;
}

.certifica-hero__facts {
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.certifica-section--facts .certifica-stat {
	background: var(--surface);
}

.certifica-section--facts .certifica-stat__value {
	color: var(--text-strong);
}

.certifica-section--facts .certifica-stat__label {
	color: var(--text-muted);
}

/* --- Card grids ---------------------------------------------------------- */
.certifica-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.certifica-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.certifica-card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-xs);
}

.certifica-card > :last-child {
	margin-bottom: 0;
}

.certifica-card h3 {
	margin: 0;
	font-size: var(--step-2);
}

.certifica-card p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-card__index {
	color: var(--accent-ink);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.certifica-card__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--r-sm);
	background: var(--accent-quiet);
	color: var(--accent-ink);
}

.certifica-card__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.certifica-card--gold .certifica-card__icon {
	background: var(--highlight-quiet);
	color: var(--highlight-ink);
}

.certifica-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin-top: auto;
	color: var(--accent-ink);
	font-size: var(--step--1);
	font-weight: 800;
	text-decoration: none;
}

.certifica-card__link svg {
	width: 1rem;
	height: 1rem;
}

.certifica-card__link:hover {
	color: var(--accent);
	text-decoration: underline;
}

/* --- Explore register rows ----------------------------------------------- */
.certifica-links {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border);
}

.certifica-links li {
	margin: 0;
	border-bottom: 1px solid var(--border);
}

.certifica-links a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.25rem 1rem;
	align-items: baseline;
	min-height: 44px;
	padding: 0.875rem 0;
	color: var(--text-strong);
	text-decoration: none;
}

.certifica-links a:hover {
	color: var(--accent-ink);
}

.certifica-links__title {
	font-size: var(--step-1);
	font-weight: 800;
}

.certifica-links__note {
	grid-column: 1;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-links__arrow {
	grid-row: 1 / -1;
	grid-column: 2;
	align-self: center;
	color: var(--accent-ink);
}

/* --- Steps --------------------------------------------------------------- */
.certifica-steps {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	counter-reset: certifica-step;
}

.certifica-step {
	position: relative;
	margin: 0;
	padding-left: 3rem;
}

.certifica-step::before {
	counter-increment: certifica-step;
	content: counter(certifica-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--r-xs);
	background: var(--c-blue-900);
	color: var(--text-inverse);
	font-family: var(--font-mono);
	font-size: var(--step--2);
	font-weight: 700;
}

.certifica-step h3 {
	margin: 0 0 0.25rem;
	font-size: var(--step-1);
}

.certifica-step p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

/* --- Media split --------------------------------------------------------- */
.certifica-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	align-items: center;
}

.certifica-split__media img,
.certifica-verify-illo img {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--r);
}

.certifica-checklist {
	display: grid;
	gap: 0.625rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.certifica-checklist li {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	color: var(--text);
	font-size: var(--step--1);
}

.certifica-checklist li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--c-gold);
	box-shadow: 0 0 0 3px var(--c-gold-050);
}

/* --- Call-to-action band ------------------------------------------------- */
.certifica-cta {
	position: relative;
	display: grid;
	gap: 1rem;
	padding: clamp(1.75rem, 1.2rem + 3vw, 3rem);
	border-radius: var(--r-lg);
	background: var(--c-blue-900);
	color: var(--text-inverse);
	overflow: hidden;
}

.certifica-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 140% at 100% 0%, rgba(48, 57, 200, 0.6), transparent 62%);
	pointer-events: none;
}

.certifica-cta > * {
	position: relative;
}

.certifica-cta h2 {
	margin: 0;
	color: var(--text-inverse);
}

.certifica-cta p {
	margin: 0;
	max-width: 56ch;
	color: var(--c-on-dark);
}

.certifica-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.certifica-mv {
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
}

.certifica-mv h2 {
	margin-top: 0;
}

/* --- Certification services catalog --------------------------------------- */
.certifica-catalog-tools {
	display: grid;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.certifica-catalog-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: end;
	margin: 0;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-xs);
}

.certifica-catalog-search-label {
	grid-column: 1 / -1;
}

.certifica-catalog-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
}

.certifica-catalog-chips li {
	margin: 0;
}

.certifica-catalog-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border-radius: var(--r-xs);
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 700;
	text-decoration: none;
}

.certifica-catalog-chips a:hover {
	background: var(--accent-quiet);
	color: var(--accent-ink);
}

.certifica-catalog-chips a[aria-current="true"] {
	background: var(--accent);
	color: var(--surface);
}

.certifica-catalog-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
}

.certifica-catalog-count {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--1);
	font-weight: 700;
}

.certifica-catalog-reset {
	margin: 0;
	font-size: var(--step--1);
}

.certifica-catalog-empty {
	margin-top: var(--sp-5);
}

.certifica-catalog-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: var(--sp-6) 0 0;
}

@media (max-width: 30rem) {
	.certifica-catalog-search {
		grid-template-columns: minmax(0, 1fr);
	}

	.certifica-catalog-search button {
		width: 100%;
	}
}

/* --- Service cards ------------------------------------------------------- */
.certifica-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.certifica-service-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
}

.certifica-service-card__media {
	display: grid;
	place-items: center;
	min-height: 8rem;
	padding: var(--sp-4);
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.certifica-service-card__image {
	width: auto;
	max-width: 100%;
	max-height: 5.5rem;
	object-fit: contain;
}

.certifica-service-card__noimage {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--r-sm);
	background: var(--accent-quiet);
	color: var(--accent-ink);
	font-size: 1.125rem;
	font-weight: 800;
}

.certifica-service-card__badges {
	padding: var(--sp-4) var(--sp-4) 0;
}

.certifica-service-card__title {
	margin: 0.75rem var(--sp-4) 0;
	font-size: var(--step-2);
}

.certifica-service-card__duration {
	margin: 0.375rem var(--sp-4) 0;
	color: var(--text-muted);
	font-size: var(--step--2);
}

.certifica-service-card__excerpt {
	margin: 0.5rem var(--sp-4) 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-service-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding: var(--sp-4);
	border-top: 1px solid var(--border);
	background: var(--surface-2);
}

/* --- Service details ----------------------------------------------------- */
.certifica-service-single {
	display: grid;
	gap: var(--sp-4);
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.certifica-service-single__media {
	display: grid;
	place-items: center;
	min-height: 7rem;
	padding: var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface-2);
}

.certifica-service-single__media img {
	width: auto;
	max-width: 100%;
	max-height: 5.5rem;
	object-fit: contain;
}

.certifica-service-single__title {
	margin: 0;
	font-size: var(--step-3);
}

.certifica-service-single__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.certifica-service-single__description p {
	margin: 0;
	color: var(--text);
}

.certifica-service-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* --- Training listings and detail ---------------------------------------- */
.certifica-training-list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.certifica-training-entry,
.certifica-training-single {
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-xs);
}

.certifica-training-entry__title {
	display: block;
	margin-bottom: 0.75rem;
	font-size: var(--step-2);
	font-weight: 800;
	line-height: var(--lh-snug);
}

.certifica-training-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-training-single {
	margin-bottom: var(--sp-5);
}

.certifica-training-single h1 {
	overflow-wrap: anywhere;
}

/* --- Certificate register rows -------------------------------------------
   One register, two presentations, from a single `<dl>` of labelled fields per
   filing:
     - 48rem and up: the labels are printed once in a header row and each
       filing is an aligned register row. The per-cell `<dt>` labels stay in
       the DOM (screen readers and a CSS-less render still get label/value
       pairs) but are visually hidden, so no label is repeated per row.
     - below 48rem: compact rows — the number and its status pill on the first
       line, the legal name in bold ink on the second, the country muted on the
       third. Long organisation names wrap instead of forcing a wide column.
   `--register-cols` is declared once so the header row and the data rows can
   never drift out of alignment. */
.certifica-register {
	/* The status column is sized for the longest derived status the engine can
	   produce (`not_currently_valid`, 168px as a pill), so a pill is never
	   clipped and every pill renders at the same width. */
	--register-cols: 11rem minmax(0, 1fr) 8.5rem 11rem;

	margin: 0;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	overflow: hidden;
}

.certifica-register__meta {
	margin: 0;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: var(--step--2);
	font-weight: 600;
}

/* The header row shares the data rows' grid box exactly: its padding lives on
   the first and last cell rather than on the row, otherwise the header's 1fr
   column would be narrower than the rows' and the last two columns would sit
   out of line. */
.certifica-register__head {
	display: grid;
	grid-template-columns: var(--register-cols);
	margin: 0;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.certifica-register__head span:first-child {
	padding-left: 1rem;
}

.certifica-register__head span:last-child {
	padding-right: 1rem;
}

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

.certifica-filing {
	margin: 0;
	padding: 0;
}

.certifica-filing + .certifica-filing {
	border-top: 1px solid var(--border);
}

.certifica-filing__fields {
	display: grid;
	grid-template-columns: var(--register-cols);
	margin: 0;
}

.certifica-filing__field {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.75rem 1rem 0.75rem 0;
}

.certifica-filing__field:first-child {
	padding-left: 1rem;
}

/* The header row carries the labels, so the per-cell term is kept for assistive
   technology and for a CSS-less render only. */
.certifica-filing-k {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.certifica-filing-v {
	margin: 0;
	min-width: 0;
	color: var(--text-strong);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.certifica-filing__field--number .certifica-filing-v {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 700;
	white-space: nowrap;
	overflow-wrap: normal;
}

/* Every status pill is the same width and starts at the same x, so the status
   column reads as one column and lines up under its header label. */
.certifica-filing__field--status .certifica-status {
	align-self: start;
	justify-content: flex-start;
	width: 10rem;
	max-width: 100%;
}

@media (max-width: 48rem) {
	.certifica-register__head {
		display: none;
	}

	.certifica-filing__fields {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.2rem 0.75rem;
		padding: 0.875rem 1rem;
	}

	.certifica-filing__field {
		display: block;
		padding: 0;
	}

	.certifica-filing__field:first-child {
		padding-left: 0;
	}

	.certifica-filing__field--number {
		grid-area: 1 / 1;
	}

	.certifica-filing__field--status {
		grid-area: 1 / 2;
		justify-self: end;
	}

	.certifica-filing__field--status .certifica-status {
		width: auto;
	}

	.certifica-filing__field--name {
		grid-area: 2 / 1 / 3 / -1;
	}

	.certifica-filing__field--country {
		grid-area: 3 / 1 / 4 / -1;
	}

	.certifica-filing__field--name .certifica-filing-v {
		color: var(--text-strong);
		font-size: var(--step-0);
		font-weight: 800;
	}

	.certifica-filing__field--country .certifica-filing-v {
		color: var(--text-muted);
		font-size: var(--step--1);
		font-weight: 600;
	}
}

/* --- Pager --------------------------------------------------------------- */
.certifica-pager {
	margin-top: var(--sp-6);
}

.certifica-pager ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.certifica-pager li {
	margin: 0;
	border-left: 0;
	border-width: 0;
	box-shadow: none;
}

.certifica-pager li a,
.certifica-pager li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 700;
	text-decoration: none;
}

.certifica-pager li a:hover {
	border-color: var(--accent);
	color: var(--accent-ink);
}

.certifica-pager li [aria-current="page"] {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--surface);
}

/* --- Definition lists ---------------------------------------------------- */
.certifica-dl {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	margin: 0;
	border-top: 1px solid var(--border);
}

.certifica-dl dt {
	margin: 0;
	padding: 0.75rem 1rem 0.75rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--step--1);
	font-weight: 700;
}

.certifica-dl dd {
	margin: 0;
	min-width: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-strong);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.certifica-two-facts-list {
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--r);
	overflow: hidden;
}

.certifica-two-facts-list dt {
	padding-inline: 1rem;
	background: var(--surface-2);
}

.certifica-two-facts-list dd {
	padding-inline: 1rem;
	font-size: var(--step-1);
}

@media (max-width: 30rem) {
	.certifica-dl {
		grid-template-columns: minmax(0, 1fr);
	}

	.certifica-dl dt {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.certifica-dl dd {
		padding-top: 0.15rem;
	}
}

/* --- Verification page --------------------------------------------------- */
.certifica-verify__head {
	margin-bottom: var(--sp-5);
}

.certifica-verify__lede {
	max-width: 60ch;
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step-1);
}

.certifica-verify-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: end;
	margin: 0;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.certifica-verify-form > label {
	grid-column: 1 / -1;
}

.certifica-verify-form input {
	font-family: var(--font-mono);
	font-size: 1.05rem;
	padding: 0.75rem 1rem;
	letter-spacing: 0.04em;
}

.certifica-verify-facts .certifica-mono {
	font-family: var(--font-mono);
	font-size: 1.05rem;
	font-weight: 700;
	color: #0369a1;
	background: #f0f9ff;
	padding: 3px 8px;
	border-radius: 6px;
	border: 1px solid #bae6fd;
	display: inline-block;
}

.certifica-verify-result + .certifica-verify-form {
	margin-top: var(--sp-4);
}

.certifica-verify-help {
	margin: 0.625rem 0 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-verify-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: start;
	margin-top: var(--sp-6);
}

@media (max-width: 48rem) {
	.certifica-verify-grid {
		grid-template-columns: 1fr;
	}
}

.certifica-verify-facts {
	padding: var(--sp-6);
	border: 1px solid var(--border);
	border-radius: var(--r-md, 12px);
	background: var(--surface);
	box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
}

.certifica-verify-facts h2 {
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 2px solid var(--surface-2, #f1f5f9);
	font-size: var(--step-2);
	font-weight: 700;
	color: var(--text-strong);
}

.certifica-verify-facts .certifica-dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	border-top: 0;
}

.certifica-verify-facts .certifica-dl dt {
	margin: 0;
	padding: 0.75rem 0 0.15rem;
	border-top: 1px solid var(--border-subtle, #f1f5f9);
	border-bottom: 0;
	color: var(--text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.certifica-verify-facts .certifica-dl dt:first-child {
	border-top: 0;
	padding-top: 0;
}

.certifica-verify-facts .certifica-dl dd {
	margin: 0;
	padding: 0 0 0.75rem;
	border-bottom: 0;
	color: var(--text-strong);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

.certifica-verify-facts .certifica-button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.75rem;
	border-radius: var(--r, 8px);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.certifica-verify-facts .certifica-button-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

@media (max-width: 30rem) {
	.certifica-verify-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.certifica-verify-form button {
		width: 100%;
	}
}

/* --- Certificate record -------------------------------------------------- */
.certifica-record {
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.certifica-record__head {
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	background: var(--c-blue-900);
	color: var(--text-inverse);
}

.certifica-record__eyebrow {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--accent-ink-on-dark);
	font-size: var(--step--2);
	font-weight: 800;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-record__number {
	margin: 0;
	color: var(--text-inverse);
	font-family: var(--font-mono);
	font-size: var(--step-3);
	font-weight: 700;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
}

.certifica-record__lede {
	margin: 0.625rem 0 0;
	max-width: 60ch;
	color: var(--c-on-dark);
	font-size: var(--step--1);
}

.certifica-record__body {
	display: grid;
	gap: var(--sp-5);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.certifica-record__body > * {
	margin: 0;
}

.certifica-record__document {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* A certificate single is a record, not running text, so it leaves the 68ch prose measure and
   fills its container. Below the breakpoint it stays a single column: the two facts, then the
   summary card under them. */
.certifica-page-body--record > * {
	max-width: none;
}

@media (min-width: 68.75rem) {
	.certifica-record__body {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		align-items: start;
		column-gap: var(--sp-6);
	}

	/* Nothing to summarise (no metadata, no document): the two facts take the whole row rather than
	   leaving a hole where the summary card would have been. */
	.certifica-record__body > :only-child {
		grid-column: 1 / -1;
	}
}

.certifica-record__summary {
	display: grid;
	gap: var(--sp-4);
	align-content: start;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface-2);
}

.certifica-record__summary-title {
	margin: 0;
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.certifica-record__summary .certifica-dl {
	margin: 0;
}

.certifica-record__summary .certifica-record__document {
	margin: 0;
}

/* --- Reference archives and singles ------------------------------------- */
.certifica-reference ul {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: reference;
	border-top: 1px solid var(--border);
}

.certifica-reference ul li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-strong);
	font-weight: 600;
	line-height: var(--lh-snug);
	min-width: 0;
	overflow-wrap: anywhere;
}

.certifica-reference ul li::before {
	counter-increment: reference;
	content: counter(reference, decimal-leading-zero);
	color: var(--accent-ink);
	font-family: var(--font-mono);
	font-size: var(--step--1);
}

.certifica-reference section {
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
}

/* --- Downloads ----------------------------------------------------------- */
.certifica-docs {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	overflow: hidden;
}

.certifica-docs > li {
	margin: 0;
}

.certifica-doc + .certifica-doc {
	border-top: 1px solid var(--border);
}

.certifica-doc__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.25rem 1rem;
	align-items: center;
	min-height: 64px;
	padding: 0.875rem 1rem;
	color: var(--text-strong);
	text-decoration: none;
}

.certifica-doc__link:hover {
	background: var(--surface-2);
	color: var(--accent-ink);
}

.certifica-doc__badge {
	padding: 0.15rem 0.4rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-xs);
	color: var(--text-muted);
	font-size: var(--step--2);
	font-weight: 700;
}

.certifica-doc__title {
	grid-column: 2;
	font-weight: 700;
}

.certifica-doc__meta {
	grid-column: 2;
	color: var(--text-muted);
	font-size: var(--step--2);
}

.certifica-doc__arrow {
	grid-row: 1 / -1;
	grid-column: 3;
	align-self: center;
	color: var(--accent-ink);
}

.certifica-downloads table {
	border: 1px solid var(--border);
	border-radius: var(--r);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--surface);
	overflow: hidden;
}

.certifica-downloads td {
	padding: 0;
	border-color: var(--border);
}

.certifica-downloads tr:last-child td {
	border-bottom: 0;
}

.certifica-downloads td a {
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 0.875rem 1.25rem;
	color: var(--text-strong);
	font-weight: 700;
	text-decoration: none;
}

.certifica-downloads td a::after {
	content: "↓";
	margin-left: auto;
	padding-left: 1rem;
	color: var(--accent-ink);
}

.certifica-downloads td a:hover {
	background: var(--surface-tint);
	color: var(--accent-ink);
}

/* --- Reference index ----------------------------------------------------- */
.certifica-index {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border);
	counter-reset: certifica-index;
}

.certifica-index li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	margin: 0;
	padding: 0.8125rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-strong);
	font-weight: 600;
}

.certifica-index li::before {
	counter-increment: certifica-index;
	content: counter(certifica-index, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--step--2);
}

/* --- News ---------------------------------------------------------------- */
.certifica-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.certifica-news-grid > li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-xs);
}

.certifica-news-date {
	color: var(--text-muted);
	font-size: var(--step--2);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.certifica-news-grid .wp-block-post-title {
	margin: 0;
	font-size: var(--step-2);
}

.certifica-news-grid .wp-block-post-excerpt p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.certifica-news-grid .wp-block-post-excerpt__more-link {
	font-weight: 700;
}

.certifica-empty {
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) var(--gutter);
	border: 1px dashed var(--border-strong);
	border-radius: var(--r);
	background: var(--surface);
	text-align: center;
}

.certifica-empty h2 {
	font-size: var(--step-3);
}

.certifica-empty p {
	max-width: 46ch;
	margin: 0;
	color: var(--text-muted);
}

.certifica-empty__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--r-sm);
	background: var(--accent-quiet);
	color: var(--accent-ink);
}

.certifica-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.certifica-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: var(--sp-6);
}

.certifica-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.625rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-strong);
	font-size: var(--step--1);
	font-weight: 700;
	text-decoration: none;
}

.certifica-pagination .page-numbers.current {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--surface);
}

/* --- Forms, request panel and dialog ------------------------------------- */
.certifica-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	align-items: start;
}

.certifica-contact-form,
.certifica-inquiry-form,
.certifica-apply-form {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--shadow-xs);
}

.certifica-inquiry-row {
	display: grid;
	gap: 0.375rem;
	margin: 0;
}

.certifica-inquiry-submit {
	margin: 0;
}

.certifica-inquiry-retention {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--2);
}

.certifica-contact-aside {
	display: grid;
	gap: 1rem;
	justify-items: start;
	padding: var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--surface-2);
}

.certifica-contact-aside h2 {
	margin: 0;
	font-size: var(--step-2);
}

.certifica-contact-aside .certifica-checklist {
	margin: 0;
}

.certifica-contact-email {
	margin: 0;
	font-size: var(--step--1);
}

.certifica-inquiry-panel {
	margin-top: var(--sp-6);
}

/* With the script running the panel starts hidden and only becomes the modal
   overlay when it is opened. Without it, the same panel is an ordinary inline
   card holding a working form, which is why it carries no dialog semantics in
   the server markup. */
.certifica-js .certifica-inquiry-panel[aria-hidden="true"] {
	display: none;
}

.certifica-inquiry-panel.is-open {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	margin: 0;
	padding: var(--gutter);
	overflow: auto;
}

.certifica-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 13, 38, 0.62);
}

.certifica-modal__panel {
	position: relative;
	z-index: 1;
	width: min(34rem, 100%);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
}

.certifica-inquiry-panel.is-open .certifica-modal__panel {
	max-height: min(88vh, 44rem);
	overflow: auto;
}

.certifica-modal__head {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--sp-5) var(--sp-5) 0;
}

.certifica-modal__title {
	margin: 0;
	font-size: var(--step-2);
}

.certifica-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-strong);
	font-size: 1.25rem;
	line-height: 1;
}

.certifica-modal__close:hover {
	border-color: var(--accent);
	color: var(--accent-ink);
}

@media (max-width: 56rem) {
	.certifica-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.certifica-mono {
	font-family: var(--font-mono);
	font-size: 0.95em;
	overflow-wrap: anywhere;
}

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

.certifica-figure img {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--r);
}

/* ==========================================================================
   7. MOTION
   --------------------------------------------------------------------------
   A reveal MOVES content into place; it never fades it. An opacity ramp from 0
   drags a panel's text toward the colour behind it, so the WCAG 1.4.3 contrast of
   live text collapses while it runs (measured at 1.35:1 on the hero's verify
   button — `tests/e2e/a11y.spec.ts`, and § Theme spec in docs/architecture.md).
   Motion resolves instantly under `prefers-reduced-motion: reduce`.
   ========================================================================== */
.certifica-js [data-reveal] {
	transform: translateY(10px);
}

.certifica-js [data-reveal].is-visible {
	transform: none;
	transition: transform var(--dur-2) var(--ease);
}

.certifica-js [data-reveal-delay="1"].is-visible {
	transition-delay: 70ms;
}

.certifica-js [data-reveal-delay="2"].is-visible {
	transition-delay: 140ms;
}

.certifica-js .certifica-hero__reveal {
	transform: translateY(10px);
	animation: certifica-rise var(--dur-2) var(--ease) forwards;
}

.certifica-js .certifica-hero__reveal--1 {
	animation-delay: 40ms;
}

.certifica-js .certifica-hero__reveal--2 {
	animation-delay: 100ms;
}

.certifica-js .certifica-hero__reveal--3 {
	animation-delay: 160ms;
}

.certifica-js .certifica-hero__reveal--4 {
	animation-delay: 220ms;
}

@keyframes certifica-rise {
	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
	}

	.certifica-js [data-reveal],
	.certifica-js .certifica-hero__reveal {
		transform: none;
		animation: none;
	}
}