/* ============================================================================
 * HEY LSIP — Unified design system
 * Single source of truth for tokens + layout primitives + utilities.
 * Loaded AFTER style.css/HEYLSIPStyle.css so it wins on specificity ties.
 *
 * Tokens are exposed as CSS custom properties so per-page CSS files
 * (events.css / sectors.css / news.css / videos.css / minutes.css) can
 * reference --lsip-* variables instead of hardcoding hex values.
 * ============================================================================ */

:root {
    /* ── Colour palette ──────────────────────────────────────────────── */
    --lsip-brand:        #14387a;   /* primary heading + nav blue            */
    --lsip-brand-dark:   #0f2a5c;   /* hover / pressed                       */
    --lsip-brand-light:  #e6ecf5;   /* tint backgrounds, chips               */
    --lsip-accent:       #d77c1a;   /* CTA hover, warnings, secondary accent */
    --lsip-accent-light: #fce9d4;
    --lsip-success:      #1f7a4a;
    --lsip-success-bg:   #e0f2e6;
    --lsip-danger:       #c0392b;
    --lsip-danger-bg:    #f6e2df;

    --lsip-ink:          #1a1a1a;   /* darkest text, page headings           */
    --lsip-text:         #2a2a2a;   /* body copy                             */
    --lsip-text-muted:   #555555;
    --lsip-text-soft:    #777777;
    --lsip-line:         #e3e1d8;   /* borders                               */
    --lsip-line-strong:  #c9c5b8;
    --lsip-paper:        #f6f6f1;   /* warm off-white page background         */
    --lsip-card:         #ffffff;
    --lsip-overlay:      rgba(20, 56, 122, 0.55);

    /* ── Typography ──────────────────────────────────────────────────── */
    --lsip-font:         "Inter", "Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif;
    --lsip-font-mono:    "JetBrains Mono", Consolas, ui-monospace, monospace;

    --lsip-fs-xs:        0.78rem;
    --lsip-fs-sm:        0.88rem;
    --lsip-fs-base:      1rem;
    --lsip-fs-md:        clamp(0.98rem, 0.95rem + 0.2vw, 1.06rem);
    --lsip-fs-lg:        clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
    --lsip-fs-xl:        clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --lsip-fs-2xl:       clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --lsip-fs-3xl:       clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
    --lsip-fs-display:   clamp(1.85rem, 1.1rem + 3vw, 3.5rem);

    /* ── Fluid section spacing ───────────────────────────────────────── */
    --lsip-section-y:        clamp(2.5rem, 4vw, 4rem);
    --lsip-section-y-tight:  clamp(1.75rem, 2.5vw, 2.5rem);
    --lsip-section-y-airy:   clamp(3.5rem, 6vw, 6rem);
    --lsip-section-px:       clamp(1rem, 2.5vw, 1.5rem);

    --lsip-lh-tight:     1.2;
    --lsip-lh-snug:      1.35;
    --lsip-lh-body:      1.65;
    --lsip-lh-relaxed:   1.75;

    /* ── Spacing rhythm (4px scale) ──────────────────────────────────── */
    --lsip-sp-1:  0.25rem;
    --lsip-sp-2:  0.5rem;
    --lsip-sp-3:  0.75rem;
    --lsip-sp-4:  1rem;
    --lsip-sp-5:  1.25rem;
    --lsip-sp-6:  1.5rem;
    --lsip-sp-8:  2rem;
    --lsip-sp-10: 2.5rem;
    --lsip-sp-12: 3rem;
    --lsip-sp-16: 4rem;
    --lsip-sp-24: 6rem;

    /* ── Layout ──────────────────────────────────────────────────────── */
    --lsip-radius-sm: 4px;
    --lsip-radius:    8px;
    --lsip-radius-lg: 12px;
    --lsip-radius-pill: 999px;

    --lsip-container-narrow: 820px;
    --lsip-container:        1140px;
    --lsip-container-wide:   1320px;
    --lsip-container-ultra:  1440px;

    --lsip-shadow-sm: 0 1px 3px rgba(15, 42, 92, 0.06);
    --lsip-shadow:    0 6px 18px rgba(15, 42, 92, 0.08);
    --lsip-shadow-lg: 0 12px 30px rgba(15, 42, 92, 0.12);

    --lsip-ease:      cubic-bezier(.2,.7,.3,1);
}

/* ── Containers ──────────────────────────────────────────────────────── */
.site-container {
    width: 100%;
    max-width: var(--lsip-container);
    margin: 0 auto;
    padding-left: var(--lsip-section-px);
    padding-right: var(--lsip-section-px);
}
.site-container--narrow { max-width: var(--lsip-container-narrow); }
.site-container--wide   { max-width: var(--lsip-container-wide); }
.site-container--ultra  { max-width: var(--lsip-container-ultra); }

/* ── Hero pattern ────────────────────────────────────────────────────── */
.site-hero {
    position: relative;
    width: 100%;
    min-height: clamp(220px, 26vw, 320px);
    background-color: var(--lsip-brand);
    background-size: cover;
    /* Bias to upper-third so face/head photos don't crop at the chin */
    background-position: center 30%;
    color: white;
    overflow: hidden;
}
.site-hero--tall  { min-height: clamp(260px, 32vw, 420px); }
.site-hero--short { min-height: clamp(160px, 16vw, 200px); }

.site-hero::before {
    content: "";
    position: absolute; inset: 0;
    /* Two-stop linear from bottom-left dark brand to top-right transparent + a base
       60% brand wash so text always reads white regardless of photo brightness. */
    background:
        linear-gradient(45deg, rgba(15,42,92,0.78) 0%, rgba(15,42,92,0.45) 50%, rgba(15,42,92,0.30) 100%),
        linear-gradient(0deg, rgba(15,42,92,0.30) 0%, rgba(15,42,92,0.30) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Defensive text-align — HEYLSIPStyle.css has `body { text-align: center }`
   from the legacy template. Override at body level so the whole new design
   system reads left-to-right by default. Centred bits opt in explicitly. */
body { text-align: left !important; }

.site-hero,
.site-hero__inner,
.site-hero h1,
.site-hero__title,
.site-hero p,
.site-hero__sub,
.site-hero__eyebrow,
.site-hero__cta { text-align: left; }

.site-hero__inner {
    position: relative; z-index: 2;
    max-width: var(--lsip-container);
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--lsip-section-px) clamp(2rem, 4vw, 3rem);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    min-height: inherit;
}
.site-hero--tall .site-hero__inner {
    padding-top: clamp(3.5rem, 7vw, 6rem);
}

.site-hero__eyebrow {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--lsip-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    opacity: 1;
    color: white;
    margin-bottom: var(--lsip-sp-3);
    padding: 4px 10px;
    background: rgba(15, 42, 92, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--lsip-radius-sm);
    border-left: 3px solid var(--lsip-accent);
}
.site-hero h1, .site-hero__title {
    font-size: var(--lsip-fs-display);
    font-weight: 700;
    line-height: var(--lsip-lh-tight);
    letter-spacing: -0.02em;
    margin: 0 0 var(--lsip-sp-3);
    color: white;
    max-width: 56rem;
    overflow-wrap: break-word;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.site-hero p, .site-hero__sub {
    font-size: var(--lsip-fs-md);
    line-height: var(--lsip-lh-snug);
    margin: 0 0 var(--lsip-sp-5);
    max-width: 44rem;
    opacity: 0.95;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.site-hero__cta {
    display: flex; flex-wrap: wrap; gap: var(--lsip-sp-3);
    margin-top: var(--lsip-sp-1);
}

@media (min-width: 1100px) {
    .site-hero p, .site-hero__sub { font-size: var(--lsip-fs-lg); }
}

@media (max-width: 480px) {
    .site-hero__cta { width: 100%; }
    .site-hero__cta .site-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Back link ───────────────────────────────────────────────────────── */
.site-back {
    display: inline-flex; align-items: center; gap: var(--lsip-sp-1);
    color: var(--lsip-text-muted);
    text-decoration: none;
    font-size: var(--lsip-fs-sm);
    margin-bottom: var(--lsip-sp-4);
    transition: color 0.15s var(--lsip-ease);
}
.site-back:hover { color: var(--lsip-brand); }

/* ── Section wrapper ─────────────────────────────────────────────────── */
.site-section {
    padding: var(--lsip-section-y) 0;
}
.site-section--tight { padding: var(--lsip-section-y-tight) 0; }
.site-section--airy  { padding: var(--lsip-section-y-airy) 0; }
.site-section--paper { background: var(--lsip-paper); }
.site-section--brand { background: var(--lsip-brand); color: white; }
.site-section--brand h2, .site-section--brand h3 { color: white; }

/* Stacked sections of the same background colour shouldn't double-pad —
   but a white→paper transition still needs its own breathing room so the
   paper band reads as a distinct strip. Only collapse padding when the
   adjacent backgrounds match. */
.site-section--paper + .site-section--paper { padding-top: 0; }

/* A section followed by a brand CTA band shouldn't have heavy bottom padding —
   the CTA band's own top padding gives plenty of breathing room. */
.site-section:has(+ .site-cta-band) { padding-bottom: clamp(1rem, 2vw, 1.5rem); }

/* Universal vertical rhythm — every section-like block share the same
   clamp range so adjacency stays consistent. */
.upcoming-events-block,
.newsletter-block {
    padding: var(--lsip-section-y) var(--lsip-section-px);
    margin: 0;
}
.newsletter-block { border: 0 !important; }   /* drop the thin top/bottom strips that show as white slivers */

/* Same-coloured siblings collapse their inner gap. */
.site-section--paper + .upcoming-events-block,
.upcoming-events-block + .newsletter-block,
.upcoming-events-block + .site-section--paper,
.newsletter-block + .site-section--paper { padding-top: 0; }

/* Anything that precedes the CTA band gets tightened bottom padding so the
   transition from light → blue isn't visually pinched. */
.site-section:has(+ .site-cta-band),
.upcoming-events-block:has(+ .site-cta-band),
.newsletter-block:has(+ .site-cta-band) { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* The CTA band's bottom edge sits flush against the footer's top — no white
   gap. The footer's own padding (~4rem at desktop) provides the rhythm. */
.site-cta-band + .site-footer,
.site-cta-band { margin-bottom: 0; }

.site-section__head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
    gap: var(--lsip-sp-4);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.site-section__head h2 {
    margin: 0;
    font-size: var(--lsip-fs-2xl);
    color: var(--lsip-brand);
    font-weight: 700;
    line-height: var(--lsip-lh-tight);
    letter-spacing: -0.01em;
}
.site-section__head a, .site-section__head .site-link {
    color: var(--lsip-brand);
    font-weight: 600;
    font-size: var(--lsip-fs-sm);
    text-decoration: none;
}
.site-section__head a:hover { color: var(--lsip-accent); }

.site-eyebrow {
    display: inline-block;
    font-size: var(--lsip-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--lsip-accent);
    margin-bottom: var(--lsip-sp-2);
}

/* ── Detail / article container ──────────────────────────────────────── */
.site-detail {
    max-width: var(--lsip-container-narrow);
    margin: 0 auto;
    padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--lsip-section-px) clamp(2rem, 4vw, 3rem);
    color: var(--lsip-text);
}
.site-detail h1 {
    font-size: var(--lsip-fs-3xl);
    line-height: var(--lsip-lh-tight);
    color: var(--lsip-brand);
    margin: 0 0 var(--lsip-sp-4);
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* ── Meta-row (date / category / source chips) ───────────────────────── */
.site-meta-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin: var(--lsip-sp-4) 0 var(--lsip-sp-8);
    padding: var(--lsip-sp-3) clamp(0.9rem, 2vw, 1.25rem);
    background: var(--lsip-paper);
    border-radius: var(--lsip-radius);
    border-left: 4px solid var(--lsip-brand);
    font-size: var(--lsip-fs-sm);
    color: var(--lsip-text-muted);
}
.site-meta {
    display: inline-flex; align-items: center; gap: var(--lsip-sp-2);
}
.site-meta .material-symbols-outlined {
    font-size: 1.1rem; color: var(--lsip-brand);
}
.site-chip {
    display: inline-block;
    padding: 2px 10px;
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    border-radius: var(--lsip-radius-pill);
    font-size: var(--lsip-fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.site-chip--accent { background: var(--lsip-accent-light); color: var(--lsip-accent); }
.site-chip--success{ background: var(--lsip-success-bg); color: var(--lsip-success); }

/* ── Prose / body content ────────────────────────────────────────────── */
.site-prose {
    color: var(--lsip-text);
    line-height: var(--lsip-lh-relaxed);
    font-size: var(--lsip-fs-md);
    text-align: left;
}
.site-prose * { text-align: inherit; }
.site-prose > * { max-width: 100%; }
.site-prose p,
.site-prose ul,
.site-prose ol,
.site-prose blockquote { margin: 0 0 var(--lsip-sp-5); }
.site-prose p { color: var(--lsip-text); }
.site-prose h2,
.site-prose h3,
.site-prose h4 {
    color: var(--lsip-brand);
    margin: var(--lsip-sp-8) 0 var(--lsip-sp-3);
    line-height: var(--lsip-lh-tight);
    font-weight: 700;
}
.site-prose h2 { font-size: var(--lsip-fs-xl); }
.site-prose h3 { font-size: var(--lsip-fs-lg); }
.site-prose h4 { font-size: var(--lsip-fs-md); }
.site-prose a {
    color: var(--lsip-brand);
    text-decoration: underline;
    text-decoration-color: rgba(20, 56, 122, 0.35);
    text-underline-offset: 2px;
}
.site-prose a:hover { color: var(--lsip-accent); text-decoration-color: var(--lsip-accent); }
.site-prose ul, .site-prose ol { padding-left: 1.4rem; }
.site-prose li { margin: var(--lsip-sp-1) 0; }
.site-prose blockquote {
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    border-left: 4px solid var(--lsip-accent);
    background: var(--lsip-paper);
    font-style: italic;
    color: var(--lsip-ink);
    border-radius: 0 var(--lsip-radius) var(--lsip-radius) 0;
}
.site-prose img {
    max-width: 100%; height: auto;
    border-radius: var(--lsip-radius);
    margin: var(--lsip-sp-6) 0;
    display: block;
}
.site-prose strong { color: var(--lsip-ink); }
.site-prose hr {
    border: 0;
    border-top: 1px solid var(--lsip-line);
    margin: var(--lsip-sp-8) 0;
}

/* ── Card primitive ──────────────────────────────────────────────────── */
.site-card {
    background: var(--lsip-card);
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    overflow: hidden;
    transition: transform 0.18s var(--lsip-ease), box-shadow 0.18s var(--lsip-ease);
    display: flex; flex-direction: column;
}
.site-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lsip-shadow);
}
.site-card__img {
    aspect-ratio: 16 / 9;
    background: var(--lsip-paper);
    background-size: cover; background-position: center;
    display: block;
}
.site-card__img--square { aspect-ratio: 1 / 1; }
.site-card__body {
    padding: clamp(1rem, 2vw, 1.25rem);
    display: flex; flex-direction: column; gap: var(--lsip-sp-2);
    flex: 1;
}
.site-card__eyebrow {
    font-size: var(--lsip-fs-xs);
    color: var(--lsip-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.site-card__title {
    color: var(--lsip-brand);
    font-size: var(--lsip-fs-lg);
    line-height: var(--lsip-lh-snug);
    font-weight: 700;
    margin: 0;
}
.site-card__preview {
    color: var(--lsip-text-muted);
    font-size: var(--lsip-fs-sm);
    line-height: var(--lsip-lh-snug);
    margin: 0;
}
.site-card__footer {
    padding: var(--lsip-sp-3) var(--lsip-sp-5);
    border-top: 1px solid var(--lsip-line);
    font-size: var(--lsip-fs-sm);
    color: var(--lsip-text-soft);
    display: flex; justify-content: space-between; align-items: center;
}

a.site-card { text-decoration: none; color: inherit; }
a.site-card:hover .site-card__title { color: var(--lsip-accent); }

/* ── Grids ───────────────────────────────────────────────────────────── */
.site-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.site-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (max-width: 960px) {
    .site-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .site-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .site-grid--2, .site-grid--3, .site-grid--4 { grid-template-columns: 1fr; }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.site-btn {
    display: inline-flex; align-items: center; gap: var(--lsip-sp-2);
    padding: 0.7rem 1.25rem;
    border-radius: var(--lsip-radius);
    font-weight: 600;
    font-size: var(--lsip-fs-base);
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s var(--lsip-ease),
                color 0.15s var(--lsip-ease),
                transform 0.15s var(--lsip-ease),
                box-shadow 0.15s var(--lsip-ease);
}
.site-btn:active { transform: translateY(1px); }

.site-btn--primary {
    background: var(--lsip-brand);
    color: white;
}
.site-btn--primary:hover {
    background: var(--lsip-brand-dark);
    color: white;
    box-shadow: var(--lsip-shadow);
}
.site-btn--accent {
    background: var(--lsip-accent);
    color: white;
}
.site-btn--accent:hover {
    background: #b8650f;
    color: white;
    box-shadow: var(--lsip-shadow);
}
.site-btn--outline-light {
    background: transparent;
    color: white;
    border-color: rgba(255,255,255,0.4);
}
.site-btn--outline-light:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}
.site-btn--outline {
    background: transparent;
    color: var(--lsip-brand);
    border-color: var(--lsip-brand);
}
.site-btn--outline:hover {
    background: var(--lsip-brand);
    color: white;
}
.site-btn--ghost {
    background: transparent;
    color: var(--lsip-brand);
}
.site-btn--ghost:hover { color: var(--lsip-accent); }

.site-btn--sm { padding: 0.4rem 0.85rem; font-size: var(--lsip-fs-sm); }
.site-btn--lg { padding: 0.9rem 1.65rem; font-size: var(--lsip-fs-lg); }

/* ── CTA band ────────────────────────────────────────────────────────── */
.site-cta-band {
    background: linear-gradient(135deg, var(--lsip-brand) 0%, var(--lsip-brand-dark) 100%);
    color: white;
    padding: clamp(2.5rem, 5vw, 4rem) var(--lsip-section-px);
    text-align: center;
}
.site-cta-band h2 {
    color: white;
    margin: 0 0 var(--lsip-sp-3);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: var(--lsip-lh-tight);
    letter-spacing: -0.01em;
}
.site-cta-band p {
    color: rgba(255,255,255,0.88);
    max-width: 40rem;
    margin: 0 auto var(--lsip-sp-6);
    font-size: var(--lsip-fs-md);
    line-height: var(--lsip-lh-snug);
}

/* ── Feature value cards (homepage tile pattern) ─────────────────────── */
.site-feature {
    display: flex; flex-direction: column;
    background: var(--lsip-card);
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    padding: clamp(1.25rem, 2.5vw, 1.5rem);
    transition: transform 0.18s var(--lsip-ease), box-shadow 0.18s var(--lsip-ease);
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.site-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--lsip-shadow-lg);
    color: inherit;
}
.site-feature__icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    border-radius: var(--lsip-radius);
    margin-bottom: var(--lsip-sp-4);
    transition: background 0.15s var(--lsip-ease), color 0.15s var(--lsip-ease);
}
.site-feature__icon .material-symbols-outlined { font-size: 24px; }
.site-feature:hover .site-feature__icon { background: var(--lsip-brand); color: white; }
.site-feature__title {
    font-size: var(--lsip-fs-lg);
    color: var(--lsip-brand);
    font-weight: 700;
    margin: 0 0 var(--lsip-sp-2);
}
.site-feature__body {
    color: var(--lsip-text-muted);
    font-size: var(--lsip-fs-base);
    line-height: var(--lsip-lh-body);
    margin: 0;
    flex: 1;
}
.site-feature__cta {
    margin-top: var(--lsip-sp-4);
    color: var(--lsip-brand);
    font-weight: 600;
    font-size: var(--lsip-fs-sm);
    display: inline-flex; align-items: center; gap: var(--lsip-sp-1);
}
.site-feature:hover .site-feature__cta { color: var(--lsip-accent); }

/* ── Photo variant: hero image above the body, icon overlays the photo ── */
.site-feature--photo {
    padding: 0;
    overflow: hidden;
}
.site-feature--photo .site-feature__photo {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--lsip-paper);
    background-size: cover;
    background-position: center;
    display: block;
    min-height: 0;
}
.site-feature--photo .site-feature__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,42,92,0) 50%, rgba(15,42,92,0.55) 100%);
}
.site-feature--photo .site-feature__icon {
    position: absolute;
    left: var(--lsip-sp-4);
    bottom: var(--lsip-sp-4);
    margin-bottom: 0;
    z-index: 1;
    background: white;
    color: var(--lsip-brand);
    box-shadow: 0 4px 12px rgba(15,42,92,0.2);
}
.site-feature--photo:hover .site-feature__icon {
    background: var(--lsip-accent);
    color: white;
}
.site-feature--photo .site-feature__body-wrap {
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    display: flex; flex-direction: column;
    flex: 1;
}
.site-feature--photo .site-feature__title {
    margin-top: 0;
}

/* ── Form primitives (centralised so SubmitNews / Get-involved share) ── */
.site-form-stack {
    display: flex; flex-direction: column; gap: var(--lsip-sp-5);
}
.site-form {
    display: flex; flex-direction: column;
    gap: var(--lsip-sp-8);
}
.site-form-section {
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    padding: var(--lsip-sp-6);
    margin: 0;
    background: white;
}
.site-form-section legend {
    font-size: var(--lsip-fs-lg);
    color: var(--lsip-brand);
    font-weight: 700;
    padding: 0 var(--lsip-sp-3);
    letter-spacing: -0.005em;
}
.site-form-section__hint {
    margin: 0 0 var(--lsip-sp-5);
    color: var(--lsip-text-muted);
    font-size: var(--lsip-fs-sm);
    line-height: var(--lsip-lh-body);
}
.site-form-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lsip-sp-5);
}
.site-form-grid + .site-form-grid { margin-top: var(--lsip-sp-5); }
.site-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-form-grid--full { grid-column: 1 / -1; }
@media (max-width: 700px) { .site-form-grid, .site-form-grid--2 { grid-template-columns: 1fr; } }

.site-field--full { grid-column: 1 / -1; }

.site-checkbox-row {
    display: inline-flex; align-items: center; gap: var(--lsip-sp-3);
}
.site-checkbox-row .rz-label { margin: 0; cursor: pointer; font-weight: 600; }

/* Each opportunity card sits as its own bordered block inside the
   "Opportunities offered" fieldset so the checkboxes don't run together. */
.site-opportunity {
    padding: var(--lsip-sp-5);
    background: var(--lsip-paper);
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    margin-bottom: var(--lsip-sp-4);
}
.site-opportunity:last-child { margin-bottom: 0; }
.site-opportunity__body {
    margin-top: var(--lsip-sp-4);
    padding-top: var(--lsip-sp-4);
    border-top: 1px dashed var(--lsip-line);
}

.site-form-actions {
    display: flex; justify-content: flex-end;
    padding-top: var(--lsip-sp-4);
    border-top: 1px solid var(--lsip-line);
    margin-top: var(--lsip-sp-4);
}

.site-field {
    display: flex; flex-direction: column; gap: var(--lsip-sp-2);
}
.site-field label,
.site-field .site-label {
    font-size: var(--lsip-fs-sm);
    font-weight: 600;
    color: var(--lsip-ink);
}
.site-field .site-help {
    font-size: var(--lsip-fs-xs);
    color: var(--lsip-text-soft);
    line-height: var(--lsip-lh-snug);
}
.site-field input[type=text],
.site-field input[type=email],
.site-field input[type=tel],
.site-field input[type=url],
.site-field input[type=number],
.site-field select,
.site-field textarea,
.site-field .rz-textbox,
.site-field .rz-textarea,
.site-field .rz-dropdown,
.site-field .rz-html-editor,
.site-field .rz-datepicker {
    width: 100%;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid #b8b3a3;
    border-radius: var(--lsip-radius);
    font-size: var(--lsip-fs-base);
    color: var(--lsip-ink);
    background: #fafaf6;
    transition: border-color 0.15s var(--lsip-ease),
                background 0.15s var(--lsip-ease),
                box-shadow 0.15s var(--lsip-ease);
    font-family: inherit;
    box-shadow: inset 0 1px 2px rgba(15, 42, 92, 0.04);
}
.site-field input:hover,
.site-field select:hover,
.site-field textarea:hover,
.site-field .rz-textbox:hover,
.site-field .rz-textarea:hover,
.site-field .rz-dropdown:hover,
.site-field .rz-datepicker:hover {
    border-color: var(--lsip-brand);
    background: white;
}
.site-field input:focus,
.site-field select:focus,
.site-field textarea:focus,
.site-field .rz-textbox:focus-within,
.site-field .rz-textarea:focus-within,
.site-field .rz-dropdown:focus-within,
.site-field .rz-datepicker:focus-within {
    outline: none;
    border-color: var(--lsip-brand);
    background: white;
    box-shadow: 0 0 0 3px rgba(20, 56, 122, 0.18);
}
.site-field input::placeholder,
.site-field textarea::placeholder { color: #8a8472; opacity: 1; }

/* ── Alert / callout ─────────────────────────────────────────────────── */
.site-alert {
    display: flex; gap: var(--lsip-sp-3); align-items: flex-start;
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    border-radius: var(--lsip-radius);
    border-left: 4px solid var(--lsip-brand);
    background: var(--lsip-brand-light);
    color: var(--lsip-ink);
    margin: var(--lsip-sp-5) 0;
}
.site-alert--success { border-left-color: var(--lsip-success); background: var(--lsip-success-bg); color: var(--lsip-success); }
.site-alert--warn    { border-left-color: var(--lsip-accent); background: var(--lsip-accent-light); color: var(--lsip-ink); }
.site-alert--danger  { border-left-color: var(--lsip-danger); background: var(--lsip-danger-bg); color: var(--lsip-danger); }
.site-alert .material-symbols-outlined { font-size: 1.2rem; }

/* Empty-state alert — used when a list page has no items to show.
   Reads as an intentional empty card rather than a thin banner. */
.site-alert--empty {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(2.5rem, 5vw, 4rem) var(--lsip-sp-6);
    background: var(--lsip-paper);
    border: 1px dashed var(--lsip-line);
    border-left: 1px dashed var(--lsip-line);
    color: var(--lsip-text-muted);
    gap: var(--lsip-sp-3);
    margin: var(--lsip-sp-6) 0;
}
.site-alert--empty .material-symbols-outlined {
    font-size: 2.75rem !important;
    color: var(--lsip-line);
}
.site-alert--empty strong { color: var(--lsip-brand); font-size: 1.1rem; }
.site-alert--empty p { margin: 0; line-height: var(--lsip-lh-body); max-width: 32rem; }

/* ── Utility helpers ─────────────────────────────────────────────────── */
.site-stack > * + * { margin-top: var(--lsip-sp-5); }
.site-stack--tight > * + * { margin-top: var(--lsip-sp-3); }
.site-stack--loose > * + * { margin-top: var(--lsip-sp-8); }

.site-cluster {
    display: flex; flex-wrap: wrap; gap: var(--lsip-sp-3); align-items: center;
}

.text-brand   { color: var(--lsip-brand); }
.text-accent  { color: var(--lsip-accent); }
.text-muted-soft { color: var(--lsip-text-soft); }

.site-divider {
    border: 0;
    border-top: 1px solid var(--lsip-line);
    margin: var(--lsip-sp-8) 0;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
/* Footer sits FLUSH against whatever section precedes it — no margin-top.
   The preceding section's bottom padding provides breathing room; if it's a
   `.site-cta-band` (brand-blue) it visually merges with the footer's deeper
   blue without a white gap.

   The `!important` overrides on margin/padding/background-image/font/
   text-transform are because legacy `HEYLSIPStyle.css` has a tag-level
   `footer { margin-top: 50px; padding: 100px 0 25px; background-image: ...;
   text-transform: uppercase; }` rule that would otherwise leak through and
   produce a 50px white strip + odd typography. */
.site-footer {
    margin: 0 !important;
    padding: 0 !important;
    background: #0f2a5c !important;
    background-image: none !important;
    color: rgba(255,255,255,0.82);
    font-size: var(--lsip-fs-sm);
    text-transform: none;
}
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer a:hover { color: white; text-decoration: underline; }

.site-footer__inner {
    max-width: var(--lsip-container-wide);
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--lsip-section-px);
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: clamp(2rem, 4vw, 3rem);
}

.site-footer__brand { display: flex; flex-direction: column; gap: var(--lsip-sp-3); }
.site-footer__logo { max-width: 220px; height: auto; }
.site-footer__tagline { margin: 0; color: rgba(255,255,255,0.7); max-width: 22rem; font-size: var(--lsip-fs-sm); }
.site-footer__social {
    list-style: none; padding: 0; margin: var(--lsip-sp-2) 0 0;
    display: flex; gap: var(--lsip-sp-2);
}
.site-footer__social li a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: white;
    transition: background 0.15s var(--lsip-ease);
}
.site-footer__social li a:hover { background: var(--lsip-accent); text-decoration: none; }

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lsip-sp-6);
}
.site-footer__col h3 {
    color: white;
    font-size: var(--lsip-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--lsip-sp-4);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--lsip-sp-2); }
.site-footer__col a { font-size: var(--lsip-fs-sm); }

.site-footer__legal {
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.15);
}
.site-footer__legal-inner {
    max-width: var(--lsip-container-wide);
    margin: 0 auto;
    padding: var(--lsip-sp-4) var(--lsip-section-px);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: var(--lsip-sp-4);
    font-size: var(--lsip-fs-xs);
    color: rgba(255,255,255,0.6);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--lsip-sp-5); flex-wrap: wrap; }
.site-footer__legal a { font-size: var(--lsip-fs-xs); }
.site-footer__linkbtn {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: rgba(255,255,255,0.82); font: inherit; font-size: var(--lsip-fs-xs);
}
.site-footer__linkbtn:hover { color: white; text-decoration: underline; }
.site-footer__top { font-weight: 600; }

@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr; gap: var(--lsip-sp-8); }
    .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .site-footer__cols { grid-template-columns: 1fr; gap: var(--lsip-sp-5); }
    .site-footer__col h3 { margin-bottom: var(--lsip-sp-2); }
}

/* ── Modern responsive nav (lsip-nav) ───────────────────────────────────────
 * Pure-CSS hamburger via #lsip-nav-toggle checkbox hack — no JS needed for
 * the mobile drawer toggle. Dropdowns use :hover + :focus-within on desktop;
 * on mobile (<1024px) sub-items are always expanded inside the drawer so
 * users never need a second tap.
 * --------------------------------------------------------------------------- */

.lsip-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    border-bottom: 1px solid var(--lsip-line);
    box-shadow: 0 1px 0 rgba(15, 42, 92, 0.02);
    text-align: left;
}
.lsip-nav * { text-align: inherit; }
.lsip-nav__toggle {
    position: absolute; left: -9999px; opacity: 0;
}

.lsip-nav__inner {
    max-width: var(--lsip-container-ultra);
    margin: 0 auto;
    padding: 0 clamp(1rem, 2.5vw, 1.5rem);
    height: 72px;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.lsip-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.lsip-nav__brand img { height: 48px; width: auto; display: block; }

.lsip-nav__hamburger {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    cursor: pointer;
    border-radius: var(--lsip-radius);
    align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
    transition: background 0.15s var(--lsip-ease);
}
.lsip-nav__hamburger:hover { background: var(--lsip-brand-light); }
.lsip-nav__hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--lsip-brand);
    border-radius: 2px;
    transition: transform 0.2s var(--lsip-ease), opacity 0.2s var(--lsip-ease);
}
.lsip-nav__close {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin-left: auto;
    border-radius: var(--lsip-radius);
    cursor: pointer;
    color: var(--lsip-brand);
}
.lsip-nav__close:hover { background: var(--lsip-brand-light); }
.lsip-nav__backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 42, 92, 0.4);
    z-index: 998;
    cursor: pointer;
}

.lsip-nav__menu {
    display: flex; align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
}
.lsip-nav__links {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
}
.lsip-nav__item { position: relative; display: flex; align-items: center; }

.lsip-nav__link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    font-size: var(--lsip-fs-sm);
    font-weight: 600;
    color: var(--lsip-ink);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--lsip-radius);
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.15s var(--lsip-ease), background 0.15s var(--lsip-ease);
}

/* Mid-width safety — drop horizontal padding further to keep all 7 items visible.
   Note: drawer kicks in below 1280 (see below), so this only covers 1280–1400 now. */
@media (max-width: 1400px) and (min-width: 1280px) {
    .lsip-nav__link { padding: 0.5rem 0.6rem; font-size: 0.85rem; }
    .lsip-nav__brand img { height: 44px; }
}
.lsip-nav__link:hover,
.lsip-nav__link:focus-visible {
    color: var(--lsip-brand);
    background: var(--lsip-brand-light);
}
.lsip-nav__item.is-active > .lsip-nav__link {
    color: var(--lsip-brand);
    background: var(--lsip-brand-light);
}

.lsip-nav__chev {
    transition: transform 0.2s var(--lsip-ease);
    color: var(--lsip-text-muted);
}
.lsip-nav__item--has-children:hover > .lsip-nav__link .lsip-nav__chev,
.lsip-nav__item--has-children:focus-within > .lsip-nav__link .lsip-nav__chev {
    transform: rotate(180deg);
    color: var(--lsip-brand);
}

.lsip-nav__submenu {
    list-style: none;
    padding: var(--lsip-sp-2) 0;
    margin: 0;
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    box-shadow: var(--lsip-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s var(--lsip-ease), transform 0.15s var(--lsip-ease), visibility 0s linear 0.15s;
}
.lsip-nav__item--has-children:hover > .lsip-nav__submenu,
.lsip-nav__item--has-children:focus-within > .lsip-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s var(--lsip-ease), transform 0.15s var(--lsip-ease), visibility 0s linear 0s;
}
.lsip-nav__submenu li { padding: 0; margin: 0; display: block; width: 100%; list-style: none; }
.lsip-nav__submenu a {
    display: block;
    width: 100%;
    padding: 0.55rem 1.1rem;
    font-size: var(--lsip-fs-sm);
    font-weight: 500;
    color: var(--lsip-ink);
    text-decoration: none;
    transition: background 0.15s var(--lsip-ease), color 0.15s var(--lsip-ease);
}
.lsip-nav__submenu a:hover {
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
}
.lsip-nav__submenu-sep {
    height: 1px;
    background: var(--lsip-line);
    margin: var(--lsip-sp-2) var(--lsip-sp-3);
}

.lsip-nav__utilities {
    display: flex; align-items: center;
    gap: var(--lsip-sp-3);
    flex: 0 0 auto;
}

/* ── Translation widget (Google Translate trigger) ───────────────────────── */
.lsip-translate { position: relative; display: inline-flex; }
.lsip-translate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    cursor: pointer;
    transition: background 0.15s var(--lsip-ease), color 0.15s var(--lsip-ease);
}
.lsip-translate__btn:hover,
.lsip-translate__btn:focus-visible {
    background: var(--lsip-brand);
    color: white;
    outline: none;
}
.lsip-translate__btn .material-symbols-outlined { font-size: 1.15rem; }

.lsip-translate__dropdown {
    position: absolute;
    right: 0; top: calc(100% + 0.5rem);
    z-index: 1000;
    min-width: 260px;
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow);
    padding: var(--lsip-sp-4);
}
.lsip-translate__dropdown.hidden { display: none; }

.lsip-translate__title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lsip-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}
.lsip-translate__loading {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.78rem;
    color: var(--lsip-text-muted);
}
.lsip-translate__loading svg {
    height: 16px; width: 16px;
    animation: lsip-spin 1s linear infinite;
}
@keyframes lsip-spin { to { transform: rotate(360deg); } }

.lsip-translate__reset {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 0.25rem 0;
    border: 0;
    border-top: 1px solid var(--lsip-line);
    background: transparent;
    color: var(--lsip-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.15s var(--lsip-ease);
}
.lsip-translate__reset:hover { color: var(--lsip-brand); }

.lsip-nav__cta {
    display: inline-flex; align-items: center;
    padding: 0.55rem 1.1rem;
    background: var(--lsip-accent);
    color: white;
    border-radius: var(--lsip-radius);
    font-size: var(--lsip-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--lsip-ease), transform 0.15s var(--lsip-ease);
}
.lsip-nav__cta:hover { background: #b8650f; color: white; }
.lsip-nav__cta:active { transform: translateY(1px); }

.lsip-nav__item--manage .lsip-nav__link {
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
}
.lsip-nav__item--manage .lsip-nav__link .material-symbols-outlined {
    font-size: 1.1rem;
}

@media (max-width: 1279px) {
    .lsip-nav__inner { height: 64px; }
    .lsip-nav__brand img { height: 44px; }

    .lsip-nav__hamburger { display: inline-flex; }
    .lsip-nav__close { display: inline-flex; }

    .lsip-nav__menu {
        position: fixed;
        top: 0; right: 0;
        height: 100vh; height: 100dvh;
        width: min(360px, 88vw);
        background: white;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--lsip-sp-5) var(--lsip-sp-4) var(--lsip-sp-6);
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.28s var(--lsip-ease);
        overflow-y: auto;
        box-shadow: -8px 0 24px rgba(15, 42, 92, 0.12);
    }
    .lsip-nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: var(--lsip-sp-4);
    }
    .lsip-nav__item { display: block; }
    .lsip-nav__link {
        width: 100%;
        padding: 0.75rem 0.85rem;
        font-size: var(--lsip-fs-base);
        justify-content: flex-start;
    }
    .lsip-nav__chev { display: none; }

    .lsip-nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 var(--lsip-sp-2);
        margin-left: var(--lsip-sp-3);
        border-left: 2px solid var(--lsip-line);
        min-width: 0;
    }
    .lsip-nav__submenu a {
        padding: 0.5rem 0.85rem;
        font-size: var(--lsip-fs-sm);
        color: var(--lsip-text-muted);
    }
    .lsip-nav__submenu a:hover { color: var(--lsip-brand); background: transparent; }
    .lsip-nav__submenu-sep { display: none; }

    /* Utilities sit outside the hamburger drawer — keep them compact in the
       header bar so they fit next to the brand and hamburger on small screens.
       Margin-left: auto pushes the whole cluster to the right; the hamburger's
       own auto margin is neutralised so utilities + hamburger group together. */
    .lsip-nav__utilities {
        gap: var(--lsip-sp-2);
        margin-left: auto;
    }
    .lsip-nav__utilities + .lsip-nav__hamburger { margin-left: var(--lsip-sp-2); }
    .lsip-nav__cta {
        padding: 0.45rem 0.85rem;
        font-size: var(--lsip-fs-sm);
    }

    /* Below ~480px the brand + 3 utility items + hamburger gets cramped —
       collapse the Contact CTA to icon-only so the cluster still fits. */
    @media (max-width: 479px) {
        .lsip-nav__utilities .lsip-nav__cta {
            padding: 0.45rem;
            font-size: 0;
            line-height: 0;
        }
        .lsip-nav__utilities .lsip-nav__cta::before {
            font-family: 'Material Symbols Outlined';
            content: 'mail';
            font-size: 1.15rem;
            line-height: 1;
            display: inline-block;
        }
    }

    #lsip-nav-toggle:checked ~ .lsip-nav__inner .lsip-nav__menu { transform: translateX(0); }
    #lsip-nav-toggle:checked ~ .lsip-nav__backdrop { display: block; }
    #lsip-nav-toggle:checked ~ .lsip-nav__inner .lsip-nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #lsip-nav-toggle:checked ~ .lsip-nav__inner .lsip-nav__hamburger span:nth-child(2) { opacity: 0; }
    #lsip-nav-toggle:checked ~ .lsip-nav__inner .lsip-nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (min-width: 1280px) {
    .lsip-nav__close,
    .lsip-nav__hamburger,
    .lsip-nav__backdrop { display: none !important; }
}

/* Below 1180px, drop the "Career Seekers" / "Employers" / "Educators" labels into
   the drawer treatment if desktop is too tight — but those are already short, so
   no further collapse needed at this breakpoint. */

/* Environment banner — make it consistent with the design tokens */
.env-banner {
    background: var(--lsip-accent);
    color: white;
    text-align: center;
    padding: var(--lsip-sp-2) var(--lsip-sp-4);
    font-size: var(--lsip-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Skip-link — improve focus state */
.skip-link {
    position: absolute; left: -9999px;
    background: var(--lsip-ink);
    color: white;
    padding: var(--lsip-sp-2) var(--lsip-sp-4);
    z-index: 9999;
}
.skip-link:focus {
    left: var(--lsip-sp-4); top: var(--lsip-sp-4);
}

/* ── Employer card variant ──────────────────────────────────────────── */
.employer-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 520px;
    margin: 0 0 var(--lsip-sp-2);
}
.employer-search .material-symbols-outlined {
    position: absolute; left: var(--lsip-sp-4);
    color: var(--lsip-text-soft);
    pointer-events: none;
}
.employer-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid var(--lsip-line-strong);
    border-radius: var(--lsip-radius-pill);
    background: white;
    font-size: var(--lsip-fs-base);
    color: var(--lsip-ink);
    transition: border-color 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease);
}
.employer-search input:focus {
    outline: none;
    border-color: var(--lsip-brand);
    box-shadow: 0 0 0 3px rgba(20, 56, 122, 0.15);
}

.employer-card__logo {
    display: flex; align-items: center; justify-content: center;
    background: white;
    height: 160px;
    padding: var(--lsip-sp-5);
    border-bottom: 1px solid var(--lsip-line);
}
.employer-card__logo img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
}
.employer-card__logo-placeholder {
    width: 64px; height: 64px;
    border-radius: var(--lsip-radius);
    background: var(--lsip-paper);
    color: var(--lsip-text-soft);
    display: flex; align-items: center; justify-content: center;
}
.employer-card__logo-placeholder .material-symbols-outlined { font-size: 36px; }

.employer-detail-hero__row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 2.5rem); width: 100%;
}
.employer-detail-hero__copy { flex: 1 1 320px; min-width: 0; }
.employer-detail-hero__logo {
    flex: 0 0 auto;
    width: clamp(96px, 14vw, 160px);
    height: clamp(96px, 14vw, 160px);
    background: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.employer-detail-hero__logo img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
@media (max-width: 560px) {
    .employer-detail-hero__row { justify-content: flex-start; }
}

/* ── Contact page ───────────────────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--lsip-sp-10);
    align-items: start;
}
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--lsip-sp-8); }
}

.contact-aside { display: flex; flex-direction: column; gap: var(--lsip-sp-5); }

.contact-card {
    background: var(--lsip-card);
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    padding: clamp(1.25rem, 2.5vw, 1.5rem);
}
.contact-card h3 {
    margin: var(--lsip-sp-3) 0 var(--lsip-sp-2);
    font-size: var(--lsip-fs-md);
    color: var(--lsip-brand);
    font-weight: 700;
}
.contact-card p { margin: 0 0 var(--lsip-sp-3); color: var(--lsip-text-muted); font-size: var(--lsip-fs-sm); }

.contact-link {
    display: inline-block;
    font-size: var(--lsip-fs-lg);
    font-weight: 700;
    color: var(--lsip-brand);
    text-decoration: none;
    margin-top: var(--lsip-sp-2);
}
.contact-link:hover { color: var(--lsip-accent); }

.contact-people {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--lsip-sp-4);
}
.contact-people li {
    display: flex; flex-direction: column; gap: 2px;
    font-size: var(--lsip-fs-sm);
}
.contact-people strong { color: var(--lsip-ink); font-weight: 700; }
.contact-people span { color: var(--lsip-text-soft); font-size: var(--lsip-fs-xs); }
.contact-people a {
    color: var(--lsip-brand);
    text-decoration: none;
    word-break: break-all;
    margin-top: var(--lsip-sp-1);
}
.contact-people a:hover { color: var(--lsip-accent); text-decoration: underline; }

.contact-form-col {
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.contact-form-title {
    margin: 0 0 var(--lsip-sp-6);
    font-size: var(--lsip-fs-xl);
    color: var(--lsip-brand);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Search results page ─────────────────────────────────────────────────── */
/* Reserve room at the bottom for the floating Job Matcher chat button so the
   final row of cards isn't covered. */
#results { padding-bottom: 6rem; }

.search-results-section { padding-top: var(--lsip-sp-5); }
.search-results-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--lsip-sp-3);
    margin-bottom: var(--lsip-sp-4);
}
.search-results-header h2 {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    color: var(--lsip-brand);
    margin: 0;
}

/* RadzenDataList renders each item directly under a flex `.rz-g`. Force that
   container into a responsive CSS grid so cards sit on a consistent rhythm. */
.search-results-section .rz-datalist-content {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.search-results-section .rz-g {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--lsip-sp-4);
    margin: 0 !important;
    padding: 0 !important;
}
.search-results-section .rz-g > * {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    max-width: none !important;
    flex: unset !important;
}
.search-results-section .rz-paginator {
    background: transparent !important;
    border: 0 !important;
    padding: var(--lsip-sp-4) 0 0 !important;
    margin: 0 !important;
}

/* Card itself */
.job-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease), border-color 0.15s var(--lsip-ease);
    height: 100%;
}
.job-card:hover,
.job-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--lsip-brand);
    box-shadow: var(--lsip-shadow);
    color: inherit;
    text-decoration: none;
}
.job-card__body {
    padding: var(--lsip-sp-4);
    flex: 1 1 auto;
}
.job-card__title {
    color: var(--lsip-brand);
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 var(--lsip-sp-3);
    letter-spacing: -0.01em;
}
.job-card__meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.job-card__meta li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--lsip-text);
}
.job-card__meta .material-symbols-outlined {
    color: var(--lsip-brand);
    font-size: 1.1rem;
    flex: 0 0 auto;
}
.job-card__footer {
    background: var(--lsip-brand);
    color: white;
    padding: 0.6rem var(--lsip-sp-4);
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s var(--lsip-ease);
    border-bottom-left-radius: var(--lsip-radius-lg);
    border-bottom-right-radius: var(--lsip-radius-lg);
}
.job-card:hover .job-card__footer,
.job-card:focus-visible .job-card__footer {
    background: var(--lsip-accent);
}
.job-card__view { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Empty state */
.search-empty {
    text-align: center;
    padding: var(--lsip-sp-6) var(--lsip-sp-4);
    color: var(--lsip-text-muted);
}
.search-empty .material-symbols-outlined {
    font-size: 3rem;
    color: var(--lsip-line);
    display: block;
    margin: 0 auto var(--lsip-sp-3);
}
.search-empty h3 { color: var(--lsip-brand); margin: 0 0 0.5rem; }
.search-empty p  { margin: 0; }

/* ── Floating chat widget repositioning ────────────────────────────────────
   The NCS Signposter / Job Matcher / Careers AI buttons all use fixed
   positioning at the bottom-right. On mobile they cover content; let them sit
   slightly tighter to the edge but always above the content so the page is
   usable. */
#openChat_JobMatcher2,
#openChat_signposter,
#openChat {
    box-shadow: 0 8px 20px rgba(15, 42, 92, 0.25);
}
@media (max-width: 640px) {
    #openChat_JobMatcher2,
    #openChat {
        bottom: 1rem !important;
        right: 1rem !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 0.85rem !important;
    }
}

/* ── Search hero + form ─────────────────────────────────────────────── */
.search-form-band {
    background: var(--lsip-paper);
    padding: 0 0 clamp(2rem, 3vw, 3rem);
    border-bottom: 0;
}
.search-form-card {
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    padding: clamp(1.5rem, 2.5vw, 2rem);
    margin-top: clamp(-3rem, -3.5vw, -4rem); /* lift up over hero edge */
    box-shadow: var(--lsip-shadow);
    position: relative;
    z-index: 5;
}
.search-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
    column-gap: var(--lsip-sp-5);
    row-gap: var(--lsip-sp-4);
    align-items: end;
}
.search-form-row .site-field {
    margin: 0;
    min-width: 0;
}
.search-form-row .site-field label {
    display: block;
    font-size: var(--lsip-fs-sm);
    font-weight: 600;
    color: var(--lsip-ink);
    margin: 0 0 0.4rem;
    letter-spacing: 0.01em;
}
/* Force every form control inside the search card to a uniform tall height
   so the search button can match without looking taller. */
.search-form-card .site-field input,
.search-form-card .site-field select,
.search-form-card .site-field .rz-textbox,
.search-form-card .site-field .rz-dropdown {
    height: 48px !important;
    padding: 0 1rem !important;
    font-size: var(--lsip-fs-md) !important;
    background: white !important;
    border: 1.5px solid var(--lsip-line) !important;
    border-radius: var(--lsip-radius) !important;
    width: 100% !important;
}
.search-form-card .site-field .rz-textbox input,
.search-form-card .site-field .rz-dropdown .rz-dropdown-label {
    height: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: inherit !important;
    line-height: 48px !important;
    box-shadow: none !important;
}
.search-form-card .site-field .rz-textbox:focus-within,
.search-form-card .site-field .rz-dropdown:focus-within {
    border-color: var(--lsip-brand) !important;
    box-shadow: 0 0 0 3px rgba(20, 56, 122, 0.15) !important;
    outline: 0 !important;
}
.search-form-submit { display: flex; align-items: end; }
.search-form-submit .site-btn,
.search-form-submit > .rz-button {
    height: 48px;
    min-width: 9rem;
    padding: 0 1.5rem !important;
    background: var(--lsip-accent) !important;
    color: white !important;
    border: 0 !important;
    border-radius: var(--lsip-radius) !important;
    font-weight: 700 !important;
    font-size: var(--lsip-fs-md) !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background 0.15s var(--lsip-ease);
}
.search-form-submit .site-btn:hover,
.search-form-submit > .rz-button:hover { background: #b8650f !important; }

@media (max-width: 820px) {
    .search-form-row { grid-template-columns: 1fr; gap: var(--lsip-sp-4); }
    .search-form-card { margin-top: clamp(-1.5rem, -2vw, -2rem); padding: var(--lsip-sp-5); }
    .search-form-submit .site-btn,
    .search-form-submit > .rz-button { width: 100%; }
}

/* ── Mission band (home — "About the plan") ────────────────────────── */
.site-mission {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.site-mission__inner {
    text-align: center;
}
.site-mission__title {
    font-size: var(--lsip-fs-2xl);
    color: var(--lsip-brand);
    line-height: var(--lsip-lh-tight);
    letter-spacing: -0.01em;
    margin: var(--lsip-sp-3) 0 var(--lsip-sp-5);
    font-weight: 700;
}
.site-mission__lede {
    font-size: var(--lsip-fs-md);
    color: var(--lsip-text);
    line-height: var(--lsip-lh-body);
    margin: 0 auto var(--lsip-sp-4);
    max-width: 38rem;
}
.site-mission__body {
    font-size: var(--lsip-fs-md);
    color: var(--lsip-text);
    line-height: var(--lsip-lh-body);
    margin: 0 auto;
    max-width: 38rem;
}
.site-mission__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.75rem, 3vw, 2.25rem);
    border-top: 1px solid var(--lsip-line);
}
.site-mission__logos img { height: clamp(40px, 4vw, 54px); width: auto; object-fit: contain; }
.site-mission__logos a { display: inline-flex; align-items: center; }

/* ── Partner logo strip ─────────────────────────────────────────────── */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--lsip-sp-5);
    align-items: center;
    margin-top: var(--lsip-sp-6);
}
.partners-logo {
    display: flex; align-items: center; justify-content: center;
    padding: var(--lsip-sp-4);
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    transition: transform 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease);
    min-height: 5rem;
}
.partners-logo:hover { transform: translateY(-2px); box-shadow: var(--lsip-shadow-sm); }
.partners-logo img {
    max-width: 100%;
    max-height: 3.5rem;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(40%) opacity(0.85);
    transition: filter 0.15s var(--lsip-ease);
}
.partners-logo:hover img { filter: none; }

/* ── FAQ accordion (native <details>) ──────────────────────────────── */
.faq-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lsip-sp-6);
    margin-top: var(--lsip-sp-6);
}
@media (max-width: 900px) {
    .faq-columns { grid-template-columns: 1fr; gap: var(--lsip-sp-4); }
}
.faq-column { display: flex; flex-direction: column; gap: var(--lsip-sp-3); }
.faq-item {
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    overflow: hidden;
    transition: box-shadow 0.15s var(--lsip-ease);
}
.faq-item[open] { box-shadow: var(--lsip-shadow-sm); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    font-weight: 600;
    color: var(--lsip-brand);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--lsip-sp-3);
    background: white;
    transition: background 0.15s var(--lsip-ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--lsip-accent);
    line-height: 1;
    transition: transform 0.2s var(--lsip-ease);
}
.faq-item[open] summary::after { content: "−"; transform: rotate(0deg); }
.faq-item summary:hover { background: var(--lsip-paper); }
.faq-body {
    padding: 0 var(--lsip-sp-5) var(--lsip-sp-4);
    color: var(--lsip-text);
    line-height: var(--lsip-lh-body);
    border-top: 1px solid var(--lsip-line);
}
.faq-body:not(:empty)::before {
    content: "";
    display: block;
    height: var(--lsip-sp-3);
}

/* ── Admin / CMS chrome ─────────────────────────────────────────────────
   Legacy Manage/* pages all use:
     <div id="banner"><img src="../images/banners/get-involved.jpg"></div>
     <h1>Title</h1>
     <div class="container pb-4"><ManageMenu /></div>
     <section style="background-color:#EFEFEF"><div class="container-fluid">…</div></section>
   We restyle this in-place so every CMS page picks up a modern admin look
   without us having to rewrite ~35 razor files. The legacy markup keeps
   working; only the painted result changes. */

/* Target the legacy `<div id="banner"><img></div>` block that prefixes every
   admin page. Replace the giant photo-banner with a slim brand bar.
   Admin pages all render the new <ManageMenu /> as `.admin-nav`, so we
   use `body:has(.admin-nav)` to scope this to admin pages only — public
   pages keep their own banner styling intact. */
body:has(.admin-nav) #banner {
    display: block;
    background: linear-gradient(135deg, var(--lsip-brand) 0%, var(--lsip-brand-dark) 100%);
    margin: 0;
    padding: 0;
    border-bottom: 4px solid var(--lsip-accent);
}
body:has(.admin-nav) #banner img { display: none; }
body:has(.admin-nav) #banner::after {
    content: "";
    display: block;
    height: clamp(60px, 8vw, 90px);
}

/* The standalone <h1> that follows the slim banner becomes the admin
   title row. Catches both `#banner + h1` and `#banner + section > h1`
   patterns. */
body:has(.admin-nav) #banner ~ h1,
body:has(.admin-nav) #banner ~ section > h1,
body:has(.admin-nav) #banner ~ section h1:first-child {
    max-width: var(--lsip-container-wide);
    margin: 0 auto;
    padding: var(--lsip-sp-6) var(--lsip-section-px) var(--lsip-sp-3);
    color: var(--lsip-brand);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: var(--lsip-lh-tight);
}

/* Older `#banner + h1` rule replaced by the body:has(.admin-nav) rules above
   so the slim header works on both `<#banner> + <h1>` and `<#banner> +
   <section><h1></section>` markup patterns. */

/* The admin canvas section. Two markup patterns in the wild:
   1. `<section style="background-color: #EFEFEF">` — used by Create/Edit forms
   2. plain `<section>` — used by Manage* list pages
   We catch BOTH by also scoping to body:has(.admin-nav). */
body:has(.admin-nav) section,
section[style*="EFEFEF"],
section[style*="efefef"] {
    background: var(--lsip-paper) !important;
    padding: var(--lsip-sp-6) 0 var(--lsip-sp-12) !important;
    margin-top: 0 !important;
}
body:has(.admin-nav) section > .container-fluid,
body:has(.admin-nav) section > .container,
section[style*="EFEFEF"] > .container-fluid,
section[style*="efefef"] > .container-fluid {
    max-width: var(--lsip-container-wide);
    margin: 0 auto;
    padding: 0 var(--lsip-section-px);
}

/* Also constrain admin container-fluids that wrap the ManageMenu strip
   (these sit OUTSIDE the section on some pages). */
body:has(.admin-nav) > #translationContainer .container-fluid,
body:has(.admin-nav) .container-fluid.pb-4,
.lsip-admin-shell .container-fluid {
    max-width: var(--lsip-container-wide) !important;
    margin: 0 auto !important;
    padding-left: var(--lsip-section-px) !important;
    padding-right: var(--lsip-section-px) !important;
}

/* Bootstrap col-md-* grid normalised to consistent gaps and spacing inside
   admin forms. Legacy CMS pages assume Bootstrap is loaded; it is, but the
   raw row/col gutters don't sit well alongside our other primitives. */
section[style*="EFEFEF"] .row {
    --bs-gutter-y: var(--lsip-sp-4);
}
section[style*="EFEFEF"] .col-md-3,
section[style*="EFEFEF"] .col-md-4,
section[style*="EFEFEF"] .col-md-6,
section[style*="EFEFEF"] .col-md-8,
section[style*="EFEFEF"] .col-md-12,
section[style*="EFEFEF"] .col-12 {
    padding-bottom: var(--lsip-sp-3);
}
section[style*="EFEFEF"] .rz-label {
    font-weight: 600 !important;
    color: var(--lsip-brand) !important;
    font-size: 0.92rem !important;
    margin-bottom: 0.4rem !important;
}
section[style*="EFEFEF"] .rz-textbox,
section[style*="EFEFEF"] .rz-textarea,
section[style*="EFEFEF"] .rz-dropdown,
section[style*="EFEFEF"] .rz-datepicker {
    background: white !important;
    border: 1.5px solid var(--lsip-line) !important;
    border-radius: var(--lsip-radius) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
section[style*="EFEFEF"] .rz-textbox:focus-within,
section[style*="EFEFEF"] .rz-textarea:focus-within,
section[style*="EFEFEF"] .rz-dropdown:focus-within,
section[style*="EFEFEF"] .rz-datepicker:focus-within {
    border-color: var(--lsip-brand) !important;
    box-shadow: 0 0 0 3px rgba(20, 56, 122, 0.12) !important;
}

/* Wrap the entire form area in a card so it reads as a contained surface. */
section[style*="EFEFEF"] .py-4 > form,
section[style*="EFEFEF"] form.rz-template-form,
section[style*="EFEFEF"] > .container-fluid > .py-4,
section[style*="EFEFEF"] > .container-fluid > .py-4 > form {
    background: white;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow-sm);
}

/* Validator error messages — make them visible without an overlay. */
section[style*="EFEFEF"] .rz-message,
section[style*="EFEFEF"] .rz-required-validator,
section[style*="EFEFEF"] .rz-email-validator {
    color: var(--lsip-danger) !important;
    font-size: 0.82rem !important;
    margin-top: 0.3rem;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Action buttons at the bottom of forms (Submit / Cancel pattern). */
section[style*="EFEFEF"] .rz-button-primary {
    background: var(--lsip-brand) !important;
    border: 0 !important;
    font-weight: 600 !important;
    border-radius: var(--lsip-radius) !important;
    padding: 0.65rem 1.4rem !important;
}
section[style*="EFEFEF"] .rz-button-primary:hover { background: var(--lsip-brand-dark) !important; }
section[style*="EFEFEF"] .rz-button-light {
    background: var(--lsip-paper) !important;
    color: var(--lsip-text) !important;
    border: 1.5px solid var(--lsip-line) !important;
    border-radius: var(--lsip-radius) !important;
    font-weight: 500 !important;
}
section[style*="EFEFEF"] .rz-button-light:hover {
    background: var(--lsip-brand-light) !important;
    color: var(--lsip-brand) !important;
    border-color: var(--lsip-brand) !important;
}

/* ── CMS form ergonomics ────────────────────────────────────────────────
   Improvements that work across every admin page without changing markup.
   We target the legacy <div class="col-md-6"> field pattern via attribute
   selectors and adjacent-sibling rules. */

/* Each col-md-* "field" wrapper gets visual cohesion: clear gap below, and
   a transparent border that highlights brand-blue on focus-within so the
   active field stands out. */
section[style*="EFEFEF"] [class*="col-md-"] {
    transition: border-color 0.12s var(--lsip-ease);
}

/* Help text (the "Example: Hull" hint after fields). Bootstrap's
   `.small.text-muted` was just grey 80%-size text — restyle into a
   readable hint pill. */
section[style*="EFEFEF"] .small.text-muted,
section[style*="EFEFEF"] .text-muted.small,
section[style*="EFEFEF"] .form-text {
    color: var(--lsip-text-muted) !important;
    font-size: 0.78rem !important;
    margin-top: 0.4rem;
    display: block;
    font-style: italic;
    line-height: 1.4;
}

/* Popup validator messages are jarring — they cover other fields.
   Force inline messages instead. Radzen still fires on submit. */
section[style*="EFEFEF"] .rz-message-popup,
section[style*="EFEFEF"] [class*="rz-message"][style*="position: absolute"] {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0.3rem !important;
    color: var(--lsip-danger) !important;
    font-size: 0.8rem !important;
}

/* Required-field marker — pre-submit visual cue. We can't change every
   form to add `*` next to labels, but if the markup follows the pattern
   `<RadzenLabel><RadzenTextBox><RadzenRequiredValidator>` then we can
   use :has() to detect required fields and badge the label. */
section[style*="EFEFEF"] .col-12.p-0:has(.rz-required-validator) {
    position: relative;
}
section[style*="EFEFEF"] [class*="col-md-"]:has(.rz-required-validator) .rz-label::after,
section[style*="EFEFEF"] [class*="col-md-"]:has(.rz-required-validator) > .col-12:first-child .rz-label::after {
    content: " *";
    color: var(--lsip-danger);
    font-weight: 700;
    margin-left: 0.15rem;
}

/* HTML editor wrapper — make the `.cms-html-wrap` look like a field with
   a proper border + matching focus state to the rest of the inputs. */
section[style*="EFEFEF"] .cms-html-wrap {
    border: 1.5px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    overflow: hidden;
    background: white;
    transition: border-color 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease);
}
section[style*="EFEFEF"] .cms-html-wrap:focus-within {
    border-color: var(--lsip-brand);
    box-shadow: 0 0 0 3px rgba(20, 56, 122, 0.12);
}
section[style*="EFEFEF"] .cms-html-wrap .rz-html-editor {
    border: 0 !important;
    background: white !important;
}
section[style*="EFEFEF"] .cms-html-wrap .rz-html-editor-toolbar {
    background: var(--lsip-paper) !important;
    border-bottom: 1px solid var(--lsip-line) !important;
    padding: var(--lsip-sp-2) !important;
}

/* Sticky save bar — every Create/Edit form in the CMS wraps its trailing
   action buttons in a `.d-flex.justify-content-between` row (sometimes
   with `col-md-12`, sometimes with `mt-3` or `mt-4`). We promote any
   such row inside an admin form to a sticky save bar pinned to the
   viewport bottom, so on long forms the editor always sees the Save
   button without scrolling. No razor changes needed. */
section[style*="EFEFEF"] form .d-flex.justify-content-between[class*="mt-"],
section[style*="EFEFEF"] .col-md-12.d-flex.justify-content-between.mt-4,
section[style*="EFEFEF"] [class*="col-md-12"][class*="d-flex"][class*="justify-content-between"][class*="mt-4"] {
    position: sticky;
    bottom: 0;
    background: white;
    padding: var(--lsip-sp-4) var(--lsip-sp-5) !important;
    margin: var(--lsip-sp-6) calc(-1 * clamp(1.5rem, 3vw, 2.5rem)) calc(-1 * clamp(1.5rem, 3vw, 2.5rem)) !important;
    border-top: 1px solid var(--lsip-line);
    border-radius: 0 0 var(--lsip-radius-lg) var(--lsip-radius-lg);
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: var(--lsip-sp-3) !important;
    flex-wrap: wrap;
    box-shadow: 0 -4px 12px rgba(15, 42, 92, 0.04);
    z-index: 10;
}
/* Inside the save bar the Delete button should sit on the LEFT, not next to
   Save — use margin-right:auto on whichever button is the "destructive" one. */
section[style*="EFEFEF"] .col-md-12.d-flex.justify-content-between .rz-button-danger,
section[style*="EFEFEF"] [class*="col-md-12"][class*="d-flex"][class*="justify-content-between"] .rz-button-danger {
    margin-right: auto !important;
    order: -1;
    background: transparent !important;
    color: var(--lsip-danger) !important;
    border: 1.5px solid var(--lsip-danger) !important;
    border-radius: var(--lsip-radius) !important;
}
section[style*="EFEFEF"] .col-md-12.d-flex.justify-content-between .rz-button-danger:hover,
section[style*="EFEFEF"] [class*="col-md-12"][class*="d-flex"][class*="justify-content-between"] .rz-button-danger:hover {
    background: var(--lsip-danger) !important;
    color: white !important;
}

/* Save bar — opt-in wrapper for newer forms (e.g. the rewritten
   EmployersContactForm). Same behaviour as the auto-promoted Bootstrap
   action row above. */
.admin-save-bar {
    position: sticky;
    bottom: 0;
    background: white;
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    margin: var(--lsip-sp-6) calc(-1 * var(--lsip-sp-5)) calc(-1 * var(--lsip-sp-5));
    border-top: 1px solid var(--lsip-line);
    border-radius: 0 0 var(--lsip-radius-lg) var(--lsip-radius-lg);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--lsip-sp-3);
    flex-wrap: wrap;
    box-shadow: 0 -4px 12px rgba(15, 42, 92, 0.04);
    z-index: 10;
}
.admin-save-bar__hint {
    margin-right: auto;
    font-size: 0.82rem;
    color: var(--lsip-text-muted);
    font-style: italic;
}

/* Validator error summary — Radzen shows individual validator messages,
   but on long forms they're scattered. Make the inline messages visually
   loud enough to spot. */
section[style*="EFEFEF"] .rz-message {
    color: var(--lsip-danger) !important;
    background: #fff5f5 !important;
    border-left: 3px solid var(--lsip-danger) !important;
    padding: 0.35rem 0.6rem !important;
    margin-top: 0.3rem !important;
    border-radius: 0 var(--lsip-radius) var(--lsip-radius) 0 !important;
    font-size: 0.82rem !important;
    box-shadow: none !important;
    display: block !important;
}

/* The nested `col-12 align-items-center d-flex p-0` label wrapper is
   pointless markup. Squash its padding to 0 and let the label sit
   directly above the field for tighter visual coupling. */
section[style*="EFEFEF"] [class*="col-md-"] > .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
section[style*="EFEFEF"] [class*="col-md-"] > .col-12.d-flex {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0;
}

/* Headings inside admin form sections — `<h5>Information Facts</h5>`
   etc. that break up long forms. Render as accent dividers. */
section[style*="EFEFEF"] .col-12.mt-4 h5,
section[style*="EFEFEF"] .col-12 > h5 {
    color: var(--lsip-brand);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--lsip-sp-4) 0 var(--lsip-sp-3);
    padding-bottom: var(--lsip-sp-2);
    border-bottom: 2px solid var(--lsip-accent);
}

/* Paginator inside data grids. */
section[style*="EFEFEF"] .rz-paginator,
.lsip-admin-shell .rz-paginator {
    background: var(--lsip-paper) !important;
    border-top: 1px solid var(--lsip-line) !important;
    padding: var(--lsip-sp-3) !important;
}
section[style*="EFEFEF"] .rz-paginator-element,
.lsip-admin-shell .rz-paginator-element {
    background: white !important;
    border: 1px solid var(--lsip-line) !important;
    color: var(--lsip-text) !important;
    border-radius: var(--lsip-radius) !important;
}
section[style*="EFEFEF"] .rz-paginator-element.rz-state-active,
.lsip-admin-shell .rz-paginator-element.rz-state-active {
    background: var(--lsip-brand) !important;
    color: white !important;
    border-color: var(--lsip-brand) !important;
}

/* RadzenDataGrid — clean header + paginator. */
section[style*="EFEFEF"] .rz-data-grid,
.lsip-admin-shell .rz-data-grid {
    border: 1px solid var(--lsip-line) !important;
    border-radius: var(--lsip-radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--lsip-shadow-sm);
    margin-top: var(--lsip-sp-5);
}
section[style*="EFEFEF"] .rz-data-grid thead,
.lsip-admin-shell .rz-data-grid thead {
    background: var(--lsip-paper) !important;
}
section[style*="EFEFEF"] .rz-data-grid th,
.lsip-admin-shell .rz-data-grid th {
    color: var(--lsip-brand) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--lsip-line) !important;
    padding: 0.85rem 1rem !important;
    white-space: nowrap;
}
section[style*="EFEFEF"] .rz-data-grid td,
.lsip-admin-shell .rz-data-grid td {
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem !important;
    color: var(--lsip-text) !important;
    border-bottom: 1px solid var(--lsip-line) !important;
    vertical-align: middle;
}
/* Row hover */
section[style*="EFEFEF"] .rz-data-grid tbody tr:hover,
.lsip-admin-shell .rz-data-grid tbody tr:hover {
    background: var(--lsip-brand-light) !important;
}

/* Action buttons inside data grid cells — make them tidy icon-only.
   These are tiny edit/delete buttons that appear at the end of every row. */
section[style*="EFEFEF"] .rz-data-grid .rz-button,
.lsip-admin-shell .rz-data-grid .rz-button {
    padding: 0.35rem !important;
    min-width: 0 !important;
    background: transparent !important;
    color: var(--lsip-text-muted) !important;
    border: 1px solid var(--lsip-line) !important;
    border-radius: var(--lsip-radius) !important;
    box-shadow: none !important;
    margin: 0 0.15rem !important;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
section[style*="EFEFEF"] .rz-data-grid .rz-button:hover,
.lsip-admin-shell .rz-data-grid .rz-button:hover {
    background: var(--lsip-brand-light) !important;
    color: var(--lsip-brand) !important;
    border-color: var(--lsip-brand) !important;
}
section[style*="EFEFEF"] .rz-data-grid .rz-button-danger,
.lsip-admin-shell .rz-data-grid .rz-button-danger {
    color: var(--lsip-danger) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    background: transparent !important;
}
section[style*="EFEFEF"] .rz-data-grid .rz-button-danger:hover,
.lsip-admin-shell .rz-data-grid .rz-button-danger:hover {
    background: var(--lsip-danger) !important;
    color: white !important;
    border-color: var(--lsip-danger) !important;
}

/* Filter icons in th — keep them subtle. */
section[style*="EFEFEF"] .rz-data-grid .rz-grid-filter,
.lsip-admin-shell .rz-data-grid .rz-grid-filter,
section[style*="EFEFEF"] .rz-data-grid .rzi-filter,
.lsip-admin-shell .rz-data-grid .rzi-filter {
    color: var(--lsip-text-muted) !important;
    opacity: 0.6;
}
section[style*="EFEFEF"] .rz-data-grid .rz-grid-filter:hover,
.lsip-admin-shell .rz-data-grid .rz-grid-filter:hover { opacity: 1; }

/* Filter row above the data (Radzen sometimes renders a search/filter
   row). Add a subtle separator. */
section[style*="EFEFEF"] .rz-grid-filter-row {
    background: var(--lsip-paper) !important;
}

/* "True/False" boolean cell — render as small pills so they're scannable. */
section[style*="EFEFEF"] .rz-data-grid td:has(> :not(*)):not(:empty) {
    /* selector trick: targets cells whose ONLY content is a raw text node */
}

/* Footer row inside data grid — pagination summary. */
section[style*="EFEFEF"] .rz-data-grid .rz-data-grid-footer,
.lsip-admin-shell .rz-data-grid .rz-data-grid-footer {
    background: var(--lsip-paper) !important;
    padding: 0.5rem 1rem !important;
    border-top: 1px solid var(--lsip-line) !important;
}

/* ── Admin "View live" link inside the sticky save bar ─────────────── */
.admin-view-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: white;
    border: 1.5px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    color: var(--lsip-text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    margin-right: auto;
    order: -2;  /* sit before everything else in the save bar */
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-view-live:hover {
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    border-color: var(--lsip-brand);
    text-decoration: none;
}
.admin-view-live .material-symbols-outlined { font-size: 1.1rem; }

/* ── CMS validation banner ──────────────────────────────────────────────
   Rendered by cms-helpers.js just above the sticky save bar when the
   admin tries to submit a form that has visible validation errors. */
.cms-validation-banner {
    display: none;
    align-items: flex-start;
    gap: var(--lsip-sp-3);
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    margin: var(--lsip-sp-5) 0 0;
    background: #fff5f5;
    border: 1px solid #fac8c8;
    border-left: 4px solid var(--lsip-danger);
    border-radius: var(--lsip-radius);
    color: var(--lsip-ink);
    animation: cms-shake 0.35s ease;
}
.cms-validation-banner.is-visible { display: flex; }
@keyframes cms-shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
}
.cms-validation-banner > .material-symbols-outlined {
    color: var(--lsip-danger);
    background: white;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem !important;
    flex: 0 0 auto;
}
.cms-validation-banner strong {
    display: block;
    color: var(--lsip-danger);
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}
.cms-validation-banner ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2 18rem;
    column-gap: var(--lsip-sp-5);
}
.cms-validation-banner li {
    padding: 0.2rem 0;
    font-size: 0.85rem;
    color: var(--lsip-text);
    break-inside: avoid;
}
.cms-validation-banner a {
    color: var(--lsip-danger);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed var(--lsip-danger);
}
.cms-validation-banner a:hover { color: var(--lsip-brand); border-color: var(--lsip-brand); }

/* ── CMS autosave restore offer ─────────────────────────────────────── */
.cms-autosave-offer {
    display: flex;
    align-items: center;
    gap: var(--lsip-sp-4);
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    margin: 0 0 var(--lsip-sp-5);
    background: linear-gradient(135deg, white 0%, var(--lsip-brand-light) 100%);
    border: 1px solid var(--lsip-line);
    border-left: 4px solid var(--lsip-accent);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow-sm);
}
.cms-autosave-offer > .material-symbols-outlined {
    color: var(--lsip-accent);
    background: white;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem !important;
    flex: 0 0 auto;
}
.cms-autosave-offer strong {
    display: block;
    color: var(--lsip-brand);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.cms-autosave-offer p { margin: 0; font-size: 0.85rem; color: var(--lsip-text-muted); }
.cms-autosave-offer__actions {
    margin-left: auto;
    display: flex; gap: var(--lsip-sp-2); flex-wrap: wrap;
}
@media (max-width: 700px) {
    .cms-autosave-offer { flex-wrap: wrap; }
    .cms-autosave-offer__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ── Image picker (CMS) ─────────────────────────────────────────────── */
.image-picker {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--lsip-sp-4);
    padding: var(--lsip-sp-4);
}
.image-picker__toolbar {
    display: flex;
    align-items: center;
    gap: var(--lsip-sp-4);
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.image-picker__search {
    position: relative;
    flex: 1 1 16rem;
}
.image-picker__search .material-symbols-outlined {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lsip-text-muted);
    font-size: 1.15rem;
    pointer-events: none;
}
.image-picker__search input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.85rem 0 2.5rem;
    border: 1.5px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    background: white;
    font-size: 0.92rem;
    color: var(--lsip-ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.image-picker__search input:focus {
    outline: none;
    border-color: var(--lsip-brand);
    box-shadow: 0 0 0 3px rgba(20, 56, 122, 0.12);
}
.image-picker__count {
    font-size: 0.85rem;
    color: var(--lsip-text-muted);
    white-space: nowrap;
}
.image-picker__grid {
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--lsip-sp-3);
    padding: var(--lsip-sp-2);
    background: var(--lsip-paper);
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
}
.image-picker__tile {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1.5px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    padding: var(--lsip-sp-2);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    overflow: hidden;
}
.image-picker__tile:hover, .image-picker__tile:focus-visible {
    border-color: var(--lsip-brand);
    box-shadow: var(--lsip-shadow-sm);
    transform: translateY(-2px);
    outline: none;
}
.image-picker__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--lsip-paper);
    border-radius: var(--lsip-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.45rem;
}
.image-picker__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.image-picker__name {
    font-size: 0.78rem;
    color: var(--lsip-text);
    word-break: break-all;
    line-height: 1.3;
}
.image-picker__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lsip-sp-2);
    padding: var(--lsip-sp-8);
    background: var(--lsip-paper);
    border: 1px dashed var(--lsip-line);
    border-radius: var(--lsip-radius);
    color: var(--lsip-text-muted);
    text-align: center;
}
.image-picker__empty .material-symbols-outlined {
    font-size: 3rem !important;
    color: var(--lsip-line);
}
.image-picker__empty strong { color: var(--lsip-brand); font-size: 1rem; }
.image-picker__empty p { margin: 0; font-size: 0.88rem; max-width: 28rem; }
.image-picker__actions {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding-top: var(--lsip-sp-3);
    border-top: 1px solid var(--lsip-line);
}

/* The trigger button that admins drop next to the InputFile upload. */
.image-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    border: 1.5px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    margin-top: 0.4rem;
}
.image-picker-trigger:hover {
    background: var(--lsip-brand);
    color: white;
    border-color: var(--lsip-brand);
}
.image-picker-trigger .material-symbols-outlined { font-size: 1.15rem; }

/* ── Admin nav (Manage menu) ─────────────────────────────────────────── */
/* Grouped horizontal navigation rendered by `Pages/Site/Blocks/ManageMenu.razor`.
   Sections are separated by a soft divider; icon-only utility links live on
   the right. Wraps cleanly on narrow viewports.
   IMPORTANT: legacy HEYLSIPStyle.css sets `nav { float: right }` globally —
   our admin-nav must override that, otherwise it takes itself out of the
   normal flow and the surrounding container-fluid collapses to padding-only
   height, causing the next block (e.g. the d-flex action row in
   ManageVideos) to start at the same Y as this nav. */
.admin-nav {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lsip-sp-2);
    max-width: var(--lsip-container-wide);
    margin: 0 auto;
    padding: var(--lsip-sp-3) var(--lsip-section-px);
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow-sm);
}
.admin-nav__group {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    gap: var(--lsip-sp-1);
    padding-left: var(--lsip-sp-3);
    margin-left: var(--lsip-sp-2);
    border-left: 1px solid var(--lsip-line);
}
.admin-nav__group--end {
    margin-left: auto;
    padding-left: var(--lsip-sp-3);
    gap: var(--lsip-sp-2);
}
.admin-nav__group-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lsip-text-muted);
    padding-right: var(--lsip-sp-2);
    align-self: center;
}
.admin-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--lsip-radius);
    color: var(--lsip-text);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s var(--lsip-ease), color 0.15s var(--lsip-ease);
    white-space: nowrap;
}
.admin-nav__link:hover {
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
}
.admin-nav__link.is-active {
    background: var(--lsip-brand);
    color: white;
    font-weight: 600;
}
.admin-nav__link.is-active:hover { background: var(--lsip-brand-dark); color: white; }
.admin-nav__link .material-symbols-outlined { font-size: 1.1rem; }
.admin-nav__link--icon {
    padding: 0.45rem;
    color: var(--lsip-text-muted);
}
.admin-nav__link--icon:hover { color: var(--lsip-brand); background: var(--lsip-brand-light); }

@media (max-width: 900px) {
    .admin-nav { gap: 0.35rem; }
    .admin-nav__group, .admin-nav__group--end {
        padding-left: 0; margin-left: 0; border-left: 0;
    }
    .admin-nav__group--end { margin-left: 0; }
    .admin-nav__group-label { width: 100%; padding-top: var(--lsip-sp-2); }
}

/* The container that wraps ManageMenu gets pulled UP to overlap the slim
   header — feels like a tab strip anchored to the title row. */
#banner + h1 + .container,
#banner + h1 + .container-fluid {
    padding-bottom: 0 !important;
}

/* Admin dashboard stat grid — full-width responsive grid of stat tiles. */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--lsip-sp-4);
    margin: var(--lsip-sp-6) 0;
    width: 100%;        /* force-fill the parent — legacy CSS elsewhere can shrink-wrap us otherwise */
    box-sizing: border-box;
}
.admin-stat-card {
    display: flex; flex-direction: column;
    gap: var(--lsip-sp-2);
    padding: var(--lsip-sp-5);
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow-sm);
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease), border-color 0.15s var(--lsip-ease);
}
.admin-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--lsip-brand);
    box-shadow: var(--lsip-shadow);
}
.admin-stat-icon {
    width: 2.5rem; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    border-radius: var(--lsip-radius);
}
.admin-stat-icon .material-symbols-outlined { font-size: 1.4rem; }
.admin-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lsip-brand);
    line-height: 1;
}
.admin-stat-sub {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lsip-text-muted);
}
.admin-stat-label {
    font-size: 0.85rem;
    color: var(--lsip-text-muted);
    line-height: 1.3;
}

/* Activity list inside the dashboard. */
.admin-activity-list { list-style: none; padding: 0; margin: 0; }
.admin-activity-list li {
    display: flex; align-items: center; gap: var(--lsip-sp-3);
    padding: var(--lsip-sp-3) 0;
    border-bottom: 1px solid var(--lsip-line);
    font-size: 0.92rem;
}
.admin-activity-list li:last-child { border-bottom: 0; }
.admin-activity-list .material-symbols-outlined {
    color: var(--lsip-brand);
    background: var(--lsip-brand-light);
    width: 1.8rem; height: 1.8rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
}

/* First-run welcome card — keep the friendly tone but use brand colours. */
.admin-firstrun-card {
    display: flex;
    align-items: flex-start;
    gap: var(--lsip-sp-5);
    background: linear-gradient(135deg, white 0%, var(--lsip-brand-light) 100%);
    border: 1px solid var(--lsip-line);
    border-left: 4px solid var(--lsip-accent);
    border-radius: var(--lsip-radius-lg);
    padding: var(--lsip-sp-6);
    margin: var(--lsip-sp-4) 0 var(--lsip-sp-6);
    box-shadow: var(--lsip-shadow-sm);
}
.admin-firstrun-card > .material-symbols-outlined {
    font-size: 2.5rem !important;
    color: var(--lsip-accent);
    flex: 0 0 auto;
    line-height: 1;
}
.admin-firstrun-card h2 {
    margin: 0 0 var(--lsip-sp-2);
    color: var(--lsip-brand);
    font-size: 1.4rem;
}
.admin-firstrun-card > div > p {
    color: var(--lsip-text-muted);
    margin: 0;
}
.firstrun-list {
    margin: var(--lsip-sp-4) 0 var(--lsip-sp-3);
    padding-left: var(--lsip-sp-5);
    line-height: 1.65;
}
.firstrun-list li { margin-bottom: var(--lsip-sp-3); }
.firstrun-list a { color: var(--lsip-brand); font-weight: 600; margin-left: 0.5rem; text-decoration: none; }
.firstrun-list a:hover { color: var(--lsip-accent); }
.firstrun-list__note {
    margin: 0 !important;
    font-size: 0.82rem;
    color: var(--lsip-text-muted);
    font-style: italic;
}

/* Admin callout strips — pending review / warnings. */
.admin-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--lsip-sp-4);
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    border-radius: var(--lsip-radius);
    border-left: 4px solid var(--lsip-brand);
    background: white;
    margin-bottom: var(--lsip-sp-4);
    box-shadow: var(--lsip-shadow-sm);
}
.admin-callout--warn { border-left-color: var(--lsip-accent); }
.admin-callout > .material-symbols-outlined {
    color: var(--lsip-accent);
    background: var(--lsip-accent-light, #fff4e6);
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem !important;
    flex: 0 0 auto;
}
.admin-callout strong { color: var(--lsip-brand); display: block; }
.admin-callout p { margin: 0.25rem 0 0; font-size: 0.9rem; }
.admin-callout p a { color: var(--lsip-brand); font-weight: 600; }

/* Two-column panel grid below the stats. */
.admin-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lsip-sp-4);
    margin-top: var(--lsip-sp-4);
}
@media (max-width: 900px) { .admin-panel-grid { grid-template-columns: 1fr; } }

.admin-panel {
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    padding: var(--lsip-sp-5);
    box-shadow: var(--lsip-shadow-sm);
}
.admin-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--lsip-sp-4);
    margin-bottom: var(--lsip-sp-3);
    flex-wrap: wrap;
}
.admin-panel__head h3 {
    margin: 0 0 0.25rem;
    color: var(--lsip-brand);
    font-size: 1.05rem;
    font-weight: 700;
}
.admin-panel__head p {
    margin: 0;
    color: var(--lsip-text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Update activity list to support the new wrapper. */
.admin-activity-list li > div { flex: 1; min-width: 0; }
.admin-activity-list a { color: var(--lsip-brand); font-weight: 500; text-decoration: none; }
.admin-activity-list a:hover { color: var(--lsip-accent); text-decoration: underline; }
.admin-activity-list__meta {
    font-size: 0.82rem;
    color: var(--lsip-text-muted);
    margin-top: 0.15rem;
}

/* ── Privacy policy tile grid ───────────────────────────────────────── */
.privacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--lsip-sp-4);
    margin: var(--lsip-sp-8) 0 0;
}
.privacy-tile {
    display: flex; flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lsip-sp-3);
    padding: var(--lsip-sp-5);
    background: var(--lsip-brand);
    color: white !important;
    text-decoration: none !important;
    border-radius: var(--lsip-radius-lg);
    font-weight: 600;
    font-size: 1rem;
    line-height: var(--lsip-lh-tight);
    transition: background 0.15s var(--lsip-ease), transform 0.15s var(--lsip-ease);
    height: 100%;
    min-height: 8rem;
}
.privacy-tile:hover, .privacy-tile:focus-visible {
    background: var(--lsip-accent);
    transform: translateY(-2px);
    color: white !important;
}
.privacy-tile .material-symbols-outlined {
    font-size: 2rem;
    background: rgba(255,255,255,0.12);
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--lsip-radius);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Employer detail page ───────────────────────────────────────────── */
.employer-detail-hero__row {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    flex-wrap: wrap;
    margin-top: var(--lsip-sp-4);
}
.employer-detail-hero__copy { flex: 1 1 30rem; }
.employer-detail-hero__logo {
    flex: 0 0 auto;
    background: white;
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow);
    width: clamp(180px, 20vw, 260px);
    height: clamp(180px, 20vw, 260px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.employer-detail-hero__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (max-width: 768px) {
    .employer-detail-hero__row { flex-direction: column-reverse; align-items: stretch; }
    .employer-detail-hero__logo { align-self: flex-start; width: 8rem; height: 8rem; }
}

.employer-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--lsip-sp-5);
}
.employer-fact-card {
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow-sm);
    overflow: hidden;
}
.employer-fact-card__body {
    padding: var(--lsip-sp-5);
    display: flex; flex-direction: column;
    gap: var(--lsip-sp-4);
}
.employer-fact h6 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lsip-accent);
    margin: 0 0 0.25rem;
}
.employer-fact p {
    margin: 0;
    color: var(--lsip-brand);
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: 600;
}
.employer-fact-map {
    border-radius: var(--lsip-radius);
    overflow: hidden;
    border: 1px solid var(--lsip-line);
}

.employer-quote {
    padding: clamp(3rem, 6vw, 5rem) var(--lsip-section-px);
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
}
.employer-quote__inner { position: relative; }
.employer-quote__mark {
    font-size: clamp(3rem, 6vw, 4.5rem) !important;
    opacity: 0.4;
    display: block;
    margin: 0 auto var(--lsip-sp-3);
}
.employer-quote blockquote {
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    line-height: var(--lsip-lh-snug);
    font-weight: 500;
    margin: 0;
    font-style: italic;
}

.site-heading {
    font-size: var(--lsip-fs-2xl);
    color: var(--lsip-brand);
    margin: 0 0 var(--lsip-sp-5);
    line-height: var(--lsip-lh-tight);
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* ── Signposter — list-reset only; the launcher itself is styled by
       lsip-chatbot.css as a floating chat button (no longer a nav icon). */
#signposter #tw,
#signposter ul,
#signposter ol,
#signposter li { list-style: none; padding: 0; margin: 0; }

/* ── Power BI embed wrapper ─────────────────────────────────────────── */
.powerbi-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 600px;
    border-radius: var(--lsip-radius);
    overflow: hidden;
    border: 1px solid var(--lsip-line);
    box-shadow: var(--lsip-shadow);
    background: var(--lsip-paper);
}
.powerbi-frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ── Job detail page ────────────────────────────────────────────────── */
.job-hero__row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: clamp(1.25rem, 2vw, 1.75rem); width: 100%;
}
.job-hero__copy { flex: 1 1 320px; min-width: 0; }
.job-hero__logo {
    flex: 0 0 auto;
    width: clamp(88px, 12vw, 140px);
    height: clamp(88px, 12vw, 140px);
    background: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(0.6rem, 1.2vw, 1rem);
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.job-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.job-summary {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--lsip-sp-5);
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--lsip-paper);
    border-left: 4px solid var(--lsip-brand);
    border-radius: var(--lsip-radius);
}
.job-summary__facts {
    display: flex; flex-wrap: wrap;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    flex: 1 1 320px;
    min-width: 0;
}
.job-summary__cta { flex: 0 0 auto; }

@media (max-width: 560px) {
    .job-summary { gap: var(--lsip-sp-4); }
    .job-summary__cta { width: 100%; }
    .job-summary__cta .site-btn { width: 100%; justify-content: center; }
}

.job-fact {
    display: inline-flex; align-items: center; gap: var(--lsip-sp-2);
    color: var(--lsip-text);
    font-size: var(--lsip-fs-sm);
    font-weight: 500;
    min-width: 0;
}
.job-fact > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18ch;
}
.job-fact .material-symbols-outlined {
    font-size: 1.2rem; color: var(--lsip-brand);
    flex: 0 0 auto;
}

/* ── 404 page ───────────────────────────────────────────────────────── */
.notfound-code {
    font-size: clamp(5rem, 14vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--lsip-brand);
    opacity: 0.15;
    letter-spacing: -0.04em;
    margin-bottom: var(--lsip-sp-2);
}
.notfound-title {
    font-size: var(--lsip-fs-3xl);
    color: var(--lsip-brand);
    margin: 0 0 var(--lsip-sp-4);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.notfound-lead {
    font-size: var(--lsip-fs-md);
    color: var(--lsip-text-muted);
    max-width: 36rem;
    margin: 0 auto;
    line-height: var(--lsip-lh-snug);
}

/* ── A11y: focus visibility ─────────────────────────────────────────── */
.site-btn:focus-visible,
a.site-card:focus-visible,
a.site-feature:focus-visible {
    outline: 3px solid var(--lsip-accent);
    outline-offset: 2px;
}