/* Slide Drawer — Right */

/* Mega panel styles (.sr-mega-panel, .sr-mega-columns, …) live in
   assets/css/megamenus/ — selected via SRD Theme → General → Mega Menu Design.

   Mobile menu styling (≤1080px) must go through the CSS variables set by
   SRD Theme → General → Mobile Menu (written to layout-overrides.css), with
   the design's own default as fallback:
   --sr-mobile-menu-bg (drawer background), --sr-mobile-menu-text (link text),
   --sr-mobile-menu-close / --sr-mobile-menu-hamburger / --sr-mobile-menu-arrow
   (icon colors), --sr-mobile-menu-divider (lines between top-level items),
   --sr-mobile-menu-parent-weight / --sr-mobile-menu-sub-weight (font weights). */

header .sr_main_menu_wrap > .sr-mega-menu,
header .sr_main_menu_wrap .sr-mega-item > .sub-menu {
    list-style-type: none;
    padding: 0;
}

header .sr_main_menu_wrap .sr-mega-item {
    position: relative;
}

/* Header grid row — logo | side container (hamburger + drawer).
   Two columns: logo auto-width, side container fills the rest. */
header .sr_header_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    width: 100%;
    gap: 0 20px;
}

header .sr-site-logo           { grid-column: 1; display: flex; align-items: center; }
header .sr_side_menu_container { grid-column: 2; display: flex; align-items: center; width: 100%; }

/* Tablet/Mobile Custom HTML (WhatsApp, email icons, etc.) beside the hamburger.
   Hidden by default — shown only within the admin-configured min-width to
   Mobile Breakpoint range via the inline <style> written by
   sr_menu_dynamic_style() in custom-menu/shortcode.php (the range is
   admin-configurable, so it can't be hardcoded here).
   Position (left/right of the hamburger) is handled with flex `order`. */
header .sr_custom_icons_wrap {
    display: none;
    align-items: center;
    gap: 10px;
    order: 1;
    margin-right: 12px;
}

header .sr_mobile_menu_wrap {
    order: 2;
}

header .sr_custom_icons_wrap.sr_custom_icons_wrap--right {
    order: 3;
    margin-right: 0;
    margin-left: 12px;
}

/* Logo images */
header .sr_logo { display: block; }
header .sr_logo--mobile { display: none; }

@media (min-width: 1081px) {
    header #sr_background_overlay,
    header .sr_main_header_section .sr_mobile_menu_close {
        display: none;
    }

    /* Drawer becomes an inline flex row on desktop: close(hidden) | nav | CTA */
    header .sr_main_menu_container {
        display: flex;
        align-items: center;
        flex: 1;
    }
    header .sr_menu_content_wrap {
        display: flex;
        align-items: center;
        flex: 1;
    }
    header .sr_main_menu_wrap {
        flex: 1;
    }

    header .sr_main_menu_wrap > .sr-mega-menu {
        display: flex;
    }

    /* Alignment — applied via sr_menu_align option */
    header .sr_main_menu_wrap.sr_menu_align--left > .sr-mega-menu    { justify-content: flex-start; }
    header .sr_main_menu_wrap.sr_menu_align--center > .sr-mega-menu  { justify-content: center; }
    header .sr_main_menu_wrap.sr_menu_align--right > .sr-mega-menu   { justify-content: flex-end; }

    header .sr_main_menu_wrap .sr-mega-item > a {
        display: block;
        margin: 15px 15px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: var(--sr-menu-font-size, inherit);
        font-weight: var(--sr-menu-font-weight, 600);
    }

    header .sr_main_menu_wrap .sr-mega-item:not(.menu-item-has-children) > a {
        background-color: transparent;
        background-position: 0 100%;
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-image: linear-gradient(0deg, var(--gcid-secondary-color, #333) 0%, var(--gcid-secondary-color, #333) 100%);
        transition: background-size 0.4s ease;
    }

    header .sr_main_menu_wrap .sr-mega-item:not(.menu-item-has-children) > a:hover {
        background-size: 100% 2px;
    }

    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children {
        padding-right: 15px;
    }

    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children > a {
        margin-right: 5px;
    }

    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children > a::after {
        content: "2";
        font-family: ETmodules !important;
        speak: none;
        font-size: 22px;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        top: 15.5px;
        right: 0;
        transition: transform 0.3s ease;
    }

    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children:not(.sr-click-toggle):hover > a::after,
    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children:not(.sr-click-toggle):focus-within > a::after,
    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children.sr-open > a::after {
        transform: rotate(180deg);
    }

    /* Regular dropdown — matches mega panel style */
    header .sr_main_menu_wrap .sr-mega-item > .sub-menu {
        width: var(--sr-dropdown-width, max-content);
        padding: 24px 28px;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        background: var(--sr-dropdown-bg, #7a580a);
        visibility: hidden;
        opacity: 0;
        border: 1px solid var(--sr-dropdown-border, #b09950);
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    header .sr_main_menu_wrap .sr-mega-item > .sub-menu a {
        display: block;
        padding: 6px 10px;
        color: var(--sr-dropdown-text, #fff);
    }

    header .sr_main_menu_wrap .sr-mega-item > .sub-menu a:hover {
        background: var(--sr-dropdown-hover-bg, rgba(255, 255, 255, 0.15));
    }

    /* Real-URL parents open on :hover/:focus-within. Parents with href="#"
       or no href get .sr-click-toggle from script.js and are click-only:
       the dropdown shows when script.js toggles .sr-open on the li. */
    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children:not(.sr-click-toggle):hover > .sub-menu,
    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children:not(.sr-click-toggle):focus-within > .sub-menu,
    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children.sr-open > .sub-menu {
        opacity: 1;
        visibility: visible;
    }

    header .sr_mobile_menu_wrap {
        display: none;
    }
}

@media (max-width: 1080px) {
    /* Grid stays as-is; hamburger is pushed to the right within its column */
    header .sr_side_menu_container {
        justify-content: flex-end;
    }

    /* Show mobile logo variant, hide desktop */
    header .sr_logo--desktop { display: none; }
    header .sr_logo--mobile  { display: block; }

    /* CTA position within the drawer — controlled by sr_menu_cta_position option.
       flex:1 (not a percentage height) so it correctly fills only the space left
       over after .sr_mobile_menu_close, its flex sibling inside the now-flex
       .sr_main_menu_container. */
    header .sr_menu_content_wrap {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    /* Default: CTA sits directly below the nav */
    header .sr_menu_content_wrap.sr_cta_pos--below .sr-cta-wrapper {
        margin-top: 24px;
    }

    /* Sticks the CTA to the bottom of the drawer regardless of nav length */
    header .sr_menu_content_wrap.sr_cta_pos--bottom .sr-cta-wrapper {
        margin-top: auto;
    }

    header #sr_background_overlay {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background: #00000080;
        opacity: 0;
        visibility: hidden;
        transition: .2s;
        z-index: 999;
    }

    body.sr_menu_open header #sr_background_overlay {
        opacity: 1;
        visibility: visible;
    }

    body.sr_menu_open #et-main-area {
        position: relative;
        z-index: 1;
        pointer-events: none;
    }

    header .sr_main_menu_container .sr_mobile_menu_close .sr_menu_close_icon {
        display: flex;
        justify-content: flex-end;
    }

    header .sr_main_header_section .sr_mobile_menu_wrap .mobile_menu_bar {
        display: flex;
    }

    header .sr_main_header_section .sr_mobile_menu_wrap .mobile_menu_bar::before,
    header .sr_main_header_section .sr_mobile_menu_close .sr_menu_close_icon::before {
        font-family: ETmodules !important;
        content: attr(data-icon);
        speak: none;
        font-size: 45px;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        cursor: pointer;
    }

    header .sr_main_header_section .sr_mobile_menu_wrap .mobile_menu_bar::before {
        color: var(--sr-mobile-menu-hamburger, currentColor);
    }

    header .sr_main_header_section .sr_mobile_menu_close .sr_menu_close_icon::before {
        color: var(--sr-mobile-menu-close, currentColor);
    }

    header .sr_main_header_section .sr_main_menu_container {
        width: 100%;
        max-width: 420px;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -100%;
        bottom: 0;
        padding: 27px 25px;
        background: var(--sr-mobile-menu-bg, #ffd26a);
        transition: right 0.4s ease;
        overflow-y: auto;
        z-index: 9999;
        display: flex;
        flex-direction: column;
    }

    body.sr_menu_open {
        height: 100%;
        overflow: hidden;
        touch-action: none;
    }

    body.sr_menu_open header .sr_main_menu_container.sr_menu_active {
        opacity: 1;
        visibility: visible;
        right: 0;
    }

    header .sr_main_header_section .sr_side_menu_container {
        width: 100%;
    }

    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children::after {
        content: "5";
        font-family: ETmodules !important;
        speak: none;
        font-size: 35px;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        color: var(--sr-mobile-menu-arrow, currentColor);
        position: absolute;
        top: -8px;
        right: 0;
        transition: transform 0.3s ease;
    }

    header .sr_main_menu_wrap .sr-mega-item.menu-item-has-children.submenu-open::after {
        transform: rotate(90deg);
    }

    header .sr_main_menu_wrap .sr-mega-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--sr-mobile-menu-divider, #777);
    }

    header .sr_main_menu_wrap .sr-mega-menu a {
        transition: margin-left 0.3s ease-in-out;
    }

    header .sr_main_menu_wrap .sr-mega-item > a {
        margin-left: 15px;
        color: var(--sr-mobile-menu-text, #333);
        font-size: var(--sr-mobile-menu-parent-size, clamp(20px, 3vw, 24px));
        font-weight: var(--sr-mobile-menu-parent-weight, 600);
    }

    header .sr_main_menu_wrap .sr-mega-item > a:hover {
        margin-left: 10px;
    }

    /* Regular dropdown accordion */
    header .sr_main_menu_wrap .sr-mega-item > .sub-menu {
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        /* padding-top is here so it animates smoothly on CLOSE (this is the close destination) */
        transition: max-height 0.4s ease-in-out, opacity 0.35s ease-in-out, padding-top 0.4s ease-in-out;
        opacity: 0;
    }

    header .sr_main_menu_wrap .sr-mega-item > .sub-menu.active {
        padding-top: 12px;
        opacity: 1;
        /* padding-top intentionally omitted — snaps instantly on OPEN so scrollHeight reads correctly */
        transition: max-height 0.4s ease-in-out, opacity 0.35s ease-in-out;
    }

    header .sr_main_menu_wrap .sr-mega-item > .sub-menu a {
        display: block;
        padding: 15px 10px 5px 25px;
        color: var(--sr-mobile-menu-text, #333);
        font-size: var(--sr-mobile-menu-sub-size, 20px);
        font-weight: var(--sr-mobile-menu-sub-weight, 600);
    }

    header .sr_main_menu_wrap .sr-mega-item > .sub-menu > li > a:hover {
        margin-left: -5px;
    }
}

@media (min-width: 783px) and (max-width: 1080px) {
    .admin-bar header .sr_main_header_section .sr_main_menu_container {
        top: calc(0px + 32px);
    }
}

@media (max-width: 782px) {
    .admin-bar header .sr_main_header_section .sr_main_menu_container {
        top: calc(0px + 46px);
    }
}