/* THEME TOKENS (Light + Dark) */
/* Aligned to Ben’s Bugout Co Brand Standards & Website UI Guide (official palette + UI tokens). */
:root,
[data-bs-theme="light"]{
    /* Official palette (logo-derived) */
    --bb-black: #050606;
    --bb-navy:  #071B2A;
    --bb-white: #FFFFFF;

    --bb-teal:  #15D0B5;
    --bb-aqua:  #5FEDE3;
    --bb-blue:  #3FA9F5;

    --bb-steel: #6E8FA3;
    --bb-fog:   #C9D6DB;

    /* Site tokens mapped to existing variable names */
    --bb-primary: var(--bb-teal);     /* actions/links */
    --bb-accent:  var(--bb-blue);     /* secondary accent/hover */
    --bb-sand:    var(--bb-fog);      /* subtle backgrounds */
    --bb-ink:     var(--bb-navy);     /* text */
    --bb-bg:      var(--bb-white);    /* page background */
    --bb-muted:   var(--bb-steel);    /* muted text */

    --bb-surface: var(--bb-white);    /* cards/panels */
    --bb-border:  rgba(7,27,42,.14);

    --bb-radius:  18px;
    --bb-shadow:  0 10px 30px rgba(5,6,6,.10);
    --bb-maxw:    1140px;

    --bb-sticky-h: 64px;
}

[data-bs-theme="dark"]{
    /* Brand UI tokens (from standards doc) */
    --bb-panel:  #0A1E27;
    --bb-subtle: #0D2E3A;

    --bb-bg:      var(--bb-black);
    --bb-surface: var(--bb-panel);
    --bb-border:  #1E3B44;

    --bb-ink:     var(--bb-white);
    --bb-muted:   var(--bb-fog);

    --bb-primary: var(--bb-teal);
    --bb-accent:  var(--bb-blue);

    --bb-sand:    var(--bb-subtle);
}

/* Bootstrap variable tuning for dark mode */
[data-bs-theme="dark"]{
    --bs-body-bg: var(--bb-bg);
    --bs-body-color: var(--bb-ink);

    --bs-border-color: var(--bb-border);
    --bs-tertiary-bg: var(--bb-surface);

    --bs-link-color: var(--bb-primary);
    --bs-link-hover-color: var(--bb-aqua);

    --bs-heading-color: var(--bb-ink);
}

/* Dark-mode button text tuning for contrast */
[data-bs-theme="dark"] .btn-bb-primary,
[data-bs-theme="dark"] .btn-bb-accent{
    --bs-btn-color: #052222; /* from brand UI guide CTA text token */
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bb-reviews { scroll-behavior: auto !important; }
}

body {
    background: var(--bb-bg);
    color: var(--bb-ink);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding-bottom: var(--bb-sticky-h);
}
@media (min-width: 992px){
    body { padding-bottom: 0; }
}

a { color: var(--bb-primary); text-decoration-thickness: .08em; text-underline-offset: 2px; }
a:hover { color: var(--bb-accent); }

/* Visible focus for ADA (teal = actions) */
:focus-visible {
    outline: 3px solid var(--bb-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

.skip-link{
    position:absolute; left:-999px; top:0;
    background:#fff; color:#000; padding:.75rem 1rem; z-index:9999;
}
.skip-link:focus{ left: .75rem; top:.75rem; }

.bb-container { max-width: var(--bb-maxw); }

/* Header */
.bb-nav {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.85);
    border-bottom: 1px solid var(--bb-border);
}
[data-bs-theme="dark"] .bb-nav{
    background: rgba(5,6,6,.85);
}
.bb-nav-logo{
    height: 75px;
    width: auto;
    display: block;
}

.bb-title-stacked{
    position: relative;
    display: inline-block;
    white-space: nowrap;

    text-transform: uppercase;
    letter-spacing: .085em;

    line-height: 1;
    font-size: 3.25rem;

    font-family: "Londrina Solid", sans-serif;
    color: #0d344d; /* lifted dark fill */
    text-shadow: none;
}

/* Aqua shadow layer */
.bb-title-stacked::before{
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;

    font-family: "Londrina Solid", sans-serif;
    color: var(--bb-teal);
    transform: translate(4px, 4px);
    opacity: .95;
    z-index: -2;
}

/* White outline layer */
.bb-title-stacked::after{
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;

    font-family: "Londrina Outline", sans-serif;
    color: transparent;
    -webkit-text-stroke: 3px var(--bb-white);
    paint-order: stroke fill;
    z-index: -1;
}





/* =========================
   Mobile header cleanup
   ========================= */
@media (max-width: 991.98px){
    /* Hide header action buttons + theme selector (bottom sticky bar handles CTAs) */
    .bb-nav-actions{ display:none !important; }

    /* Keep logo + title on one line */
    .navbar.navbar-expand-lg .container.bb-container{
        flex-wrap: nowrap;
    }

    /* Shrink logo + brand text */
    .bb-nav-logo{ height: 42px; }

    .bb-nav .nav-title{
        font-size: 1.35rem;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 380px){
    .bb-nav-logo{ height: 36px; }
    .bb-nav .nav-title{ font-size: 1.15rem; }
}

/* Buttons */
.btn-bb-primary{
    --bs-btn-bg: var(--bb-primary);
    --bs-btn-border-color: var(--bb-primary);
    --bs-btn-hover-bg: var(--bb-aqua);
    --bs-btn-hover-border-color: var(--bb-aqua);
    --bs-btn-color: #052222; /* CTA text token from guide */
}
.btn-bb-accent{
    --bs-btn-bg: var(--bb-accent);
    --bs-btn-border-color: var(--bb-accent);
    --bs-btn-hover-bg: var(--bb-primary);
    --bs-btn-hover-border-color: var(--bb-primary);
    --bs-btn-color: #fff;
}

/* =========================
   HERO (full-bleed, existing-site vibe)
   ========================= */
.bb-hero-full{
    position: relative;
    width: 100%;
    min-height: clamp(520px, 70vh, 760px);
    overflow: hidden;
    background: #000;
}

.bb-hero-full-img{
    position:absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
}

.bb-hero-full-overlay{
    position:absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.45) 45%,
            rgba(0,0,0,.18) 100%
    );
}

.bb-hero-full-content{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: inherit;
    padding: clamp(1.25rem, 4vw, 3rem) 0;
    color: #fff;
}

/* Desktop-only hero logo (mobile uses text-only for clarity + speed) */
.bb-hero-logo{
    width: min(520px, 95%);
    height: auto;
    display: block;
    margin-bottom: 1rem;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}
@media (max-width: 991.98px){
    .bb-hero-logo{ display:none; }
}

/* Section cards */
.bb-card {
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
    background: var(--bb-surface);
}
.bb-card img { width:100%; height:100%; object-fit: cover; }

.bb-kicker { color: var(--bb-muted); }

/* CTA strip */
.bb-cta {
    border-radius: var(--bb-radius);
    background: linear-gradient(135deg, rgba(21,208,181,.10), rgba(63,169,245,.08));
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow);
}
[data-bs-theme="dark"] .bb-cta{
    background: linear-gradient(135deg, rgba(21,208,181,.14), rgba(63,169,245,.10));
}

.bb-help {
    font-size: .95rem;
    color: var(--bb-muted);
}

/* Reviews: horizontal scroll + snap */
.bb-reviews {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 360px);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.bb-reviews::-webkit-scrollbar { height: 10px; }
.bb-reviews::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; }
[data-bs-theme="dark"] .bb-reviews::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); }

.bb-review {
    scroll-snap-align: start;
    border-radius: var(--bb-radius);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow);
    padding: 1.25rem;
    border: 1px solid var(--bb-border);
}
.bb-stars { letter-spacing: 1px; color: var(--bb-primary); }

/* Footer */
.bb-footer{
    border-top: 1px solid var(--bb-border);
    color: var(--bb-muted);
}

.bb-footer img {
    height: 100px;
    width: 130px;
}

/* Sticky bottom CTA bar (mobile) */
.bb-stickybar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bb-border);
    padding: .5rem .75rem;
}
[data-bs-theme="dark"] .bb-stickybar{
    background: rgba(5,6,6,.92);
}
@media (min-width: 992px){
    .bb-stickybar{ display:none; }
}
.bb-stickybar .btn{
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}
.bb-stickybar .btn i{
    margin-right: .35rem;
}

/* Footer veteran badge */
.bb-footer-badge{
    line-height: 1.25;
}

.bb-footer-badge-logo{
    height: 56px;   /* adjust to taste */
    width: auto;
    flex-shrink: 0;
}

.bb-footer-badge-text{
    font-size: .9rem;
    color: var(--bb-muted);
}

.bb-footer-badge-text strong{
    color: var(--bb-ink);
    letter-spacing: .02em;
}

/* Hero trust points: stack cleanly on small screens */
@media (max-width: 575.98px){
    .bb-hero-full .hero-trust{
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }

    .bb-hero-full .hero-trust span.separator{
        display: none;
    }
}

:root{
    --bb-scroll-offset: clamp(72px, 10vh, 110px);
}

html{ scroll-padding-top: var(--bb-scroll-offset); }
#request-service{ scroll-margin-top: var(--bb-scroll-offset); }

/* =========================
   Reviews: balanced cards
   - Vertically center quote area
   - Conditional tightening for long quotes (.is-long set by JS)
   ========================= */

.bb-review{
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Quote block vertically centers within the card. Attribution sits directly under the quote. */
.bb-review blockquote{
    flex: 1;                         /* takes the extra vertical space */
    display: flex;
    flex-direction: column;
    justify-content: center;         /* vertical centering of the quote+attrib group */
    margin: .5rem 0 0;
}

.bb-review blockquote p{
    margin: 0;
    line-height: 1.55;               /* normal default */
}

/* Applied only when JS marks the card as "long" */
.bb-review.is-long blockquote p{
    line-height: 1.35;
    font-size: 0.98em;               /* subtle: keeps long reviews from feeling like a wall */
}

/* Attribution directly under the quote */
.bb-review-attrib{
    margin-top: .85rem;
    line-height: 1.2;
}

.bb-review-name{
    color: var(--bb-ink);
    font-weight: 600;
}

.bb-review-city{
    color: var(--bb-muted);
    font-size: .875rem;
    font-weight: 400;
    margin-top: .15rem;
}

/* Sticky bottom CTA bar (mobile) */
.bb-stickybar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bb-border);

    /* slightly larger + safe-area for notches */
    padding: .75rem .75rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}

[data-bs-theme="dark"] .bb-stickybar{
    background: rgba(5,6,6,.92);
}

@media (min-width: 992px){
    .bb-stickybar{ display:none; }
}

.bb-stickybar .btn{
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;

    /* force “real phone” size */
    font-size: 16px;       /* key: prevents tiny scaling on some devices */
    font-weight: 600;
    padding: .85rem 0;
    min-height: 52px;
    border-radius: .75rem;
    line-height: 1.1;
}

.bb-stickybar .btn i{
    margin-right: .35rem;
}