/**
 * Header menu: mobile layer + touch safety.
 *
 * ONE source for every Spirit theme (spiritfitness, -commercial, -update, -commercial-update all inherit
 * spiritfitness/Magento_Theme/layout/default_head_blocks.xml, which loads this file directly after
 * css/styles.css). Each of those themes ships its own hand-maintained copy of styles.css with the base
 * menu rules; this file wins on load order with the same selectors, so a stale copy cannot bring the bugs
 * below back.
 *
 * Why it exists (Teamwork #36921214): the desktop mega-menu hover rules had no media query. Touch
 * browsers leave :hover stuck on the last element tapped, so on phones
 *   - a "collapsed" category kept min-height:200px (the COMMERCIAL strip that would not go away),
 *   - the "dim the columns you are not pointing at" effect left Rehab/Residential at 40% opacity,
 *   - tapped links shifted 10px right.
 * Rule of thumb for anything added here or in styles.css: a :hover effect that changes size, visibility
 * or opacity must sit inside @media (hover: hover) and (pointer: fine). mobile-qa-menu/tests/menu.spec.js
 * forces :hover on every menu element at phone width and fails on any rendered difference.
 */

/* ── Touch devices of ANY width (phones, and iPads above the 1200px breakpoint): no sticky hover effects ── */
@media only screen and (max-width: 1200px), (hover: none), (pointer: coarse) {
    .header .container .nav-menu li .dropdown .categories-grid:hover > div,
    .header .container .nav-menu li .dropdown .categories-grid > div:hover {
        opacity: 1;
    }
    .header .container .nav-menu li .dropdown .categories-grid > div:hover .head {
        border-bottom-color: #D9D9D9;
    }
    .header .container .nav-menu li .dropdown > div a:hover {
        padding-left: 0;
    }
}

/* ── Mobile menu (<= 1200px) ── */
@media only screen and (max-width: 1200px) {
    /* Open state is a class set by js/nav-menu.js (the base mobile rule hides the list). */
    .header .container .nav-menu.is-open {
        display: block;
    }

    /* A closed panel is closed, hovered or not. The base hover rule forces min-height:200px, and the old
       mobile override reset max-height/padding but not min-height. Values here equal the NON-hover state
       exactly, so hovering changes nothing (the regression suite diffs computed styles). */
    .header .container .nav-menu li:hover .dropdown {
        min-height: auto;
        max-height: 0;
        padding: 0;
        border: none;
    }
    .header .container .nav-menu li.accessories:hover .dropdown {
        padding: 0 20px;
    }
    .header .container .nav-menu li:hover .dropdown.active {
        max-height: 2000px;
        padding: 20px 0 5px 0;
    }
    .header .container .nav-menu li.accessories:hover .dropdown.active {
        padding: 10px 0;
    }

    /* The whole header row is the tap target (the caret sits at the far right, on the li). 44px tall. */
    .header .container .nav-menu > li > span {
        display: block;
        width: 100%;
        min-height: 44px;
        line-height: 44px;
        margin: -10px 0;
    }
    .header .container .nav-menu > li > span:focus-visible {
        outline: 2px solid #E4002B;
        outline-offset: 2px;
    }
    /* Caret points up when the category is open. */
    .header .container .nav-menu li.active:after {
        transform: rotate(180deg);
    }

    /* Series labels ("X SERIES", "UPRIGHT"): the 30% black failed WCAG contrast (axe, serious). */
    .header .container .nav-menu li .dropdown .label {
        color: rgb(0 0 0 / 60%);
    }
}

/* ── Hamburger: a real <button> hit area (44x44) around the unchanged .menu-btn bars.
      (Not ".nav-toggle": Luma already styles that class, absolutely positioned top-left.) ── */
.spirit-menu-toggle {
    display: none;
    align-self: center;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -7px;               /* keeps the header's layout footprint at the old 30px */
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.spirit-menu-toggle:focus-visible {
    outline: 2px solid #E4002B;
    outline-offset: -2px;
}
.spirit-menu-toggle .menu-btn {
    display: flex;              /* the button now owns visibility */
    pointer-events: none;
}
.spirit-menu-toggle .menu-btn > span {
    height: 2px;
    background: black;
    width: 100%;
}
.spirit-menu-toggle .menu-btn.active > span {
    height: 0;
}
@media only screen and (max-width: 1200px) {
    .spirit-menu-toggle {
        display: flex;
    }
}
@media only screen and (max-width: 480px) {
    .spirit-menu-toggle {
        margin: -9.5px;         /* .menu-btn is 25px here */
    }
}