/* Flavor theme — supplemental CSS */

/* Page loader overlay */
.pace-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    transition: opacity 0.4s ease;
}
.pace-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Pace logo-3d loader */
.pace-logo-3d .pace-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pace-logo-3d .pace-overlay::before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: flavor-spin3d 1.5s linear infinite;
}
@keyframes flavor-spin3d {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Back-to-top button */
.go-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1000;
}
.go-top.visible {
    opacity: 1;
}
.go-top.go-top-circle {
    border-radius: 50%;
}
.go-top-mobile {
    display: flex !important;
}

/* OS animations — hide until triggered */
.os-animation {
    opacity: 0;
}
.os-animation.animated {
    opacity: 1;
}

/* =============================================================
   Navbar sticky/fixed positioning
   ============================================================= */
#masthead.navbar-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
    transition: all 0.3s ease;
}

#masthead.navbar-sticky ~ #content {
    margin-top: 120px;
}

#masthead.navbar-sticky.navbar-scrolled ~ #content {
    margin-top: 90px;
}

/* =============================================================
   Mega Menu — Bootstrap navbar integration
   ============================================================= */

/* 1. Kill the mega-menu's own dark background strip; the Bootstrap
      navbar provides the container background. */
@media (min-width: 769px) {
    #mega-menu-wrap-primary {
        background: transparent !important;
    }
}

/* 2. Top-level links: match the Lambda navbar dimensions and
      colour scheme (padding mirrors stack-39.css .logo-navbar nav). */
@media (min-width: 769px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: #080459 !important;
        text-transform: uppercase !important;
        font-size: 16px !important;
        line-height: 24px !important;
        height: auto !important;
        padding-top: 38px !important;
        padding-bottom: 38px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        background: none !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-toggle-on > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-page-ancestor > a.mega-menu-link {
        color: #080459 !important;
        background: none !important;
    }
}

/* 3. Scrolled navbar is 90 px tall — adjust padding to match. */
@media (min-width: 769px) {
    #masthead.navbar-scrolled #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        padding-top: 33px !important;
        padding-bottom: 33px !important;
    }
}

/* 4. Transparent header (homepage hero, before scroll): links are
      white, same as the regular Bootstrap nav items. */
@media (min-width: 992px) {
    .transparent-header #masthead:not(.navbar-scrolled) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: #fff !important;
    }
    .transparent-header #masthead:not(.navbar-scrolled) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
    .transparent-header #masthead:not(.navbar-scrolled) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
    .transparent-header #masthead:not(.navbar-scrolled) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
        color: #fff !important;
        background: none !important;
    }
}

/* 5. Mobile: suppress the duplicate mega-menu hamburger — Bootstrap's
      .navbar-toggle (in .navbar-header) handles the collapse. */
#mega-menu-wrap-primary .mega-menu-toggle {
    display: none !important;
}

/* 6. At ≤768 px the mega-menu hides #mega-menu-primary until its own
      toggle is clicked.  Override: show items when Bootstrap has
      expanded .main-navbar (class "in"). */
@media (max-width: 768px) {
    .navbar-collapse.in #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        display: block !important;
    }
    /* Link colours inside the expanded (white) Bootstrap collapse */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: #080459 !important;
        padding: 8px 15px !important;
        height: auto !important;
        line-height: 24px !important;
        text-transform: uppercase !important;
    }
}

/* 7. 769–991 px (Bootstrap mobile collapse, above mega-menu breakpoint):
      ensure link colours are correct for a white background. */
@media (min-width: 769px) and (max-width: 991px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: #080459 !important;
        padding: 8px 15px !important;
        height: auto !important;
        line-height: 24px !important;
    }
}

/* =============================================================
   YouTube / oEmbed iframes — responsive 16 : 9
   ============================================================= */
.element-top-20 iframe,
.element-bottom-20 iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}