/* =====================================================================
   Cross-Reference Riduttori · stile globale
   Tema scuro industriale · accento arancione
   ===================================================================== */

:root {
    /* Palette base */
    --cr-bg:            #0d0d1a;
    --cr-bg-alt:        #121225;
    --cr-bg-elev:       #1a1a2e;
    --cr-surface:       #1f1f37;
    --cr-border:        #2c2c48;
    --cr-text:          #ececf2;
    --cr-text-muted:    #c4c4d4;     /* alzato da #9a9ab0: contrasto WCAG AA su tutti i background */
    --cr-text-subtle:   #8e8eaa;     /* nuovo: per testi DAVVERO secondari (footer, copy) — sostituisce gli usi piu drastici */
    --cr-heading:       #ffffff;

    /* Accenti */
    --cr-primary:       #e67e22;
    --cr-primary-hover: #f39038;
    --cr-primary-dim:   rgba(230, 126, 34, .15);
    --cr-accent:        var(--cr-primary);

    /* Livelli compatibilita */
    --cr-lvl-esatto:         #2ecc71;
    --cr-lvl-equivalente:    #27ae60;
    --cr-lvl-simile:         #f1c40f;
    --cr-lvl-approssimativo: #e67e22;
    --cr-lvl-funzionale:     #95a5a6;

    /* Misure */
    --cr-radius: 10px;
    --cr-radius-sm: 6px;

    /* Font */
    --cr-font:      'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --cr-font-mono: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
}

* [x-cloak] { display: none !important; }

html, body {
    background-color: var(--cr-bg);
    color: var(--cr-text);
    font-family: var(--cr-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap dark tweaks */
body { background-color: var(--cr-bg); }

h1, h2, h3, h4, h5, h6 { color: var(--cr-heading); font-weight: 600; }
a { color: var(--cr-primary); text-decoration: none; }
a:hover { color: var(--cr-primary-hover); text-decoration: underline; }
code, kbd, pre, samp { font-family: var(--cr-font-mono); }

hr { border-color: var(--cr-border); opacity: .4; }
::selection { background: var(--cr-primary); color: #fff; }

/* =====================================================================
   Componenti Bootstrap override
   ===================================================================== */
.text-primary { color: var(--cr-primary) !important; }
/* Override Bootstrap .text-muted: usiamo il nostro tono leggibile su dark theme */
.text-muted, .text-body-secondary { color: var(--cr-text-muted) !important; }
small.text-muted, .small.text-muted { color: var(--cr-text-muted) !important; }
.form-text { color: var(--cr-text-muted); }
.text-secondary { color: var(--cr-text-muted) !important; }
/* Helper utility: testo davvero secondario (footer copy, mention) */
.text-subtle { color: var(--cr-text-subtle) !important; }
.btn-primary {
    --bs-btn-bg: var(--cr-primary);
    --bs-btn-border-color: var(--cr-primary);
    --bs-btn-hover-bg: var(--cr-primary-hover);
    --bs-btn-hover-border-color: var(--cr-primary-hover);
    --bs-btn-active-bg: var(--cr-primary-hover);
    --bs-btn-active-border-color: var(--cr-primary-hover);
    --bs-btn-disabled-bg: var(--cr-primary);
    --bs-btn-disabled-border-color: var(--cr-primary);
}
.btn-outline-light {
    --bs-btn-color: var(--cr-text);
    --bs-btn-border-color: var(--cr-border);
    --bs-btn-hover-bg: var(--cr-surface);
    --bs-btn-hover-border-color: var(--cr-border);
    --bs-btn-hover-color: var(--cr-heading);
}
.btn-outline-primary {
    --bs-btn-color: var(--cr-primary);
    --bs-btn-border-color: var(--cr-primary);
    --bs-btn-hover-bg: var(--cr-primary);
    --bs-btn-hover-border-color: var(--cr-primary);
    --bs-btn-hover-color: #fff;
}

.form-control, .form-select {
    background-color: var(--cr-bg-elev);
    color: var(--cr-text);
    border-color: var(--cr-border);
}
.form-control:focus, .form-select:focus {
    background-color: var(--cr-bg-elev);
    color: var(--cr-text);
    border-color: var(--cr-primary);
    box-shadow: 0 0 0 .2rem var(--cr-primary-dim);
}
.form-control::placeholder { color: var(--cr-text-muted); opacity: .75; }
.form-control-lg.border-0 { background-color: #fff; color: #111; }
.form-control-lg.border-0::placeholder { color: #666; }

.input-group-text { background-color: var(--cr-bg-elev); border-color: var(--cr-border); color: var(--cr-text); }

.alert { border: 1px solid transparent; }
.alert-success { background-color: rgba(46,204,113,.12); border-color: rgba(46,204,113,.4); color: #b6f0cf; }
.alert-danger  { background-color: rgba(231,76,60,.12);  border-color: rgba(231,76,60,.4);  color: #f5b7b1; }
.alert-info    { background-color: rgba(52,152,219,.12); border-color: rgba(52,152,219,.4); color: #aed6f1; }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.breadcrumb-cr { --bs-breadcrumb-divider-color: var(--cr-text-muted); --bs-breadcrumb-item-active-color: var(--cr-text); }
.breadcrumb-cr a { color: var(--cr-text-muted); }
.breadcrumb-cr a:hover { color: var(--cr-primary); }

.pagination {
    --bs-pagination-bg: var(--cr-bg-elev);
    --bs-pagination-color: var(--cr-text);
    --bs-pagination-border-color: var(--cr-border);
    --bs-pagination-hover-bg: var(--cr-surface);
    --bs-pagination-hover-color: var(--cr-primary);
    --bs-pagination-hover-border-color: var(--cr-border);
    --bs-pagination-active-bg: var(--cr-primary);
    --bs-pagination-active-border-color: var(--cr-primary);
    --bs-pagination-disabled-bg: var(--cr-bg-alt);
    --bs-pagination-disabled-color: var(--cr-text-muted);
    --bs-pagination-disabled-border-color: var(--cr-border);
}

/* Accordion dark */
.accordion-cr .accordion-item { background-color: var(--cr-surface); color: var(--cr-text); border-color: var(--cr-border); }
.accordion-cr .accordion-button { background-color: var(--cr-surface); color: var(--cr-heading); }
.accordion-cr .accordion-button:not(.collapsed) { background-color: var(--cr-bg-elev); color: var(--cr-primary); box-shadow: none; }
.accordion-cr .accordion-button:focus { border-color: var(--cr-primary); box-shadow: 0 0 0 .2rem var(--cr-primary-dim); }
.accordion-cr .accordion-body { background-color: var(--cr-bg-alt); }

/* =====================================================================
   Navbar
   ===================================================================== */
.cr-navbar {
    background-color: rgba(13,13,26,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cr-border);
}
.cr-navbar .navbar-brand { color: var(--cr-heading); }
.cr-navbar .cr-logo { color: var(--cr-primary); display: inline-flex; }
.cr-navbar .cr-brand-sub { font-size: .7rem; color: var(--cr-text-muted); line-height: 1; }
.cr-navbar .nav-link { color: var(--cr-text-muted); font-weight: 500; }
.cr-navbar .nav-link:hover, .cr-navbar .nav-link.active { color: var(--cr-primary); }
.cr-navbar .dropdown-menu-dark { background-color: var(--cr-surface); border-color: var(--cr-border); }
.navbar-toggler { border-color: var(--cr-border); }
.navbar-toggler-icon { filter: invert(1) brightness(.9); }

.cr-navbar-search { position: relative; min-width: 260px; }

/* Autocomplete dropdown */
.cr-autocomplete {
    position: absolute; z-index: 1060; top: 100%; left: 0; right: 0;
    background: var(--cr-surface); border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-sm); margin-top: 4px;
    box-shadow: 0 12px 24px rgba(0,0,0,.45);
    max-height: 320px; overflow-y: auto;
}
.cr-autocomplete-hero { top: auto; left: 0; right: 0; width: 100%; }
.cr-autocomplete-item {
    display: block; padding: .55rem .9rem; color: var(--cr-text);
    font-family: var(--cr-font-mono); font-size: .92rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    text-decoration: none;
}
.cr-autocomplete-item:hover, .cr-autocomplete-item.active {
    background: var(--cr-bg-elev); color: var(--cr-primary);
}

/* =====================================================================
   Hero
   ===================================================================== */
.cr-hero {
    position: relative;
    padding: 4rem 0 3rem;
    background: linear-gradient(180deg, var(--cr-bg-alt) 0%, var(--cr-bg) 100%);
    overflow: hidden;
}
.cr-hero-compact { padding: 2rem 0 1.5rem; }
.cr-eyebrow {
    display: inline-block; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cr-text-muted); margin-bottom: .5rem;
}
.cr-hero-title { font-size: clamp(2rem, 4vw + 1rem, 3.6rem); font-weight: 700; line-height: 1.1; margin: 0 0 1rem; }
.cr-hero-lead  { font-size: 1.15rem; color: var(--cr-text-muted); max-width: 42rem; margin-bottom: 1.5rem; }
.cr-hero-search { position: relative; max-width: 700px; }
.cr-hero-art { color: var(--cr-primary); opacity: .9; }
.cr-hero-art svg { width: 100%; height: auto; }

.cr-page-head {
    background: linear-gradient(180deg, var(--cr-bg-alt) 0%, transparent 100%);
    border-bottom: 1px solid var(--cr-border);
}
.cr-page-title { font-size: clamp(1.5rem, 2vw + 1rem, 2.4rem); font-weight: 700; margin: 0; }

/* =====================================================================
   Sezioni
   ===================================================================== */
.cr-section { padding: 3rem 0; }
.cr-section-alt { background-color: var(--cr-bg-alt); }
.cr-section-head { text-align: center; max-width: 54rem; margin: 0 auto 2rem; }
.cr-section-title { font-size: 1.8rem; font-weight: 700; margin-bottom: .5rem; }
.cr-section-sub   { color: var(--cr-text-muted); margin-bottom: 0; }

/* Statistiche home */
.cr-section-stats { padding: 2rem 0; background: var(--cr-bg-alt); border-top: 1px solid var(--cr-border); border-bottom: 1px solid var(--cr-border); }
.cr-stat-num {
    font-family: var(--cr-font-mono); font-size: 2.4rem; font-weight: 700;
    color: var(--cr-primary); line-height: 1;
}
.cr-stat-label { color: var(--cr-text-muted); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.cr-stat-inline { display: flex; align-items: baseline; gap: .4rem; justify-content: flex-end; }

/* =====================================================================
   Brand card / Tipologia card (home)
   ===================================================================== */
.cr-brand-card, .cr-type-card {
    display: flex; flex-direction: column; padding: 1.25rem 1rem;
    background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: var(--cr-radius);
    color: var(--cr-text); text-decoration: none;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    height: 100%;
}
.cr-brand-card:hover, .cr-type-card:hover {
    transform: translateY(-2px); border-color: var(--cr-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,.35); color: var(--cr-text);
    text-decoration: none;
}
.cr-brand-card-sigla, .cr-type-card-sigla {
    font-family: var(--cr-font-mono); font-weight: 700; font-size: 1.3rem;
    color: var(--cr-primary); line-height: 1;
}
.cr-brand-card-nome, .cr-type-card-nome {
    font-weight: 600; margin-top: .35rem; color: var(--cr-heading);
}
.cr-brand-card-country { font-size: .75rem; color: var(--cr-text-muted); margin-top: .15rem; }
.cr-brand-card-count, .cr-type-card-count {
    margin-top: .5rem; font-size: .78rem; color: var(--cr-text-muted);
}

/* Step (come funziona) */
.cr-step { text-align: center; padding: 1.5rem 1rem; }
.cr-step-num {
    width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%;
    background: var(--cr-primary); color: #fff; display: grid; place-items: center;
    font-family: var(--cr-font-mono); font-size: 1.4rem; font-weight: 700;
}
.cr-step-title { font-size: 1.15rem; margin-bottom: .5rem; }
.cr-step-text  { color: var(--cr-text-muted); margin-bottom: 0; font-size: .95rem; }

/* =====================================================================
   Card riduttore
   ===================================================================== */
.cr-card {
    background: var(--cr-surface); border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius); padding: 1rem 1rem .85rem;
    display: flex; flex-direction: column; gap: .75rem;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cr-card:hover { border-color: var(--cr-primary); box-shadow: 0 6px 16px rgba(0,0,0,.4); transform: translateY(-2px); }
.cr-card-head { padding-right: 2.4rem; /* spazio per checkbox compare */ }
.cr-card-title { margin: 0; }
.cr-card-title a { color: var(--cr-heading); text-decoration: none; }
.cr-card-title a:hover { color: var(--cr-primary); }
.cr-code {
    font-family: var(--cr-font-mono); font-weight: 700;
    color: var(--cr-heading); background: transparent; padding: 0;
}
.cr-card-sub { margin-top: .2rem; }

.cr-card-specs {
    display: grid; grid-template-columns: 1fr; gap: .25rem; margin: 0;
    padding-top: .5rem; border-top: 1px dashed var(--cr-border);
    font-size: .85rem;
}
.cr-card-specs > div { display: flex; justify-content: space-between; }
.cr-card-specs dt { color: var(--cr-text-muted); font-weight: 400; margin: 0; }
.cr-card-specs dd { color: var(--cr-text); margin: 0; font-family: var(--cr-font-mono); }

/* Card compare checkbox */
.cr-card-compare {
    position: absolute; top: .6rem; right: .6rem; z-index: 2; cursor: pointer;
}
.cr-card-compare input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cr-card-compare-ui {
    display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
    border: 1.5px solid var(--cr-border); border-radius: 6px; background: var(--cr-bg-alt);
    color: transparent; font-size: .95rem; transition: all .1s ease;
}
.cr-card-compare:hover .cr-card-compare-ui { border-color: var(--cr-primary); }
.cr-card-compare input:checked ~ .cr-card-compare-ui {
    background: var(--cr-primary); border-color: var(--cr-primary); color: #fff;
}
.cr-card-compare input:focus-visible ~ .cr-card-compare-ui {
    outline: 2px solid var(--cr-primary); outline-offset: 2px;
}

/* =====================================================================
   Chips / badge
   ===================================================================== */
.cr-chip {
    display: inline-flex; align-items: center;
    padding: .12rem .55rem; border-radius: 999px;
    font-size: .7rem; font-weight: 600; letter-spacing: .04em;
    background: var(--cr-bg-elev); color: var(--cr-text-muted);
    border: 1px solid var(--cr-border);
    text-transform: uppercase;
}
.cr-chip-tipologia  { color: #f8c471; border-color: rgba(248,196,113,.3); }
.cr-chip-produttore { color: var(--cr-primary); border-color: rgba(230,126,34,.3); }
.cr-chip-verified   { color: #2ecc71; border-color: rgba(46,204,113,.3); }
.cr-chip-country    { color: var(--cr-text-muted); }
.cr-chip-taglia     { color: var(--cr-text); font-family: var(--cr-font-mono); }

/* Livelli compatibilita */
.cr-level-badge {
    display: inline-flex; align-items: center; padding: .18rem .6rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #0d0d1a;
}
.badge-level-esatto         { background: var(--cr-lvl-esatto); }
.badge-level-equivalente    { background: var(--cr-lvl-equivalente); color: #fff; }
.badge-level-simile         { background: var(--cr-lvl-simile); }
.badge-level-approssimativo { background: var(--cr-lvl-approssimativo); color: #fff; }
.badge-level-funzionale     { background: var(--cr-lvl-funzionale); color: #fff; }
.badge-level-default        { background: var(--cr-border); color: var(--cr-text); }

/* Equivalenti dettaglio */
.cr-equiv-group + .cr-equiv-group { margin-top: 2rem; }
.cr-equiv-title { margin-bottom: .75rem; font-size: 1rem; }

/* Brand sigla grande (header produttore) */
.cr-brand-sigla-lg, .cr-type-sigla-lg {
    font-family: var(--cr-font-mono); font-weight: 700;
    font-size: 2rem; color: var(--cr-primary);
    background: var(--cr-bg-elev); padding: .25rem .6rem;
    border-radius: var(--cr-radius-sm); border: 1px solid var(--cr-border);
    letter-spacing: .04em;
}

/* =====================================================================
   Pannelli / specifiche / tabella
   ===================================================================== */
.cr-panel {
    background: var(--cr-surface); border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius); overflow: hidden;
}
.cr-panel-head { padding: .75rem 1rem; background: var(--cr-bg-elev); border-bottom: 1px solid var(--cr-border); }
.cr-panel-body { padding: 1rem; }
.cr-panel-info { background: var(--cr-bg-elev); border-radius: var(--cr-radius-sm); border: 1px solid var(--cr-border); }

.cr-specs dt { font-weight: 400; color: var(--cr-text-muted); }
.cr-specs dd { font-family: var(--cr-font-mono); color: var(--cr-text); }
.cr-specs dt, .cr-specs dd { padding: .35rem 0; border-bottom: 1px dashed var(--cr-border); margin: 0; }
.cr-specs dt:last-of-type, .cr-specs dd:last-of-type { border-bottom: 0; }

.table-cr {
    color: var(--cr-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--cr-text);
    --bs-table-striped-bg: rgba(255,255,255,.02);
    --bs-table-striped-color: var(--cr-text);
    --bs-table-hover-bg: rgba(230,126,34,.05);
    --bs-table-hover-color: var(--cr-heading);
    --bs-table-border-color: var(--cr-border);
}
.table-cr thead th {
    background: var(--cr-bg-elev); color: var(--cr-heading);
    border-bottom: 1px solid var(--cr-border); font-weight: 700; text-transform: uppercase;
    font-size: .75rem; letter-spacing: .07em;
}
.table-cr tbody td, .table-cr tbody th {
    border-color: var(--cr-border);
    font-family: var(--cr-font-mono); font-size: .9rem;
    color: var(--cr-text) !important; /* Bootstrap --bs-table-color = #000 di default */
    background-color: transparent !important;
}
/* Stessa cosa per ogni cella che potrebbe ereditare il nero Bootstrap */
.table-cr tr > * { color: var(--cr-text); }
.table-cr thead th { color: var(--cr-heading) !important; }
/* Em-dash placeholder (—) e altri valori "vuoti" devono essere visibili */
.table-cr tbody td:empty::after { content: '—'; color: var(--cr-text-muted); }
/* Header sticky/wrapper su panel: assicura padding e leggibilita */
.cr-panel-head .text-muted,
.cr-panel-head .small.text-muted { color: var(--cr-text-muted) !important; font-weight: 500; }

.cr-detail-code { font-family: var(--cr-font-mono); font-size: clamp(1.8rem, 3vw + 1rem, 2.8rem); }
.cr-detail-code code { color: var(--cr-heading); }

/* =====================================================================
   Catalogo: filtri, toolbar
   ===================================================================== */
.cr-filters {
    background: var(--cr-surface); border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius); padding: 1rem;
    position: sticky; top: 4.5rem;
}
.cr-filter-block + .cr-filter-block { margin-top: .85rem; }
.cr-filter-label {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cr-text-muted); display: block; margin-bottom: .3rem;
}
.cr-results-toolbar { border-bottom: 1px solid var(--cr-border); padding-bottom: .75rem; }

/* Serie card (produttore/tipologia) */
.cr-serie-card {
    display: block; padding: .65rem .85rem; background: var(--cr-surface);
    border: 1px solid var(--cr-border); border-radius: var(--cr-radius-sm);
    color: var(--cr-text); text-decoration: none; height: 100%;
    transition: border-color .12s ease, transform .12s ease;
}
.cr-serie-card:hover { border-color: var(--cr-primary); transform: translateY(-1px); color: var(--cr-text); text-decoration: none; }

/* =====================================================================
   Confronto
   ===================================================================== */
.cr-compare-grid-wrap { overflow-x: auto; border: 1px solid var(--cr-border); border-radius: var(--cr-radius); }
.cr-compare-table { margin: 0; color: var(--cr-text); }
.cr-compare-table th, .cr-compare-table td {
    padding: .7rem .8rem; border-color: var(--cr-border); vertical-align: middle;
}
.cr-compare-cell-label {
    background: var(--cr-bg-elev); color: var(--cr-text-muted);
    font-weight: 600; font-size: .88rem; text-align: left;
    position: sticky; left: 0; z-index: 1; min-width: 200px;
}
.cr-compare-cell-head { background: var(--cr-bg-alt); text-align: left; min-width: 200px; }
.cr-compare-head-chip {
    border-left: 4px solid var(--cr-primary); padding: .25rem .5rem; background: var(--cr-surface);
    border-radius: var(--cr-radius-sm);
}
.cr-compare-cell-val { font-family: var(--cr-font-mono); }
.cr-best { color: var(--cr-primary); font-weight: 700; }

/* Barra confronto fissa */
.cr-compare-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
    background: var(--cr-surface); border-top: 1px solid var(--cr-border);
    box-shadow: 0 -4px 18px rgba(0,0,0,.45);
}
.cr-compare-enter { transition: transform .25s ease; transform: translateY(0); }
.cr-compare-leave { transition: transform .25s ease; transform: translateY(100%); }
.cr-compare-chips { flex-wrap: nowrap; }
.cr-compare-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--cr-bg-elev); border: 1px solid var(--cr-border);
    padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
    font-family: var(--cr-font-mono); font-size: .85rem;
}

/* =====================================================================
   Empty state, error
   ===================================================================== */
.cr-empty-state {
    text-align: center; padding: 3rem 1rem; background: var(--cr-bg-alt);
    border: 1px dashed var(--cr-border); border-radius: var(--cr-radius);
    color: var(--cr-text-muted);
}
.cr-empty-icon { font-size: 3rem; color: var(--cr-text-muted); display: block; margin-bottom: .5rem; }

.cr-error { min-height: 50vh; display: grid; place-items: center; }
.cr-error-code {
    font-family: var(--cr-font-mono); font-size: clamp(4rem, 10vw + 1rem, 8rem);
    font-weight: 700; color: var(--cr-primary); line-height: 1;
}
.cr-error-title { font-size: 1.8rem; margin: .5rem 0 .75rem; }
.cr-error-msg   { color: var(--cr-text-muted); max-width: 40rem; margin: 0 auto; }
.cr-error-debug { background: var(--cr-bg-elev); padding: 1rem; border-radius: var(--cr-radius-sm); font-size: .85rem; overflow: auto; max-width: 48rem; margin: 0 auto; }
.cr-error-debug pre { white-space: pre-wrap; color: var(--cr-text); }

/* =====================================================================
   Prose (static pages)
   ===================================================================== */
.cr-prose { max-width: 52rem; margin: 0 auto; }
.cr-prose h2 { font-size: 1.4rem; margin-top: 2rem; color: var(--cr-primary); }
.cr-prose p, .cr-prose ul { color: var(--cr-text); }
.cr-prose ul { padding-left: 1.25rem; }
.cr-prose li + li { margin-top: .3rem; }
.cr-prose code { color: var(--cr-primary); background: var(--cr-bg-elev); padding: .05rem .3rem; border-radius: 4px; }

/* =====================================================================
   Footer
   ===================================================================== */
.cr-footer { background: var(--cr-bg-alt); border-top: 1px solid var(--cr-border); color: var(--cr-text-muted); }
.cr-footer-title { color: var(--cr-heading); font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
.cr-footer-text { color: var(--cr-text-muted); }
.cr-footer a { color: var(--cr-text-muted); text-decoration: none; }
.cr-footer a:hover { color: var(--cr-primary); }
.cr-footer-divider { border-color: var(--cr-border); opacity: .5; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 991.98px) {
    .cr-navbar-search { min-width: 100%; margin-top: .5rem; }
    .cr-filters { position: static; }
    .cr-hero { padding: 2.5rem 0 2rem; }
}
@media (max-width: 575.98px) {
    .cr-section { padding: 2rem 0; }
    .cr-hero-title { font-size: 2.2rem; }
    .cr-stat-num { font-size: 1.8rem; }
}

/* Accessibility */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}