/* ASTRA — LEFT DRAWER WITH PAGE PUSH */

:root {
    --drawer-width: min(360px, 86vw);
    --drawer-bg: #142a3b;
    --drawer-text: #f7f4ed;
    --drawer-accent: #c8ad78;
    --drawer-line: rgba(255, 255, 255, 0.14);
    --drawer-motion: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Prevent sideways scrolling during the animation */
body {
    overflow-x: clip;
}

/* Move Astra's page wrapper when the drawer opens */
@media (max-width: 1550px) {
    #page {
        transition: transform var(--drawer-motion);
    }

    body:has(#ast-mobile-popup.active) #page {
        transform: translateX(var(--drawer-width));
    }
}

/* Drawer positioning and appearance */
#ast-mobile-popup .ast-mobile-popup-inner {
    left: 0;
    right: auto;
    width: var(--drawer-width);
    max-width: 100vw;
    background: var(--drawer-bg);
    color: var(--drawer-text);
    border: 0;
    border-right: 1px solid var(--drawer-line);
    border-radius: 0;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform var(--drawer-motion);
}

#ast-mobile-popup.active .ast-mobile-popup-inner {
    transform: translateX(0);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.2);
}

/* Dim the exposed portion of the page */
#ast-mobile-popup .ast-mobile-popup-overlay {
    background: rgba(8, 18, 27, 0.4);
}

/* Close-button area */
#ast-mobile-popup .ast-mobile-popup-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--drawer-line);
}

#ast-mobile-popup .menu-toggle-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: var(--drawer-text);
    background: transparent;
    border: 1px solid var(--drawer-line);
    border-radius: 4px;
}

#ast-mobile-popup .menu-toggle-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

#ast-mobile-popup .menu-toggle-close svg {
    fill: currentColor;
}

/* Space for menu, HTML, buttons, and future elements */
#ast-mobile-popup .ast-mobile-popup-content {
    padding: 28px 24px 40px;
    text-align: left;
}

#ast-mobile-popup .ast-mobile-popup-content > * {
    margin-bottom: 24px;
}

/* Navigation backgrounds */
#ast-mobile-popup .main-header-menu,
#ast-mobile-popup .main-header-menu .menu-item,
#ast-mobile-popup .main-header-menu .sub-menu {
    background: transparent;
}

/* Navigation links */
#ast-mobile-popup .main-header-menu .menu-item > .menu-link {
    padding: 17px 48px 17px 14px;
    color: var(--drawer-text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--drawer-line);
    box-shadow: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease;
}

/* Hover and selected page */
#ast-mobile-popup .main-header-menu .menu-link:hover,
#ast-mobile-popup .main-header-menu .current-menu-item > .menu-link {
    color: var(--drawer-accent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 2px 0 var(--drawer-accent);
}

/* Submenus */
#ast-mobile-popup .main-header-menu .sub-menu .menu-link {
    padding-left: 28px;
    font-size: 15px;
}

#ast-mobile-popup .ast-menu-toggle {
    color: var(--drawer-accent);
    background: transparent;
    border: 0;
}

/* Editable HTML content */
#ast-mobile-popup .ast-header-html {
    color: var(--drawer-text);
    font-size: 15px;
    line-height: 1.7;
}

#ast-mobile-popup .ast-header-html a {
    color: var(--drawer-accent);
}

/* Header Builder button inside the drawer */
#ast-mobile-popup .ast-custom-button {
    padding: 15px 22px;
    color: #142a3b;
    background: var(--drawer-accent);
    border: 1px solid var(--drawer-accent);
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
}

#ast-mobile-popup .ast-custom-button:hover {
    background: #ddc697;
}

/* Keyboard accessibility */
#ast-mobile-popup a:focus-visible,
#ast-mobile-popup button:focus-visible {
    outline: 2px solid var(--drawer-accent);
    outline-offset: -3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #page,
    #ast-mobile-popup,
    #ast-mobile-popup * {
        transition: none !important;
        animation: none !important;
    }
}
/* Title on the left, close button on the right */
#ast-mobile-popup .ast-mobile-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
}

/* Header text */
#ast-mobile-popup .drawer-title {
    flex: 1;
    min-width: 0;
    color: #f7f4ed;
    font-weight: 500;
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.23em;
    font-size: 28px;
    letter-spacing: 0.2px;
    text-align: left;
    overflow-wrap: anywhere;
font-variant-caps: small-caps;
}

/* Keep the close button beside the title */
#ast-mobile-popup .ast-mobile-popup-header .menu-toggle-close {
    position: static;
    flex: 0 0 44px;
    margin: 0;
}
/* Limit the webpage movement on phones */
@media (max-width: 767px) {
    body:has(#ast-mobile-popup.active) #page {
        transform: translateX(60px);
    }
}
/* FIX: keep the sidebar anchored while moving the page */
@media (max-width: 1550px) {

    /* Cancel the original movement of the entire container */
    body #page {
        transform: none !important;
        transition: none !important;
    }

    /* Keep sidebar width consistent with the push distance */
    #ast-mobile-popup-wrapper #ast-mobile-popup .ast-mobile-popup-inner {
        width: var(--drawer-width, min(360px, 86vw)) !important;
        max-width: 100vw;
        box-sizing: border-box;
        left: 0;
        right: auto;
    }

    /* Animate only the header, content, and footer */
    #page > :is(#masthead, #content, #colophon) {
        transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* Push those sections aside when the sidebar opens */
    body:has(#ast-mobile-popup.active)
    #page > :is(#masthead, #content, #colophon) {
        transform: translateX(
            var(--drawer-width, min(360px, 86vw))
        );
    }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    #page > :is(#masthead, #content, #colophon) {
        transition: none !important;
    }
}

#ast-mobile-popup .sidebar-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

#ast-mobile-popup .sidebar-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #c8ad78;
    background: transparent;
    border: 1px solid rgba(200, 173, 120, 0.45);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

#ast-mobile-popup .sidebar-socials a:hover,
#ast-mobile-popup .sidebar-socials a:focus-visible {
    color: #142a3b;
    background: #c8ad78;
    border-color: #c8ad78;
}

#ast-mobile-popup .sidebar-socials a:focus-visible {
    outline: 2px solid #f7f4ed;
    outline-offset: 3px;
}

#ast-mobile-popup .sidebar-socials svg {
    display: block;
    flex-shrink: 0;
}