/**
 * Elegant Mobile Navigation for Twenty-Twenty-Five Theme
 * UPDATED VERSION - Fixes landscape mode, text wrapping, bottom cutoff
 * Add this to your child theme's style.css file
 */

/* Target mobile menu (typically shows at 782px and below in Twenty-Twenty-Five) */
@media (max-width: 782px) {
    
    /* Hamburger menu button - force it to be white */
    .wp-block-navigation__responsive-container-open,
    button.wp-block-navigation__responsive-container-open {
        color: #ffffff !important;
    }
    
    .wp-block-navigation__responsive-container-open svg,
    button.wp-block-navigation__responsive-container-open svg {
        fill: #ffffff !important;
    }
    
    /* Mobile menu overlay - transparent, but clickable to close */
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: transparent !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height - respects browser bars */
        display: block !important;
        z-index: 100000 !important;
    }
    
    /* Inner container styling - semi-transparent black menu panel */
    .wp-block-navigation__responsive-container-content {
        background-color: rgba(0, 0, 0, 0.7) !important; /* Semi-transparent black */
        padding: 50px 0 20px 0 !important; /* Reduced top padding */
        width: 80% !important; /* Slightly wider for landscape */
        max-width: 400px !important;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height */
        overflow-y: auto !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5) !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important; /* Position on the RIGHT side */
        bottom: 0 !important;
        z-index: 1 !important;
        backdrop-filter: blur(10px) !important; /* Optional: adds blur effect */
        -webkit-backdrop-filter: blur(10px) !important;
        /* Safe area for notches and browser bars */
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }
    
    /* Navigation list */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        gap: 0 !important;
        padding: 0 0 40px 0 !important; /* Extra bottom padding for scrolling */
    }
    
    /* Top-level menu items */
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Remove border from last item */
    .wp-block-navigation__responsive-container .wp-block-navigation-item:last-child {
        border-bottom: none;
    }
    
    /* Top-level links - right aligned with smaller text */
    .wp-block-navigation__responsive-container .wp-block-navigation-item > a,
    .wp-block-navigation__responsive-container .wp-block-navigation-item > button {
        color: #ffffff !important;
        background-color: transparent !important;
        padding: 12px 16px !important; /* Reduced padding */
        font-size: 14px !important; /* Smaller font */
        font-weight: 500 !important;
        text-decoration: none !important;
        display: block !important;
        width: 100% !important;
        text-align: right !important;
        transition: background-color 0.2s ease !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Hover state for top-level items */
    .wp-block-navigation__responsive-container .wp-block-navigation-item > a:hover,
    .wp-block-navigation__responsive-container .wp-block-navigation-item > button:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    
    /* Submenu container - let theme JS handle visibility naturally */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        background-color: rgba(255, 255, 255, 0.03) !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
        /* Let theme control display - don't override */
    }
    
    /* Submenu items */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    /* Remove border from last submenu item */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
        border-bottom: none;
    }
    
    /* Submenu links - right aligned with LESS indent and text wrapping */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 10px 28px 10px 16px !important; /* Less right indent */
        font-size: 13px !important; /* Smaller font */
        font-weight: 400 !important;
        text-align: right !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important; /* Allow wrapping */
        hyphens: auto !important;
    }
    
    /* Sub-submenu (third level) - minimal indent */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
        padding-right: 40px !important; /* Less indent */
        font-size: 12px !important; /* Even smaller */
        color: rgba(255, 255, 255, 0.75) !important;
        text-align: right !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        hyphens: auto !important;
    }
    
    /* Submenu link hover */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Current/active menu item */
    .wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item > a,
    .wp-block-navigation__responsive-container .wp-block-navigation-item.current_page_item > a {
        color: #4a9eff !important;
        background-color: rgba(74, 158, 255, 0.1) !important;
    }
    
    /* Close button - positioned in top right of the sidebar */
    .wp-block-navigation__responsive-container-close {
        color: #ffffff !important;
        background-color: transparent !important;
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        padding: 10px !important;
        z-index: 10 !important;
    }
    
    .wp-block-navigation__responsive-container-close:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Submenu toggle buttons - hide since submenus are always visible */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon,
    .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle,
    .wp-block-navigation__responsive-container button.wp-block-navigation__submenu-icon {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Prevent menu from auto-opening during resize */
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    
    /* Optional: Add subtle shadow to menu */
    .wp-block-navigation__responsive-container.is-menu-open {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
}

/* Landscape mode specific fixes */
@media (max-width: 900px) and (orientation: landscape) {
    .wp-block-navigation__responsive-container-content {
        width: 50% !important; /* Narrower in landscape */
        max-width: 350px !important;
        padding: 40px 0 15px 0 !important;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation-item > a,
    .wp-block-navigation__responsive-container .wp-block-navigation-item > button {
        padding: 8px 12px !important; /* Even more compact */
        font-size: 13px !important;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
        padding: 6px 24px 6px 12px !important;
        font-size: 12px !important;
    }
}

/* Optional: Tablet-specific adjustments (768px - 782px) */
@media (min-width: 768px) and (max-width: 782px) and (orientation: portrait) {
    .wp-block-navigation__responsive-container .wp-block-navigation-item > a {
        font-size: 15px !important;
        padding: 14px 20px !important;
    }
}

/**
 * Responsive Comic Navigation Styles
 * Add this to your child theme's style.css
 */

/* Comic navigation container */
.comic-nav.theme {
    display: flex;
    flex-wrap: nowrap; /* Never wrap to multiple lines */
    gap: 4px;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    margin: 10px 0 20px 0; /* Reduced top margin */
    width: 100%;
}

/* All navigation buttons */
.comic-nav-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    flex: 1 1 0; /* Equal width for all buttons */
    min-width: 0; /* Allow flex shrinking */
    text-align: center;
}

/* Hover state for active links */
.comic-nav-base:not(.comic-nav-void):hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

/* Disabled/void navigation items */
.comic-nav-base.comic-nav-void {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f9f9f9;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .comic-nav.theme {
        gap: 3px;
        margin: 8px 0 15px 0;
    }
    
    .comic-nav-base {
        padding: 10px 2px;
        font-size: 12px;
    }
    
    /* Hide chapter nav buttons but keep their space */
    .comic-nav-first-chap,
    .comic-nav-last-chap {
        visibility: hidden; /* Hides content but keeps space */
    }
    
    /* Abbreviate text on mobile to fit */
    .comic-nav-oldest { font-size: 0; }
    .comic-nav-oldest::before { content: '‹‹'; font-size: 16px; }
    
    .comic-nav-previous { font-size: 0; }
    .comic-nav-previous::before { content: '‹'; font-size: 16px; }
    
    .comic-nav-next { font-size: 0; }
    .comic-nav-next::after { content: '›'; font-size: 16px; }
    
    .comic-nav-newest { font-size: 0; }
    .comic-nav-newest::after { content: '››'; font-size: 16px; }
}

/* Very small screens - even more compact */
@media (max-width: 480px) {
    .comic-nav.theme {
        gap: 2px;
    }
    
    .comic-nav-base {
        padding: 8px 1px;
        font-size: 11px;
    }
}

/* Optional: Different style - pill buttons */
/*
.comic-nav-base {
    border-radius: 20px;
    background-color: #000;
    color: #fff;
    border: none;
}

.comic-nav-base:not(.comic-nav-void):hover {
    background-color: #333;
}

.comic-nav-base.comic-nav-void {
    background-color: #666;
}
*/