/* =============================================================
   Singh Eye — full-screen hamburger overlay menu
   The nav is a Webflow w-nav with data-collapse:"all" (set in
   functions.php), so the hamburger shows at EVERY screen size and
   Webflow's JS toggles the panel open/closed. This file restyles that
   open panel into a blurred dark-green overlay with right-aligned,
   hierarchical links, using the theme's default menu output +
   glacial.js sub-menu toggles.

   Structure it targets (theme default walker):
     ul.gl-top-level > li > a            -> section heading (with icon)
       ul.sub-menu.gl-dropdown-1         -> ALWAYS shown (heading's links)
         li.menu-item-has-children       -> collapsible sub-group (Services)
           ul.sub-menu.gl-dropdown-2     -> collapsed until toggled
   ============================================================= */

:root {
    --singh-green: #3f593b; /* --color-3 : panel + heading text        */
    --singh-green-trans: rgba(63, 89, 59, 0.75); /* #3f593bbf overlay   */
    --singh-sage: #7f8c7d; /* --color-4 : hamburger button             */
    --singh-gold: #d9b779; /* --color-5 : accent / hover               */
    --singh-cream: #f2f2f2; /* --color-7 : text                        */
    --singh-heading-font: garamond-premier-pro, "Garamond", serif;
    --singh-body-font: brandon-grotesque, "Segoe UI", sans-serif;
    --singh-nav-h: 85px; /* navbar height -> top padding of the panel   */
    --singh-panel-w: 42%; /* width of the right-hand menu column        */
}

/* --- Logo on inner pages -------------------------------------------- */
/* navigation.css hides the logo until the page is scrolled
   (.w-nav-brand { display:none } + a .has-scrolled reveal). That suits the
   homepage's transparent header over the hero, but inner pages have a solid
   header and no hero, so the logo should show on load. Homepage keeps its
   scroll-reveal behavior. */
body:not(.home) .w-nav-brand {
    display: block;
}

/* --- Hamburger button (Webflow .w-nav-button = #openNavMenu) --------- */
/* Webflow shows/hides this via data-collapse:"all"; make sure it's
   visible at all widths and give it the Singh look (.mb). */
#openNavMenu.menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 46px;
    margin-left: 10px;
    background: var(--singh-sage);
    border-radius: 10px;
    cursor: pointer;
    /* Sit above the overlay (z 1001) so the hamburger stays visible and
       clickable to CLOSE the menu. The hamburger and overlay are siblings
       inside the banner, so bumping the banner's z-index alone isn't enough. */
    position: relative;
    z-index: 1003;
}

#openNavMenu.w--open {
    background: var(--singh-gold);
}

/* --- The open overlay panel (Webflow .w-nav-menu = .site-navigation) - */
/* Webflow toggles its display; when shown, cover the viewport as a
   blurred overlay with the menu column pinned to the right. */
#navigation.site-navigation {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: none; /* hidden until opened by singh-menu.js */
    justify-content: flex-end; /* menu column on the right (Webflow: padding-left 60%) */
    align-items: stretch;
    background: var(--singh-green-trans);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 1001;
    overflow: hidden;
}

/* Open state — toggled by singh-menu.js (the theme's Webflow build has no
   w-nav module, so we drive open/close ourselves). */
html.singh-nav-open #navigation.site-navigation {
    /* !important beats a display:block the theme/Webflow CSS forces on the
       .w-nav-menu; without a real flex container, justify-content is ignored
       and the column falls to the left. */
    display: flex !important;
    top: 0 !important; /* override any inline top offset glacial.js may set */
}

html.singh-nav-open body {
    overflow: hidden; /* lock page scroll while the menu is open */
}

/* Keep the top bar (logo, CTA buttons, hamburger) above the overlay so the
   hamburger stays visible and clickable to close. */
.glacial-top-banner {
    z-index: 1002;
}

/* Inner menu column (Webflow .inner-nav-div = the ul.gl-top-level) */
#navigation .gl-top-level {
    display: block;
    width: var(--singh-panel-w);
    min-width: 340px;
    max-width: 560px;
    height: 100%;
    margin: 0;
    padding: calc(var(--singh-nav-h) + 24px) 0 48px;
    background: var(--singh-green);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left; /* reset an inherited text-align:center from the theme/banner */
}

/* --- Top-level items = section headings (Webflow .top-tier-dd-link) -- */
#navigation .gl-top-level > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    position: static;
    background: transparent;
    border: 0;
}

#navigation .gl-top-level > li > a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 24px 12px 62px;
    color: var(--singh-cream);
    font-family: var(--singh-heading-font);
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    background-image: url('../images/icon-white.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 40px;
}

/* Headings never collapse -> hide their toggle; their links are always shown. */
#navigation .gl-top-level > li > .toggle-dropdown {
    display: none;
}

/* --- Level 1 (a heading's links) — ALWAYS visible -------------------- */
#navigation .gl-dropdown-1 {
    display: block;
    position: static;
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
    background: transparent;
    box-shadow: none;
}

#navigation .gl-dropdown-1 > li {
    display: block;
    width: 100%;
    margin: 0;
    position: static;
    background: transparent;
}

#navigation .gl-dropdown-1 > li > a {
    display: block;
    width: 100%;
    padding: 7px 24px 7px 62px;
    color: var(--singh-cream);
    font-family: var(--singh-body-font);
    font-size: 1em;
    font-weight: 400;
    text-transform: none;
    text-decoration: none;
    transition: color 0.15s ease;
}

#navigation .gl-dropdown-1 > li > a:hover {
    color: var(--singh-gold);
}

/* --- Level-1 items that are sub-groups (have children) = collapsible - */
/* e.g. Services -> "Modern Vision Correction" / "Medical Eye Care" */
#navigation .gl-dropdown-1 > li.menu-item-has-children > a {
    font-family: var(--singh-heading-font);
    font-size: 1.1em;
}

#navigation .gl-dropdown-1 > li.menu-item-has-children > .toggle-dropdown {
    display: flex;
    position: static;
    pointer-events: auto;
    width: 40px;
    height: auto;
    padding: 0 8px;
    background: transparent;
}

#navigation .gl-dropdown-1 .toggle-dropdown svg {
    stroke: var(--singh-cream);
    width: 16px;
    height: 16px;
}

/* the sub-group header row: label + toggle on one line */
#navigation .gl-dropdown-1 > li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#navigation .gl-dropdown-1 > li.menu-item-has-children > a {
    flex: 1;
}

/* --- Level 2 (sub-group links) — collapsed until toggled ------------- */
#navigation .gl-dropdown-2 {
    display: none;
    position: static;
    width: 100%;
    margin: 0;
    padding: 0 0 6px;
    background: transparent;
    box-shadow: none;
}

#navigation .gl-dropdown-2.toggled-on {
    display: block;
}

#navigation .gl-dropdown-2 > li {
    display: block;
    width: 100%;
    margin: 0;
    position: static;
    background: transparent;
}

#navigation .gl-dropdown-2 > li > a {
    display: block;
    width: 100%;
    padding: 6px 24px 6px 74px;
    color: var(--singh-cream);
    font-family: var(--singh-body-font);
    font-size: 0.95em;
    text-decoration: none;
    transition: color 0.15s ease;
}

#navigation .gl-dropdown-2 > li > a:hover {
    color: var(--singh-gold);
}

/* --- Header CTA buttons ("Refer a Patient" / phone) ----------------- */
/* The .button.c-06 pill styling comes from webflow.css; here we just place
   the group and give it a working hover (the Webflow btn-bg animation needs
   Webflow IX JS, which this build doesn't run). */
.singh-nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* push the CTA + hamburger group to the right */
}

.singh-nav-cta .button.c-06 {
    margin: 0;
}

.singh-nav-cta .button.c-06:hover {
    background: var(--singh-green); /* sage -> dark green */
}

/* Only the hamburger (to close) stays while the overlay is open. */
html.singh-nav-open .singh-nav-cta {
    display: none;
}

@media (max-width: 991px) {
    .singh-nav-cta .nav-txt {
        display: none; /* icon-only pills on smaller screens */
    }

    .singh-nav-cta .button.c-06.top {
        padding: 12px;
    }

    .singh-nav-cta .btn-icon {
        margin-right: 0;
    }
}

/* --- Narrow screens: menu column fills the width -------------------- */
@media (max-width: 767px) {
    #navigation.site-navigation {
        justify-content: stretch;
    }

    #navigation .gl-top-level {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}