/* ===== Mega Nav Bar Menu ===== */
/* The panel must position itself against the full-width header,
   not the narrow nav <li> — force the li out of the positioning
   chain and make the header the positioning context instead.
   .home-header (top-navigation-1.php) and .site-header
   (top-navigation-price-page.php) are position:static by default, so
   they need the override. #header (top-navigation-2.php) is excluded
   here on purpose — it's Bootstrap's .fixed-top (position:fixed
   !important) for its sticky-on-scroll behavior, which already is a
   positioning context; forcing position:relative on it here would win
   the cascade (this file loads after bootstrap.min.css) and silently
   break that sticky header. */
.home-header,
.site-header {
    position: relative !important;
    overflow: visible !important;
}

.home-header .container.d-flex,
#header .container.d-flex,
.site-header .site-header__inner {
    overflow: visible !important;
}

/* Desktop-only, same reasoning as the position:static rule further down:
   .navbar-mobile{overflow:hidden} (style.css, no !important) is on this
   same <nav> element for the mobile full-screen overlay; an unscoped
   !important here would win and defeat it. */
@media (min-width: 992px) {
    #navbar.navbar {
        overflow: visible !important;
    }
}

/* .home-header/#header already group nav+CTA snug on the right via
   .logo.me-auto (site theme). .site-header__inner instead uses
   justify-content:space-between across exactly 2 children (logo, nav);
   adding a 3rd (the get-quote-btn) would center the nav between logo and
   button instead of grouping nav+button together on the right. Switch to
   flex-start and let the nav itself absorb the leftover space instead.
   Desktop-only: on mobile the visible flex children are just the logo
   and the hamburger icon (.navbar itself becomes position:absolute,
   taken out of flex flow) — space-between is what keeps those two at
   opposite ends there; flex-start would cram them both to the left. */
@media (min-width: 992px) {
    .site-header .site-header__inner {
        justify-content: flex-start;
    }

    .site-header #navbar.navbar {
        margin-left: auto;
    }
}

/* .navbar's width and per-link padding here are cosmetic spacing tuned
   for the .home-header/#header ("site" theme) desktop layout, where the
   nav sits alongside a wide logo + CTA button. .site-header
   (top-navigation-price-page.php) already spaces its links with its own
   flex `gap`, and reuses this same .navbar on mobile as the full-width
   slide-down menu — applying these there would double up spacing and
   break that mobile panel's width, so they're scoped away from it. */
.home-header #navbar.navbar,
#header #navbar.navbar {
    width: 65% !important;
}

.navbar .dropdown ul
{
    box-shadow: none;
}

/* Desktop-only: .navbar-mobile a{padding:10px 20px} (style.css) has
   lower specificity (1 class) than this selector (2 classes) even
   without !important, so unscoped it would win on mobile too and give
   nav links the wrong 40px-left padding instead of the intended
   all-around 10px/20px mobile spacing. */
@media (min-width: 992px) {
    .home-header .navbar a, .home-header .navbar a:focus,
    #header .navbar a, #header .navbar a:focus
    {
        padding: 5px 0 5px 40px;
    }
}

/* Bootstrap's own .navbar component (bootstrap.min.css) sets
   position:relative — this theme reuses the class name "navbar" for its
   unrelated custom nav, so that collision makes <nav id="navbar"
   class="navbar"> itself a positioning context. Since we cap its width
   at 65% above, the mega-panel's position:absolute was sizing against
   that narrow nav instead of continuing up to .home-header/#header/
   .site-header, clipping the 3rd column. Neutralize the nav too, not
   just the <li>.
   Scoped to desktop only: the mobile hamburger toggle adds a
   .navbar-mobile class to this SAME <nav> element (style.css) which
   needs position:fixed to become the full-screen slide-in overlay.
   That rule has no !important, so an unscoped position:static
   !important here would win the cascade and silently break the entire
   mobile nav overlay (blank panel, page content bleeding through). On
   mobile the mega-panel is already position:static in its own right
   (see the max-width:991.98px block below), so the nav's positioning
   context doesn't matter there anyway — no need to touch it. */
@media (min-width: 992px) {
    #navbar.navbar {
        position: static !important;
    }
}

#navbar.navbar .mega-dropdown {
    position: static !important;
}

/* Scout theme (top-navigation-landing.php) uses .navmenu instead of
   .navbar, and .navmenu li{position:relative} (assets/page/css/main.css)
   makes the <li> a positioning context — same problem as the other
   themes' .dropdown <li>, neutralized the same way. Its header already
   gets a valid positioning context from its own .sticky-top (Bootstrap's
   position:sticky !important), so no position override is needed there. */
#navmenu.navmenu .mega-dropdown {
    position: static !important;
}

.mega-dropdown > .d-flex {
    cursor: pointer;
}

.mega-menu-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

/* No custom max-width here on purpose: it's unconditional (not
   media-gated) and this file loads after bootstrap.min.css, so at equal
   specificity it would win the cascade at every breakpoint and cancel
   Bootstrap's own responsive .container caps (540/720/960/1140/1320px
   at 576/768/992/1200/1400px) — on any screen narrower than that custom
   value, .container would never get capped at all and would stretch
   edge-to-edge instead of reading as an inset floating card. Let
   .container's native responsive behavior apply instead. */
.mega-menu-inner {
    padding: 0;
    width: 50%;
}

.mega-menu-columns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding: 30px 30px;
    overflow: hidden;
}

.mega-col {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    border-right: 1px solid #ebebeb;
}

.mega-col ul li a{
    padding-left: 0 !important;
}

.mega-col:first-child {
    padding-left: 0;
}

.mega-col:last-child {
    border-right: none;
    padding-right: 0;
}

.mega-col-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.mega-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbe4e1;
    border-radius: 12px;
    color: #E23822;
    font-size: 22px;
}

.mega-col-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 8px;
}

.mega-col-head h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 3px;
    background: #E23822;
}

/* .navbar .dropdown ul (style.css) hides any nested <ul> via
   opacity/visibility/position and beats these rules on specificity
   because .mega-dropdown carries the .dropdown class too. Scope
   these selectors through .mega-menu-panel so they win instead. */
.mega-dropdown .mega-menu-panel .mega-col ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    flex: 1 0 auto;
}

.mega-dropdown .mega-menu-panel .mega-col ul li {
    margin-bottom: 0px;
    min-width: 0;
    border-bottom: none;
}

.mega-dropdown .mega-menu-panel .mega-col ul li a {
    display: block;
    padding: 0;
    color: #444;
    font-size: 14.5px;
    font-weight: 400;
    text-transform: none;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.mega-dropdown .mega-menu-panel .mega-col ul li a:hover {
    color: #E23822;
    padding-left: 4px;
}

.mega-view-all {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #E23822 !important;
    text-decoration: none;
}

.mega-view-all:hover {
    text-decoration: underline;
}

@media (min-width: 992px) {
    /* .mega-hover-open is the mega_menu.js?v=<?=time()?> hover-intent grace period —
       kept separate from .mega-open (the click-toggle class) so the two
       mechanisms can't fight each other (e.g. a click while already
       hover-open would otherwise immediately re-close it). */
    .mega-dropdown:hover > .mega-menu-panel,
    .mega-dropdown.mega-open > .mega-menu-panel,
    .mega-dropdown.mega-hover-open > .mega-menu-panel {
        display: block;
    }
}

@media (max-width: 991.98px) {
    .mega-menu-panel {
        position: static;
        box-shadow: none;
        padding: 15px;
    }

    .mega-menu-inner {
        max-width: 100%;
    }

    .mega-menu-columns {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .mega-col {
        border-right: none;
        border-bottom: 1px solid #ebebeb;
        padding: 20px 0;
    }

    .mega-col:first-child {
        padding-top: 0;
    }

    .mega-dropdown.mega-open > .mega-menu-panel {
        display: block;
    }

    /* #navbar.navbar's width:65% is a desktop-only measurement for
       positioning the mega-panel; on mobile it was squeezing nav
       (and the toggle inside it, since the <ul> is hidden here) to
       65% of the header instead of letting it reach the right edge.
       Scoped like the desktop rule above — .site-header's .navbar IS
       the full-width mobile slide-down panel and must keep width:100%
       from its own theme CSS. */
    .home-header #navbar.navbar,
    #header #navbar.navbar {
        width: auto !important;
    }
}

/* ===== Get a Quote Button ===== */
.get-quote-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    color: #1a1a1a !important;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 8px 8px 24px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    margin-left: 24px;
    white-space: nowrap;
    transition: box-shadow 0.2s ease;
}

.get-quote-btn:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.get-quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #E23822;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.get-quote-btn:hover .get-quote-icon {
    transform: translateX(3px);
}

/* Mobile: hide the Get a Quote button so the hamburger toggle (the last
   remaining item after .logo's me-auto) reaches the header's right edge. */
@media (max-width: 991px) {
    .get-quote-btn {
        display: none;
    }
}

/* Scout theme (top-navigation-landing.php) collapses to its own mobile
   nav at 1199px, not 991px — hide the button at the same point its own
   header items (.btn-getstarted etc.) reorder for mobile. .header as an
   exact class token only matches this theme's header (top-navigation-2.php
   has id="header" but no .header class; .home-header/.site-header are
   different class tokens entirely), so no extra scoping is needed. */
@media (max-width: 1199px) {
    .header .get-quote-btn {
        display: none;
    }
}