/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/*
 * Max Mega Menu (mobile):
 * Keep the plugin burger as the open/close control; hide the panel close icon.
 *
 * The dimmed overlay is .mega-menu-toggle.mega-menu-open:after (not a separate
 * panel). Its z-index sits above the icon bars, so lower the :after and raise
 * the toggle's real children so the burger/X stays clickable on top.
 */
@keyframes ah-mmm-fade-up {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media only screen and (max-width: 992px) {

    
    #mega-menu-wrap-menu-1 .mega-close {
        display: none !important;
    }

    #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open:after {
        z-index: 0 !important;
    }

    #mega-menu-wrap-menu-1 .mega-menu-toggle > *,
    #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated,
    #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block {
        position: relative;
        z-index: 1;
    }

    #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 {
        padding: 76px 0.75rem 2.5rem !important;
    }

    /*
     * Keep logo above Mega Menu's wrap/overlay when open.
     * The wrap often carries a huge plugin z-index, so lower it and
     * raise .site-branding above that whole stacking context.
     */
    #navbar-container:has(.mega-menu-toggle.mega-menu-open) #mega-menu-wrap-menu-1,
    body.mega-menu-menu-1-open #mega-menu-wrap-menu-1 {
        position: relative;
        z-index: 1 !important;
    }

    #navbar-container:has(.mega-menu-toggle.mega-menu-open) .site-branding,
    body.mega-menu-menu-1-open .site-branding {
        position: relative;
        z-index: 10 !important;
    }

    /* Fade-up top-level items when the mobile menu opens.
     * Stagger via --ah-mmm-i (set in main.js) so item count stays flexible. */
    #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open + #mega-menu-menu-1 > li {
        opacity: 0;
        animation: ah-mmm-fade-up 0.4s ease forwards;
        animation-delay: calc(var(--ah-mmm-i, 0) * 0.04s);
    }

    /* Top-level rows — larger tap targets, less cramped */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {
        margin: 0.1rem 0;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
        padding: 0.95rem 1.25rem !important;
        font-size: 1.1rem;
        line-height: 1.35;
    }

    /*
     * Mobile flyout accordion — match the desktop/account dropdown, with
     * room to breathe. Keep the panel in the flow (display:block) so we can
     * animate max-height instead of snapping open.
     */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > ul.mega-sub-menu {
        display: block !important;
        visibility: visible !important;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-0.4rem);
        pointer-events: none;
        box-sizing: border-box !important;
        float: none !important;
        width: calc(100% - 1.7rem) !important;
        max-width: calc(100% - 1.7rem) !important;
        left: auto !important;
        right: auto !important;
        margin: 0 0.85rem !important;
        padding: 0 0.4rem !important;
        background-color: var(--ah-primary-light) !important;
        border: 1px solid rgba(148, 162, 182, 0.2) !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 0.4rem 1.25rem rgba(0, 0, 0, 0.4);
        transition:
            max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease,
            transform 0.28s ease,
            margin 0.28s ease,
            padding 0.28s ease;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children.mega-toggle-on > ul.mega-sub-menu {
        max-height: 80rem;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        margin: 0.2rem 0.85rem 0.85rem !important;
        padding: 0.4rem !important;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        color: var(--ah-ivory) !important;
        background-color: transparent !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.35;
        border-radius: 0.35rem !important;
        text-decoration: none;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:active {
        background-color: var(--ah-secondary) !important;
        color: var(--ah-ivory) !important;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-toggle-on > ul.mega-sub-menu > li.mega-menu-item {
        animation: ah-mmm-fade-up 0.35s ease both;
        animation-delay: calc(var(--ah-mmm-sub-i, 0) * 0.045s);
    }
}

@media (prefers-reduced-motion: reduce) {
    #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open + #mega-menu-menu-1 > li,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-toggle-on > ul.mega-sub-menu > li.mega-menu-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > ul.mega-sub-menu {
        transition: none !important;
        transform: none !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .hero-slider-section h1 {
        font-size: 2.6rem;
    }

}

@media (min-width: 676px) {

    .hero-slider-section h1 {
        font-size: 3rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    #mega-menu-wrap-menu-1 {
        background: none !important;
    }

    /* Only top-level bar links — flyout children keep their own hover fill */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
        background: none !important;
    }

     .hero-slider-section h1 {
        font-size: 3.6rem;
    }

    .carousel-logo-items img{
        margin: 5px 40px
    }

    .ratio-md-1x1 {
        --bs-aspect-ratio: 100% !important; /* 9 / 16 */
    }

    

}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .navbar:not(.navbar-viewport-top) {
        margin: .8rem .8rem;
    
    }
    
    /* WordPress Admin Bar Padding */
    .admin-bar body {
        padding-top: 112px; /* 80px + 32px for admin bar */
    }

    .admin-bar section.position-fixed {
        top: 112px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .navbar-expand-lg .navbar-nav > .menu-item:first-child > .nav-link {
        padding-left: 0;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu .nav-link {
        white-space: nowrap;
    }

    /* Navbar dropdown — keep the dark theme from main.css on desktop */
    .navbar .dropdown-menu {
        background-color: var(--ah-primary);
        border: 1px solid rgba(148, 162, 182, 0.2);
        box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45);
        margin-top: 0;
        padding-left: 0;
    }
    
    .navbar .dropdown-menu .dropdown-item {
        color: var(--ah-ivory);
        padding: 0.25rem 1rem;
    }
    
    .navbar .dropdown-menu .dropdown-item:hover,
    .navbar .dropdown-menu .dropdown-item:focus {
        background-color: var(--ah-secondary);
        color: var(--ah-ivory);
    }
    
    .navbar .dropdown-toggle::after {
        float: none;
        margin-top: 0;
    }

    /* Max Mega Menu flyouts — match the logged-in account dropdown */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu {
        background-color: var(--ah-primary) !important;
        border: 1px solid rgba(148, 162, 182, 0.2) !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45) !important;
        padding: 0.5rem 0 !important;
        min-width: 10rem;
        overflow: hidden;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        color: var(--ah-ivory) !important;
        background-color: transparent !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem;
        font-weight: 400;
        border-radius: 0 !important;
        text-decoration: none;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
        background-color: var(--ah-secondary) !important;
        color: var(--ah-ivory) !important;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:active {
        background-color: var(--ah-primary-light) !important;
        color: var(--ah-accent) !important;
    }

    /*
     * Top-level items with children: hide Max Mega Menu's built-in caret
     * (.mega-indicator) and any extra left-side item icon (the WP admin
     * icon picker adds that separately and does not replace the caret).
     * Replace with the same FA chevron used on the account dropdown.
     */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-has-children > a.mega-menu-link {
        display: inline-flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-has-children > a.mega-menu-link > .mega-indicator,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-has-children > a.mega-menu-link > .mega-menu-icon,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-has-children > a.mega-menu-link > .dashicons,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-has-children > a.mega-menu-link > i {
        display: none !important;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-has-children > a.mega-menu-link::before {
        content: none !important;
        display: none !important;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-has-children > a.mega-menu-link::after {
        content: "\f078" !important;
        font-family: "Font Awesome 7 Pro" !important;
        font-weight: 900;
        font-size: 0.7rem;
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        opacity: 0.8;
        margin: 0;
        padding: 0;
        border: 0 !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        float: none !important;
        vertical-align: middle;
    }

    .hero-slider-section h1 {
        font-size: 4.6rem;
    }


    .section-header {
        font-size: 2.8rem;
    }

    .bg-ah-primary .partner_logo_carousel:before {
       background: linear-gradient(270deg,rgba(2, 7, 13,0) 0%, rgba(2, 7, 13,1) 90%, rgba(2, 7, 13,1) 100%);
    }
    
    .bg-ah-primary .partner_logo_carousel:after {
        background: linear-gradient(90deg, rgba(2, 7, 13,0) 0%, rgba(2, 7, 13,1) 90%, rgba(2, 7, 13,1) 100%);
    }

    .bg-ah-secondary .partner_logo_carousel:before {
       background: linear-gradient(270deg,rgba(2, 7, 13,0) 0%, rgba(37, 53, 67,1) 90%, rgba(37, 53, 67,1) 100%);
    }
    
    .bg-ah-secondary .partner_logo_carousel:after {
         background: linear-gradient(90deg, rgba(2, 7, 13,0) 0%, rgba(37, 53, 67,1) 90%, rgba(37, 53, 67,1) 100%);
    }

    .carousel-logo-items {
        animation: 45s slides infinite linear;
    }

    .partner_logo_carousel:before, .partner_logo_carousel:after {
        width: 250px;
       
    }



}

@media (min-width: 1092px) {


}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .hero-slider-section h1 {
        font-size: 6rem;
    }

    .partner_logo_carousel:before, .partner_logo_carousel:after {
        width: 320px;
       
    }

     .section-header {
        font-size: 3.2rem;
    }


    
}

@media (min-width: 1300px) {
    
    
}

/* Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
  

}

/* Extra large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {
   
}

 @media (min-width: 1800px) { 


    .bg-ah-primary .partner_logo_carousel:before {
       background: linear-gradient(270deg,rgba(2, 7, 13,0) 0%, rgba(2, 7, 13,1) 70%, rgba(2, 7, 13,1) 100%);
    }
    
    .bg-ah-primary .partner_logo_carousel:after {
        background: linear-gradient(90deg, rgba(2, 7, 13,0) 0%, rgba(2, 7, 13,1) 70%, rgba(2, 7, 13,1) 100%);
    }

    .bg-ah-secondary .partner_logo_carousel:before {
       background: linear-gradient(270deg,rgba(2, 7, 13,0) 0%, rgba(37, 53, 67,1) 70%, rgba(37, 53, 67,1) 100%);
    }
    
    .bg-ah-secondary .partner_logo_carousel:after {
         background: linear-gradient(90deg, rgba(2, 7, 13,0) 0%, rgba(37, 53, 67,1) 70%, rgba(37, 53, 67,1) 100%);
    }


    .partner_logo_carousel:before, .partner_logo_carousel:after {
        width: 450px;
       
    }

	
}



/* Admin Bar Padding */
@media (max-width: 782px) {
    .admin-bar body {
        padding-top: 102px; /* 70px + 46px for mobile admin bar */
    }
    
    .admin-bar .fixed-top {
        top: 46px; /* Account for admin bar on mobile */
    }
}