/* ===================================================
   TUFTE BLOCKS — NAVIGATION
   Based on actual WordPress 6.9 rendered HTML
   =================================================== */

/* Remove focus outline on mouse click, preserve for keyboard users */
.wp-block-navigation-item__content:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Also apply to the submenu toggle button */
.wp-block-navigation-submenu__toggle:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ===================================================
   RESPONSIVE BREAKPOINT OVERRIDE
   WordPress default: 600px. Our theme: 782px.
   
   Strategy: 
   - Undo WordPress's 600px desktop styles
   - Re-apply them at 782px
   =================================================== */

/* Between 600px-781px: WordPress thinks it's desktop, but we want mobile.
   Reset the core 600px styles back to mobile behavior. */
@media (min-width: 600px) and (max-width: 781px) {
    /* Keep hamburger visible (undo core's display:none at 600px) */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
    
    /* Keep responsive container hidden when menu is closed */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

/* True desktop: 782px+ */
@media (min-width: 782px) {
    /* Hide hamburger */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    
    /* Hide close button — this was bleeding through on desktop */
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
}

/* Mobile: push nav (hamburger) right, header border */
@media (max-width: 781px) {
    nav.wp-block-navigation {
        margin-left: auto !important;
    }

    header.wp-block-group > .wp-block-group.is-layout-flex {
        border-bottom: 1px solid var(--wp--preset--color--border);
        padding-bottom: var(--wp--preset--spacing--40);
    }
}


/* ===================================================
   DESKTOP NAV LINKS (782px+)
   Mockup: 03-navigation-final.html lines 158-182
   =================================================== */

@media (min-width: 782px) {
    /* Nav link base style — color change on hover only, no underline */
    .wp-block-navigation-item__content {
        margin-top: 2px;
        color: var(--wp--preset--color--secondary) !important;
        text-decoration: none !important;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Hover */
    .wp-block-navigation-item__content:hover {
        color: var(--wp--preset--color--foreground) !important;
    }
    
    /* Active / current page */
    .current-menu-item > .wp-block-navigation-item__content,
    .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
        color: var(--wp--preset--color--foreground) !important;
    }
    
    /* Submenu chevron icon — vertical alignment fix */
    .wp-block-navigation__submenu-icon {
        display: inline-flex !important;
        align-items: center;
        align-self: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .wp-block-navigation__submenu-icon svg {
        width: 10px;
        height: 10px;
    }
    
    /* Rotate chevron when submenu is open/hovered */
    .has-child:hover > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
    .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon,
    .has-child:hover > .wp-block-navigation-item__content + .wp-block-navigation__submenu-icon {
        transform: rotate(180deg);
    }
}


/* ===================================================
   DESKTOP DROPDOWN (782px+)
   Mockup: 03-navigation-final.html lines 195-250
   =================================================== */

@media (min-width: 782px) {
    /* Dropdown container */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        background: var(--wp--preset--color--surface) !important;
        border: 1px solid var(--wp--preset--color--border) !important;
        border-radius: 4px;
        padding: 0.5rem 0 !important;
        margin-top: 0.75rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        /* Override WordPress default transition */
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translateY(-10px);
    }
    
    /* Hover bridge — covers the gap between link and dropdown */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
        content: '';
        position: absolute;
        top: -0.75rem;
        left: 0;
        width: 100%;
        height: 0.75rem;
    }
    
    /* Show dropdown on hover — add slide up */
    .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
        transform: translateY(0);
    }
    
    /* Dropdown items stagger animation */
    .wp-block-navigation__submenu-container > .wp-block-navigation-item {
        opacity: 0;
        transform: translateY(-5px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(1),
    .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
    .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2),
    .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
    .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3),
    .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
    .has-child:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(4),
    .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
    
    /* Dropdown link styling */
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: block !important;
        padding: 0.6rem 1.25rem !important;
        color: var(--wp--preset--color--secondary) !important;
        font-size: 0.875rem !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        border-bottom: none !important;
        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        color: var(--wp--preset--color--foreground) !important;
        background-color: var(--wp--preset--color--border);
        border-bottom: none !important;
    }
    
    /* Active item in dropdown */
    .wp-block-navigation__submenu-container .current-menu-item .wp-block-navigation-item__content {
        color: var(--wp--preset--color--primary) !important;
        border-bottom: none !important;
    }
}


/* ===================================================
   MOBILE OVERLAY
   Mockup: 03-navigation-final.html lines 336-523
   
   WordPress structure when open:
   div.wp-block-navigation__responsive-container.is-menu-open.has-modal-open
     └── div.wp-block-navigation__responsive-close
           └── div.wp-block-navigation__responsive-dialog
                 ├── button.wp-block-navigation__responsive-container-close
                 └── div.wp-block-navigation__responsive-container-content
                       └── ul.wp-block-navigation__container
   =================================================== */

/* The overlay container when open */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--background) !important;
    color: var(--wp--preset--color--foreground) !important;
    padding: 0 !important;
    /* Override WP fade animation */
    animation: none !important;
    opacity: 1 !important;
}

/* The __responsive-close wrapper — make it fill the overlay and center content */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* The dialog wrapper — also needs to fill and center */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Close button (X) — positioned relative to __responsive-dialog */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    display: flex !important;
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10;
    color: var(--wp--preset--color--foreground) !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
    color: var(--wp--preset--color--primary) !important;
}

/* Content area — centered, constrained width */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    max-width: 280px;
    text-align: center;
    padding-top: 0 !important;
}

/* The inner ul container in overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
}

/* Menu items in overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
}

/* Menu item links in overlay — large, centered */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--foreground) !important;
    text-decoration: none !important;
    font-size: 1.5rem !important;
    padding: 0.75rem 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: none !important;
    font-family: var(--wp--preset--font-family--serif);
    text-align: center;
    display: block !important;
    width: 100%;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Active item in overlay */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary) !important;
}

/* Hide the submenu toggle icon in overlay (WordPress hides it by default in overlay, but just in case) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    display: none !important;
}

/* Sub-menu in overlay — visible, centered, no border/bg */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0.25rem 0 0.75rem 0;
    position: static !important;
    width: 100%;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-width: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Sub-menu links — smaller, secondary color */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 1.1rem !important;
    color: var(--wp--preset--color--secondary) !important;
    padding: 0.4rem 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary) !important;
}

/* Sub-menu items in overlay — remove stagger styles, ensure visible */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger animation for top-level menu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation: tufteOverlayFadeIn 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.1s both; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation: tufteOverlayFadeIn 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.15s both; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation: tufteOverlayFadeIn 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.2s both; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation: tufteOverlayFadeIn 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.25s both; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation: tufteOverlayFadeIn 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.3s both; }

@keyframes tufteOverlayFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===================================================
   REDUCED MOTION
   =================================================== */

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation-item__content,
    .wp-block-navigation__submenu-icon,
    .wp-block-navigation__submenu-container,
    .wp-block-navigation__submenu-container .wp-block-navigation-item {
        transition: none !important;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}