/* ============================================================
   Jersey Jump — Mobile Menu
   Opens as a full-screen takeover (covers the whole viewport,
   including where the real overlapping header logo sits) with its
   own top row (logo left, hamburger/close right), the menu items
   in the middle (scrollable), and the CTA pinned at the bottom.
   ============================================================ */

@media (max-width: 1024px) {

    /* -------------------------------------------------------
       Header row on mobile (closed state) — just the hamburger.
       CTA and phone move into the full-screen overlay below.
       ------------------------------------------------------- */
    .header-cta-btn,
    .header-phone {
        display: none;
    }

    .header-nav {
        flex: unset;
        margin-inline-start: auto;
    }

    /* Transparent wrapper while closed — the hamburger behaves like
       a normal direct child of .header-nav. Becomes a real row
       (logo left, hamburger/close right) once the panel opens. */
    .mobile-menu-panel-header {
        display: contents;
    }

    .mobile-menu-logo {
        display: none;
    }

    /* -------------------------------------------------------
       Hamburger Button
       ------------------------------------------------------- */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 8px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .hamburger-line {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-white);
        transition: transform 0.2s ease, opacity 0.2s ease;
        transform-origin: center;
    }

    /* Hamburger → X when open */
    .header-nav.is-open .mobile-menu-toggle .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header-nav.is-open .mobile-menu-toggle .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .header-nav.is-open .mobile-menu-toggle .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* -------------------------------------------------------
       Full-screen panel (open state)
       ------------------------------------------------------- */
    .header-nav.is-open {
        position: fixed;
        inset: 0;
        z-index: 150;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background-color: var(--color-primary);
    }

    .header-nav.is-open .mobile-menu-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        order: 1;
        flex-shrink: 0;
        padding: 18px 24px;
        border-bottom: 1px solid var(--color-white-a55);
    }

    .header-nav.is-open .mobile-menu-logo {
        display: block;
        width: 64px;
        height: 64px;
    }

    /* The <img> inside reuses the .header-logo-img class from the real
       (overlapping, clamp-sized) header logo — override it here so this
       copy just fills its own 64px box instead. Specificity also needs
       to beat header.css's `.site-header.is-scrolled .header-logo-img`
       rule, since this still lives inside .site-header in the DOM. */
    .header-nav.is-open .mobile-menu-logo .header-logo-img {
        width: 100%;
        height: 100%;
    }

    /* Lock body scroll when menu is open — overflow:hidden alone isn't
       reliable on iOS Safari (background can still rubber-band scroll),
       position:fixed is what actually pins it in place. */
    body.menu-is-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* -------------------------------------------------------
       Menu — natural height, no scrolling anywhere in the panel
       ------------------------------------------------------- */
    .main-menu {
        display: none;
    }

    .header-nav.is-open .main-menu {
        display: block;
        order: 2;
        list-style: none;
    }

    /* -------------------------------------------------------
       CTA — pinned at the bottom of the panel
       ------------------------------------------------------- */
    .header-nav.is-open .header-cta-btn {
        display: inline-flex; /* overrides the closed-state `display:none` above — matches .cta-button's own inline-flex centering instead of falling back to inline-block */
        align-items: center;
        justify-content: center;
        order: 3;
        flex-shrink: 0;
        align-self: flex-start; /* keeps its natural pill size instead of stretching full-width */
        margin-top: 18px;
        margin-bottom: 24px;
        margin-left: 24px; /* same left offset as the menu items' own padding */
    }

    /* -------------------------------------------------------
       Top-level menu items
       ------------------------------------------------------- */
    .main-menu > .menu-item {
        border-bottom: 1px solid var(--color-white-a55);
    }

    .main-menu > .menu-item.current-menu-item,
    .main-menu > .menu-item.current-menu-ancestor,
    .main-menu > .menu-item.current-menu-parent {
        border-bottom-color: var(--color-yellow);
    }

    .main-menu > .menu-item > a {
        display: block;
        padding: 18px 24px;
        color: var(--color-white);
        font-weight: 600;
        font-size: 16px;
    }

    .main-menu > .menu-item.current-menu-item > a,
    .main-menu > .menu-item.current-menu-ancestor > a,
    .main-menu > .menu-item.current-menu-parent > a {
        color: var(--color-yellow);
    }

    /* Items with children: flex row so toggle stays pinned next to link */
    .main-menu .menu-item.has-children,
    .sub-menu .menu-item.has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .main-menu .has-children > a,
    .sub-menu .has-children > a {
        flex: 1;
        min-width: 0;
    }

    /* Sub-menu wraps to their own full-width row */
    .main-menu .has-children > .sub-menu-wrap,
    .sub-menu .has-children > .sub-menu-wrap {
        width: 100%;
        flex-basis: 100%;
    }

    /* -------------------------------------------------------
       Sub-menu Toggle Button
       ------------------------------------------------------- */
    .sub-menu-toggle {
        flex-shrink: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        cursor: pointer;
        color: var(--color-white);
        border-left: 1px solid var(--color-white-a55);
    }

    .toggle-icon {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }

    .has-children.is-open > .sub-menu-toggle .toggle-icon {
        transform: rotate(-135deg);
    }

    /* -------------------------------------------------------
       Sub-menus — accordion (the wrap div is what toggles;
       the inner .sub-menu just needs its own list reset)
       ------------------------------------------------------- */
    .sub-menu-wrap {
        display: none;
    }

    .has-children.is-open > .sub-menu-wrap {
        display: block;
    }

    .sub-menu {
        list-style: none;
        background-color: var(--color-black-a15);
    }

    .sub-menu > .menu-item {
        border-bottom: 1px solid var(--color-white-a55);
    }

    /* Separates the first child (e.g. "Tent Rentals") from the parent
       item's own link/toggle row above it, once the accordion is open. */
    .sub-menu > .menu-item:first-child {
        border-top: 1px solid var(--color-white-a55);
    }

    /* Last item's own border would otherwise double up against the
       parent .has-children item's border-bottom right below it. */
    .sub-menu > .menu-item:last-child {
        border-bottom: none;
    }

    .sub-menu > .menu-item.current-menu-item {
        border-bottom-color: var(--color-yellow);
    }

    .sub-menu a {
        display: block;
        padding: 14px 24px 14px 40px;
        color: var(--color-white-a55);
        font-weight: 500;
        font-size: 14px;
        transition: color 0.2s ease;
    }

    .sub-menu a:hover,
    .sub-menu a:focus-visible {
        color: var(--color-yellow);
    }

    .sub-menu .current-menu-item > a {
        color: var(--color-yellow);
    }

} /* end @media mobile */