/* ============================================================================
 * 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%; }
/* Text-heavy blocks cap at ~72ch so long paragraphs stay readable even
   when the surrounding container is wide enough for 3-column card grids. */
.site-prose > p,
.site-prose > ul,
.site-prose > ol,
.site-prose > blockquote,
.site-prose > h2,
.site-prose > h3,
.site-prose > h4 { max-width: 72ch; }
.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,
.employer-fact__title {
    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;
}

/* ── Provider / signpost card grid ────────────────────────────────────
   Utility for the "Where to go for training" CMS page (and any similar
   directory-style listing). Wrap a sequence of provider cards in
   <div class="lsip-provider-grid"> ... </div> from the rich-text editor.
   Each card uses <div class="lsip-provider-card"> with an <img> for the
   logo and an <h3> (or <p class="lsip-provider-card__name">) for the name —
   spacing and sizing are then identical across every card.

   3 cards per row on desktop, 2 on tablet, 1 on mobile. */
.lsip-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: var(--lsip-sp-6) 0;
}
@media (max-width: 960px) {
    .lsip-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .lsip-provider-grid { grid-template-columns: 1fr; }
}

.lsip-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--lsip-sp-3);                /* fixed gap between logo and name */
    padding: var(--lsip-sp-5) var(--lsip-sp-4);
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease);
}
.lsip-provider-card:hover,
.lsip-provider-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--lsip-shadow-strong, 0 12px 28px rgba(15, 42, 92, 0.16));
    text-decoration: none;
}

/* Lock the logo to a consistent footprint so every card looks aligned
   regardless of the source image's aspect ratio. */
.lsip-provider-card img {
    width: 100%;
    max-width: 180px;
    height: 80px;
    object-fit: contain;
    margin: 0;
}

.lsip-provider-card h3,
.lsip-provider-card .lsip-provider-card__name {
    margin: 0;
    font-size: var(--lsip-fs-md);
    font-weight: 700;
    color: var(--lsip-brand);
    line-height: var(--lsip-lh-snug);
}

/* ── Home page submission band ─────────────────────────────────────────
   Side-by-side cards prompting visitors to send in a news story or an
   event. Surfaced on the homepage at Hannah's request (30 Jun 2026). */
.home-submit-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
}
@media (max-width: 720px) {
    .home-submit-band { grid-template-columns: 1fr; }
}
.home-submit-card {
    display: flex;
    align-items: flex-start;
    gap: var(--lsip-sp-4);
    padding: clamp(1.25rem, 2vw, 1.5rem);
    background: white;
    border: 1px solid var(--lsip-line);
    border-left: 4px solid var(--lsip-accent);
    border-radius: var(--lsip-radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--lsip-shadow);
    transition: transform 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease), border-color 0.15s var(--lsip-ease);
}
.home-submit-card:hover,
.home-submit-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 42, 92, 0.16);
    border-left-color: var(--lsip-brand);
    text-decoration: none;
    color: inherit;
}
.home-submit-card__icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home-submit-card__icon .material-symbols-outlined { font-size: 1.5rem; }
.home-submit-card__body { display: flex; flex-direction: column; gap: var(--lsip-sp-1); min-width: 0; }
.home-submit-card__body h3 {
    margin: 0;
    font-size: var(--lsip-fs-lg);
    font-weight: 700;
    color: var(--lsip-brand);
    line-height: var(--lsip-lh-snug);
}
.home-submit-card__body p {
    margin: 0;
    color: var(--lsip-text);
    font-size: var(--lsip-fs-sm);
    line-height: var(--lsip-lh-snug);
}
.home-submit-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--lsip-sp-2);
    color: var(--lsip-brand);
    font-weight: 700;
    font-size: var(--lsip-fs-sm);
}
.home-submit-card__cta .material-symbols-outlined { font-size: 1rem; }

/* ── Employers listing (2026-07-01 modernisation) ─────────────────────────
   Filter pills + industry strip + tile grid matching the Sectors listing
   patterns. Tile media is locked to a consistent aspect so a logo-only
   card doesn't jostle against a photo card. */
.employers-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--lsip-sp-3);
    align-items: center; justify-content: space-between;
    margin-top: var(--lsip-sp-6);
}
.employers-filter { display: flex; flex-wrap: wrap; gap: var(--lsip-sp-2); }
.employers-filter-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--lsip-line);
    background: white;
    border-radius: 9999px;
    font-size: var(--lsip-fs-sm); font-weight: 600;
    color: var(--lsip-text);
    cursor: pointer;
    transition: background 0.15s var(--lsip-ease), color 0.15s var(--lsip-ease), border-color 0.15s var(--lsip-ease);
}
.employers-filter-pill:hover { background: var(--lsip-brand-light); color: var(--lsip-brand); border-color: var(--lsip-brand); }
.employers-filter-pill.is-active { background: var(--lsip-brand); color: white; border-color: var(--lsip-brand); }
.employers-filter-pill .material-symbols-outlined { font-size: 1rem; }
.employers-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; padding: 0 0.4rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.7rem; font-weight: 700;
}
.employers-filter-pill:not(.is-active) .employers-filter-count { background: var(--lsip-brand-light); color: var(--lsip-brand); }

.employers-search {
    position: relative;
    display: inline-flex; align-items: center;
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    min-width: 260px;
}
.employers-search:focus-within { border-color: var(--lsip-brand); box-shadow: 0 0 0 3px var(--lsip-brand-light); }
.employers-search .material-symbols-outlined { color: var(--lsip-text-muted); font-size: 1.15rem; }
.employers-search input {
    border: 0; background: transparent;
    padding: 0.35rem 0.5rem; font-size: var(--lsip-fs-sm);
    min-width: 0; flex: 1;
    outline: none;
}
.employers-search-clear {
    border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lsip-text-muted);
    cursor: pointer;
}

.employers-industry-strip {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: var(--lsip-sp-3) 0 0;
}
.employers-industry-pill {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--lsip-line);
    background: transparent;
    border-radius: 9999px;
    font-size: 0.8rem; font-weight: 600;
    color: var(--lsip-text-muted);
    cursor: pointer;
    transition: background 0.15s var(--lsip-ease), color 0.15s var(--lsip-ease), border-color 0.15s var(--lsip-ease);
}
.employers-industry-pill:hover { color: var(--lsip-brand); border-color: var(--lsip-brand); }
.employers-industry-pill.is-active { background: var(--lsip-brand); color: white; border-color: var(--lsip-brand); }

.employers-resultbar {
    display: flex; align-items: center; justify-content: space-between;
    margin: var(--lsip-sp-4) 0 var(--lsip-sp-3);
    color: var(--lsip-text-muted);
    font-size: var(--lsip-fs-sm);
}
.employers-reset {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: transparent; border: 0;
    color: var(--lsip-brand);
    font-weight: 600; cursor: pointer;
}
.employers-reset .material-symbols-outlined { font-size: 1rem; }

.employers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: var(--lsip-sp-4);
}
@media (max-width: 960px) { .employers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .employers-grid { grid-template-columns: 1fr; } }

.employer-tile {
    display: flex; flex-direction: column;
    background: white;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    overflow: hidden;
    box-shadow: var(--lsip-shadow);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.18s var(--lsip-ease), box-shadow 0.18s var(--lsip-ease), border-color 0.18s var(--lsip-ease);
}
.employer-tile:hover,
.employer-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(15, 42, 92, 0.16);
    border-color: var(--lsip-brand);
    text-decoration: none;
    color: inherit;
}
.employer-tile.is-featured { border-color: var(--lsip-accent); }
.employer-tile__featured {
    position: absolute; top: 0.75rem; right: 0.75rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--lsip-accent);
    color: white;
    border-radius: 9999px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    z-index: 2;
}
.employer-tile__featured .material-symbols-outlined { font-size: 0.9rem; }

.employer-tile__media {
    aspect-ratio: 16 / 9;
    background: var(--lsip-paper);
    display: flex; align-items: center; justify-content: center;
    padding: var(--lsip-sp-4);
    border-bottom: 1px solid var(--lsip-line);
}
.employer-tile__media img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}
.employer-tile__media-placeholder { color: var(--lsip-brand); opacity: 0.35; }
.employer-tile__media-placeholder .material-symbols-outlined { font-size: 3rem; }

.employer-tile__body {
    padding: var(--lsip-sp-4);
    display: flex; flex-direction: column; gap: var(--lsip-sp-2);
    flex: 1;
}
.employer-tile__industry {
    font-size: 0.75rem; font-weight: 700;
    color: var(--lsip-brand);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.employer-tile__title {
    margin: 0;
    font-size: var(--lsip-fs-lg);
    font-weight: 700;
    color: var(--lsip-ink);
    line-height: var(--lsip-lh-snug);
    letter-spacing: -0.005em;
}
.employer-tile__strap {
    margin: 0;
    color: var(--lsip-text-muted);
    font-size: var(--lsip-fs-sm);
    line-height: var(--lsip-lh-snug);
}
.employer-tile__badges {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    margin-top: auto;
    padding-top: var(--lsip-sp-2);
}
.employer-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.7rem; font-weight: 700;
}
.employer-badge .material-symbols-outlined { font-size: 0.9rem; }
.employer-badge--work { background: rgba(20, 56, 122, 0.10); color: var(--lsip-brand); }
.employer-badge--vol  { background: rgba(46, 125, 79, 0.14); color: #2e7d4f; }
.employer-badge--asm  { background: rgba(215, 124, 26, 0.15); color: #b8651a; }

.employer-tile__cta {
    display: inline-flex; align-items: center; justify-content: space-between;
    padding: var(--lsip-sp-3) var(--lsip-sp-4);
    background: var(--lsip-paper);
    border-top: 1px solid var(--lsip-line);
    font-size: var(--lsip-fs-sm); font-weight: 700;
    color: var(--lsip-brand);
}
.employer-tile__cta .material-symbols-outlined { font-size: 1rem; transition: transform 0.15s var(--lsip-ease); }
.employer-tile:hover .employer-tile__cta .material-symbols-outlined { transform: translateX(3px); }

/* ── Reusable CMS HTML editor container ────────────────────────────────
   Wraps a RadzenHtmlEditor so it has a consistent chrome across admin
   pages. Fixed min-height, resize disabled (the editor itself handles
   growth), soft border matching form controls elsewhere. Replaces the
   ad-hoc `<div style="resize: both; overflow: auto; border: 1px solid #ccc; …">`
   wrappers scattered through the older admin pages. */
.cms-html-editor {
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius);
    background: white;
    padding: 0;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease);
}
.cms-html-editor:focus-within {
    border-color: var(--lsip-brand);
    box-shadow: 0 0 0 3px var(--lsip-brand-light);
}
.cms-html-editor .rz-html-editor,
.cms-html-editor .rz-html-editor-content {
    border: 0;
    flex: 1;
    min-height: 180px;
}

/* ── Latest news homepage widget ────────────────────────────────────────
   Mirrors .upcoming-events-block so the two widgets read as a matched pair
   on the homepage. Card layout tuned for a news preview (chip + title +
   snippet + date) instead of an event (date tile + location). */
.latest-news-block {
    background: #fff;
    padding: var(--lsip-section-y) var(--lsip-section-px);
    margin: 0;
}
.site-section--paper + .latest-news-block,
.upcoming-events-block + .latest-news-block,
.latest-news-block + .newsletter-block,
.latest-news-block + .site-section--paper { padding-top: 0; }
.latest-news-block:has(+ .site-cta-band) { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }

.latest-news-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.latest-news-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.latest-news-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lsip-brand);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.latest-news-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--lsip-sp-4);
    flex-wrap: wrap;
}

.latest-news-submit,
.upcoming-events-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--lsip-brand);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: var(--lsip-radius);
    background: var(--lsip-brand-light);
    transition: background 0.15s var(--lsip-ease), color 0.15s var(--lsip-ease);
}
.latest-news-submit:hover,
.latest-news-submit:focus-visible,
.upcoming-events-submit:hover,
.upcoming-events-submit:focus-visible {
    background: var(--lsip-brand);
    color: #fff;
    text-decoration: none;
}
.latest-news-submit .material-symbols-outlined,
.upcoming-events-submit .material-symbols-outlined { font-size: 1.05rem; }

.latest-news-all {
    color: var(--lsip-brand);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.15s;
}
.latest-news-all:hover { color: var(--lsip-accent); text-decoration: underline; }

.upcoming-events-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--lsip-sp-4);
    flex-wrap: wrap;
}

.latest-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.latest-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 6px rgba(15, 42, 92, 0.05);
}
.latest-news-card:hover {
    transform: translateY(-3px);
    border-color: var(--lsip-brand);
    box-shadow: 0 10px 24px rgba(15, 42, 92, 0.13);
    color: inherit;
    text-decoration: none;
}

.latest-news-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--lsip-brand);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.latest-news-card.no-image .latest-news-media {
    background: linear-gradient(135deg, var(--lsip-brand) 0%, #1f4ea0 100%);
}
.latest-news-card.no-image .latest-news-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(251,177,60,0.18) 0, transparent 45%);
    pointer-events: none;
}

.latest-news-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    color: var(--lsip-brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.16);
    z-index: 1;
}

.latest-news-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem 1.15rem;
}
.latest-news-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lsip-brand);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.latest-news-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.45;
}
.latest-news-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #666;
    margin-top: auto;
    padding-top: 0.5rem;
}
.latest-news-meta .material-symbols-outlined {
    font-size: 1rem;
    color: var(--lsip-brand);
}
.latest-news-source { color: #999; font-weight: 600; }

@media (max-width: 600px) {
    .latest-news-block { padding: 2.5rem 1rem; }
    .latest-news-header h2 { font-size: 1.5rem; }
}

/* ── Submit-yours strips on /news-and-events and /events ────────────
   Slim horizontal band with a short lede and a primary CTA. Sits above
   the filter row so users see the submission path before they scroll. */
.news-submit-strip,
.events-submit-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lsip-sp-4);
    flex-wrap: wrap;
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    margin-bottom: var(--lsip-sp-5);
    background: var(--lsip-brand-light);
    border: 1px solid var(--lsip-line);
    border-left: 4px solid var(--lsip-accent);
    border-radius: var(--lsip-radius-lg);
}
.news-submit-strip__lede,
.events-submit-strip__lede {
    display: inline-flex;
    align-items: center;
    gap: var(--lsip-sp-3);
    color: var(--lsip-brand);
    font-weight: 600;
    font-size: var(--lsip-fs-base);
    line-height: 1.35;
}
.news-submit-strip__lede .material-symbols-outlined,
.events-submit-strip__lede .material-symbols-outlined {
    font-size: 1.4rem;
    color: var(--lsip-brand);
}

/* ── In-article submit prompts on /NewsDetails/* and /events/* ──── */
.news-submit-prompt,
.events-submit-prompt {
    display: flex;
    align-items: center;
    gap: var(--lsip-sp-4);
    padding: var(--lsip-sp-4) var(--lsip-sp-5);
    margin-top: var(--lsip-sp-6);
    background: var(--lsip-paper, #f7f5f0);
    border: 1px solid var(--lsip-line);
    border-left: 4px solid var(--lsip-accent);
    border-radius: var(--lsip-radius-lg);
    flex-wrap: wrap;
}
.news-submit-prompt .material-symbols-outlined,
.events-submit-prompt .material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--lsip-brand);
    flex: 0 0 auto;
}
.news-submit-prompt__body,
.events-submit-prompt__body {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.news-submit-prompt__body strong,
.events-submit-prompt__body strong {
    color: var(--lsip-brand);
    font-size: var(--lsip-fs-lg);
    font-weight: 700;
    line-height: 1.25;
}
.news-submit-prompt__body p,
.events-submit-prompt__body p {
    margin: 0;
    color: var(--lsip-text);
    font-size: var(--lsip-fs-sm);
    line-height: 1.45;
}

/* ── Flipbook card ──────────────────────────────────────────────────────
   Cover-thumbnail + summary + primary CTA. Used to surface Heyzine (or
   similar) flipbooks without embedding the iframe in-page. See
   Pages/Site/Blocks/FlipbookCard.razor. */
.flipbook-card {
    background: #fff;
    border: 1px solid var(--lsip-line);
    border-radius: var(--lsip-radius-lg);
    box-shadow: var(--lsip-shadow);
    overflow: hidden;
}
.flipbook-card__inner {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    align-items: center;
}
@media (max-width: 640px) {
    .flipbook-card__inner {
        grid-template-columns: 1fr;
        gap: var(--lsip-sp-4);
    }
}
.flipbook-card__cover {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--lsip-radius);
    overflow: hidden;
    background: var(--lsip-brand);
    box-shadow: 0 10px 26px -12px rgba(15, 42, 92, 0.35);
    transition: transform 0.2s var(--lsip-ease), box-shadow 0.2s var(--lsip-ease);
    text-decoration: none;
}
.flipbook-card__cover:hover,
.flipbook-card__cover:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(15, 42, 92, 0.45);
    outline: none;
}
.flipbook-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.flipbook-card__cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lsip-brand) 0%, #1f4ea0 100%);
    color: #fff;
}
.flipbook-card__cover-fallback .material-symbols-outlined {
    font-size: 3.5rem;
    opacity: 0.85;
}
.flipbook-card__cover-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--lsip-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.flipbook-card__cover-badge .material-symbols-outlined { font-size: 0.95rem; }

.flipbook-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--lsip-sp-2);
    min-width: 0;
}
.flipbook-card__title {
    margin: 0;
    font-size: var(--lsip-fs-xl);
    color: var(--lsip-brand);
    font-weight: 700;
    line-height: var(--lsip-lh-tight);
    letter-spacing: -0.01em;
}
.flipbook-card__lede {
    margin: 0;
    color: var(--lsip-text);
    font-size: var(--lsip-fs-base);
    line-height: var(--lsip-lh-snug);
}
.flipbook-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lsip-sp-3);
    margin-top: var(--lsip-sp-3);
}
.flipbook-card__actions .site-btn .material-symbols-outlined { font-size: 1.1rem; }
.flipbook-card__note {
    margin: var(--lsip-sp-2) 0 0;
    font-size: var(--lsip-fs-xs);
    color: var(--lsip-text-muted, #6a6f78);
    line-height: 1.4;
}

/* Inline iframe embed under the card. The frame keeps a 4:3 aspect on
   desktop so page spreads render at readable size, and clamps its own
   height on tall viewports so the visitor can still see the fullscreen
   escape link without scrolling far. */
.flipbook-card__embed {
    padding: 0 clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem);
    border-top: 1px solid var(--lsip-line);
    background: var(--lsip-paper);
}
.flipbook-card__embed-frame {
    position: relative;
    width: 100%;
    /* Explicit clamped height so the iframe stays a comfortable reading size
       while leaving the annex download row visible in the same viewport.
       Was 4:3 with max-height 78vh — that pushed the annexes off-screen. */
    height: clamp(360px, 52vh, 520px);
    margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
    background: #0f2a5c;
    border-radius: var(--lsip-radius);
    overflow: hidden;
    box-shadow: 0 10px 26px -12px rgba(15, 42, 92, 0.35);
}
.flipbook-card__embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.flipbook-card__embed-fs {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--lsip-sp-3);
    color: var(--lsip-brand);
    font-weight: 700;
    font-size: var(--lsip-fs-sm);
    text-decoration: none;
}
.flipbook-card__embed-fs:hover { color: var(--lsip-accent); text-decoration: underline; }
.flipbook-card__embed-fs .material-symbols-outlined { font-size: 1.1rem; }

@media (max-width: 640px) {
    /* Portrait phones: taller iframe so pages render legibly, but still
       capped so the annex row is only a short scroll away. */
    .flipbook-card__embed-frame { height: clamp(420px, 65vh, 560px); }
}

/* ── /heylsip2 page ────────────────────────────────────────────────────
   Statutory-plan landing page with intro copy → main report card →
   annex download grid. See Pages/Site/HEYLSIP/HeyLsip2.razor. */
.heylsip2-intro { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.heylsip2-main  { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

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

.heylsip2-annex-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
}
@media (max-width: 800px) {
    .heylsip2-annex-grid { grid-template-columns: 1fr; }
}

.heylsip2-annex-card {
    display: flex;
    align-items: flex-start;
    gap: var(--lsip-sp-4);
    padding: clamp(1rem, 2vw, 1.25rem);
    background: #fff;
    border: 1px solid var(--lsip-line);
    border-left: 4px solid var(--lsip-accent);
    border-radius: var(--lsip-radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--lsip-shadow);
    transition: transform 0.15s var(--lsip-ease), box-shadow 0.15s var(--lsip-ease), border-color 0.15s var(--lsip-ease);
}
.heylsip2-annex-card:hover,
.heylsip2-annex-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(15, 42, 92, 0.20);
    border-left-color: var(--lsip-brand);
    text-decoration: none;
    color: inherit;
}
.heylsip2-annex-card__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--lsip-brand-light);
    color: var(--lsip-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.heylsip2-annex-card__icon .material-symbols-outlined { font-size: 1.35rem; }
.heylsip2-annex-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.heylsip2-annex-card__body h3 {
    margin: 0;
    font-size: var(--lsip-fs-lg);
    font-weight: 700;
    color: var(--lsip-brand);
    line-height: var(--lsip-lh-snug);
}
.heylsip2-annex-card__body p {
    margin: 0;
    color: var(--lsip-text);
    font-size: var(--lsip-fs-sm);
    line-height: 1.45;
}
.heylsip2-annex-card__cta {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--lsip-brand);
    font-weight: 700;
    font-size: var(--lsip-fs-sm);
    white-space: nowrap;
}
.heylsip2-annex-card__cta .material-symbols-outlined { font-size: 1rem; }

/* Admin rows for /Manage/HeyLsip2 — inline edit for each annex. */
.annex-rows { display: flex; flex-direction: column; gap: var(--lsip-sp-3); }
.annex-row {
    background: #fff;
    border: 1px solid var(--lsip-line);
    border-left: 4px solid var(--lsip-accent);
    border-radius: var(--lsip-radius);
    padding: var(--lsip-sp-3) var(--lsip-sp-4);
}
.annex-row + .annex-row { margin-top: 0; }