/*
 * beaverdamautos.com: the window sticker (Monroney label) as the visual idea.
 * White ruled "sheet" on a grey lot, navy ink, logo blue for the EPA band,
 * grease-pencil yellow only on the VIN field.
 */
:root {
    --bda-paper: #ffffff;
    --bda-ink: #17243a;
    --bda-ink-soft: #4f5b6d;
    --bda-lot: #e8ebef;
    --bda-blue: #1d5ba6;
    --bda-blue-dark: #164a88;
    --bda-pencil: #f2c12e;
    --bda-rule: 1.5px solid var(--bda-ink);

    --bs-body-font-family: "Archivo", system-ui, sans-serif;
    --bs-body-color: var(--bda-ink);
    --bs-body-bg: var(--bda-lot);
    --bs-link-color: var(--bda-blue);
    --bs-link-color-rgb: 29, 91, 166;
    --bs-link-hover-color: var(--bda-blue-dark);
    --bs-link-hover-color-rgb: 22, 74, 136;
    --bs-border-color: #c9ced6;
    --bs-primary: var(--bda-blue);
    --bs-primary-rgb: 29, 91, 166;
}

body {
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h2, .h3, .bda-wide {
    font-variation-settings: "wdth" 118;
    font-weight: 750;
    letter-spacing: -0.005em;
    line-height: 1.15;
}

h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

:focus-visible {
    outline: 3px solid var(--bda-blue);
    outline-offset: 2px;
}

.btn-primary {
    --bs-btn-bg: var(--bda-blue);
    --bs-btn-border-color: var(--bda-blue);
    --bs-btn-hover-bg: var(--bda-blue-dark);
    --bs-btn-hover-border-color: var(--bda-blue-dark);
    --bs-btn-active-bg: var(--bda-blue-dark);
    font-weight: 650;
}

/* Bootstrap's own #0d6efd is 3.8:1 on the grey lot; logo blue is 5.6:1. */
.btn-outline-primary {
    --bs-btn-color: var(--bda-blue);
    --bs-btn-border-color: var(--bda-blue);
    --bs-btn-hover-bg: var(--bda-blue);
    --bs-btn-hover-border-color: var(--bda-blue);
    --bs-btn-active-bg: var(--bda-blue-dark);
    --bs-btn-active-border-color: var(--bda-blue-dark);
    --bs-btn-disabled-color: var(--bda-blue);
    --bs-btn-disabled-border-color: var(--bda-blue);
}

/* Header ---------------------------------------------------------------- */

.bda-header {
    background: var(--bda-paper);
    border-bottom: var(--bda-rule);
}

.bda-header .navbar-brand img {
    height: 40px;
    width: auto;
}

.bda-header .nav-link {
    color: var(--bda-ink);
    font-weight: 550;
}

/* The VIN field: 17 stamped cells -------------------------------------- */

.vin-field {
    --cell: 1.55ch;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    font-size: clamp(1rem, 0.55rem + 2.6vw, 1.9rem);
    width: calc(17 * var(--cell) + (var(--cell) - 1ch) / 2 + 4px);
    max-width: 100%;
    padding: 0.35em 0 0.35em calc((var(--cell) - 1ch) / 2);
    letter-spacing: calc(var(--cell) - 1ch);
    text-transform: uppercase;
    color: var(--bda-ink);
    background-color: var(--bda-paper);
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) - 1px), #b8bfc9 calc(var(--cell) - 1px) var(--cell));
    border: var(--bda-rule);
    border-radius: 2px;
    caret-color: var(--bda-blue);
}

.vin-field::placeholder {
    color: #aab2bd;
}

.vin-field:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--bda-pencil);
}

.vin-count {
    font-size: 0.875rem;
    color: var(--bda-ink-soft);
}

.vin-count[data-complete="true"] {
    color: var(--bda-blue);
    font-weight: 600;
}

/* Home ------------------------------------------------------------------- */

.bda-hero {
    padding-block: clamp(2rem, 6vw, 4.5rem);
}

.bda-hero h1 {
    max-width: 18ch;
}

.bda-hero p.lead {
    max-width: 52ch;
    color: var(--bda-ink-soft);
}

.bda-makes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.bda-makes li {
    border-top: var(--bda-rule);
    padding-top: 0.6rem;
}

.bda-makes strong {
    display: block;
    font-variation-settings: "wdth" 112;
}

/* The window sticker sheet ---------------------------------------------- */

.sticker-sheet {
    background: var(--bda-paper);
    border: var(--bda-rule);
    box-shadow: 0 1px 0 rgba(23, 36, 58, 0.15);
}

.sticker-sheet__head {
    padding: 1rem 1.25rem;
    border-bottom: var(--bda-rule);
}

.sticker-sheet__vin {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 1.05rem;
}

.sticker-sheet__section {
    padding: 0.9rem 1.25rem 1rem;
}

.sticker-sheet__section + .sticker-sheet__section {
    border-top: var(--bda-rule);
}

.sticker-sheet h2 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.specList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.specList li {
    display: grid;
    grid-template-columns: minmax(7.5rem, 38%) 1fr;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px dotted #b8bfc9;
}

.specList li:last-child {
    border-bottom: 0;
}

.vehicleSpecKey {
    color: var(--bda-ink-soft);
}

.vehicleSpecVal {
    font-weight: 600;
}

/* EPA-style fuel economy band */
.mpg-band {
    display: flex;
    align-items: stretch;
    border: var(--bda-rule);
}

.mpg-band__label {
    background: var(--bda-blue);
    color: #fff;
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    font-variation-settings: "wdth" 115;
    display: flex;
    align-items: center;
}

.mpg-band__figure {
    flex: 1;
    text-align: center;
    padding: 0.4rem 0.5rem;
}

.mpg-band__figure + .mpg-band__figure {
    border-left: var(--bda-rule);
}

.mpg-band__figure b {
    display: block;
    font-size: 2rem;
    line-height: 1;
    font-variation-settings: "wdth" 125;
}

.mpg-band__figure span {
    font-size: 0.8rem;
    color: var(--bda-ink-soft);
}

.decoder-note {
    font-size: 0.8rem;
    color: var(--bda-ink-soft);
}

/* Side column */

.bda-panel {
    background: var(--bda-paper);
    border: 1px solid var(--bs-border-color);
    padding: 1rem 1.25rem;
}

.bda-panel + .bda-panel {
    margin-top: 1rem;
}

.sticker-pdf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.sticker-pdf:first-of-type {
    border-top: 0;
}

.basepic {
    width: 100%;
    height: auto;
    display: block;
    background: var(--bda-lot);
}

/* Tabs below the sheet */

.bda-tabs .nav-link {
    color: var(--bda-ink);
    font-weight: 600;
}

.bda-tabs .nav-link.active {
    border-color: var(--bda-ink) var(--bda-ink) var(--bda-paper);
    border-width: 1.5px;
}

.bda-tabpanes {
    background: var(--bda-paper);
    border: 1.5px solid var(--bda-ink);
    border-top: 0;
    padding: 1.25rem;
}

.photo-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.photo-grid img {
    width: 100%;
    height: auto;
    display: block;
}

.swatch {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--bda-ink);
    border-radius: 50%;
    flex: none;
}

.color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.color-code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.85rem;
    color: var(--bda-ink-soft);
    min-width: 3.5rem;
}

.subEquipment,
.subOption {
    padding: 0.6rem 0;
    border-bottom: 1px dotted #b8bfc9;
}

.subEquipment ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.925rem;
    color: var(--bda-ink-soft);
}

.subOptionMSRP {
    font-weight: 650;
    white-space: nowrap;
}

/* Wide enough for all 17 characters; the button wraps below on small phones. */
.vinaudit-vin {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Ads and footer ---------------------------------------------------------- */

.ad-slot {
    text-align: center;
    margin-block: 1.5rem;
    min-height: 100px;
}

/* The 320x100 units are wider than the content box on 320px phones; let the
   slot run edge to edge instead of shrinking or clipping the ad. */
@media (max-width: 359.98px) {
    .ad-slot {
        margin-inline: calc(50% - 50vw);
    }
}

.bda-footer {
    border-top: var(--bda-rule);
    background: var(--bda-paper);
    font-size: 0.9rem;
    color: var(--bda-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

.columns-list {
    columns: 2 16rem;
}

/* Easier to tap the right vehicle on a phone. */
.columns-list li {
    padding-block: 0.3rem;
}

.bda-panel h2 {
    font-size: 1.15rem;
}

/* Admin bulk queue ------------------------------------------------------- */

.admin-queue {
    --bs-table-bg: var(--bda-paper);
}

/* Phones: one card per request instead of a wide table. */
@media (max-width: 767.98px) {
    .admin-queue thead {
        display: none;
    }

    .admin-queue tr,
    .admin-queue td {
        display: block;
    }

    .admin-queue tr {
        border-top: var(--bda-rule);
        padding-block: 0.5rem;
    }

    .admin-queue td {
        border: 0;
        padding: 0.2rem 0;
    }

    .admin-queue td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8rem;
        color: var(--bda-ink-soft);
    }
}