/* ============================================================
 * JIMS Mobile Menu
 * ============================================================ */

:root {
    --jims-panel-bg:      #3a3a3a;                      /* top of gradient */
    --jims-panel-bg-end:  #2b2724;                      /* bottom – darker, faintly warm */
    --jims-panel-fg:      #ffffff;
    --jims-panel-muted:   rgba(255,255,255,0.65);
    --jims-panel-line:    rgba(255,255,255,0.10);
    --jims-panel-divider: rgba(248,246,242,0.18);       /* off-white hairline */
    --jims-panel-accent:  #ffffff;
    --jims-panel-width:   min(82vw, 380px);
    --jims-dur:           280ms;                        /* open duration */
    --jims-dur-close:     300ms;                        /* close duration */
    --jims-ease:          cubic-bezier(.22, 1, .36, 1);

    /* Submenu brightness ladder */
    --jims-fg-l1:         #ffffff;
    --jims-fg-l2:         rgba(255,255,255,0.92);
    --jims-fg-l3:         rgba(255,255,255,0.84);
    --jims-fg-l4:         rgba(255,255,255,0.76);

    /* Toggle hint + accent */
    --jims-toggle-hint:       rgba(255,255,255,0.10);
    --jims-toggle-hint-hover: rgba(255,255,255,0.18);
    --jims-toggle-accent:     #ff8c42;                  /* orange chevron when open */
}

/* ============================================================
 * Only hijack WP's nav below the desktop breakpoint.
 * Above 1200px we let WordPress render its own inline menu.
 * ============================================================ */
@media (max-width: 1199.98px) {
    html.jims-mobile-menu-active header .wp-block-navigation__responsive-container,
    html.jims-mobile-menu-active header .wp-block-navigation__overlay-container {
        display: none !important;
    }

    html.jims-mobile-menu-active header .wp-block-navigation__responsive-container-open {
        display: inline-flex !important;
    }
}

/* ============================================================
 * Drawer shell
 *
 * Visibility is delayed on close so the panel can finish its
 * slide-out before the element is hidden. On open it flips
 * immediately (0s delay).
 * ============================================================ */
.jims-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--jims-dur-close);
}
.jims-mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

.jims-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity var(--jims-dur-close) var(--jims-ease);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}
.jims-mobile-menu.is-open .jims-mobile-menu__backdrop {
    opacity: 1;
    transition: opacity var(--jims-dur) var(--jims-ease);
}

.jims-mobile-menu__panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--jims-panel-width);
    max-width: 100vw;
    background: linear-gradient(180deg, var(--jims-panel-bg) 0%, var(--jims-panel-bg-end) 100%);
    color: var(--jims-panel-fg);
    transform: translate3d(-100%, 0, 0);
    transition: transform var(--jims-dur-close) var(--jims-ease);
    will-change: transform;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,.35);
    font-family: inherit;
}
.jims-mobile-menu.is-open .jims-mobile-menu__panel {
    transform: translate3d(0, 0, 0);
    transition: transform var(--jims-dur) var(--jims-ease);
}

/* ============================================================
 * Header / close — slimmed to match a menu row
 * ============================================================ */
.jims-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--jims-panel-line);
}
.jims-mobile-menu__home {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 17px 6px;
    color: var(--jims-fg-l1);
    font-family: Rubik, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}
.jims-mobile-menu__home:hover,
.jims-mobile-menu__home:focus-visible {
    color: var(--jims-panel-fg);
    text-decoration: underline;
    outline: 0;
}
.jims-mobile-menu__header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-left: auto;
}
.jims-mobile-menu__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 0;
    background: transparent;
    color: var(--jims-panel-fg);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease;
}
/* Expanded tap target — visible button stays 36px, hit area is 48px */
.jims-mobile-menu__close::after {
    content: "";
    position: absolute;
    inset: -6px;
}
.jims-mobile-menu__close:hover,
.jims-mobile-menu__close:focus-visible {
    background: rgba(255,255,255,0.10);
    outline: 0;
}

/* ============================================================
 * Nav lists
 * ============================================================ */
.jims-mobile-menu__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 32px;
}

.jims-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jims-mobile-menu__item { position: relative; }

.jims-mobile-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
}

/* ------------------------------------------------------------
 * Dividers
 * Top level: every item gets one, children or not.
 * Nested: inset dividers between all rows.
 * ------------------------------------------------------------ */

.jims-mobile-menu__nav > .jims-mobile-menu__list > .jims-mobile-menu__item > .jims-mobile-menu__row {
    margin: 0 16px;
    padding: 0;
    border-bottom: 1px solid var(--jims-panel-divider);
}
.jims-mobile-menu__nav > .jims-mobile-menu__list > .jims-mobile-menu__item:last-child > .jims-mobile-menu__row {
    border-bottom: 0;   /* no trailing line above bottom padding */
}

.jims-mobile-menu__submenu .jims-mobile-menu__item > .jims-mobile-menu__row {
    margin: 0 16px;
    padding: 0;
    border-bottom: 1px solid var(--jims-panel-divider);
}
.jims-mobile-menu__submenu .jims-mobile-menu__item:last-child > .jims-mobile-menu__row {
    border-bottom: 0;
}

/* ------------------------------------------------------------
 * Links
 * ------------------------------------------------------------ */
.jims-mobile-menu__link {
    flex: 1 1 auto;
    display: block;
    color: var(--jims-fg-l1);
    text-decoration: none;
    font-size: 17px;          /* was 16px */
    font-weight: 500;
    line-height: 1.3;
    padding: 17px 0;          /* was 14px 0 */
    transition: opacity .2s ease;
}
.jims-mobile-menu__link:hover,
.jims-mobile-menu__link:focus-visible {
    opacity: .75;
    outline: 0;
}

/* ------------------------------------------------------------
 * Submenu toggle
 * Base size for top level; scaled down per nesting depth below
 * so it never overlaps the row's divider line.
 * ------------------------------------------------------------ */
.jims-mobile-menu__toggle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: var(--jims-toggle-hint);   /* permanent — hitbox always visible */
    color: var(--jims-panel-fg);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.jims-mobile-menu__toggle:hover,
.jims-mobile-menu__toggle:focus-visible {
    background: var(--jims-toggle-hint-hover);
    outline: 0;
}
.jims-mobile-menu__toggle svg {
    transition: transform .3s var(--jims-ease), color .3s var(--jims-ease);
    transform: rotate(-90deg);   /* collapsed → points right */
    color: var(--jims-panel-fg);
}
.jims-mobile-menu__item.is-open > .jims-mobile-menu__row > .jims-mobile-menu__toggle svg {
    transform: rotate(0deg);     /* open → points down */
    color: var(--jims-toggle-accent);   /* orange chevron when open */
}

/* Scale toggle down per nesting level so it fits shorter rows
 * without touching the divider line. */
.jims-mobile-menu__submenu .jims-mobile-menu__toggle {
    width: 36px;
    height: 36px;
}
.jims-mobile-menu__submenu .jims-mobile-menu__submenu .jims-mobile-menu__toggle {
    width: 32px;
    height: 32px;
}
.jims-mobile-menu__submenu .jims-mobile-menu__submenu .jims-mobile-menu__submenu .jims-mobile-menu__toggle {
    width: 30px;
    height: 30px;
}

/* ============================================================
 * Submenu – the smooth accordion
 * Uses grid-template-rows 0fr → 1fr (no max-height hacks)
 * ============================================================ */
.jims-mobile-menu__submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--jims-ease);
}
.jims-mobile-menu__item.is-open > .jims-mobile-menu__submenu {
    grid-template-rows: 1fr;
}
.jims-mobile-menu__submenu-inner {
    overflow: hidden;
    min-height: 0;
}

/* ------------------------------------------------------------
 * Submenu indent + brightness ladder
 * Indent per level: 4px padding + 12px margin = 16px total.
 * ------------------------------------------------------------ */

.jims-mobile-menu__submenu .jims-mobile-menu__list {
    padding-inline: 4px;
    margin-inline: 12px;
    border-left: 0;
}

/* Level 2 — bright, one notch below the top level */
.jims-mobile-menu__submenu .jims-mobile-menu__link {
    font-size: 15px;
    font-weight: 400;
    color: var(--jims-fg-l2);
    padding: 11px 0;
}

/* Level 3 — one step dimmer, still clearly readable */
.jims-mobile-menu__submenu .jims-mobile-menu__submenu .jims-mobile-menu__link {
    font-size: 14px;
    color: var(--jims-fg-l3);
    opacity: 1;
}

/* Level 4 — deepest tier; still comfortably legible */
.jims-mobile-menu__submenu .jims-mobile-menu__submenu .jims-mobile-menu__submenu .jims-mobile-menu__link {
    font-size: 13px;
    color: var(--jims-fg-l4);
    opacity: 1;
}

/* ============================================================
 * Desktop guard – never show over desktop
 * ============================================================ */
@media (min-width: 1200px) {
    .jims-mobile-menu { display: none !important; }
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .jims-mobile-menu,
    .jims-mobile-menu *,
    .jims-mobile-menu *::before,
    .jims-mobile-menu *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* ============================================================
 * Bridge the gap between parent item and its dropdown
 * so the mouse can travel without firing pointerleave
 * ============================================================ */

/* Make sure the li is a positioning context for the bridge */
.wp-block-navigation-item.has-child {
    position: relative;
}

/* If you animate the submenu with scale, anchor it so it grows downward
 * from the top edge — otherwise the top of the menu briefly moves up
 * past the cursor and triggers pointerleave mid-animation */
.wp-block-navigation-item.open-on-hover-click > .wp-block-navigation__submenu-container {
    transform-origin: top center;
}

/* ============================================================
 * Fix: keep navigation dropdowns above the search bar / header
 * ============================================================ */

/* 1. Give the header a stacking context so children obey z-index */
header.wp-block-template-part {
    position: relative;
    z-index: 100;
}

/* 2. The nav block itself — must be above sibling header blocks */
header.wp-block-template-part .wp-block-navigation {
    position: relative;
    z-index: 50;
}

/* 3. The dropdown container — top of the stack */
.wp-block-navigation .wp-block-navigation__submenu-container {
    z-index: 500;
}

/* 4. Search bar — keep it BEHIND the nav dropdowns */
header.wp-block-template-part .search-bar,
header.wp-block-template-part .search-toggle,
header.wp-block-template-part .wp-block-search {
    position: relative;
    z-index: 10;
}

/* Fallback positioning context only — themes can override */
:where(header.wp-block-template-part) {
    position: relative;
    z-index: 100;
}
:where(header.wp-block-template-part) :where(.wp-block-navigation) {
    position: relative;
    z-index: 50;
}
:where(.wp-block-navigation) :where(.wp-block-navigation__submenu-container) {
    z-index: 500;
}
:where(header.wp-block-template-part) :where(.search-bar, .search-toggle, .wp-block-search) {
    position: relative;
    z-index: 10;
}