/* ============================================
   UN Accreditation — UKAS purple design system
   PANTONE 2685 C / HEX #330072 — UK accreditation industry palette
   Status colors preserved from prior warm-brown system per 2026-05-25 brief.
   ============================================ */

:root {
    /* Surfaces */
    --bg-page:        oklch(0.969 0.013 90);   /* #FAF9F5 — Claude cream */
    --bg-surface:     #FFFFFF;
    --bg-subtle:      oklch(0.945 0.020 70);   /* #F2EADE — warm peach hover */
    --bg-rose:        oklch(0.918 0.035 45);   /* #F8DDCB — rose accent */
    --bg-cream:       oklch(0.952 0.025 80);   /* #F5EAD8 — cream surface */

    /* Text */
    --text-primary:   oklch(0.200 0.020 50);   /* #1F1611 — warm near-black */
    --text-secondary: oklch(0.470 0.030 55);   /* #6B5440 — medium warm brown */
    --text-muted:     oklch(0.585 0.025 60);   /* #8B7560 — lighter brown */

    /* Borders */
    --border-default: oklch(0.875 0.020 65);   /* #E5D9CB — warm taupe */
    --border-strong:  oklch(0.760 0.028 65);   /* #C9B8A4 — deeper taupe */

    /* Brand — UKAS purple (PANTONE 2685 C / #330072)
       Industry positioning: matches UKAS (UK National Accreditation Body)
       2021 rebrand for forward-thinking, premium authority signaling. */
    --brand-primary:        #330072;   /* UKAS purple — primary brand */
    --brand-primary-dark:   #1F0048;   /* Deep emphasis (headers, footers) */
    --brand-primary-light:  #5B2A9E;   /* Hover states, soft accents */
    --brand-tint:           #F4F0FA;   /* Subtle backgrounds, washes */
    /* Backward-compat aliases — 80 existing call sites work unchanged */
    --brand-hover:    var(--brand-primary-dark);
    --brand-accent:   var(--brand-primary);
    --brand-subtle:   var(--brand-tint);

    /* Status */
    --status-valid:   oklch(0.520 0.090 130);  /* #6B8C3D — warm olive */
    --status-expired: oklch(0.455 0.120 30);   /* #A8483A — warm red-brown */
    --status-suspended: oklch(0.560 0.105 75); /* #A87520 — warm amber */

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;

    /* Layout */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px 0 oklch(0.200 0.020 50 / 0.05);
    --shadow-md: 0 4px 6px -1px oklch(0.200 0.020 50 / 0.10);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-page);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }

/* Layout primitives */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ============================================
   Canonical container + section system (responsive consistency pass 2026-05-28)
   .un-container is a THEME-IMMUNE wrapper. The WP-clone bundles Bootstrap, whose
   .container { width: 1170px } beats app.css's max-width:1200 — so the shared
   header/footer rendered 1170 on marketing pages but 1200 on directory pages
   (the footer visibly jumped width on navigation). Bootstrap never targets .un-*,
   so .un-container resolves to the SAME fluid 1200 in BOTH layouts: one site-wide
   width for chrome and for contained text/cards. padding-inline only, so BEM
   chrome classes keep ownership of vertical padding.
   .un-section is the full-bleed band (background edge-to-edge) whose inner
   .un-container holds the 1200 column — gives directory/verify pages the home
   page's banded rhythm instead of cards floating on the cream page background. */
.un-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

.un-section { padding-block: clamp(48px, 6vw, 80px); }
.un-section--surface { background: var(--bg-surface); }
.un-section--tint    { background: var(--brand-tint); }
.un-section--cream   { background: var(--bg-cream); }
.un-section--page    { background: var(--bg-page); }

@media (max-width: 768px) {
    .un-container { padding-inline: 16px; }
}

/* Directory/verify layout (main.php): pin the footer to the viewport bottom on
   short pages (verify forms) so content no longer floats above a large empty
   gap of page background. Scoped to body.un-layout so the WP-clone body, which
   has its own full-height theme wrapper, is left untouched. */
body.un-layout { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-surface); }
body.un-layout > main { flex: 1 0 auto; }

/* Components — minimal set for P2 */
.btn-primary {
    background: var(--brand-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600; /* FIX 5: match the "Verify Now" CTA — one primary-button weight site-wide */
    cursor: pointer;
    transition: background 150ms ease;
    display: inline-block;
    text-decoration: none;
}
.btn-primary:hover { background: var(--brand-hover); color: white; text-decoration: none; }

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    display: inline-block;
    text-decoration: none;
}
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--brand-primary); text-decoration: none; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
}
.badge-valid    { background: oklch(0.520 0.090 130 / 0.12); color: var(--status-valid); }
.badge-expired  { background: oklch(0.455 0.120 30 / 0.12);  color: var(--status-expired); }
.badge-suspended{ background: oklch(0.560 0.105 75 / 0.12);  color: var(--status-suspended); }

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Header */
.site-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header .brand {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
}
.site-header .brand:hover { text-decoration: none; color: var(--brand-primary); }
.site-nav {
    display: flex;
    gap: 32px;
    align-items: center;
}
.site-nav a {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9375rem;
}
.site-nav a:hover { color: var(--brand-primary); text-decoration: none; }

/* Footer */
.site-footer {
    background: var(--bg-cream);
    border-top: 1px solid var(--border-default);
    padding: 48px 0;
    margin-top: 80px;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.site-footer a {
    color: var(--text-secondary);
}
.site-footer a:hover {
    color: var(--brand-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .site-nav { gap: 16px; font-size: 0.875rem; }
    .container { padding: 0 16px; }
}


/* Mobile vs desktop nav (P5) */
.site-nav--mobile { display: none; position: relative; }
.site-nav--desktop { display: flex; gap: 24px; align-items: center; }
@media (max-width: 768px) {
    .site-nav--desktop { display: none; }
    .site-nav--mobile { display: block; }
}
.site-header { position: relative; }

/* ============================================
   Vendor overrides (Radiantthemes / WP-clone pages)
   Minimum specificity to win over bundled vendor CSS without restyling
   unrelated Bootstrap/utility classes. Added per 2026-05-25 rebrand brief.
   ============================================ */

/* Radiantthemes button component — used for CTAs like "DISCOVER MORE" on home.
   Vendor renders this with a Google-blue background (#3367D6) that the var()
   cascade does not reach. Override scoped to this exact component class. */
.radiantthemes-button .radiantthemes-button-main {
    background-color: var(--brand-primary) !important;
}
.radiantthemes-button .radiantthemes-button-main:hover,
.radiantthemes-button .radiantthemes-button-main:focus {
    background-color: var(--brand-primary-dark) !important;
}

/* The same Google-blue (#3367D6) leftover also shows on the iconbox icons
   (About + Contact icon cards) and the Contact Form 7 "Send Message" submit
   button — the rebrand reached the buttons but not these. Recolor to brand purple. */
.radiantthemes-iconbox-holder .icofont { color: var(--brand-primary) !important; }
.wpcf7-submit { background-color: var(--brand-primary) !important; }
.wpcf7-submit:hover,
.wpcf7-submit:focus { background-color: var(--brand-primary-dark) !important; }

/* Readability: the "Trust Through Accreditation" body (what-is-accreditation) ran
   the full ~1120px width, justified — roughly a 140-character measure. Constrain
   it to a comfortable centered column and left-align (justify causes uneven
   spacing rivers). Scoped to that row only. */
.vc_custom_1703599937478 .wpb_wrapper { max-width: 760px; margin-left: auto; margin-right: auto; }
.vc_custom_1703599937478 p { text-align: left !important; } /* beats the inline style="text-align: justify" */

/* === Verify router cards (/verify) === */
.verify-router-card {
    display: block;
    text-decoration: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    color: var(--text-primary);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.verify-router-card:hover,
.verify-router-card:focus {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary-light);
    text-decoration: none; /* the whole card is a link — don't underline all its text on hover */
}
/* Underline affordance on the title only (not the description/CTA). */
.verify-router-card:hover .verify-router-card__title,
.verify-router-card:focus-visible .verify-router-card__title {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.verify-router-card__eyebrow {
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.verify-router-card__title {
    font-size: 1.375rem;
    margin: 0 0 8px;
    color: var(--text-primary);
    font-weight: 600;
}
.verify-router-card__desc {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 16px;
    line-height: 1.55;
}
.verify-router-card__count {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.verify-router-card__cta {
    margin-top: 12px;
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 0.9375rem;
}

/* ============================================
   Unified site header (partials/header.php)
   Used by both main.php and wp_style.php layouts. Vanilla CSS/JS only —
   no Alpine dependency (wp_style.php does not load Alpine).
   ============================================ */
.site-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    position: relative;
    z-index: 50;
}
.site-header__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.site-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header__logo { height: 44px; width: auto; display: block; }
.site-nav--desktop {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    justify-content: center;
}
.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 150ms ease, border-color 150ms ease;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 0.9375rem;
}
.nav-link:hover { color: var(--brand-primary); }
.nav-link--active {
    color: var(--brand-primary);
    font-weight: 600;
}
.nav-dropdown { position: relative; }
.nav-dropdown__chevron { font-size: 0.625rem; }
.nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 8px 0;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    z-index: 60;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {   /* JS/keyboard open (FIX 1 nav restoration) */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Chevron flips when the menu is open (hover, focus-within, or JS/keyboard). */
.nav-dropdown__chevron { transition: transform 150ms ease; }
.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown:focus-within .nav-dropdown__chevron,
.nav-dropdown.is-open .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown__menu a {
    display: block;
    padding: 10px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9375rem;
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus { /* keyboard focus matches hover affordance */
    background: var(--brand-tint);
    color: var(--brand-primary);
}
.site-header__cta {
    display: inline-flex;
    align-items: center;
    background: var(--brand-primary);
    color: var(--bg-surface) !important;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background 150ms ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.site-header__cta:hover,
.site-header__cta:focus {
    background: var(--brand-primary-dark);
    color: var(--bg-surface) !important;
}
.site-header__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.site-header__hamburger .hamburger-icon-close { display: none; }
.site-header__hamburger.is-open .hamburger-icon-open { display: none; }
.site-header__hamburger.is-open .hamburger-icon-close { display: inline; }
.site-nav--mobile {
    display: none;
    flex-direction: column;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
}
.site-nav--mobile .un-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 16px;
    padding-bottom: 16px;
}
.mobile-nav-link {
    display: block;
    padding: 12px 0;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-default);
}
.mobile-nav-link--active { color: var(--brand-primary); font-weight: 600; }
.mobile-nav-group { padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.mobile-nav-group summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 0;
    list-style: none;
}
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary::after { content: " +"; font-weight: 400; }
.mobile-nav-group[open] summary::after { content: " \2212"; }
.mobile-nav-group a {
    display: block;
    padding: 10px 0 10px 12px;
    color: var(--text-primary);
    text-decoration: none;
}
.mobile-nav-cta {
    display: inline-flex;
    justify-content: center;
    background: var(--brand-primary);
    color: var(--bg-surface) !important;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    margin-top: 12px;
    text-align: center;
}
.mobile-nav-cta:hover { background: var(--brand-primary-dark); }

@media (max-width: 1023px) {
    .site-nav--desktop { display: none; }
    .site-header__cta { display: none; }
    .site-header__hamburger { display: inline-flex; }
    .site-nav--mobile:not([hidden]) { display: flex; }
}
/* FIX 1: with 4 dropdowns + 3 links, tighten the desktop nav between 1024 and
   1199px (incl. the 13" laptop) so the bar never overflows or wraps. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .site-nav--desktop { gap: 14px; }
    .site-nav--desktop .nav-link { font-size: 0.8125rem; padding: 8px 0; }
    .site-header__row { gap: 12px; }
    .site-header__cta { padding: 9px 14px; font-size: 0.875rem; }
}

/* ============================================
   Unified site footer (partials/footer.php)
   Purple background, white text. Logo PNG (dark navy on transparent) is
   inverted to white via CSS filter — avoids needing a separate white asset.
   ============================================ */
.site-footer {
    background: var(--brand-primary-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 56px 0 0;
    margin-top: 80px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.site-footer__brand-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
}
.site-footer__logo {
    height: 40px;
    width: auto;
    display: block;
    /* PNG is dark navy on transparent — invert to white for the dark footer */
    filter: brightness(0) invert(1);
}
.site-footer__tagline {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    max-width: 320px;
}
.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.site-footer__heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.site-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 150ms ease;
    font-size: 0.9375rem;
}
.site-footer a:hover,
.site-footer a:focus {
    color: #ffffff;
    text-decoration: underline;
}
.site-footer__contact-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.78);
}
.site-footer__contact-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}
.site-footer__bar {
    margin-top: 48px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}
.site-footer__version {
    font-family: var(--font-mono);
}
/* FIX 4 (2026-05-29): footer alignment + rhythm. On marketing pages the WP theme
   bled centering into the footer columns — short links/contact items rendered
   centered under left-aligned headings, and the result differed from the
   directory (main.php) footer. Force consistent left alignment on BOTH layouts
   and tidy the vertical rhythm so every column lines up under its heading. */
.site-footer__grid { align-items: start; }
.site-footer__col { align-items: flex-start; text-align: left; }
/* The WP theme sprinkles assorted left margins on footer descendants (links
   ~24px, contact items ~16px, labels ~40px), knocking every column out of line
   with its heading — and differing from the WP-free directory footer. Reset the
   left margin across footer-column descendants; vertical rhythm comes from the
   flex `gap`, so nothing depends on these margins. */
.site-footer__col,
.site-footer__col * { margin-left: 0 !important; }
.site-footer__col a { text-align: left; }
.site-footer__contact-item { align-items: flex-start; text-align: left; }
.site-footer__contact-item + .site-footer__contact-item { margin-top: 14px; }
.site-footer__bar { text-align: left; }
.site-footer__copyright { margin: 0; }
@media (max-width: 1023px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
    .site-footer__bar {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ============================================
   Phase 4 polish — universal micro-interactions
   Vanilla CSS only. Respects prefers-reduced-motion.
   ============================================ */

/* Sticky header — stays pinned after the hero scrolls past. backdrop-filter
   shows a frosted-glass effect once content scrolls behind it. */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}

/* Universal focus visibility — purple outline on keyboard-navigation only.
   Mouse clicks do not show the ring (per :focus-visible spec). */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--brand-primary-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
    border-color: var(--brand-primary);
}
/* Soft tint glow on text-input focus for forms that need extra emphasis */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-tint);
    outline: none;
}

/* prefers-reduced-motion — disable transitions + transforms for users
   who request it (motion sickness, vestibular disorders). All animations
   collapse to near-instant, scroll-behavior becomes auto. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .verify-router-card:hover,
    .verify-router-card:focus {
        transform: none !important;
    }
    .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-surface); }
}

/* Hero text fade-in on scroll (IntersectionObserver-driven).
   Initial: invisible + offset; .--visible class swaps to revealed.
   Respects prefers-reduced-motion via the global gate above. */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms ease, transform 400ms ease;
}
.fade-in-on-scroll--visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .fade-in-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   FIX (2026-05-29): readable chrome type on the 13" / WP-clone pages.
   The WP-clone marketing pages set html { font-size: 62.5% } (root = 10px), so
   the shared header/footer — authored in rem — rendered at ~60% (nav/footer ~9px)
   there, while the directory pages (root 16px) showed the intended 15px. Pin the
   shared chrome type in PX so it renders the same readable size on BOTH layouts.
   px is immune to the page's root font-size. (Sizes match what the directory
   pages already showed and fit at every width, so this can't introduce overflow.)
   ============================================ */
.site-header .nav-link { font-size: 15px; }
.site-header .nav-dropdown__chevron { font-size: 10px; }
.nav-dropdown__menu a { font-size: 15px; }
.site-header__cta { font-size: 15px; }
.site-nav--mobile .mobile-nav-link,
.site-nav--mobile .mobile-nav-group a { font-size: 16px; }
.site-nav--mobile .mobile-nav-group summary { font-size: 13px; }
.site-footer { font-size: 15px; }
.site-footer__tagline,
.site-footer a,
.site-footer__contact-item { font-size: 15px; }
.site-footer__heading { font-size: 14px; }
.site-footer__contact-label { font-size: 12px; }
.site-footer__bar { font-size: 13px; }
/* 13"/small-laptop band (1024–1199): 4 dropdowns + 3 links — keep nav readable
   but a touch tighter so it never wraps or overflows. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .site-header .nav-link { font-size: 13.5px; }
}

/* ============================================
   FIX (2026-05-29): home hero — pure-CSS full-bleed, sizing in <head>.
   These rules used to live in an inline <style> AFTER the hero element in the
   body, so the hero rendered at its content height (~209px) and then jumped to
   600px once that inline style parsed — a large CLS (~0.36) on every load. The
   old un-enhance.js bleed() also re-laid-out the hero post-load (CLS + a jump
   while resizing). Defining the container size here (app.css is in <head>) sets
   600px on first paint, and the CSS full-bleed needs no JS. overflow-x:clip on
   body absorbs the 100vw-vs-scrollbar delta without breaking the sticky header.
   ============================================ */
body { overflow-x: clip; }
.un-hero-slider {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: 600px;
    overflow: hidden;
    background: #000;
}
@media (max-width: 768px) {
    .un-hero-slider { height: 420px; }
}