/* ============================================================
   R3 MEDISPA — MEGA MENU CSS (fresh build)
   Save as: assets/css/nav-menu.css

   Structure this targets (output by R3_Nav_Walker):

   Normal top-level item with dropdown:
     <li class="menu-item menu-item-has-children">
       <a class="menu-link">Concern</a>
       <ul class="sub-menu">
         <li class="menu-item"><a class="menu-link">Acne</a></li>
       </ul>
     </li>

   Mega top-level item (has "mega-menu" class from wp-admin):
     <li class="menu-item menu-item-has-children menu-item-mega">
       <a class="menu-link">Treatments</a>
       <div class="mega-menu-panel">
         <ul class="mega-menu-columns">
           <li class="mega-column">
             <span class="mega-column-title">Face</span>
             <ul class="mega-column-list">
               <li class="mega-column-item"><a class="mega-column-link">Botox</a></li>
             </ul>
           </li>
           ... (repeat per column)
         </ul>
       </div>
     </li>
   ============================================================ */

.primary-nav {
    position: relative;
}

.nav-menu,
.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-menu .menu-item {
    position: relative;
}

.nav-menu .menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

.submenu-toggle {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.nav-toggle {
    display: none;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ============================================================
   DESKTOP — NORMAL DROPDOWN (e.g. "Concern")
   ============================================================ */
@media (min-width: 901px) {

    .home #nav .nav-menu > .menu-item > .menu-link,
    .page-template-template-about #nav .nav-menu > .menu-item > .menu-link
     {
       color: #fff; 
    }

    #nav.scrolled .nav-menu > .menu-item > .menu-link {
        color: var(--ink);
    }

    .home #nav .nav-menu > .menu-item > .menu-link:hover {
        color: #ccc;
    }

    .nav-menu > .menu-item > .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        padding: 8px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
        z-index: 100;
    }

    .nav-menu > .menu-item:not(.menu-item-mega):hover > .sub-menu,
    .nav-menu > .menu-item:not(.menu-item-mega):focus-within > .sub-menu,
    .nav-menu > .menu-item.is-open:not(.menu-item-mega) > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-menu .sub-menu .menu-link {
        padding: 8px 20px;
        width: 100%;
    }

    .nav-menu .sub-menu a:hover,
    .nav-menu .sub-menu a:focus {
        background: #f5f5f5;
    }
}

/* ============================================================
   DESKTOP — MEGA MENU PANEL (e.g. "Treatments")
   Positioned relative to the whole <header>, so it spans the
   same edge-to-edge width as the header bar itself.
   ============================================================ */
@media (min-width: 901px) {

    #nav,
    header[role="banner"] {
        position: relative; /* mega panel anchors to this — overridden to fixed below for the overlay header, which still works as a positioning context */
    }

    /* Without this, .nav-menu .menu-item's global "position: relative"
       (declared above) makes the Treatments <li> itself — a narrow,
       shrink-wrapped flex child — the containing block for the panel,
       so "width: 100%" resolves to 100% of that tiny <li> instead of
       the full-width header. Setting it back to static removes the
       <li> from consideration, so width:100%/left:0/right:0 on
       .mega-menu-panel correctly resolve against the <header> instead.
       Anchored to #nav (not .primary-nav — that wrapper doesn't exist
       in header.php) so it also wins on specificity, not just order. */
    #nav .nav-menu > .menu-item-mega {
        position: static;
    }

    .mega-menu-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
        z-index: 200;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
    }

    .menu-item-mega:hover > .mega-menu-panel,
    .menu-item-mega:focus-within > .mega-menu-panel,
    .menu-item-mega.is-open > .mega-menu-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Selector qualified with its parent (.mega-menu-panel) so its
       specificity (2 classes) reliably beats the earlier reset rule
       ".nav-menu, .nav-menu ul { margin:0; padding:0; }" — that rule
       matches .mega-menu-columns too (it's a <ul> descendant of
       .nav-menu) and has higher specificity than ".mega-menu-columns"
       on its own (class + type beats a lone class), so without this
       qualifier the margin/padding below get silently reset to 0
       regardless of source order. */
    .mega-menu-panel .mega-menu-columns {
        display: grid;
        /* Auto-fits however many columns wp-admin gives it — 3, 5, whatever. */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 32px;
        width: 100%;
        margin: 0;
        padding: 40px 56px;
        box-sizing: border-box;
    }

    .mega-column-title {
        display: block;
        font-weight: 700;
        text-decoration: none;
        color: inherit;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .mega-column-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mega-column-link {
        display: block;
        text-decoration: none;
        color: inherit;
        padding: 4px 0;
        font-size: 0.925rem;
    }

    .mega-column-link:hover,
    .mega-column-link:focus {
        text-decoration: underline;
    }
}

/* ============================================================
   MOBILE — ACCORDION (mega columns + normal dropdown items
   both stack the same way; a "column" behaves just like any
   other expandable parent item)

   Scoped to #nav so these rules only ever match the DESKTOP
   HEADER's own collapsed <ul class="nav-menu"> (output twice by
   the same wp_nav_menu()/R3_Nav_Walker markup pattern, once for
   #nav and once for .drawer). Without the #nav prefix, every
   selector here also matched the mobile drawer's identically-
   classed <ul class="nav-menu">, silently breaking it (e.g. its
   percentage-based max-height resolved against .drawer's own
   100vh height instead of the viewport, crushing the drawer's
   menu down to ~1 visible row). Never remove this prefix.
   ============================================================ */
@media (max-width: 900px) {

    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .nav-toggle-bar {
        width: 24px;
        height: 2px;
        background: currentColor;
        transition: transform .2s ease, opacity .2s ease;
    }

    #nav .nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    #nav .nav-menu.is-active {
        display: flex;
    }

    /* Normal dropdown sub-menus collapse to static indented blocks */
    #nav .nav-menu .sub-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        transition: none;
        min-width: 0;
        background: #fafafa;
    }

    #nav .nav-menu .menu-item.is-open > .sub-menu {
        display: block;
    }

    #nav .nav-menu .menu-item-depth-1 > .menu-link {
        padding-left: 32px;
    }

    /* Mega panel becomes a plain collapsible block, columns stack
       vertically, each column header behaves like an accordion parent */
    #nav .mega-menu-panel {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #fafafa;
        max-height: none;
        overflow: visible;
    }

    #nav .menu-item-mega.is-open > .mega-menu-panel {
        display: block;
    }

    #nav .mega-menu-columns {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: none;
        padding: 0;
    }

    #nav .mega-column {
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    #nav .mega-column-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px 12px 32px;
        margin-bottom: 0;
        border-bottom: none;
        font-weight: 600;
        cursor: pointer;
    }

    /* Chevron on column headers, same rotate behaviour as submenu-toggle */
    #nav .mega-column-title::after {
        content: '';
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
        flex-shrink: 0;
        margin-left: 12px;
    }

    #nav .mega-column.is-open > .mega-column-title::after {
        transform: rotate(-135deg);
    }

    #nav .mega-column-list {
        display: none;
        flex-direction: column;
        gap: 0;
        background: #f2f2f2;
    }

    #nav .mega-column.is-open > .mega-column-list {
        display: flex;
    }

    #nav .mega-column-link {
        padding: 10px 20px 10px 44px;
        font-size: 0.925rem;
    }

    .submenu-toggle {
        transition: transform .2s ease;
    }

    #nav .menu-item.is-open > .menu-link .submenu-toggle {
        transform: rotate(-135deg);
    }
}

#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* keep your existing z-index value — don't change it here */
}

/* Keep the header below the WP admin bar when logged in */
body.admin-bar #nav { top: 32px; }

@media (max-width: 782px) {
    body.admin-bar #nav { top: 46px; }
}