/* ==========================================================================
   header-mobile.css
   Mobile navigation: the off-canvas accordion menu, its icons, layout and
   the hamburger icon.

   01. Accordion Title
   02. Chevron Icons
   03. Close Icon
   04. Icon List Inside Accordion
   05. Mobile Nav Layout
   06. Hamburger Icon Colors
   ========================================================================== */

/* ==== 01. Accordion Title ==== */
.mobile-nav-accordian .e-n-accordion-item summary {
    font-size: 16px;
    line-height: var(--lh-medium);
    letter-spacing: var(--ls-neg-016);
    color: var(--color-gray-90);
    text-decoration: none !important;
    padding: 12px;
    border-radius: var(--image-border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    overflow: visible;
    transition: background-color 0.2s ease;
}

/* Hide default <summary> triangle markers */
.mobile-nav-accordian .e-n-accordion-item summary::marker,
.mobile-nav-accordian .e-n-accordion-item summary::-webkit-details-marker {
    display: none;
}

/* Accordion Title Wrappers */
.e-n-accordion-item-title-text {
    color: var(--content-primary);
}

.e-n-accordion-item-title {
    background-color: transparent;
    color: var(--content-primary);
    border-radius: var(--image-border-radius);
    padding: 12px;
    cursor: pointer;
    transition: none !important;
    overflow: visible;
}

.mobile-nav-accordian .e-n-accordion-item:hover .e-n-accordion-item-title {
    background-color: var(--color-black-a08);
}

.mobile-nav-accordian .e-n-accordion-item[open] > div[role="region"] {
    background-color: var(--color-white-a100);
}

.mobile-nav-accordian .e-n-accordion-item-title-header {
    padding-left: 7px !important;
}

.mobile-nav-accordian .e-n-accordion-item-title {
    padding-left: 0 !important;
}

/* ==== 02. Chevron Icons ==== */
.e-n-accordion-item-title-icon {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 1;
    overflow: visible;
}

.e-n-accordion-item-title-icon svg {
    display: block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    overflow: visible;
}

/* Draw the chevrons as solid shapes in the primary text color */
.e-n-accordion-item-title-icon .e-opened svg path,
.e-n-accordion-item-title-icon .e-closed svg path {
    fill: var(--content-primary) !important;
    stroke: none !important;
}

/* ==== 03. Close Icon ==== */
.icon-close svg {
    width: 32px;
    height: 32px;
    display: block;
}

.icon-close svg path:not([stroke="none"]) {
    stroke-width: 1.5 !important;
    fill: none !important;
}

/* ==== 04. Icon List Inside Accordion ==== */
.mobile-nav-list .elementor-icon-list-item a {
    font-size: 16px;
    line-height: var(--lh-medium);
    letter-spacing: var(--ls-neg-016);
    color: var(--color-gray-90);
    text-decoration: none !important;
    display: block;
    padding: 12px;
    transition: none !important;
    padding-left: 8px !important;
}

.mobile-nav-list .elementor-icon-list-item:hover {
    background-color: var(--color-black-a08);
    color: var(--color-white-a100) !important;
    border-radius: var(--image-border-radius);
    transition: none !important;
}

/* ==== 05. Mobile Nav Layout ==== */
.mobile-nav-container {
    display: flex;
    flex-direction: column;
}

.mobile-nav-buttons {
    padding-bottom: 2px;
}

.mobile-links {
    display: none !important;
}

.e-off-canvas__content > .elementor-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.mobile-menu-middle {
    padding-bottom: 10px;
}

.mobile-menu-bottom {
    padding-bottom: 10px;
}

.mobile-nav-accordian .elementor-widget-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==== 06. Hamburger Icon Colors ==== */
body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .hamburger-menu svg {
    color: var(--color-white-a100) !important;
    fill: var(--color-white-a100) !important;
}

.custom-sticky-header.elementor-sticky--effects .hamburger-menu svg,
body:not(.has-transparent-header) .custom-sticky-header .hamburger-menu svg {
    color: var(--content-primary) !important;
    fill: var(--content-primary) !important;
}

.hamburger-menu .elementor-icon-wrapper .elementor-icon,
.mobile-menu-top .elementor-icon-wrapper .elementor-icon {
    background-color: transparent !important;
}

html.off-canvas-is-open,
body.off-canvas-is-open {
    overflow: hidden !important;
}