/* 
 * Style: Navigation: Netlify
 * Class: .is-style-netlify
 */

/* ========================================
   VARIABLES & BASICS
   ======================================== */
:root {
    --netlify-bg: #ffffff;
    --netlify-text: #222222;
    --netlify-accent: #00AD9F;
    --netlify-header-height: 80px;
}

/* ========================================
   STICKY HEADER (Similar to previous logic)
   ======================================== */
header:has(.is-style-netlify),
.wp-block-template-part:has(.is-style-netlify),
.site-header:has(.is-style-netlify) {
    position: sticky !important;
    top: 0;
    z-index: 99999;
    background-color: var(--netlify-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Admin Bar offsets */
body.admin-bar header:has(.is-style-netlify),
body.admin-bar .wp-block-template-part:has(.is-style-netlify) {
    top: 32px;
}

@media screen and (max-width: 782px) {

    body.admin-bar header:has(.is-style-netlify),
    body.admin-bar .wp-block-template-part:has(.is-style-netlify) {
        top: 46px;
    }
}


/* ========================================
   DESKTOP STYLES
   ======================================== */
/* ========================================
   DESKTOP STYLES (Mega Menu Logic)
   ======================================== */
@media (min-width: 782px) {

    /* 1. Base Link Styling */
    .is-style-netlify .wp-block-navigation-item__content {
        color: inherit;
        /* Inherit global nav color */
        font-weight: inherit;
        /* Inherit global typography */
        font-size: inherit;
        text-transform: none;
        /* No uppercase forced */
        transition: color 0.2s ease;
        position: relative;
        z-index: 5;
    }

    .is-style-netlify .wp-block-navigation-item__content:hover {
        color: var(--netlify-accent);
        background: transparent !important;
    }

    /* Raise Link z-index on hover (General) */
    .is-style-netlify .wp-block-navigation-item.has-child:hover>.wp-block-navigation-item__content {
        z-index: 20;
    }

    /* 
       2. DEFAULT DROPDOWN (Simple)
       Applied to ALL submenus first. 
       If NO description exists, this style remains active.
    */
    .is-style-netlify .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-container {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;

        /* Default: Compact width */
        min-width: 220px;
        width: max-content;
        max-width: 300px;
        min-height: auto;

        padding: 15px;
        /* Simple padding */

        background: #fff;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
        margin-top: 10px;
        z-index: 10;
        text-align: left;
    }

    /* 
       INVISIBLE BRIDGE (Fix Dead Zone)
       Creates a transparent clickable area filling the gap between parent and submenu.
    */
    .is-style-netlify .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-container::before {
        content: "";
        display: block;
        position: absolute;
        top: -20px;
        /* Cover the 10px margin plus a bit more safety */
        left: 0;
        width: 100%;
        height: 20px;
        background: transparent;
        /* Invisible */
    }

    /* 
       3. MEGA MENU VARIANT
       Applied ONLY if the item has a Description text.
       Uses :has() to detect the description.
    */
    .is-style-netlify .wp-block-navigation-item.has-child:has(.wp-block-navigation-item__description):hover .wp-block-navigation__submenu-container {
        width: 600px;
        /* Wide Mega Menu */
        max-width: 600px;
        min-height: 180px;
        padding: 30px 30px 30px 250px;
        /* Big Left Gutter for Text */
    }


    /* 
       4. ITEMS Styling 
    */
    .is-style-netlify .wp-block-navigation__submenu-container .wp-block-navigation-item {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

    .is-style-netlify .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 8px 10px;
        font-size: 15px;
        font-weight: 500;
        color: inherit;
        display: inline-block;
        width: 100%;
    }

    .is-style-netlify .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        background: rgba(0, 0, 0, 0.02) !important;
        /* Subtle hover bg for items */
        border-radius: 4px;
        color: var(--netlify-accent);
    }

    /* Inline Arrows */
    .is-style-netlify .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
        width: auto;
        height: auto;
        padding: 0 0 0 5px;
        background: transparent;
        border: none;
        display: inline-flex;
        color: inherit;
    }

    .is-style-netlify .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-submenu__toggle {
        color: var(--netlify-accent);
    }


    /* 
       5. DESCRIPTION TEXT (Left Column)
    */
    /* Hidden by default */
    .is-style-netlify .wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation-item__description {
        display: none;
    }

    /* Visible & Positioned ONLY if present */
    .is-style-netlify .wp-block-navigation-item.has-child:hover>.wp-block-navigation-item__content .wp-block-navigation-item__description {
        display: block;

        position: absolute;
        top: 100%;
        left: -10px;

        width: 220px;
        margin-top: 40px;
        padding-left: 20px;

        font-size: 14px;
        line-height: 1.5;
        color: #777;
        font-weight: 400;
        white-space: normal;
        pointer-events: none;

        text-transform: none;
    }
}


/* ========================================
   MOBILE OVERLAY
   ======================================== */
/* ========================================
   MOBILE OVERLAY
   ======================================== */
.is-style-netlify .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: 80px;
    /* Space for header */
}

/* Mobile Links - Layout with Flexbox for Accordion */
.is-style-netlify .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    display: flex;
    flex-wrap: wrap;
    /* Allow submenu to break to new line */
    align-items: center;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.is-style-netlify .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 20px;
    font-weight: 600;
    padding: 15px 20px;
    color: #222;
    flex-grow: 1;
    /* Take available space */
    border-bottom: none;
    /* Removed, handled by parent LI */
}

/* Force Toggle Button Visible */
.is-style-netlify .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    display: block !important;
    visibility: visible;
    width: 60px;
    /* Generous touch target */
    height: 60px;
    background: transparent;
    border: none;
    color: #222;
}

/* Submenus in Mobile: Hidden by Default (Accordion) */
.is-style-netlify .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    display: none;
    /* STRICT HIDE */
    visibility: hidden;
    opacity: 0;
    height: 0;

    width: 100%;
    /* Full width on new line */
    background: #f9f9f9;
    padding-left: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* REVEAL Submenu when Toggle is Expanded */
/* Using sibling selector: Button with Aria-Expanded=True -> Show UL */
.is-style-netlify .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"]+.wp-block-navigation__submenu-container {
    display: block !important;
    visibility: visible;
    opacity: 1;
    height: auto;
}

/* ========================================
   BURGER BUTTON (Netlify Style: Simple, Unfinished?)
   ======================================== */
/* Ensuring the button is visible and clean */
.is-style-netlify .wp-block-navigation__responsive-container-open,
.is-style-netlify .wp-block-navigation__responsive-container-close {
    color: var(--netlify-text);
}

/* Netlify keeps the burger visible, or transforms it subtly. 
   For now, we use standard WP behavior but styled cleanly. */
.is-style-netlify .wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
}