/* ==========================================================================
   Brawband Child — Primary navigation (desktop + mobile off-canvas)
   Replaces UberMenu + SlickNav. Loaded after the parent theme's custom.css
   so it wins the cascade without needing broad !important overrides.
   ========================================================================== */

:root {
    --bb-nav-ink: #33363c;
    --bb-nav-accent: #1f93cf;
    --bb-nav-accent-dark: #0b6f9c;
    --bb-nav-bg: #ffffff;
    --bb-nav-focus: #0b6f9c;
}

/* The parent theme hides the whole <header> below 1200px to make room for
   SlickNav's cloned menu. We no longer clone the menu, so the real header
   (with our own responsive nav inside it) must stay visible at every width. */
header {
    display: block !important;
}

/* The parent theme pins the header to the top of the viewport at all times
   (position: fixed in the parent's custom.css) so it floats/sticks over
   the page while scrolling. That's not wanted here — restore it to normal
   flow so it scrolls away with the rest of the page. */
header {
    position: relative !important;
    top: auto !important;
}

/* The parent theme's hero sections (".hero", used on nearly every page —
   home, sale/referral banners, town landing pages, etc.) carry a large
   padding-top (170px desktop / 100px at <=992px) and, on some promo pages,
   an inline margin-top on top of that. Both were tuned to clear a header
   that used to sit ON TOP of the page via position: fixed, overlapping the
   hero rather than pushing it down. Now that the header lives in normal
   document flow (see the "header { position: relative }" rule above), the
   header already pushes the hero down by its own real height — so that old
   compensation just adds a large extra gap underneath it. Replace it with
   a normal section gap instead of stacking on top of the header's height.
   The !important beats both the shared parent rule and any page-specific
   inline <style> block (e.g. ".hero.dec23-hero { margin-top: 40px }"). */
.hero {
    margin-top: 0 !important;
    padding-top: 56px !important;
}

@media (max-width: 992px) {
    .hero {
        padding-top: 32px !important;
    }
}

/* Leftover from the old SlickNav mobile menu: a fake spacer bar painted
   the same brand blue as SlickNav's fixed mobile bar, shown only between
   ~312–1200px viewports (".onlymobile", 60–90px tall). It existed purely
   to reserve/blend space under that fixed bar. We don't have a fixed
   mobile bar any more — our header lives in normal flow — so this now
   just renders as a solid blue block of empty space between the header
   and the page content on mobile. Remove it entirely. */
.onlymobile,
.row.no-gutters.onlymobile {
    display: none !important;
}

/* --- Skip link -------------------------------------------------------- */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: var(--bb-nav-bg);
    color: var(--bb-nav-ink);
    font-weight: 700;
}

.skip-link.screen-reader-text:focus {
    left: 1rem;
    top: 1rem;
}

/* --- Desktop nav -------------------------------------------------------- */
.bb-nav {
    align-items: center;
}

.bb-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.bb-nav__list li {
    margin: 0;
}

.bb-nav__list a,
.bb-nav__list .bb-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    color: var(--bb-nav-ink) !important;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.bb-nav__list a:hover,
.bb-nav__list a:focus,
.bb-nav__list .bb-nav__link:hover,
.bb-nav__list .bb-nav__link:focus {
    color: var(--bb-nav-accent-dark) !important;
    border-bottom-color: var(--bb-nav-accent);
}

.bb-nav__list a:focus-visible,
.bb-nav-toggle:focus-visible,
.bb-mobile-nav__list a:focus-visible,
.bb-mobile-nav__close:focus-visible {
    outline: 3px solid var(--bb-nav-focus);
    outline-offset: 2px;
}

/* --- Mobile hamburger toggle -------------------------------------------- */
.bb-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bb-nav-toggle__bar {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--bb-nav-ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.bb-nav-toggle[aria-expanded="true"] .bb-nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.bb-nav-toggle[aria-expanded="true"] .bb-nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.bb-nav-toggle[aria-expanded="true"] .bb-nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Mobile off-canvas panel -------------------------------------------- */
.bb-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
}

.bb-mobile-nav[data-state="open"] {
    visibility: visible;
}

.bb-mobile-nav__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 26, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.bb-mobile-nav[data-state="open"] .bb-mobile-nav__overlay {
    opacity: 1;
}

.bb-mobile-nav__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 360px);
    background: var(--bb-nav-bg);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.bb-mobile-nav[data-state="open"] .bb-mobile-nav__panel {
    transform: translateX(0);
}

.bb-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e7e9ec;
}

.bb-mobile-nav__logo img {
    display: block;
    height: 32px;
}

.bb-mobile-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    color: var(--bb-nav-ink);
    cursor: pointer;
}

.bb-mobile-nav__nav {
    padding: 0.5rem 0.5rem 2rem;
    overflow-y: auto;
}

.bb-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-mobile-nav__list a,
.bb-mobile-nav__list .bb-nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.75rem 1rem;
    color: var(--bb-nav-ink);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    border-bottom: 1px solid #f0f1f3;
}

.bb-mobile-nav__list a:hover,
.bb-mobile-nav__list a:focus,
.bb-mobile-nav__list .bb-nav__link:hover,
.bb-mobile-nav__list .bb-nav__link:focus {
    color: var(--bb-nav-accent-dark);
    background: #f4f9fc;
}

/* Lock background scroll while the off-canvas panel is open */
body.bb-nav-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .bb-mobile-nav__overlay,
    .bb-mobile-nav__panel,
    .bb-nav-toggle__bar {
        transition: none !important;
    }
}


/* --- Submenus (desktop dropdown + mobile accordion) -------------------- */

.bb-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.bb-nav__caret {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.15s ease;
}

.bb-nav__toggle[aria-expanded="true"] .bb-nav__caret {
    transform: rotate(-135deg) translateY(2px);
}

.bb-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}

.bb-nav__item--has-children.is-open > .bb-nav__submenu {
    display: block;
}

/* Desktop: dropdown panel anchored under the parent item */
.bb-nav .bb-nav__item--has-children {
    position: relative;
}

.bb-nav .bb-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--bb-nav-bg);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(20, 22, 26, 0.16);
    padding: 0.4rem;
    z-index: 10;
}

.bb-nav .bb-nav__submenu .bb-nav__link {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border-bottom: none;
    border-radius: 6px;
}

.bb-nav .bb-nav__submenu .bb-nav__link:hover,
.bb-nav .bb-nav__submenu .bb-nav__link:focus {
    background: #f4f9fc;
    border-bottom: none;
}

/* Mobile: accordion, expands in place under the parent row */
.bb-mobile-nav__list .bb-nav__toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bb-nav-ink);
    border-bottom: 1px solid #f0f1f3;
}

.bb-mobile-nav__list .bb-nav__submenu {
    background: #fafbfc;
}

.bb-mobile-nav__list .bb-nav__submenu .bb-nav__link {
    padding: 0.65rem 1rem 0.65rem 2rem;
    font-weight: 600;
    font-size: 0.98rem;
    border-bottom: 1px solid #f0f1f3;
}

@media (prefers-reduced-motion: reduce) {
    .bb-nav__caret {
        transition: none !important;
    }
}


/* --- Mobile header row: force logo + hamburger onto the same line -----
   The legacy grid's "align-items-center" on the outer row doesn't reliably
   line these two up on mobile, because the logo image (wordmark + tagline
   baked into one PNG) is much taller than the empty column the toggle
   button sits in. Take direct control of alignment instead of relying on
   the inherited Bootstrap column heights. -------------------------------- */
@media (max-width: 991.98px) {
    #header-top .row.align-items-center {
        display: flex;
        align-items: center;
    }

    #header-top .col-6.col-lg-2,
    #header-top .col-6.col-lg-10 {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    #header-top .col-6.col-lg-2 .logo-link {
        display: inline-flex;
        align-items: center;
    }

    #header-top .col-6.col-lg-2 .logo-link img {
        display: block;
        vertical-align: middle;
    }

    #header-top .col-6.col-lg-10 {
        justify-content: flex-end;
    }

    #header-top .col-6.col-lg-10 > .d-flex {
        align-items: center;
    }
}


/* Make the header bar itself full width at 992px and below, rather than
   following Bootstrap's fixed .container breakpoint steps (540 / 720px)
   in that range. Above 992px it keeps the normal Bootstrap-capped width
   (960 / 1140px). Scoped to #header-top only — other .container elements
   on the site are unaffected either way. */
@media (max-width: 992px) {
    #header-top.container {
        max-width: none;
        width: 100%;
    }
}