/*
 * Sitewide dealership presentation layer.
 *
 * Applied after legacy route CSS so current page structures, inventory data,
 * and conversion flows remain intact while their surfaces share one visual
 * language: deep Havasu water navy, clean white, and a single decisive red.
 */

@font-face {
    font-family: 'TBB Inter';
    src: url('../fonts/inter/inter-latin-var.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

:root {
    --tbb-dealer-navy: #102c4e;
    --tbb-dealer-navy-deep: #0a1d35;
    --tbb-dealer-blue: #1d4ed8;
    --tbb-dealer-red: #c91d35;
    --tbb-dealer-red-hover: #aa152a;
    --tbb-dealer-canvas: #f3f7fb;
    --tbb-dealer-border: #d8e2ed;
    --tbb-dealer-ink: #172633;
    --tbb-dealer-muted: #536575;
    --tbb-dealer-shadow: 0 14px 34px rgba(16, 44, 78, .12);
}

body.tbb-theme { background: var(--tbb-dealer-canvas); font-family: 'TBB Inter', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* A consistent, readable frame for default WordPress, blog, and custom templates. */
main#main-content,
.inv2-main,
.bfa-page,
.csn-page,
.syb-page,
.hpv5 {
    color: var(--tbb-dealer-ink);
}

:is(
    .tbb-page, .tbb-blog, .inv2-main, .bfa-page, .csn-page, .syb-page,
    .hpv5, #ve-hero, #fn-hero, #pc-hero, #vp-hero, #tm-hero, #ps-hero,
    #fq-hero, #ct-hero, .bfs-hero
) :is(h1, h2, h3) {
    font-family: 'TBB Inter', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 750;
    letter-spacing: -.025em;
    line-height: 1.12;
}

:is(
    .tbb-page, .tbb-blog, .inv2-main, .bfa-page, .csn-page, .syb-page,
    .hpv5, #ve-hero, #fn-hero, #pc-hero, #vp-hero, #tm-hero, #ps-hero,
    #fq-hero, #ct-hero, .bfs-hero
) :is(p, li, label) {
    line-height: 1.65;
}

:is(.bfa-page, .csn-page, .syb-page, .ve-wrap, .fn-wrap, .pc-wrap, .vp-wrap, .tm-wrap, .ps-wrap, .fq-wrap, .ct-wrap, .bfs-inner) {
    font-family: 'TBB Inter', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:is(
    .tbb-container, .bfa-wrap, .csn-wrap, .syb-wrap, .ve-wrap, .fn-wrap,
    .pc-wrap, .vp-wrap, .tm-wrap, .ps-wrap, .fq-wrap, .ct-wrap, .bfs-inner
) {
    max-width: 1240px;
}

/* Default WordPress pages and the blog use the same calm editorial structure. */
.tbb-page { padding-block: clamp(2.75rem, 6vw, 5.5rem); }
.tbb-article { max-width: 900px; margin-inline: auto; }
.tbb-article__header { border-bottom: 3px solid var(--tbb-dealer-red); margin-bottom: 2rem; padding-bottom: 1.25rem; }
.tbb-article__title { color: var(--tbb-dealer-navy); font-size: clamp(2.25rem, 5vw, 4.25rem); }
.tbb-article__content > :where(p, ul, ol) { color: var(--tbb-dealer-muted); font-size: 1.0625rem; max-width: 72ch; }
.tbb-section__title { color: var(--tbb-dealer-navy); font-size: clamp(1.85rem, 3.5vw, 3rem); }
.tbb-section__subtitle { color: var(--tbb-dealer-muted); }

/* Keep the mark playful, but give navigation the crisp dealership weight. */
.tbb-header__menu li a,
.tbb-mobile-nav li a {
    font-family: 'TBB Inter', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

/* Reusable existing CTA classes: red is reserved for the next meaningful step. */
:is(.bfa-page, .csn-page, .syb-page, .hpv5, .inv2-main) :is(
    .btn-primary, .btn-red, .syb-btn--primary, .csn-btn--primary,
    .bfa-btn--primary, .inv2-cta, .inv2-picker-tile__cta
) {
    background: var(--tbb-dealer-red);
    border-color: var(--tbb-dealer-red);
    color: #fff;
    box-shadow: 0 8px 18px rgba(201, 29, 53, .2);
}

:is(.bfa-page, .csn-page, .syb-page, .hpv5, .inv2-main) :is(
    .btn-primary, .btn-red, .syb-btn--primary, .csn-btn--primary,
    .bfa-btn--primary, .inv2-cta, .inv2-picker-tile__cta
):hover {
    background: var(--tbb-dealer-red-hover);
    border-color: var(--tbb-dealer-red-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* Shared information cards: quiet white field, blue-gray border, real depth. */
:is(
    .inv2-picker-tile, .inv2-card, .bfa-card, .csn-card, .syb-card,
    .ve-card, .fn-card, .pc-card, .vp-card, .tm-card, .ps-card, .fq-card,
    .ct-qcard, .bfs-card
) {
    border-color: var(--tbb-dealer-border);
    box-shadow: var(--tbb-dealer-shadow);
}

:is(
    .inv2-picker-tile, .inv2-card, .bfa-card, .csn-card, .syb-card,
    .ve-card, .fn-card, .pc-card, .vp-card, .tm-card, .ps-card, .fq-card,
    .ct-qcard, .bfs-card
):hover {
    box-shadow: 0 18px 42px rgba(16, 44, 78, .17);
}

/* Hero families retain their authentic photography and retain their template-owned scrims. */
:is(
    .bfa-hero, .csn-hero, .syb-hero, #ve-hero, #fn-hero, #pc-hero,
    #vp-hero, #tm-hero, #ps-hero, #fq-hero, #ct-hero, .bfs-hero
) {
    border-bottom: 3px solid var(--tbb-dealer-red);
}

/* Inventory is the reference experience: make category choices read as premium product cards. */
#inv2-hero,
.inv2-main {
    background-color: var(--tbb-dealer-canvas);
}

.inv2-picker-tile {
    background: #fff;
    overflow: hidden;
}

.inv2-picker-tile :is(h2, h3, h4) { color: var(--tbb-dealer-navy); }
.inv2-picker-tile :is(.inv2-picker-label, .inv2-picker-sub) { color: var(--tbb-dealer-muted); }

/* Inline-template section variants get the same alternating white/cool-canvas rhythm. */
:is(
    .bfa-section, .csn-section, .syb-section, .vp-section, .bfs-sec,
    #ve-trust, #fn-how, #pc-why, #tm-staff, #ps-form, #fq-buying, #ct-main
) {
    border-top: 1px solid rgba(216, 226, 237, .72);
}

:is(.bfa-section--alt, .csn-section--alt, .syb-section--alt, .vp-section--alt, .bfs-sec--alt) {
    background: var(--tbb-dealer-canvas);
}

:is(.bfa-section--navy, .csn-section--navy, .syb-section--navy, .vp-section--navy, .bfs-sec--navy) {
    background: var(--tbb-dealer-navy);
    color: #fff;
}

/* Contact: remove the washed-out flag animation and make the entry clean and calm. */
#ct-hero {
    background: #fff;
    border-bottom-color: var(--tbb-dealer-border);
}

#ct-hero .ct-flag-bg { display: none; }
#ct-hero .ct-hero-inner { max-width: 760px; padding-block: clamp(3.75rem, 7vw, 5.75rem); }
#ct-hero .ct-h1 { color: var(--tbb-dealer-navy); font-family: 'TBB Inter', Inter, sans-serif; font-weight: 750; }
#ct-hero .ct-sub { color: var(--tbb-dealer-muted); max-width: 56ch; }

/* Consignment: a composed navy field, readable measure, no synthetic pattern. */
.csn-hero {
    background: var(--tbb-dealer-navy-deep) !important;
    padding-block: clamp(4.75rem, 8vw, 7rem) clamp(4rem, 7vw, 6rem) !important;
}

.csn-hero::before { background: none !important; }
.csn-hero .csn-wm { display: none !important; }
.csn-hero__inner { max-width: 760px !important; }
.csn-hero .csn-h1 { font-family: 'TBB Inter', Inter, sans-serif !important; font-weight: 750 !important; letter-spacing: -.035em !important; }
.csn-hero .csn-hero__subhead { font-size: clamp(1rem, 1.5vw, 1.125rem) !important; line-height: 1.6 !important; max-width: 63ch !important; }
.csn-hero .csn-eyebrow { color: #ff6b7d; }

/* The native About template uses the same decorative flag treatment as Contact.
 * Keep the dealership hero calm and let its actual story and proof points lead. */
#ab-hero { background: #fff; }
#ab-hero .ab-flag-bg { display: none; }
#ab-hero .ab-hero-inner { max-width: 860px; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
#ab-hero .ab-h1 { font-family: 'TBB Inter', Inter, sans-serif; font-weight: 750; letter-spacing: -.035em; }
#ab-hero .ab-sub { max-width: 60ch; }

/* Forms on inquiry, valuation, finance, parts, and contact routes use one dependable control geometry. */
main :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    border: 1px solid #b9c9da;
    border-radius: 10px;
    color: var(--tbb-dealer-ink);
    font: inherit;
    min-height: 46px;
}

main :is(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
    border-color: var(--tbb-dealer-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .14);
    outline: 0;
}

main :is(button[type='submit'], input[type='submit'], .tbb-footer__lead-btn) {
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: .01em;
}

/* Existing header remains deliberately familiar; this only makes its navigation state exact. */
.tbb-header__menu li.current-menu-item > a,
.tbb-header__menu li.current_page_item > a {
    color: var(--tbb-dealer-red);
}

.tbb-header__menu li a:focus-visible,
.tbb-hdr-valuation-cta:focus-visible,
.tbb-mobile-nav li a:focus-visible {
    outline: 3px solid var(--tbb-dealer-blue);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    :is(.bfa-page, .csn-page, .syb-page, .hpv5, .inv2-main) :is(h1, h2) {
        letter-spacing: -.015em;
    }

    :is(
        .inv2-picker-tile, .inv2-card, .bfa-card, .csn-card, .syb-card,
        .ve-card, .fn-card, .pc-card, .vp-card, .tm-card, .ps-card, .fq-card,
        .ct-qcard, .bfs-card
    ) {
        box-shadow: 0 8px 22px rgba(16, 44, 78, .1);
    }

    .tbb-page { padding-block: 2.5rem; }
    .tbb-article__title { font-size: 2.35rem; }
}