/*
 * NSPCB Theme — Option B: Barn Red & Slate
 * Bootstrap 5.3 color-mode overrides, Inter body font, Quattrocento headings.
 *
 * Load order: normalize.css → main.css → sidebar.css → Bootstrap 5 → theme.css
 *
 * CSS variables use semantic names so swapping palettes later only requires
 * changing the :root and [data-bs-theme="dark"] blocks.
 */

/* ── Light-mode palette tokens ────────────────────────────────── */
:root {
    /* Primary action color: barn red */
    --nspcb-primary:          #8B1A1A;
    --nspcb-primary-dark:     #711515;
    --nspcb-primary-darker:   #5E1111;
    --nspcb-primary-light:    #A82020;
    --nspcb-primary-muted:    #C4403A;

    /* Structure (header, sidebar): slate blue */
    --nspcb-structure:        #2C3E50;
    --nspcb-structure-dark:   #1E2A38;
    --nspcb-structure-light:  #3D5268;

    /* Accent: aged brass */
    --nspcb-accent:           #C4A040;
    --nspcb-accent-light:     #D4B050;

    /* Page surfaces */
    --nspcb-surface:          #FAFAF8;
    --nspcb-surface-alt:      #F0EDEA;
    --nspcb-surface-raised:   #E8E0D8;

    /* Text on page surfaces */
    --nspcb-on-surface:       #1A1512;
    --nspcb-on-surface-muted: #5A5050;

    /* Text on always-dark surfaces (header, sidebar) — must stay light */
    --nspcb-on-dark:          #FAFAF8;

    /* Borders */
    --nspcb-border:           #C8B8A8;

    /* Headings on page (slate in light mode) */
    --nspcb-heading:          #2C3E50;

    /* Links */
    --nspcb-link:             #8B1A1A;
    --nspcb-link-hover:       #5E1111;
}

/* ── Body & typography ────────────────────────────────────────── */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--nspcb-surface);
    color: var(--nspcb-on-surface);
}

p {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--nspcb-on-surface);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Quattrocento', Georgia, serif;
    color: var(--nspcb-heading);
}

a       { color: var(--nspcb-link); }
a:hover { color: var(--nspcb-link-hover); }

/* ── Fixed header — text uses --nspcb-on-dark, not a page-surface var ── */
/*    This prevents the heading from disappearing in dark mode.           */
.fixed-header {
    background: var(--nspcb-structure) !important;
    color: var(--nspcb-on-dark);
}

.fixed-header h4,
.fixed-header h5,
.fixed-header h6 {
    font-family: 'Quattrocento', Georgia, serif;
    color: var(--nspcb-on-dark);   /* always light — header bg is always dark */
}

.fixed-header a {
    color: var(--nspcb-on-dark) !important;
}

/* ── Hamburger button — toned down from Bootstrap btn-info cyan ── */
#sidebarCollapse {
    background-color: var(--nspcb-structure-dark) !important;
    border-color:     var(--nspcb-structure-dark) !important;
    color:            var(--nspcb-on-dark) !important;
    opacity: 0.85;
}
#sidebarCollapse:hover {
    background-color: var(--nspcb-structure) !important;
    border-color:     var(--nspcb-structure) !important;
    opacity: 1;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
#sidebar {
    background: var(--nspcb-structure);
    color: var(--nspcb-on-dark);
}

#sidebar .sidebar-header h3 {
    color: var(--nspcb-on-dark);
}

#sidebar ul li a {
    color: var(--nspcb-on-dark);
    background: var(--nspcb-structure);
}

#sidebar ul li a:hover {
    color: var(--nspcb-accent-light);
    background: var(--nspcb-structure-light);
}

#sidebar ul li.active > a,
#sidebar a[data-bs-toggle="collapse"],
#sidebar a[aria-expanded="true"] {
    color: #fff;
    background: var(--nspcb-structure-light);
}

#sidebar ul ul a {
    background: var(--nspcb-structure-dark);
}

#dismiss {
    color: var(--nspcb-on-dark);
}
#dismiss:hover {
    background: var(--nspcb-accent);
    color: #fff;
}

/* ── Bootstrap primary button & outline ───────────────────────── */
.btn-primary {
    --bs-btn-color:                #fff;
    --bs-btn-bg:                   var(--nspcb-primary);
    --bs-btn-border-color:         var(--nspcb-primary);
    --bs-btn-hover-color:          #fff;
    --bs-btn-hover-bg:             var(--nspcb-primary-dark);
    --bs-btn-hover-border-color:   var(--nspcb-primary-dark);
    --bs-btn-focus-shadow-rgb:     139, 26, 26;
    --bs-btn-active-color:         #fff;
    --bs-btn-active-bg:            var(--nspcb-primary-darker);
    --bs-btn-active-border-color:  var(--nspcb-primary-darker);
    --bs-btn-disabled-color:       #fff;
    --bs-btn-disabled-bg:          var(--nspcb-primary-muted);
    --bs-btn-disabled-border-color: var(--nspcb-primary-muted);
}

.btn-outline-primary {
    --bs-btn-color:              var(--nspcb-primary);
    --bs-btn-border-color:       var(--nspcb-primary);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--nspcb-primary);
    --bs-btn-hover-border-color: var(--nspcb-primary);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          var(--nspcb-primary);
    --bs-btn-active-border-color: var(--nspcb-primary);
}

.btn-link {
    color: var(--nspcb-link);
}
.btn-link:hover {
    color: var(--nspcb-link-hover);
}

/* ── Bridge detail layout ─────────────────────────────────────── */
/*
 * .nspcb-directions-container uses float:left (50% wide) so Bridge Facts
 * flows beside it.  Bootstrap 4 cleared floats on .container; Bootstrap 5
 * does not.  Clear here so Bridge Facts and Nearby Bridges always stack below.
 */
#full-info,
#nearby-bridges {
    clear: both;
}

/* ── Carousel controls — remove background rectangle ─────────── */
/*
 * Bootstrap 5.3 renders carousel controls as <button> elements whose
 * background can appear as a colored rectangle depending on theme/browser.
 * Force transparent background; add a drop-shadow to keep the icon legible
 * against any slide content.
 */
.carousel-control-prev,
.carousel-control-next {
    background: none !important;
    border: 0 !important;
    opacity: 0.75;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.9));
}

/* ── Cards & accordion (General Search) ──────────────────────── */
.card {
    border-color: var(--nspcb-border);
}

.card-header {
    background-color: var(--nspcb-surface-alt);
    border-bottom-color: var(--nspcb-border);
}

.nspcbSelectHeading {
    color: var(--nspcb-structure);
}

/* ── Badges ───────────────────────────────────────────────────── */
.text-bg-success { background-color: #2D6A1A !important; color: #fff !important; }
.text-bg-info    { background-color: #2C3E50 !important; color: #fff !important; }

/* ── Carousel: hide prev/next controls when no slides are loaded ─ */
/*
 * :has() checks that the carousel-inner contains at least one .carousel-item.
 * Without slides the controls are meaningless; this avoids them appearing on
 * first page load before any WGN / bridge number is entered.
 * Fallback browsers that don't support :has() will still show the buttons —
 * they just won't work, which is acceptable.
 */
.carousel:not(:has(.carousel-item)) .carousel-control-prev,
.carousel:not(:has(.carousel-item)) .carousel-control-next {
    display: none;
}

/* ── Native <select> and <option> — dark-mode visibility fix ──── */
/*
 * Browsers render <option> text with OS-native colors inside the dropdown.
 * Bootstrap 5.3 does not override these, so in dark mode the dark browser
 * background can make option text invisible.  We force explicit colors on
 * the <select> itself (covering the collapsed widget) and on <option>
 * (covering the expanded list where CSS can reach it in Chromium/Firefox).
 */
select.form-select,
select {
    color: var(--nspcb-on-surface);
    background-color: var(--nspcb-surface);
}

/* ─────────────────────────────────────────────────────────────── */
/* ── Dark mode                                                  ── */
/* ─────────────────────────────────────────────────────────────── */
/*
 * Bootstrap 5.3 switches its own component variables when
 * data-bs-theme="dark" is on <html>.  We patch our custom tokens
 * and non-Bootstrap surfaces below.
 */
[data-bs-theme="dark"] {
    /* Primary: lightened red for legibility on dark bg */
    --nspcb-primary:          #C4403A;
    --nspcb-primary-dark:     #A82020;
    --nspcb-primary-darker:   #8B1A1A;
    --nspcb-primary-light:    #D45050;
    --nspcb-primary-muted:    #A03030;

    /* Structure: lightened slate */
    --nspcb-structure:        #3D5268;
    --nspcb-structure-dark:   #1A2535;
    --nspcb-structure-light:  #4A6A8A;

    /* Accent */
    --nspcb-accent:           #C4A040;
    --nspcb-accent-light:     #D4B050;

    /* Surfaces */
    --nspcb-surface:          #1C1C1E;
    --nspcb-surface-alt:      #2A2A2C;
    --nspcb-surface-raised:   #383838;

    /* Text */
    --nspcb-on-surface:       #E8E0D8;
    --nspcb-on-surface-muted: #A09090;
    --nspcb-on-dark:          #E8E0D8;   /* header/sidebar text — stays light */

    /* Borders */
    --nspcb-border:           #3A3028;

    /* Headings on page */
    --nspcb-heading:          #8AACCA;   /* light slate for dark backgrounds */

    /* Links */
    --nspcb-link:             #C4403A;
    --nspcb-link-hover:       #D45050;
}

[data-bs-theme="dark"] body {
    background-color: #1C1C1E;
    color: #E8E0D8;
}

[data-bs-theme="dark"] .fixed-header {
    background: #1A2535 !important;
}

/* Header headings in dark mode — explicit override so they stay visible */
[data-bs-theme="dark"] .fixed-header h4,
[data-bs-theme="dark"] .fixed-header h5,
[data-bs-theme="dark"] .fixed-header h6 {
    color: #E8E0D8;
}

[data-bs-theme="dark"] .fixed-header a {
    color: #E8E0D8 !important;
}

[data-bs-theme="dark"] #sidebarCollapse {
    background-color: #1A2535 !important;
    border-color:     #253545 !important;
}

[data-bs-theme="dark"] #sidebar {
    background: #1A2535;
}

[data-bs-theme="dark"] #sidebar ul li a {
    color: #E8E0D8;
    background: #1A2535;
}

[data-bs-theme="dark"] #sidebar ul li a:hover {
    color: var(--nspcb-accent-light);
    background: #253545;
}

[data-bs-theme="dark"] #sidebar ul li.active > a,
[data-bs-theme="dark"] #sidebar a[data-bs-toggle="collapse"],
[data-bs-theme="dark"] #sidebar a[aria-expanded="true"] {
    background: #253545;
    color: #E8E0D8;
}

[data-bs-theme="dark"] #sidebar ul ul a {
    background: #0F1520;
}

[data-bs-theme="dark"] .card {
    border-color: #3A3028;
}

[data-bs-theme="dark"] .card-header {
    background-color: #2A2A2C;
    border-bottom-color: #3A3028;
}

[data-bs-theme="dark"] .nspcbSelectHeading {
    color: #8AACCA;
}

[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] select {
    color: #E8E0D8;
    background-color: #2A2A2C;
    border-color: #3A3028;
}

[data-bs-theme="dark"] select option {
    color: #E8E0D8;
    background-color: #2A2A2C;
}

/*
 * Bootstrap 5.3 sets color-scheme:dark on the root, which hands <select>
 * rendering to the OS — overriding any option:checked background rules.
 * Resetting to color-scheme:only light on the element itself gives CSS back
 * control, while our explicit background-color/color above keep it looking dark.
 */
[data-bs-theme="dark"] select {
    color-scheme: only light;
}
[data-bs-theme="dark"] select option:checked,
[data-bs-theme="dark"] select option:hover {
    background: linear-gradient(#3D5268, #3D5268);
    color: #E8E0D8;
}

/* ── Dark mode toggle button ─────────────────────────────────── */
.nspcb-theme-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: var(--nspcb-on-dark);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8em;
    cursor: pointer;
    line-height: 1.4;
}
.nspcb-theme-toggle:hover {
    background: rgba(255,255,255,0.15);
}