/*
 * Miner House - mobile bottom-sheet navigation
 *
 * Replaces the parent theme's full-screen overlay menu on phones and tablets.
 * The markup is generated by assets/js/mobile-menu.js from the existing
 * WordPress nav menu, so items stay managed in Appearance > Menus - nothing
 * is hardcoded here.
 *
 * Palette matches the landing page: navy #0a1a33 + gold #ffd700.
 */

.mhm {
    --mhm-navy:  #0a1a33;
    --mhm-gold:  #ffd700;
    --mhm-line:  rgba(255, 255, 255, 0.10);

    position: fixed;
    inset: 0;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
}

.mhm.is-open {
    visibility: visible;
    pointer-events: auto;
}

.mhm *,
.mhm *::before,
.mhm *::after { box-sizing: border-box; }

/* ---------- backdrop ---------- */

.mhm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 20, 0.68);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mhm.is-open .mhm__backdrop { opacity: 1; }

/* ---------- sheet ---------- */

.mhm__sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--mhm-navy);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mhm.is-open .mhm__sheet { transform: translateY(0); }

/* While the user drags the sheet, follow the finger with no easing */
.mhm.is-dragging .mhm__sheet { transition: none; }

/* ---------- head: drag handle + close ---------- */

.mhm__head {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 0 8px;
    touch-action: none;
}

.mhm__handle {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.mhm__close {
    position: absolute;
    top: 4px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--mhm-line);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.mhm__close:hover,
.mhm__close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: var(--mhm-gold);
}

.mhm__close svg { width: 18px; height: 18px; }

/* ---------- nav ---------- */

.mhm__nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 2px 0 14px;
}

.mhm__list,
.mhm__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mhm__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--mhm-line);
}

.mhm__link {
    /* Hugs its own text instead of stretching to fill the row. This is what
       lets the chevron sit right next to the label instead of stranded at
       the far edge of the screen - see .mhm__toggle below. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    overflow: hidden;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.mhm__link:hover,
.mhm__link:focus-visible { color: var(--mhm-gold); }

.mhm__item.is-current > .mhm__row > .mhm__link { color: var(--mhm-gold); }

/* ---------- submenu toggle ---------- */
/* Sits immediately after the label (not pinned to the far right of the
   screen), so it reads as "small arrow belonging to this word" rather than
   a second, unrelated control on the other side of the row. Tapping the
   label navigates to that page; tapping this arrow expands the submenu. */

.mhm__toggle {
    flex: 0 0 auto;
    width: auto;
    min-width: 40px;
    height: auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 0 4px;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.mhm__toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.28s ease;
}

.mhm__item.is-open > .mhm__row > .mhm__toggle { color: var(--mhm-gold); }
.mhm__item.is-open > .mhm__row > .mhm__toggle svg { transform: rotate(180deg); }

/* ---------- accordion submenu ---------- */

.mhm__sub {
    display: grid;
    grid-template-rows: 0fr;
    background: rgba(0, 0, 0, 0.22);
    transition: grid-template-rows 0.3s ease;
}

.mhm__item.is-open > .mhm__sub { grid-template-rows: 1fr; }

.mhm__sub-inner { overflow: hidden; }

/* Child level reads clearly as a child: smaller, lighter, indented */
.mhm__sublist .mhm__link {
    padding: 12px 20px 12px 38px;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

.mhm__sublist .mhm__link:hover,
.mhm__sublist .mhm__link:focus-visible { color: var(--mhm-gold); }

.mhm__sublist .mhm__row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mhm__sublist > .mhm__item:last-child > .mhm__row { border-bottom: 0; }

/* ---------- staggered entrance ---------- */

.mhm.is-open .mhm__list > .mhm__item {
    animation: mhmItemIn 0.36s both;
}

@keyframes mhmItemIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.mhm.is-open .mhm__list > .mhm__item:nth-child(1)  { animation-delay: 0.04s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(2)  { animation-delay: 0.07s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(3)  { animation-delay: 0.10s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(4)  { animation-delay: 0.13s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(5)  { animation-delay: 0.16s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(6)  { animation-delay: 0.19s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(7)  { animation-delay: 0.22s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(8)  { animation-delay: 0.25s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(9)  { animation-delay: 0.28s; }
.mhm.is-open .mhm__list > .mhm__item:nth-child(n+10) { animation-delay: 0.31s; }

@media (prefers-reduced-motion: reduce) {
    .mhm__sheet,
    .mhm__backdrop,
    .mhm__toggle svg,
    .mhm__sub { transition: none; }
    .mhm.is-open .mhm__list > .mhm__item { animation: none; }
}

/* ---------- page scroll lock while open ---------- */
/* The actual freeze is inline styles set by JS (body gets position:fixed with
   a negative top offset - see mobile-menu.js lockScroll/unlockScroll, which
   also preserves scroll position on close). This class only stops html
   itself from rubber-banding on iOS while the sheet is open. */

html.mhm-locked { overflow: hidden !important; }

/* ---------- desktop: sheet never applies ---------- */

@media screen and (min-width: 1025px) {
    .mhm { display: none !important; }
}

/* ---------------------------------------------------------------
   Consolidate duplicate nav triggers on phones
   ---------------------------------------------------------------
   The parent theme has its own fixed bottom bar (#top-store-mobile-bar,
   built into top-store's style.css) that appears at the same time as the
   header below 767px and repeats both the hamburger and the account icon -
   one copy in the header, one in the bottom bar. Since the bottom bar is
   fixed and thumb-reachable, and its hamburger (#mob-menu-btn) already
   opens this same bottom sheet, keep it as the single trigger and drop the
   header copies so there is only one hamburger and one account icon.

   Scoped to exactly max-width: 767px because that is the breakpoint where
   the parent theme's own CSS switches the bottom bar on (see style.css) -
   between 768 and 1024px the bottom bar is not shown, so the header
   hamburger has to stay as the only opener in that range. */

@media screen and (max-width: 767px) {
    .main-header .menu-toggle,
    .below-header .menu-toggle,
    .sticky-header .menu-toggle {
        display: none !important;
    }

    .main-header .header-icon .account,
    .sticky-header .header-icon .account {
        display: none !important;
    }
}

/* ---------- suppress the parent theme overlay ---------- */
/* Scoped to html.mhm-ready, which the JS sets only after the sheet is built.
   If the JS fails to load the parent menu still works - no dead hamburger. */

@media screen and (max-width: 1024px) {
    html.mhm-ready body.mobile-menu-active .sider.main,
    html.mhm-ready body.mobile-menu-active .sider.above,
    html.mhm-ready body.sticky-mobile-menu-active .sider.main,
    html.mhm-ready body.mobile-bottom-menu-active .sider.main {
        display: none !important;
    }
}