/* =========================================================
   OSPA Harghita – design following the SGG visual identity guide (v2)
   The measurements follow the existing ospaharghita.ro implementation (OceanWP + Elementor),
   which applies the guide; where the guide and the old site differ, see CLAUDE.md.
   ========================================================= */

/* Trajan Pro (guide p. 10, 21) – licensed by the institution, hosted locally. */
@font-face {
    font-family: "Trajan Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/trajanpro-bold.woff2") format("woff2"),
         url("../fonts/TrajanPro-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Trajan Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/trajanpro-regular.woff2") format("woff2"),
         url("../fonts/TrajanPro-Regular.ttf") format("truetype");
}
/* Cinzel (OFL) – fallback when Trajan Pro does not load. */
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/cinzel-700-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: "Cinzel";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/cinzel-700-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;
}

:root {
    /* Colours – guide p. 21 "central public administration" + the old site's palette */
    --gov-bar: #024476;        /* header bar, institution name, menu, footer */
    --gov-line: #005ea4;       /* frame lines, search button */
    --gov-280c: #004990;
    --gov-300c: #0079c1;
    --icon-blue: #74bdf3;      /* PDF icons on the old site */
    --text: #666666;           /* body text (old site) */
    --heading: #3e3e3e;        /* page titles (old site) */
    --link: #024476;
    --line: #d1d3d4;           /* decorative lines and frames (1.5:1 on white – not for the edges of form fields) */
    --control-border: #8c8f91; /* edges of form fields and toolbar switches: 3.25:1 on white, 3.06:1 on #f8f8f8 (WCAG 1.4.11) */
    --line-light: #e6e8ea;     /* card frames (Persons Block); decorative, with a soft shadow */
    --bg: #fff;
    /* Every colour below is a token, so the accessibility toolbar's schemes (app/config/accessibility.php →
       partials/site/accessibility-head.htm) can override them on <html>; no colour is written directly in the rules. */
    --brand: #024476;          /* text in the institution's blue: name, menu, h2, badges (the bars use --gov-bar) */
    --on-dark: #fff;           /* text on the bars (--gov-bar) and on the slider images */
    --on-line: #fff;           /* text on --gov-line: search and form buttons */
    --surface: #fff;           /* white boxes: inputs, submenus, the toolbar panel */
    --text-muted: #6d6d6d;     /* file meta, captions, small notes (contrast ≥ 4.5:1) */
    --placeholder: #767676;    /* 4.54:1 on white (#777 was 4.48:1, below WCAG 1.4.3) */
    --hover-bg: #f2f6fa;       /* submenu item hover */
    --focus: #024476;          /* focus ring on light backgrounds: 10:1 on white, 9.5:1 on #f8f8f8 (WCAG 2.4.7 / 1.4.11) */
    --focus-on-dark: #f5b400;  /* focus ring on the blue bars (header, footer): 5.5:1 on --gov-bar; on white it would be 1.8:1 */
    --badge-bg: #eaf3fb;
    --mark-bg: #fff3b0;
    --slider-bg: #e9eef3;
    --url-green: #4a7a2a;
    --error: #b3261e;
    --error-bg: #fbeaea;
    --error-text: #8a1c1c;
    --error-border: #efb8b8;
    --success-bg: #e8f3ea;
    --success-text: #1e5631;
    --success-border: #b7dcc0;
    --sidr-heading: #333;      /* "Închide" in the mobile panel */

    --font-trajan: "Trajan Pro", "Cinzel", Georgia, "Times New Roman", serif;
    --font-body: "Trebuchet MS", Helvetica, Arial, sans-serif;

    /* Measurements – old site (post-50.css) and guide p. 22 */
    --container: 80rem;
    --band-w: 80rem;          /* guide p. 22: the frame lines at the edges of the 1280px (old site: 1230, an Elementor artefact) */
    --header-h: 5.75rem;
    --logo-h: 4.5rem;
    --logo-gap: 3.125rem;
    --ministry-size: 1.1875rem;    /* the MADR name in the header bar, Trajan, uppercase: 19px at every width (client's choice, 2026-10-16; the guide allows up to 40px for the name in the bar, p. 21, and labels the text next to the logo 16px, p. 22) */
    --search-w: 10.625rem;
    --search-h: 3rem;          /* 48px */
    --search-btn-w: 2.625rem;
    --band-min-h: 4.375rem;    /* 70px between the lines: 10px, the 50px vertical line, 10px (guide p. 22); + 6px + 6px borders = 82px */
    --frame-h: .375rem;
    --frame-v: .25rem;
    --own-name-size: 1.75rem;     /* the OSPA name, Trebuchet MS, uppercase – 28px (guide p. 22, old site) */
    --menu-size: 1rem;         /* 16px (guide p. 22) */
    --menu-line: 2rem;         /* 32px: the capital's top sits 10px below the band's bottom line (guide p. 22) */
    --menu-pad: 0;
    --menu-gap: 3.125rem;      /* 50px between the top items (guide p. 22, measured); shrinks when the row would not fit */
    --submenu-size: .875rem;   /* 14px: the dropdown list, which the guide does not show */

    /* Mobile menu (OceanWP "sidr", old site; breakpoint 959px) */
    --sidr-w: 18.75rem;
    --sidr-bg: #f8f8f8;
    --sidr-text: #555;
    --sidr-border: rgba(0, 0, 0, .035);
    --sidr-sub-bg: rgba(0, 0, 0, .02);
}

* { box-sizing: border-box; }
html {
    font-size: 100%; -webkit-text-size-adjust: 100%;   /* 100% = the browser default, 16px; text sizes below are rem (1rem = 16px) */
    -webkit-tap-highlight-color: transparent;          /* no grey/blue flash on tap in mobile browsers (client's decision, 2026-10-13); the focus ring stays */
}
body {
    margin: 0;
    min-height: 100vh;             /* the footer stays at the bottom of the screen even when the content is short */
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: .9375rem;         /* 15px */
    line-height: 1.8;
    color: var(--text);
    background: var(--bg);
}
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }
img { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--gov-300c); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.menu-parent:focus-visible, summary:focus-visible {
    outline: .1875rem solid var(--focus);
    outline-offset: .125rem;
}
/* On the blue bars the dark ring would not show, so there the ring is yellow */
.gov-header, .site-footer { --focus: var(--focus-on-dark); }
.container { width: var(--container); max-width: 100%; margin: 0 auto; }
.visually-hidden {
    position: absolute !important; width: .0625rem; height: .0625rem; padding: 0; margin: -.0625rem;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: -62.4375rem; top: 0;
    background: var(--gov-bar); color: var(--on-dark); padding: .5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Header bar: 92px, #024476, content on 1280px ---------- */
.gov-header { background: var(--gov-bar); color: var(--on-dark); }
.gov-header-inner {
    min-height: var(--header-h);   /* min: a larger text size may need two lines */
    display: flex;
    align-items: center;
}
.gov-logo { display: block; line-height: 0; flex: none; }
.gov-logo img { width: var(--logo-h); height: var(--logo-h); display: block; }
.gov-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    margin-left: var(--logo-gap);
}
.gov-name {
    font-family: var(--font-trajan);
    font-weight: 400;
    font-size: var(--ministry-size);
    line-height: 1.2;
    padding-top: .3125rem;         /* optical correction: Trajan Pro capitals sit too high in the line box; the top padding moves the optical centre down (measured: centre of the capitals = centre of the bar, 46px) */
    text-transform: uppercase;
    color: var(--on-dark);
    text-decoration: none;
}
.gov-name:hover { color: var(--on-dark); text-decoration: none; }

/* Language switcher "RO | HU" (2026-10-08; until then 16×11 flags): white text on the bar (10.6:1), the current language
   bold and underlined, so it is told apart without colour (specification 1.4.1, 5.2); touch target ≥ 24×24 (WCAG 2.5.8) */
.lang-switch { margin-left: auto; margin-right: 3.125rem; display: flex; align-items: center; }
.lang-switch a {
    display: block; padding: .25rem .375rem;
    font-family: var(--font-body); font-size: .875rem; line-height: 1.2; letter-spacing: .03125rem;
    color: var(--on-dark); text-decoration: none;
}
.lang-switch a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: .25rem; }
.lang-switch a[aria-current="true"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: .125rem; text-underline-offset: .25rem; }
.lang-sep { width: .0625rem; height: .875rem; background: var(--on-dark); opacity: .6; }

.site-search { display: flex; height: var(--search-h); flex: none; }
.site-search input {
    width: var(--search-w);
    height: var(--search-h);
    border: 0;
    border-radius: .125rem 0 0 .125rem;
    padding: 0 .625rem;
    font: inherit;
    font-size: .875rem;
    color: var(--text);
    background: var(--surface);
}
.site-search input::placeholder { color: var(--placeholder); font-size: .875rem; }
.site-search button {
    width: var(--search-btn-w);
    height: var(--search-h);
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--gov-line);
    color: var(--on-line);
    cursor: pointer;
    border-radius: 0 .125rem .125rem 0;
}
.site-search button:hover { background: var(--gov-300c); }
.site-search button svg { width: 1.625rem; height: 1.625rem; }
/* The same form in the phone panel, full width under "Închide"; on the light panel the field gets a visible border (1.4.11) */
.mobile-search { margin: 0 1.25rem 1rem; }
.mobile-search input { flex: 1; width: auto; min-width: 0; border: .0625rem solid var(--control-border); border-right: 0; }

/* ---------- Institution name: 1280px band, 6px top/bottom borders, 4px vertical lines ---------- */
.name-band {
    position: relative;
    width: var(--band-w);
    max-width: 100%;
    margin: 0 auto;
    min-height: calc(var(--band-min-h) + 2 * var(--frame-h));
    border-top: var(--frame-h) solid var(--gov-line);
    border-bottom: var(--frame-h) solid var(--gov-line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 0 1.25rem;
}
.name-band::before, .name-band::after {
    content: "";
    position: absolute;
    top: .625rem;
    width: var(--frame-v);
    height: 3.125rem;
    background: var(--gov-line);
}
.name-band::before { left: 0; }
.name-band::after { right: 0; }
.own-logo { width: 3rem; height: 3rem; flex: none; }
.own-name {
    margin: 0;
    font-weight: 700;
    font-size: var(--own-name-size);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--brand);
    text-decoration: none;
}
.own-name:hover { color: var(--brand); text-decoration: none; }

/* ---------- Desktop menu: 16px, 32px line, the top items centred with 50px gaps (guide p. 22), submenus on
   hover/focus. The row never wraps: it is a grid of item/gap column pairs, the gap tracks minmax(0, --menu-gap), so
   when the container is narrower than the items plus the full gaps, the browser shrinks every gap equally (to 0 at
   the narrowest), and the items stay on one line. No JavaScript. ---------- */
.site-nav { position: relative; z-index: 20; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.site-nav > .menu-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto minmax(0, var(--menu-gap));   /* an item track, then a gap track */
    justify-content: center;
}
.site-nav > .menu-list > li { grid-column: span 2; justify-self: start; }   /* the item's box is its text, the gap follows */
.site-nav > .menu-list > li:last-child { grid-column: span 1; }           /* no gap after the last item */
.site-nav li { position: relative; }
/* The top items with a submenu are <button>s (disclosure, specification 5.1) that look exactly like the links */
.menu-parent {
    margin: 0; border: 0; background: none; -webkit-appearance: none; appearance: none;
    font: inherit; color: inherit; text-align: left; cursor: default;   /* items with a submenu are not links */
}
.site-nav a, .site-nav .menu-parent {
    display: block;
    padding: 0 var(--menu-pad);
    font-size: var(--menu-size);
    line-height: var(--menu-line);
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}
/* Underlined: hovered, open (menu.js), keyboard-focused link, current page and the top item of its section (client's
   request, 2026-10-09: the same thin line – not by colour only, specification 1.4.1); without JavaScript also the
   focused button */
.site-nav > .menu-list > li > a:hover,
.site-nav > .menu-list > li:hover > .menu-parent,
.site-nav > .menu-list > li.open > .menu-parent,
.site-nav > .menu-list > li:focus-within > a,
.site-nav:not(.js) > .menu-list > li:focus-within > .menu-parent,
.site-nav > .menu-list > li.is-current > .menu-parent,
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .375rem; }
/* The old site does not mark submenus with an arrow; the submenu opens on hover, click or keyboard. */
.site-nav .sub-menu {
    list-style: none; margin: 0; padding: .375rem 0;
    position: absolute; left: 0; top: 100%;
    min-width: 16.25rem;         /* 260px */
    background: var(--surface);
    border-top: .1875rem solid var(--gov-line);
    box-shadow: 0 .375rem 1rem rgba(0,0,0,.12);
    display: none;
}
/* The last two top items are near the band's right edge, so their submenu opens leftwards; otherwise it would run
   past the page edge in windows up to 1280px and open a horizontal scrollbar while it is open */
.site-nav > .menu-list > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
.site-nav .sub-menu a {
    font-size: var(--submenu-size);
    line-height: 1.4;
    padding: .5rem 1.125rem;
    white-space: normal;
    color: var(--text);
}
.site-nav .sub-menu a:hover, .site-nav .sub-menu a:focus { background: var(--hover-bg); color: var(--brand); }
/* Open state: class "open" set by menu.js (hover with a 300 ms close delay, click, Enter/Space, ArrowDown);
   without JavaScript (no "js" class on the nav) the CSS :hover and :focus-within rules open the submenus */
.site-nav li.open > .sub-menu,
.site-nav:not(.js) li:hover > .sub-menu,
.site-nav:not(.js) li:focus-within > .sub-menu { display: block; }

/* ---------- Mobile menu: "Meniu" button + left side panel (hidden on desktop) ---------- */
.mobile-menu-bar { display: none; text-align: center; }
.mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .9375rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.5625rem;       /* 25px; old site: .oceanwp-mobile-menu-icon a { font-size:25px; line-height:31px; color:#024476 } */
    line-height: 1.9375rem;     /* 31px */
    color: var(--brand);
    cursor: pointer;
}
.mobile-overlay {
    position: fixed; inset: 0;
    background: transparent;      /* fully transparent (client, 2026-10-07; the old site dimmed by 30%): it only catches the click beside the panel */
    z-index: 999;
}
.mobile-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidr-w);
    max-width: 85vw;
    background: var(--sidr-bg);
    color: var(--sidr-text);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    visibility: hidden;                                   /* closed: not focusable, hidden from assistive technology */
    transition: transform .3s ease, visibility 0s linear .3s;
    z-index: 1000;
    font-size: .9375rem;         /* 15px */
    line-height: 1.5;
    box-shadow: .125rem 0 .75rem rgba(0, 0, 0, .15);
}
body.mobile-nav-open .mobile-nav { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
body.mobile-nav-open { overflow: hidden; }
.mobile-nav-close {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: 1.25rem;
    border: 0;
    background: var(--sidr-bg);
    color: var(--sidr-heading);
    font: inherit;
    font-size: .8125rem;         /* 13px */
    font-weight: 600;
    letter-spacing: .0375rem;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}
.mobile-nav .menu-list > li:first-child { border-top: .0625rem solid var(--sidr-border); }
.mobile-nav li { position: relative; border-bottom: .0625rem solid var(--sidr-border); }
.mobile-nav a, .mobile-nav .menu-parent {
    display: block;
    padding: .75rem 1.25rem;
    color: var(--sidr-text);
    text-decoration: none;
}
.mobile-nav .menu-parent { cursor: pointer; width: 100%; }   /* the button fills the row like the links */
.mobile-nav a:hover, .mobile-nav li.active > a, .mobile-nav li.active > .menu-parent { color: var(--brand); }
/* The current page and its section's label, as on the desktop: underlined, whether the section is open or closed (the
   blue colour above marks the open state) */
.mobile-nav a[aria-current="page"], .mobile-nav li.is-current > .menu-parent { text-decoration: underline; text-underline-offset: .375rem; }
.mobile-nav .has-sub > a, .mobile-nav .has-sub > .menu-parent { padding-right: 3.75rem; }
.sub-toggle {
    position: absolute; right: 0; top: 0;
    width: 3.75rem; height: 3rem;
    border: 0; background: none;
    color: var(--sidr-text);
    cursor: pointer;
}
.sub-toggle span::before {
    content: "+";
    font-size: 1.25rem;
    line-height: 1.875rem;
}
.mobile-nav li.active > .sub-toggle span::before { content: "−"; }
.mobile-nav li.active > .sub-toggle { color: var(--brand); }
.mobile-nav .sub-menu {
    display: none;
    list-style: none; margin: 0; padding: 0;
    background: var(--sidr-sub-bg);
    border-top: .0625rem solid var(--sidr-border);
}
.mobile-nav li.active > .sub-menu { display: block; }
.mobile-nav .sub-menu li:last-child { border-bottom: 0; }
.mobile-nav .sub-menu a::before {
    content: "";
    display: inline-block;
    width: .375rem; height: .375rem;
    margin: 0 .75rem .0625rem .625rem;
    border: solid currentColor;
    border-width: .09375rem .09375rem 0 0;
    transform: rotate(45deg);
}

/* ---------- Content (the old site's typography) ---------- */
main {
    padding: 1.875rem 0 3.75rem;
    overflow-wrap: anywhere;   /* a URL used as link text or a slash-joined title ("Studii/cercetări/ghiduri/…") must not open a horizontal scrollbar on phones (specification 1.4.10) */
}
h1 {
    font-size: 2.25rem;          /* 36px */
    font-weight: 400;
    line-height: 1.2;
    color: var(--heading);
    margin: 0 0 1.125rem;
}
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--brand); margin: 1.75rem 0 .625rem; }   /* 24px */
p { margin: 0 0 1.25rem; }
/* Home page: the first Document Block's title is the old welcome h1 (36px, normal, centred, below the slider) */
.home-content .block-document > h2:first-child {
    font-size: 2.25rem; font-weight: 400; line-height: 1.2; color: var(--heading); text-align: center; margin: 0 0 1.125rem;
}
/* 92px between the slider and the welcome title, as on the old home page (client's decision, 2026-10-14): the slider's
   30px bottom margin + 62px padding on the block below it */
.home-content .slider + .block-document { padding-top: 3.875rem; }
.page-lead { text-align: center; font-style: italic; }

/* ---------- Slider (home page, like the old Smart Slider: 1280×400, horizontal slide 800 ms) ---------- */
.slider {
    position: relative;
    margin: 0 0 1.875rem;
    background: var(--slider-bg);
}
.slider-viewport { overflow: hidden; aspect-ratio: 16 / 5; }
.slider-track {
    margin: 0; padding: 0;
    display: flex;
    height: 100%;
    transition: transform .8s cubic-bezier(.25, .46, .45, .94);   /* easeOutQuad */
}
@media (prefers-reduced-motion: reduce) { .slider-track { transition: none; } }
.slide { flex: 0 0 100%; position: relative; margin: 0; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 3rem; height: 4rem;
    border: 0; padding: 0;
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
    filter: drop-shadow(0 .0625rem .1875rem rgba(0, 0, 0, .6));
    opacity: .85;
}
.slider-arrow:hover, .slider-arrow:focus-visible { opacity: 1; }
/* Over a photo any single colour may disappear: a yellow ring with a dark blue band inside (5.5:1 to each other) */
.slider-arrow:focus-visible { outline-color: var(--focus-on-dark); box-shadow: 0 0 0 .125rem var(--gov-bar); }
.slider-prev { left: .75rem; }
.slider-next { right: .75rem; }
.slider-single .slider-arrow { display: none; }

/* Search page (OFFLINE.SiteSearch) */
.search-page-form { display: flex; max-width: 35rem; margin: 0 0 1.5rem; }
.search-page-form input {
    flex: 1; height: 3rem; padding: 0 .75rem;
    border: .0625rem solid var(--line); border-right: 0; border-radius: .125rem 0 0 .125rem;
    font: inherit; font-size: 1rem; color: var(--text);
}
.search-page-form button {
    height: 3rem; padding: 0 1.375rem; border: 0; border-radius: 0 .125rem .125rem 0;
    background: var(--gov-line); color: var(--on-line); font: inherit; font-size: .9375rem; cursor: pointer;
}
.search-page-form button:hover { background: var(--gov-300c); }
.search-summary { color: var(--heading); }
.ss-results { list-style: none; margin: 0; padding: 0; }                /* the results are a list (specification 5.4), without markers */
.ss-result { padding: 1.125rem 0; border-bottom: .0625rem solid var(--line); }
.ss-result__title { margin: 0 0 .375rem; font-size: 1.25rem; }
.ss-result__title a { color: var(--link); text-decoration: none; }
.ss-result__title a:hover { text-decoration: underline; }
.ss-result__badge {
    display: inline-block; margin-left: .625rem; padding: .0625rem .5rem; vertical-align: .1875rem;
    border-radius: .1875rem; background: var(--badge-bg); color: var(--brand); font-size: .75rem; font-weight: 400; text-transform: uppercase;
}
.ss-result__text { margin: 0 0 .375rem; }
.ss-result__text mark { background: var(--mark-bg); color: inherit; padding: 0 .125rem; }
.ss-result__url { margin: 0; font-size: .8125rem; }
.ss-result__url a { color: var(--url-green); text-decoration: none; word-break: break-all; }
.pagination { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.pagination a, .pagination span { display: inline-block; min-width: 2.25rem; padding: .375rem .625rem; text-align: center; border: .0625rem solid var(--line); border-radius: .1875rem; text-decoration: none; }
.pagination .active span, .pagination a:hover { background: var(--gov-bar); color: var(--on-dark); border-color: var(--gov-bar); }

/* Child page list, "în curs de actualizare" notice */
.child-pages { list-style: none; margin: 0 0 1.75rem; padding: 0; columns: 2; column-gap: 2.5rem; }
.child-pages li { margin: 0 0 .5rem; break-inside: avoid; }
.child-pages a { display: inline-flex; align-items: center; gap: .5rem; color: var(--link); text-decoration: none; }
.child-pages a::before { content: "»"; color: var(--icon-blue); }
.child-pages a:hover { text-decoration: underline; }
.notice { color: var(--text); font-style: italic; }                 /* #666: contrast 5.7:1 (Lighthouse: #999 had 2.8:1) */
@media (max-width: 37.5em) { .child-pages { columns: 1; } }

/* Document Block (Media) – like the old pages: text + file list with a PDF icon (the file list also in the Persons Block) */
.block-document { margin: 0 0 2rem; }
.block-document > h2:first-child { margin-top: 0; }
.file-group-label { margin: 0 0 .375rem; }                                    /* a text line above its documents: plain body text, as on the old site */
.file-group-label--large { font-size: 1.1667rem; }                        /* 14pt = 18.67px: the old Formulare tip section titles ("1. Analiza probelor de sol") */
.file-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.file-list li { margin: 0 0 .375rem; }
/* A document link wraps like running text (client's request, 2026-10-09: as a flex row it broke into three columns –
   icon | title | meta – on a phone or with a long title): the icon hangs in front, the wrapped lines start under the
   title, and the meta stays in one piece – right after the title when it fits on its last line, else whole on the next */
.file-list a {
    display: inline-block; position: relative;
    padding-left: calc(.875rem + .5rem);                         /* icon + 8px: the title's left edge, as .file-desc */
    color: var(--link);
    text-decoration: none;
}
.file-list a:hover { text-decoration: underline; }
.file-list .icon {
    position: absolute; left: 0;
    top: .4em; top: calc((1lh - .875rem) / 2);                  /* centred on the first line (fallback without lh) */
    width: .875rem; height: .875rem; color: var(--icon-blue);
}
.file-list .meta { color: var(--text-muted); font-size: .8125rem; white-space: nowrap; }   /* contrast ≥ 4.5:1 */
/* Optional description under a document link (specification 6.2 "Descriere"): outside the link, in the meta text's
   size and colour, aligned with the title (icon .875rem + 8px gap). An item with a description or an accessible version
   (.has-extra) keeps its parts close together and gets more room after it, so it is clear which document they belong to;
   none after the last item (the list's own margin follows, and the Persons Block card keeps its padding). */
.file-list li.has-extra { margin-bottom: .875rem; }
.file-list li.has-extra:last-child { margin-bottom: 0; }
.file-list .file-desc { margin: 0; padding-left: calc(.875rem + .5rem); color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }
/* Optional accessible version under the original (specification 6.2 "Versiune accesibilă"): a second document link in the
   list's own style and/or a disclosure with the text, aligned with the title; links inside the text are underlined like
   any link in running text (1.4.1), not like the list's links */
.file-accessible { margin-top: .25rem; padding-left: calc(.875rem + .5rem); }
.file-accessible > a { margin-bottom: .125rem; }
.file-accessible-text summary { width: fit-content; max-width: 100%; color: var(--link); cursor: pointer; }   /* the ring hugs the label */
.file-accessible-text summary:hover { text-decoration: underline; }
.file-accessible-body { margin: .375rem 0 .25rem; padding: .125rem 0 .125rem .875rem; border-left: .1875rem solid var(--line); }
.file-accessible-body > :first-child { margin-top: 0; }
.file-accessible-body > :last-child { margin-bottom: 0; }
.file-list .file-accessible-body a { display: inline; text-decoration: underline; }
.file-accessible-body ul { list-style: disc; }      /* running-text lists, not the nested-list circles */
.file-accessible-body ol { list-style: decimal; }
.file-list .file-accessible-body li { margin: 0; }

/* Image Block – a grid of 1/2/3 columns, one column on small screens */
.block-image { margin: 0 0 2rem; }
.block-image > h2:first-child { margin-top: 0; }
.image-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.image-grid-2 { grid-template-columns: repeat(2, 1fr); }
.image-grid-3 { grid-template-columns: repeat(3, 1fr); }
.image-item { margin: 0; }
.image-item a { display: block; }
.image-item img { display: block; width: 100%; height: auto; border: .0625rem solid var(--line); }
.image-item figcaption { margin-top: .375rem; font-size: .8125rem; color: var(--text-muted); text-align: center; }
@media (max-width: 43.75em) {
    .image-grid-2, .image-grid-3 { grid-template-columns: 1fr; }
}

/* Persons Block – people side by side like on the old "Conducere" page (three columns of 33%, 20px between
   the texts): role 18px/600, name 14px/600, phone and documents 14px, a 45px rhythm (25.2px line + 20px).
   The old name/phone grey #7a7a7a is 4.3:1 on white, so the text token (#666, 5.7:1) is used instead. */
.block-persons { margin: 0 0 2rem; }
.block-persons > h2:first-child { margin-top: 0; }
.person-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem;
}
/* A thin frame around each person, so the people stand apart (client's request, 2026-10-07; not on the old site).
   Decorative only: the text inside identifies each person, so no contrast requirement for the line (WCAG 1.4.11). */
.person {
    margin: 0; padding: 1.25rem;
    border: .0625rem solid var(--line-light); border-radius: .1875rem;
    box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .04), 0 .125rem .5rem rgba(0, 0, 0, .06);
    font-size: .875rem; line-height: 1.8;
}
.person > :last-child, .person-files li:last-child { margin-bottom: 0; }
.person-files { margin: 0; }
.person-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.person-role {
    display: block; margin: 0 0 1.25rem;
    font-size: 1.125rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; color: var(--heading);
}
.person-name { display: block; margin: 0 0 1.25rem; font-weight: 600; color: var(--text); }
.person-contact { margin: 0 0 1.25rem; }
.person-contact a { color: var(--text); text-decoration: none; }
.person-contact a:hover { text-decoration: underline; }
.person-files li { margin: 0 0 1.25rem; }
.person-files a { display: block; width: fit-content; }   /* block-level: an inline box adds ~3px to the line, the old rhythm is 45px */
.person-files .icon { width: .875rem; height: .875rem; }
@media (max-width: 59.9375em) { .person-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 37.5em) { .person-list { grid-template-columns: 1fr; } }

/* ---------- Footer: #024476, centred (old site) ---------- */
.site-footer { background: var(--gov-bar); color: var(--on-dark); text-align: center; font-size: .8125rem; line-height: 1.6; }   /* 13px */
.site-footer a { color: var(--on-dark); text-decoration: underline; text-underline-offset: .1875rem; }   /* always underlined (specification 5.9, 1.4.1) */
.site-footer a:hover { color: var(--on-dark); text-decoration-thickness: .125rem; }
.footer-widgets { padding: .625rem 0; }
.footer-widgets p { margin: 0; }
/* The contact details from the contact page's Contact block (specification 5.9), above the social links, in the
   same 13px text; an address element is italic by default */
.footer-contact { font-style: normal; margin: 0 0 .375rem; }
.footer-contact:last-child { margin-bottom: 0; }

/* ---------- Site map page (pages/harta.htm): the page tree as a nested list in the body text style ---------- */
.sitemap-list { margin: 0 0 2rem; padding-left: 1.375rem; }
.sitemap-list ul { margin: .25rem 0 .625rem; padding-left: 1.375rem; }
.sitemap-list li { margin: 0 0 .25rem; }
.sitemap-section { font-weight: 700; color: var(--heading); }
.footer-bottom { padding: 0 0 1.25rem; font-size: .75rem; }
.footer-bottom p { margin: 0 0 .375rem; }
.footer-legal a { margin: 0 .375rem; }

/* ---------- Contact (as on the old page: two columns, form, map) ---------- */
.block-contact { margin: 0 0 2rem; }
.contact-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.block-contact h2 { font-size: 1.125rem; margin: 1.25rem 0 .375rem; }
.block-contact .contact-col > h2:first-child { margin-top: 0; }
.contact-schedule, .contact-list, .contact-links { list-style: none; margin: 0 0 1rem; padding: 0; }
.contact-schedule li, .contact-list li, .contact-links li { margin: 0 0 .25rem; }
.contact-address { font-style: normal; margin: 0 0 1rem; }
.contact-links a { display: inline-flex; align-items: center; gap: .5rem; color: var(--link); text-decoration: none; }
.contact-links a::before { content: "»"; color: var(--icon-blue); }
.contact-links a:hover { text-decoration: underline; }
.contact-form { margin: .5rem 0 2rem; }   /* full width of its column (client's request, 2026-10-06; was max-width 560px) */
.contact-form > h2 { margin-top: 0; }
.contact-form .form-row { margin: 0 0 .875rem; }
.contact-form label { display: block; margin: 0 0 .25rem; color: var(--heading); }
.contact-form .req { color: var(--gov-line); font-size: .875em; }   /* "(obligatoriu)" / "(kötelező)" in the label (specification 3.3.2), 6.6:1 on white */
.contact-form input, .contact-form textarea {
    box-sizing: border-box; width: 100%; padding: .625rem .75rem;
    border: .0625rem solid var(--control-border); border-radius: .125rem; background: var(--surface);
    font: inherit; font-size: 1rem; color: var(--text);
}
.contact-form textarea { min-height: 12.5rem; resize: vertical; }
/* Focus: a 2px blue frame inside the field's edge instead of the global ring (client's request);
   brand blue on white is 10:1, so WCAG 2.4.7 / 1.4.11 still hold */
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: .125rem solid var(--brand); outline-offset: -.0625rem; }
.contact-form .form-consent { display: flex; gap: .625rem; align-items: flex-start; }
.contact-form .form-consent input { width: auto; margin: .25rem 0 0; }
.contact-form .form-consent label { margin: 0; }
.contact-form .form-consent p { margin: 0; }
.contact-form button {
    height: 3rem; padding: 0 1.75rem; border: 0; border-radius: .125rem;
    background: var(--gov-line); color: var(--on-line); font: inherit; font-size: .9375rem; cursor: pointer;
}
.contact-form button:hover { background: var(--gov-300c); }
.contact-map iframe { display: block; width: 100%; height: 18.75rem; border: 0; }
/* Validation and response (Ospa.Contact + assets/js/contact-form.js) */
.contact-form .form-message { display: none; margin: .25rem 0 0; font-size: .8125rem; color: var(--error); }
.contact-form .form-message.jax-visible { display: block; }
.contact-form .is-invalid { border-color: var(--error); }
.contact-form .form-status { margin: 0 0 1rem; padding: .75rem .875rem; border-radius: .125rem; }
.contact-form .form-status:focus { outline: .125rem solid var(--gov-line); outline-offset: .125rem; }
.contact-form .form-success { background: var(--success-bg); color: var(--success-text); border: .0625rem solid var(--success-border); }
.contact-form .form-error,
.contact-form .form-error-summary { background: var(--error-bg); color: var(--error-text); border: .0625rem solid var(--error-border); }
/* Error summary above the form (specification 3.3.1): the title, then the errors as links to their fields */
.contact-form .form-error-summary-title { margin: 0 0 .375rem; font-weight: 700; }
.contact-form .form-error-summary ul { margin: 0; padding-left: 1.25rem; }
.contact-form .form-error-summary li { margin: 0 0 .125rem; }
.contact-form .form-error-summary a { color: var(--error-text); text-decoration: underline; }
.contact-form .form-consent .form-message { flex-basis: 100%; }
.contact-form button[disabled] { opacity: .6; cursor: default; }
/* Honeypot field of the spam protection (Ospa.Contact): off screen, never shown */
.contact-form .hp { position: absolute; left: -624.9375rem; width: .0625rem; height: .0625rem; overflow: hidden; }
/* Two-click Google map: the placeholder until the Google cookies are accepted (specification 5.10) */
.contact-map-placeholder {
    box-sizing: border-box; min-height: 18.75rem; padding: 1.5rem;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    border: .0625rem solid var(--line); background: var(--hover-bg);
}
.contact-map-placeholder p { margin: 0 0 .75rem; }
.contact-map-placeholder p:last-child { margin-bottom: 0; }
.contact-map-placeholder a { margin-left: 1rem; color: var(--link); }
.contact-map:focus { outline: none; }
/* Primary button outside the contact form: the map placeholder and the cookie bar (same look as the form's button) */
.btn-primary {
    height: 3rem; padding: 0 1.5rem; border: 0; border-radius: .125rem;
    background: var(--gov-line); color: var(--on-line); font: inherit; font-size: .9375rem; cursor: pointer;
}
.btn-primary:hover { background: var(--gov-300c); }
@media (max-width: 43.75em) { .contact-columns { grid-template-columns: 1fr; } }

/* ---------- Accessibility toolbar (partials/site/accessibility.htm, assets/js/accessibility.js) ----------
   The modes are data attributes on <html>, applied before the first paint from localStorage
   (partials/site/accessibility-head.htm, which also generates the text size steps and the scheme tokens from
   app/config/accessibility.php): data-a11y-font-size, data-a11y-scheme, data-a11y-underline, data-a11y-font.
   One fixed, always visible icon button on the right edge (client's request, like politiaromana.ro); the panel
   slides in from the right below it (class is-open). Shown only when JS runs (html.js). */
html[data-a11y-font="readable"] { --font-body: var(--a11y-readable-font); --font-trajan: var(--a11y-readable-font); }
html[data-a11y-underline] a { text-decoration: underline !important; }   /* the visitor's choice beats every "none" */
.a11y { display: none; position: fixed; right: 0; top: 14rem; z-index: 90; }   /* below the menu (header 92 + band 78 + menu 40 = 210px) */
.js .a11y { display: block; }
.a11y-toggle {
    position: relative;
    display: grid; place-items: center;
    width: 3rem; height: 3rem; padding: 0;
    border: .0625rem solid var(--on-dark); border-right: 0; border-radius: .125rem 0 0 .125rem;   /* thin edge: distinguishable on a dark page as well */
    background: var(--gov-bar); color: var(--on-dark);
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .25);
    cursor: pointer;
}
.a11y-toggle svg { width: 1.75rem; height: 1.75rem; }
.a11y-toggle:hover, .a11y-toggle[aria-expanded="true"] { background: var(--gov-line); color: var(--on-line); }   /* on-line: the icon stays visible in the inverted scheme too */
/* Green check in the corner while any setting is active (the button's accessible name says it as well) */
.a11y-badge {
    display: none; position: absolute; top: -.375rem; left: -.375rem;
    width: 1.25rem; height: 1.25rem; place-items: center;
    border-radius: 50%; border: .125rem solid var(--on-dark);
    background: #1b7f3b; color: #fff;
}
.a11y-badge svg { width: .75rem; height: .75rem; }
.a11y.is-active .a11y-badge { display: grid; }
.a11y-panel {
    position: fixed; right: 0; top: calc(14rem + 3rem + .5rem);
    width: min(18.75rem, calc(100vw - 2rem));
    max-height: calc(100vh - 18.5rem); overflow-y: auto;
    padding: .875rem 1rem .625rem;
    background: var(--surface); color: var(--text);
    border: .0625rem solid var(--line); border-right: 0; border-top: .1875rem solid var(--gov-line);
    box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .18);
    z-index: 90;
    font-size: .875rem; line-height: 1.5; text-align: left; text-transform: none;
    transform: translateX(100%); visibility: hidden;          /* closed: off-screen, not focusable, hidden from AT */
    transition: transform .3s ease, visibility 0s linear .3s;
}
.a11y-panel.is-open { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .a11y-panel { transition: none; } }
/* Short windows (a laptop at 200% zoom): below the button the panel would get only a few rows, so it opens beside the
   button, from the top of the window, as tall as its content (client's decision, 2026-10-13) */
@media (max-height: 40em) {
    .a11y-panel { top: .5rem; max-height: calc(100vh - 1rem); right: 3rem; }
}
.a11y-title { margin: 0 0 .75rem; font-size: .875rem; font-weight: 700; text-transform: uppercase; color: var(--brand); letter-spacing: .01875rem; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .625rem; }
.a11y-row output { color: var(--heading); font-weight: 700; }
.a11y-switch {
    display: flex; align-items: center; gap: .625rem;
    width: 100%; margin: 0 0 .375rem; padding: .5rem .625rem;
    border: .0625rem solid var(--control-border); border-radius: .125rem;
    background: var(--surface); color: var(--brand);
    font: inherit; text-align: left; cursor: pointer;
}
/* The box sits in a 1.375em column (the box is 1em + its two 2px borders: a pseudo-element keeps content-box sizing), the
   same column as the A+ / A− symbol below, so every button's text starts on the same line (client's request, 2026-10-09) */
.a11y-switch::before { content: ""; width: 1em; height: 1em; flex: none; margin-right: calc(.375em - .25rem); border: .125rem solid var(--brand); border-radius: .125rem; background: var(--surface); }
.a11y-switch[aria-pressed="true"]::before { background: var(--brand); box-shadow: inset 0 0 0 .1875rem var(--surface); }
/* Text size buttons: the "A−" / "A+" symbol stands where the switches have their box, in the same 1.375em column (wide
   enough for the bold symbol at every text size); the whole text is the name */
.a11y-step::before { content: none; }
.a11y-sym { flex: none; width: 1.375em; font-weight: 700; white-space: nowrap; }
.a11y-step[aria-disabled="true"] { opacity: .45; cursor: default; }
.a11y-reset { margin-top: .375rem; padding: .375rem 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Responsive ---------- */
@media (max-width: 82.5em) {
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .name-band { width: auto; margin: 0 1.25rem; }
}
@media (max-width: 68.75em) {
    .lang-switch { margin-right: 1.5rem; }
}
/* Up to 1030px the desktop menu's text is 14px, so the gaps between the items stay wider */
@media (max-width: 64.375em) {
    .site-nav { --menu-size: .875rem; }
}

/* On desktop the mobile panel and the overlay do not exist at all (no duplicate menu for screen readers) */
@media (min-width: 60em) {
    .mobile-nav, .mobile-overlay { display: none; }
}

/* Below 960px: the desktop menu and the bar's search disappear, the "Meniu" button + side panel appear (old site: 959px);
   the search moves into the panel */
@media (max-width: 59.9375em) {
    .site-nav, .gov-header .site-search { display: none; }
    .mobile-menu-bar { display: block; }

    .gov-header-inner { height: auto; min-height: var(--header-h); padding-top: .625rem; padding-bottom: .625rem; }   /* only top/bottom: the container's 20px side padding stays, so the logo and the name keep off the screen edges */
    .gov-title { flex-direction: column; align-items: flex-start; gap: .375rem; margin-left: 1.875rem; }
    .gov-name { line-height: 1.15; }
    .lang-switch { margin: 0 0 0 -.375rem; }   /* the text aligned left, but the touch target stays ≥ 24px (no padding-left:0) */

    .own-name { font-size: 1.5625rem; }
    /* the page title and the home greeting: 28px on tablets, 22px on phones, in proportion to the header's names (client's decision, 2026-10-13) */
    h1, .home-content .block-document > h2:first-child { font-size: 1.75rem; }
}
@media (max-width: 37.5em) {
    .gov-logo img { width: 3.5rem; height: 3.5rem; }
    .gov-title { margin-left: 1rem; }
    .own-name { font-size: 1.25rem; }
    .name-band::before, .name-band::after { display: none; }
    h1, .home-content .block-document > h2:first-child { font-size: 1.375rem; }
}
@media print {
    .site-search, .site-nav, .mobile-menu-bar, .mobile-nav, .mobile-overlay, .skip-link, .a11y { display: none; }
}

/* ---------- Cookie bar (partials/cookieBanner/default.htm; accessibility specification 5.10) ----------
   A non-modal bar at the bottom of the viewport: sticky at the end of the body, so it never covers content for
   good (it scrolls away at the end of the page). White, the site's blue rule on top, the text left and the two
   equal buttons right; stacked on phones. Removed by assets/js/cookies.js after the decision. */
.cookie-bar {
    position: sticky; bottom: 0; z-index: 30;
    background: var(--surface); color: var(--text);
    border-top: .1875rem solid var(--gov-line); box-shadow: 0 -.125rem .5rem rgba(0,0,0,.08);
    font-size: .9375rem; line-height: 1.5;
}
.cookie-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: .75rem 1rem; }
.cookie-bar-text { margin: 0; }
.cookie-bar-text a { color: var(--link); }
.cookie-bar-actions { display: flex; gap: .625rem; flex-shrink: 0; }
@media (max-width: 43.6875em) {
    .cookie-bar-inner { flex-direction: column; align-items: stretch; }
    .cookie-bar-actions .btn-primary { flex: 1 1 0; }
}
@media print { .cookie-bar { display: none; } }

/* ---------- Cookie policy page (pages/cookies.htm, partials/cookieManager/default.htm) ---------- */
.cookie-policy-text { margin: 0 0 2rem; }
/* The block's title, then the groups, 36px (2.25rem) between each of them (client's decision, 2026-10-16) */
.cookie-manager { max-width: 47.5rem; margin: 0 0 2rem; }
.block-cookie-settings > h2 { margin-bottom: 2.25rem; }
.cookie-group + .cookie-group { margin-top: 2.25rem; }
.cookie-group h3 { font-size: 1.125rem; margin: 0 0 .375rem; }
.cookie-group-text { margin: 0 0 .75rem; }
/* The group's cookies stand inside it: indented, held together by a grey rule on their left (as in the TDW project, in
   this site's colours), parted from each other by thin rules; the rule's ends line up with the first and the last row */
.cookie-list { list-style: none; margin: 0 0 0 1.5rem; padding: 0 0 0 1.25rem; border-left: .1875rem solid var(--line); }
.cookie-item { display: flex; gap: 1rem; align-items: flex-start; padding: .75rem 0; border-bottom: .0625rem solid var(--line); }
.cookie-item:first-child { padding-top: .25rem; }
.cookie-item:last-child { padding-bottom: .25rem; border-bottom: 0; }
/* The checkbox is drawn by the theme so that a required cookie's (checked, disabled) box looks the same as an accepted
   optional one – the browser's own disabled checkbox is greyed. The input keeps `disabled`: the form does not send it and
   the screen reader says so, with the hidden "always active" note next to the name. Tokens, so the toolbar's colour
   schemes apply; forced-colours mode gets the system checkbox back. */
.cookie-item input {
    appearance: none; -webkit-appearance: none;
    margin: .3125rem 0 0; width: 1.125rem; height: 1.125rem; flex-shrink: 0; position: relative;
    border: .0625rem solid var(--control-border); border-radius: .125rem; background: var(--surface); cursor: pointer;
}
.cookie-item input:checked { background: var(--brand); border-color: var(--brand); }
.cookie-item input:checked::after {
    content: ''; position: absolute; left: .3125rem; top: .0625rem; width: .3125rem; height: .625rem;
    border: solid var(--on-dark); border-width: 0 .125rem .125rem 0; transform: rotate(45deg);
}
.cookie-item input:disabled { cursor: default; }
.cookie-item input:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
@media (forced-colors: active) {
    .cookie-item input { appearance: auto; -webkit-appearance: auto; }
    .cookie-item input:checked::after { content: none; }
}
.cookie-item label { font-weight: 700; color: var(--heading); }
.cookie-item-text { margin: .125rem 0 0; }
.cookie-item-text p { margin: 0; }
.cookie-expiry { margin: 1.25rem 0; }
.cookie-expiry label { display: block; margin: 0 0 .25rem; color: var(--heading); }
.cookie-expiry select {
    padding: .5rem .75rem; border: .0625rem solid var(--control-border); border-radius: .125rem;
    background: var(--surface); font: inherit; font-size: 1rem; color: var(--text);
}