/* ============================================================
   loc-static.css — self-contained CSS for pre-rendered location pages.
   No MudBlazor, no Blazor runtime. Loaded by LocationPageHtmlBuilder only.
   ============================================================ */

:root {
    --loc-accent:       #bba96c;
    --loc-accent-hover: #a8966a;
    --loc-accent-light: rgba(187,169,108,.10);
    --loc-text:         #2b2b2b;
    --loc-muted:        #6b6b6b;
    --loc-bg:           #ffffff;
    --loc-bg-alt:       #f8f6f2;
    --loc-bg-stripe:    #f3f0ea;
    --loc-card-bg:      #ffffff;
    --loc-border:       #e8e4de;
    --loc-radius:       8px;
    --loc-radius-lg:    12px;
    --loc-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --loc-shadow:       0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    --loc-shadow-lg:    0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --loc-font:         'League Spartan', 'League Spartan Fallback', system-ui, -apple-system, sans-serif;
    --loc-max-w:        1180px;
}

/* Flat pass: no card borders/shadows, page sits on plain white/off-white.
   Default (light) tokens above already serve that; dark tokens below are
   the standalone toggle's target (no Blazor runtime here — see the inline
   script LocationPageHtmlBuilder emits in the footer). */
:root[data-theme="dark"] {
    --loc-accent:       #d8c283;
    --loc-accent-hover: #e8d19a;
    --loc-accent-light: rgba(216,194,131,.14);
    --loc-text:         #f0ece2;
    --loc-muted:        #a9a396;
    --loc-bg:           #17140f;
    --loc-bg-alt:       #1e1a13;
    --loc-bg-stripe:    #241f17;
    --loc-card-bg:      #17140f;
    --loc-border:       #322b1d;
    --loc-shadow-sm:    none;
    --loc-shadow:       none;
    --loc-shadow-lg:    none;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Fonts (self-hosted) ───────────────────────────────────── */
/* URLs here are unversioned and match the <link rel="preload"> tags emitted by
   LocationPageHtmlBuilder exactly, so the preload is actually used. Keep them in sync. */
@font-face {
    font-family: 'League Spartan';
    src: url('/fonts/LeagueSpartan-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'League Spartan';
    src: url('/fonts/leaguespartan-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

/* Metric-matched fallback — mirrors the rules in App.razor's inline <style>.
   League Spartan has a much shorter box (ascent 0.70em / descent 0.22em) than any system
   fallback (Segoe UI 1.08em, Roboto 0.89em, Arial 0.91em), so without these overrides every
   line of text resizes when the real font arrives. These force the fallback to report
   League Spartan's metrics, making the swap shift-free. */
@font-face {
    font-family: 'League Spartan Fallback';
    src: local('Arial'), local('Roboto'), local('Helvetica Neue'), local('Liberation Sans');
    font-weight: 400;
    ascent-override: 76.9%;
    descent-override: 24.2%;
    line-gap-override: 0%;
    size-adjust: 91%;
}
@font-face {
    font-family: 'League Spartan Fallback';
    src: local('Arial Bold'), local('Arial'), local('Roboto'), local('Helvetica Neue'), local('Liberation Sans');
    font-weight: 700;
    ascent-override: 76.9%;
    descent-override: 24.2%;
    line-gap-override: 0%;
    size-adjust: 91%;
}

/* ── Body ──────────────────────────────────────────────────── */
.loc-static-body {
    font-family: var(--loc-font);
    color: var(--loc-text);
    background: var(--loc-bg);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
.loc-static-body a:not([class]) { color: var(--loc-accent); text-decoration: none; }
.loc-static-body a:not([class]):hover { text-decoration: underline; }

/* ── Header ────────────────────────────────────────────────── */
.loc-header {
    background: var(--loc-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--loc-border);
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
}
.loc-header-inner {
    max-width: var(--loc-max-w);
    margin: 0 auto;
    padding: .7rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.loc-logo { flex-shrink: 0; line-height: 0; }
.loc-logo img { height: 38px; width: auto; max-width: 210px; object-fit: contain; }
.loc-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    flex: 1;
}
.loc-nav a {
    color: var(--loc-muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .45rem .9rem;
    border-radius: 99px;
    transition: background .15s, color .15s;
}
.loc-nav a:hover { background: var(--loc-bg-alt); color: var(--loc-text); }
.loc-cta-btn {
    background: var(--loc-accent);
    color: #fff !important;
    padding: .5rem 1.25rem;
    border-radius: 99px;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(187,169,108,.35);
}
.loc-cta-btn:hover { background: var(--loc-accent-hover); box-shadow: 0 3px 10px rgba(187,169,108,.45); }

/* ── Breadcrumb ────────────────────────────────────────────── */
.loc-breadcrumb {
    max-width: var(--loc-max-w);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    font-size: .85rem;
    color: var(--loc-muted);
}
.loc-breadcrumb a { color: var(--loc-text); text-decoration: none; }
.loc-breadcrumb a:hover { text-decoration: underline; }
.loc-breadcrumb span[aria-current="page"] { color: var(--loc-muted); }

/* ── Hero ──────────────────────────────────────────────────── */
.loc-hero {
    background: var(--loc-bg);
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    border-bottom: 1px solid var(--loc-border);
}
.loc-hero-subpage {
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
    background: var(--loc-bg);
    border-bottom: 1px solid var(--loc-border);
}
.loc-hero-inner { max-width: 820px; margin: 0 auto; }
.loc-h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 1rem;
    color: var(--loc-accent);
    letter-spacing: -.01em;
}
.loc-subtitle {
    font-size: 1.1rem;
    color: var(--loc-muted);
    margin-bottom: 2rem;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.loc-hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.loc-hero-links {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .9rem;
    justify-content: center;
    margin-bottom: .6rem;
    color: var(--loc-muted);
}
.loc-hero-links a { color: var(--loc-accent); text-decoration: none; font-weight: 600; }
.loc-hero-links a:hover { text-decoration: underline; }
.loc-caption { font-size: .8rem; color: var(--loc-muted); margin-top: .5rem; }

/* ── Sub-page navigation (responsive chip list) ──────────────── */
.loc-subnav {
    background: var(--loc-bg);
    border-bottom: 1px solid var(--loc-border);
    padding: .85rem 1.5rem;
}
.loc-subnav-inner {
    max-width: var(--loc-max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .65rem;
    column-gap: .5rem;
}
.loc-subnav-link {
    display: inline-flex;
    align-items: center;
    padding: .4rem .95rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--loc-muted);
    text-decoration: none;
    background: var(--loc-bg-alt);
    border: 1px solid var(--loc-border);
    border-radius: 999px;
    transition: background .15s, color .15s, border-color .15s;
}
.loc-subnav-link:hover { color: var(--loc-text); border-color: var(--loc-accent); }
.loc-subnav-active {
    color: #fff;
    background: var(--loc-accent);
    border-color: var(--loc-accent);
    font-weight: 700;
}

/* ── Buttons ───────────────────────────────────────────────── */
.loc-btn-primary {
    display: inline-block;
    background: var(--loc-accent);
    color: #fff;
    padding: .7rem 1.75rem;
    border-radius: var(--loc-radius);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .6px;
    transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: 0 2px 8px rgba(187,169,108,.3);
}
.loc-btn-primary:hover {
    background: var(--loc-accent-hover);
    box-shadow: 0 4px 14px rgba(187,169,108,.4);
    transform: translateY(-1px);
}
.loc-btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--loc-accent);
    padding: .7rem 1.75rem;
    border-radius: var(--loc-radius);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .6px;
    border: 2px solid var(--loc-accent);
    transition: background .15s, transform .1s;
}
.loc-btn-outline:hover { background: var(--loc-accent-light); transform: translateY(-1px); }
.loc-btn-sm { padding: .4rem .85rem; font-size: .8rem; letter-spacing: .3px; }
.loc-btn-lg { padding: .85rem 2.25rem; font-size: 1rem; }

/* ── Main layout ───────────────────────────────────────────── */
.loc-main {
    max-width: var(--loc-max-w);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3.5rem;
}
.loc-section { margin-bottom: 2rem; }
.loc-content-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

/* ── Cards ─────────────────────────────────────────────────── */
.loc-card {
    background: transparent;
    border: none;
    padding: 0 0 2rem;
}
.loc-card h2, .loc-card-heading {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .85rem;
    color: var(--loc-text);
    line-height: 1.25;
    border-left: 3px solid var(--loc-accent);
    padding-left: .75rem;
}

/* Highlighted card variant — overview info panel */
.loc-description {
    border-top: 1px solid var(--loc-border);
    padding-top: 1.5rem;
}
.loc-description .loc-card-heading { color: var(--loc-accent); }

/* Sub-page body prose */
.loc-subpage-body { padding: 2rem; }
.loc-subpage-body h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--loc-accent);
    margin: 2rem 0 .65rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--loc-border);
    line-height: 1.25;
}
.loc-subpage-body h2:first-child { margin-top: 0; }
.loc-subpage-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--loc-text);
    margin: 1.4rem 0 .4rem;
}
.loc-subpage-body p { margin: .75rem 0; color: var(--loc-text); line-height: 1.7; }
.loc-subpage-body ul, .loc-subpage-body ol { margin: .7rem 0 .7rem 1.5rem; }
.loc-subpage-body li { margin-bottom: .4rem; line-height: 1.6; }
.loc-subpage-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: .9rem;
    border-radius: var(--loc-radius);
    overflow: hidden;
}
.loc-subpage-body th, .loc-subpage-body td {
    border: 1px solid var(--loc-border);
    padding: .6rem .9rem;
    text-align: left;
}
.loc-subpage-body th {
    background: var(--loc-bg-alt);
    font-weight: 700;
    color: var(--loc-text);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.loc-subpage-body strong { font-weight: 700; color: var(--loc-text); }

/* ── Key facts table (town overview "at a glance") ─────────── */
.loc-facts {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0 .75rem;
    font-size: .92rem;
}
.loc-facts th, .loc-facts td {
    border-bottom: 1px solid var(--loc-border);
    padding: .6rem .75rem .6rem 0;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.loc-facts th {
    width: 38%;
    font-weight: 600;
    color: var(--loc-muted);
}
.loc-facts td { color: var(--loc-text); }
.loc-facts a { color: var(--loc-accent); }
@media (max-width: 600px) {
    .loc-facts th, .loc-facts td { display: block; width: 100%; padding-right: 0; }
    .loc-facts th { border-bottom: none; padding-bottom: 0; }
}

/* ── Nearest practices table (LocalPracticeTable) ──────────── */
.loc-subpage-main { min-width: 0; }
.loc-table-wrap { overflow-x: auto; margin: .5rem 0 .75rem; }
.loc-practices {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.loc-practices caption {
    text-align: left;
    font-size: .85rem;
    color: var(--loc-muted);
    padding-bottom: .4rem;
}
.loc-practices th, .loc-practices td {
    border-bottom: 1px solid var(--loc-border);
    padding: .55rem .75rem .55rem 0;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}
.loc-practices thead th {
    font-weight: 600;
    color: var(--loc-muted);
    white-space: nowrap;
}
.loc-practices td { color: var(--loc-text); }
.loc-practices a { color: var(--loc-accent); font-weight: 600; }
.loc-practice-town { display: block; font-size: .82rem; color: var(--loc-muted); }
@media (max-width: 600px) {
    .loc-practices { font-size: .8rem; }
    .loc-practices th, .loc-practices td { padding-right: .45rem; }
    .loc-practices td:first-child { min-width: 8.5rem; }
}
.loc-muted { color: var(--loc-muted); }

/* ── Sidebar ───────────────────────────────────────────────── */
.loc-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.loc-sidebar-card {
    background: var(--loc-bg-alt);
    border: none;
    border-radius: var(--loc-radius-lg);
    padding: 1.4rem;
    box-shadow: none;
}
/* Primary CTA sidebar card — the one solid gold-tint block per page */
.loc-sidebar-card:first-child {
    background: var(--loc-accent);
    border: none;
    box-shadow: none;
}
.loc-sidebar-card:first-child .loc-sidebar-heading { color: #fff; }
.loc-sidebar-card:first-child .loc-sidebar-body { color: rgba(255,255,255,.85); }
.loc-sidebar-card:first-child .loc-btn-primary {
    background: #fff;
    color: var(--loc-accent);
    box-shadow: none;
}
.loc-sidebar-card:first-child .loc-btn-primary:hover { background: #f5f2ec; }
.loc-sidebar-heading {
    font-weight: 700;
    font-size: .95rem;
    color: var(--loc-text);
    margin-bottom: .5rem;
}
.loc-sidebar-body { font-size: .87rem; color: var(--loc-muted); margin-bottom: .85rem; line-height: 1.55; }
.loc-sidebar-links { display: flex; flex-direction: column; gap: .45rem; }

/* ── Chips ─────────────────────────────────────────────────── */
.loc-chip {
    display: inline-block;
    background: var(--loc-bg-alt);
    color: var(--loc-muted);
    border: 1px solid var(--loc-border);
    border-radius: 99px;
    padding: .25rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    margin: .2rem .2rem .2rem 0;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
a.loc-chip:hover { border-color: var(--loc-accent); color: var(--loc-accent); }
.loc-chip-row { margin: .75rem 0; }

/* ── Prose area ────────────────────────────────────────────── */
.loc-prose h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.25rem 0 .45rem;
    color: var(--loc-text);
}
.loc-prose p { margin: .65rem 0; line-height: 1.65; }
.loc-prose ul { margin: .45rem 0 .45rem 1.3rem; }
.loc-county-link { margin: .5rem 0; font-size: .88rem; }
.loc-county-link a { color: var(--loc-accent); }
.loc-notice {
    font-size: .77rem;
    color: var(--loc-muted);
    border-top: 1px solid var(--loc-border);
    padding-top: .6rem;
    margin-top: 1.25rem;
    line-height: 1.55;
}

/* ── Section heading style (inside main) ───────────────────── */
.loc-section-h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--loc-text);
    margin-bottom: .5rem;
}
.loc-card h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--loc-text);
    margin-bottom: .75rem;
    margin-top: 0;
}

/* ── Grids ─────────────────────────────────────────────────── */
.loc-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.loc-four-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.loc-option-card {
    background: var(--loc-bg-alt);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--loc-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: border-color .15s;
}
.loc-option-card:hover { border-left-color: var(--loc-accent); }
.loc-option-card h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--loc-accent);
    margin-bottom: .45rem;
}
.loc-option-card p { font-size: .85rem; color: var(--loc-muted); flex: 1; line-height: 1.55; }
.loc-option-card a { margin-top: .85rem; align-self: flex-start; }

/* ── Nearby grid ───────────────────────────────────────────── */
.loc-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .85rem;
    margin: 1.25rem 0;
}
.loc-nearby-card {
    display: flex;
    flex-direction: column;
    background: var(--loc-bg-alt);
    border: none;
    border-radius: var(--loc-radius);
    padding: .85rem 1rem;
    text-decoration: none;
    color: var(--loc-text);
    font-size: .85rem;
    gap: .25rem;
    transition: border-color .15s, box-shadow .15s;
}
.loc-nearby-card:hover { border-color: var(--loc-accent); box-shadow: var(--loc-shadow-sm); }
.loc-nearby-card strong { color: var(--loc-text); font-weight: 700; }
.loc-nearby-card span:not(.loc-dist) { font-size: .78rem; color: var(--loc-muted); }
.loc-dist { font-size: .73rem; color: var(--loc-accent); font-weight: 600; margin-top: .1rem; }
.loc-browse-links {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.loc-browse-links a {
    display: inline-block;
    padding: .35rem .9rem;
    border: 1px solid var(--loc-accent);
    border-radius: 99px;
    color: var(--loc-accent);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.loc-browse-links a:hover { background: var(--loc-accent); color: #fff; }

/* ── FAQs ──────────────────────────────────────────────────── */
.loc-faqs { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.loc-faq {
    border: 1px solid var(--loc-border);
    border-radius: var(--loc-radius);
    overflow: hidden;
    transition: border-color .15s;
}
.loc-faq:hover { border-color: var(--loc-accent); }
.loc-faq summary {
    padding: 1rem 1.1rem;
    font-weight: 600;
    font-size: .93rem;
    cursor: pointer;
    list-style: none;
    background: var(--loc-bg-alt);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--loc-text);
    line-height: 1.4;
}
.loc-faq summary::-webkit-details-marker { display: none; }
.loc-faq summary::after { content: '+'; font-size: 1.2rem; color: var(--loc-accent); flex-shrink: 0; }
.loc-faq[open] summary::after { content: '−'; }
.loc-faq[open] summary { background: var(--loc-card-bg); border-bottom: 1px solid var(--loc-border); }
.loc-faq p {
    padding: .9rem 1.1rem;
    font-size: .91rem;
    color: var(--loc-muted);
    line-height: 1.65;
}

/* ── Full-width band base ───────────────────────────────────── */
.loc-band {
    padding: 3rem 1.5rem;
    border-top: 1px solid var(--loc-border);
}
.loc-band-inner { max-width: var(--loc-max-w); margin: 0 auto; }
.loc-band-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--loc-text);
    margin-bottom: .45rem;
}
.loc-band-subtitle { color: var(--loc-muted); margin-bottom: 1.75rem; line-height: 1.6; }

/* ── Guides section (full-width) ───────────────────────────── */
.loc-guides {
    background: var(--loc-bg-alt);
    border-top: 1px solid var(--loc-border);
    border-bottom: 1px solid var(--loc-border);
    padding: 3rem 1.5rem;
}
.loc-guides-inner { max-width: var(--loc-max-w); margin: 0 auto; }
.loc-guides h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--loc-text);
    margin-bottom: .5rem;
}
.loc-guides > .loc-guides-inner > p { color: var(--loc-muted); margin-bottom: 1.5rem; }

/* ── Final CTA (full-width) ────────────────────────────────── */
.loc-final-cta {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--loc-bg-alt);
    border-top: 1px solid var(--loc-border);
}
.loc-final-cta-inner { max-width: 620px; margin: 0 auto; }
.loc-final-cta h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--loc-text);
    margin-bottom: .6rem;
    line-height: 1.2;
}
.loc-final-cta p { color: var(--loc-muted); margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; }

/* ── How It Works ───────────────────────────────────────────── */
.loc-how-it-works {
    background: var(--loc-bg);
    border-top: 1px solid var(--loc-border);
    border-bottom: 1px solid var(--loc-border);
    padding: 3.5rem 1.5rem;
    text-align: center;
}
.loc-how-it-works-inner { max-width: var(--loc-max-w); margin: 0 auto; }
.loc-how-it-works h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--loc-text);
    margin-bottom: .45rem;
}
.loc-how-it-works > .loc-how-it-works-inner > p {
    color: var(--loc-muted);
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.loc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}
.loc-step {
    background: var(--loc-bg-alt);
    border: 1px solid var(--loc-border);
    border-radius: var(--loc-radius-lg);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow .2s, border-color .2s;
}
.loc-step:hover { box-shadow: var(--loc-shadow); border-color: var(--loc-accent); }
.loc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--loc-accent);
    color: #fff;
    border-radius: 50%;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(187,169,108,.35);
}
.loc-step-num svg { width: 24px; height: 24px; }
.loc-step-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--loc-accent);
    margin-bottom: .35rem;
}
.loc-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--loc-text);
    margin-bottom: .4rem;
}
.loc-step p { font-size: .87rem; color: var(--loc-muted); line-height: 1.55; }

/* ── Sub-page cluster grid ─────────────────────────────────── */
.loc-subpage-cluster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    margin-top: 1.25rem;
}
.loc-subpage-cluster-link {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--loc-border);
    border-radius: var(--loc-radius);
    background: var(--loc-bg-alt);
    text-decoration: none;
    color: var(--loc-text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.loc-subpage-cluster-link:hover {
    border-color: var(--loc-accent);
    background: var(--loc-bg);
    box-shadow: var(--loc-shadow-sm);
}
.loc-subpage-cluster-label {
    font-weight: 700;
    font-size: .88rem;
    color: var(--loc-accent);
}
.loc-subpage-cluster-sub { font-size: .75rem; color: var(--loc-muted); }

/* ── Citation block ─────────────────────────────────────────── */
.loc-citation-section {
    background: var(--loc-bg-alt);
    border-top: 1px solid var(--loc-border);
    padding: 1.25rem 1.5rem;
}
.loc-citation-inner { max-width: var(--loc-max-w); margin: 0 auto; }
.loc-citation {
    border: 1px solid var(--loc-border);
    border-radius: var(--loc-radius-lg);
    background: var(--loc-card-bg);
    box-shadow: var(--loc-shadow-sm);
    overflow: hidden;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}
.loc-citation summary {
    padding: .8rem 1.1rem;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--loc-muted);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: background .15s, color .15s;
}
.loc-citation summary:hover { background: var(--loc-bg-alt); color: var(--loc-text); }
.loc-citation summary::-webkit-details-marker { display: none; }
.loc-citation summary::after {
    content: '⌄';
    font-size: 1rem;
    margin-left: auto;
    line-height: 1;
    transition: transform .2s ease;
}
.loc-citation[open] summary::after { transform: rotate(180deg); }
.loc-citation-body {
    padding: .2rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--loc-border);
}
.loc-citation-row {
    display: flex;
    gap: .75rem;
    font-size: .82rem;
    align-items: baseline;
    padding: .6rem 0;
}
.loc-citation-row + .loc-citation-row { border-top: 1px solid var(--loc-border); }
.loc-citation-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--loc-muted);
    min-width: 90px;
    flex-shrink: 0;
}
.loc-citation-value { color: var(--loc-text); overflow-wrap: anywhere; }
.loc-citation-value a { color: var(--loc-accent); text-decoration: none; }
.loc-citation-value a:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .loc-citation-row { flex-direction: column; gap: .2rem; }
    .loc-citation-label { min-width: 0; }
}

/* ── Table of contents ─────────────────────────────────────── */
.loc-toc {
    background: var(--loc-bg-alt);
    border: 1px solid var(--loc-border);
    border-left: 3px solid var(--loc-accent);
    border-radius: var(--loc-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    font-size: .9rem;
}
.loc-toc-label {
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--loc-accent);
    margin: 0 0 .55rem;
}
.loc-toc ol { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.loc-toc li { color: var(--loc-text); }

/* ── Reviewed-by attribution block ─────────────────────────── */
.loc-reviewed {
    margin-top: 2rem;
    padding: .9rem 1.1rem;
    background: var(--loc-bg-alt);
    border-radius: var(--loc-radius);
    border: 1px solid var(--loc-border);
    font-size: .81rem;
    color: var(--loc-muted);
    line-height: 1.6;
}
.loc-reviewed a { color: var(--loc-accent); }
.loc-reviewed strong { color: var(--loc-text); }

/* ── Footer ────────────────────────────────────────────────── */
.loc-footer {
    background: var(--loc-bg-alt);
    border-top: 3px solid var(--loc-accent);
    padding: 3rem 1.5rem 1.75rem;
    margin-top: 0;
}
.loc-footer-inner { max-width: var(--loc-max-w); margin: 0 auto; }
.loc-footer-cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
}
.loc-footer-brand img { max-width: 180px; height: auto; display: block; margin-bottom: .85rem; }
.loc-footer-brand p { font-size: .85rem; color: var(--loc-muted); line-height: 1.65; }
.loc-footer-col-heading {
    font-size: .75rem;
    font-weight: 700;
    color: var(--loc-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .85rem;
}
.loc-footer-links { display: flex; flex-direction: column; gap: .5rem; }
.loc-footer-links a {
    color: var(--loc-text);
    text-decoration: none;
    font-size: .87rem;
    transition: color .15s;
}
.loc-footer-links a:hover { color: var(--loc-accent); }
.loc-footer-bottom {
    border-top: 1px solid var(--loc-border);
    padding-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.loc-footer-copy { font-size: .8rem; color: var(--loc-muted); }
/* No opacity on footer and breadcrumb text: it faded the brand gold links to a paler, off-brand gold and put
   the grey text below readable contrast. Source links in the notice are underlined (inline in a sentence). */
.loc-footer-notice { font-size: .74rem; color: var(--loc-muted); max-width: 640px; line-height: 1.55; }
.loc-footer-notice a { text-decoration: underline; }

/* ── Theme toggle (standalone — no Blazor runtime on this pipeline) ── */
.loc-theme-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
    padding: .4rem .8rem .4rem .4rem;
    border: 1px solid var(--loc-border);
    border-radius: 999px;
    background: var(--loc-bg-alt);
    color: var(--loc-text);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.loc-theme-toggle-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--loc-accent);
    flex-shrink: 0;
}
.loc-theme-toggle[aria-pressed="true"] .loc-theme-toggle-dot {
    background: var(--loc-text);
}

/* ── Hamburger ─────────────────────────────────────────────── */
.loc-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
}
.loc-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--loc-text);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .loc-subpage-cluster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .loc-content-grid { grid-template-columns: 1fr; }
    .loc-sidebar { order: -1; }
    .loc-sidebar-card:first-child { order: 0; }
    .loc-three-col { grid-template-columns: repeat(2, 1fr); }
    .loc-four-col { grid-template-columns: repeat(2, 1fr); }
    .loc-subpage-cluster { grid-template-columns: repeat(2, 1fr); }
    .loc-steps { grid-template-columns: repeat(2, 1fr); }
    .loc-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
    .loc-header { position: relative; }
    .loc-hamburger { display: flex; }
    .loc-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--loc-bg);
        border-top: 1px solid var(--loc-border);
        box-shadow: 0 6px 16px rgba(0,0,0,.12);
        z-index: 200;
    }
    .loc-nav.loc-nav--open { display: flex; }
    .loc-nav a {
        padding: .75rem 1.1rem;
        font-size: .95rem;
        border-bottom: 1px solid var(--loc-border);
        border-radius: 0;
        color: var(--loc-text);
    }
}
@media (max-width: 600px) {
    .loc-footer-cols { grid-template-columns: 1fr; }
    .loc-header-inner { padding: .75rem 1rem; }
    .loc-cta-btn { display: none; }
    .loc-h1 { font-size: 1.65rem; }
    .loc-three-col, .loc-four-col, .loc-steps { grid-template-columns: 1fr; }
    .loc-subpage-cluster { grid-template-columns: repeat(2, 1fr); }
    .loc-hero-actions { flex-direction: column; align-items: stretch; }
    .loc-btn-primary, .loc-btn-outline { text-align: center; }
    .loc-subnav { padding: .65rem .75rem; }
    .loc-subnav-link { font-size: .78rem; padding: .35rem .8rem; }
    .loc-main { padding: 1.5rem 1rem 2.5rem; }
    .loc-card { padding: 1.25rem; }
    .loc-how-it-works, .loc-final-cta { padding: 2.5rem 1rem; }
    .loc-mobile-cta { display: flex; }
}

/* ── Trust band ────────────────────────────────────────────── */
.loc-trust-band {
    background: var(--loc-bg-alt);
    border-top: 1px solid var(--loc-border);
    border-bottom: 1px solid var(--loc-border);
    padding: .7rem 1.5rem;
}
.loc-trust-inner {
    max-width: var(--loc-max-w);
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.loc-trust-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--loc-muted);
    white-space: nowrap;
}
.loc-trust-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--loc-accent);
    color: #fff;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Sticky mobile CTA bar ─────────────────────────────────── */
.loc-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--loc-bg);
    border-top: 2px solid var(--loc-accent);
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    padding: .7rem 1rem;
}
.loc-mobile-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}
.loc-mobile-cta-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.loc-mobile-cta-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--loc-text);
    line-height: 1.2;
}
.loc-mobile-cta-sub {
    font-size: .72rem;
    color: var(--loc-muted);
}

/* ── Scroll-driven entrance animations ─────────────────────── */
@supports (animation-timeline: view()) {
    @keyframes locFadeUp {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0);    }
    }
    .loc-card,
    .loc-step,
    .loc-option-card,
    .loc-nearby-card,
    .loc-subpage-cluster-link {
        animation: locFadeUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }
}