/* FILENAME:  /wp-content/themes/xtraxtra/assets/css/overrides.css */
/* Loads AFTER theme.json, so can override those values */

/* ==========================================================================
   Navigation Overlay - Full Screen Menu
   ========================================================================== */

/* Base container */
.wp-block-navigation__responsive-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #2a2a2a !important;
    z-index: 100000;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.wp-block-navigation__responsive-container.is-menu-open {
    transform: translateX(0);
}

/* Content wrapper */
.wp-block-navigation__responsive-container-content {
    padding: 80px 0 40px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Close button */
.wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    padding: 10px !important;
    background: transparent !important;
    border: none !important;
    color: var(--wp--preset--color--contrast) !important;
    cursor: pointer;
}

/* Menu container */
.wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Menu items */
.wp-block-navigation__responsive-container .wp-block-navigation-item {
    display: block !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Menu links */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    display: block !important;
    padding: 20px 40px !important;
    color: var(--wp--preset--color--contrast) !important;
    text-decoration: none !important;
    font-size: 1.25rem !important;
    font-family: var(--wp--preset--font-family--merriweather-sans) !important;
    font-weight: 400 !important;
    transition: color 0.2s ease;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent) !important;
}

/* Remove text centering */
.wp-block-navigation__responsive-container * {
    text-align: left !important;
}

/* Admin bar adjustments */
.admin-bar .wp-block-navigation__responsive-container {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .wp-block-navigation__responsive-container {
        top: 46px !important;
    }
}