/* =================================================================
   DRILL MENU
   Mobile popup menu with sliding sub-panels and a Back button.
   Loaded by inc/enqueue.php. JS: assets/js/drill-menu.js.
   ================================================================= */

/* ---------------------------------------------------------------
   Structure (see drill-menu.js): .mm-wrap holds .mm-parent (top
   level) and one .mm-<name> panel per section. Each is a container
   with a .mm-title (heading, and for panels the .mm-back button) and
   a .mm-submenu-wrap holding the Nav Menu — .mm-submenu-wrap is the
   scroll area, sized in Elementor; nothing else scrolls. The script
   tags parents .drill-parent (with a chevron) and panels .drill-panel. Tapping a parent adds .is-drilled to
   the wrap and .is-active to the panel; the top level slides left
   and fades, the panel slides in from the right.

   Fonts, colours and row padding of the menu items themselves stay
   with the Nav Menu widgets' Style tab. Dials, on .mm-wrap:
     --drill-accent     chevron / back / title colour  (cobalt)
     --drill-chevron    chevron circle size             (22px)
     --drill-speed      slide duration                  (0.4s)
     --drill-stagger    per-item delay                  (35ms)
--------------------------------------------------------------- */
.mm-wrap[data-drill-ready] {
    position: relative;
    overflow: hidden;      /* clips the sliding panels; the wrap itself never scrolls */
}

/* The ONLY scroll area is each panel's .mm-submenu-wrap (sized in
   Elementor), so the panel's .mm-title — heading + Back — stays put
   while the list scrolls. Chaining is blocked so reaching the end of
   the list never scrolls the page behind the menu. */
.mm-wrap[data-drill-ready] .mm-submenu-wrap {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* top level slides away while a panel is open */
.mm-wrap[data-drill-ready] > .mm-parent {
    transition: transform var(--drill-speed, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
                opacity   var(--drill-speed, 0.4s) ease;
}
.mm-wrap.is-drilled > .mm-parent {
    transform: translateX(-24%);
    opacity: 0;
    pointer-events: none;
}

/* parent rows: label left, chevron right */
.drill-parent > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.drill-chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--drill-chevron, 24px);
    height: var(--drill-chevron, 24px);
    /* zero net height in the row: the circle floats on the text line
       and never makes a parent row taller than its neighbours */
    margin-block: calc(var(--drill-chevron, 24px) / -2);
    border: 2px solid var(--drill-accent, var(--ipg-cobalt));
    border-radius: 999px;
    color: var(--drill-accent, var(--ipg-cobalt));
    font-size: 12px;
    line-height: 1;
}

/* panels: stacked over the top level, off-screen to the right until
   active; natural height, so the wrap scrolls them */
.mm-wrap[data-drill-ready] > .drill-panel {
    position: absolute;
    inset: 0;               /* fills the wrap, like the top level it replaces */
    overflow: hidden;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--drill-speed, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear var(--drill-speed, 0.4s);
}
.mm-wrap[data-drill-ready] > .drill-panel.is-active {
    transform: none;
    visibility: visible;
    transition: transform var(--drill-speed, 0.4s) cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s;
}

/* Elementor's dropdown-layout nav caps and scrolls its list; let it flow */
.drill-panel .elementor-nav-menu--dropdown,
.drill-panel .elementor-nav-menu__container {
    max-height: none !important;
    overflow: visible !important;
}

/* panel head (only when the script builds it — a hand-built panel
   styles its own Back button and heading in Elementor) */
.drill-head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}
.drill-head .drill-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    margin: 0;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--drill-accent, var(--ipg-cobalt)) !important;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}
.drill-head .drill-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
}
.drill-head .drill-title {
    margin: 0;
    color: var(--drill-accent, var(--ipg-cobalt));
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
}
.drill-title { outline: none; }   /* focus target in either case */

/* items fade up in sequence each time a panel (or the popup) opens */
.mm-wrap[data-drill-ready] > .drill-panel.is-active .menu-item,
.mm-wrap[data-drill-ready] > .mm-parent .menu-item {
    animation: drill-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(80ms + var(--mm-i, 0) * var(--drill-stagger, 35ms));
}
@keyframes drill-item-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-wrap[data-drill-ready] > .mm-parent,
    .mm-wrap[data-drill-ready] > .drill-panel {
        transition: opacity 0.2s ease, visibility 0s !important;
        transform: none !important;
    }
    .mm-wrap.is-drilled > .mm-parent { opacity: 0; }
    .mm-wrap[data-drill-ready] > .drill-panel { opacity: 0; }
    .mm-wrap[data-drill-ready] > .drill-panel.is-active { opacity: 1; }
    .mm-wrap[data-drill-ready] .menu-item { animation: none; }
}