/**
 * Nav — modern redesign
 * Ports the approved "Nav + Hero Redesign Preview" onto the theme's real
 * WordPress menu markup (.sticky-header, .main-header, .main-menu,
 * .main-menu-list, ul.menu, .menu-item-has-children, .sub-menu, .order-btn).
 *
 * Scoped to >=1200px because that is where responsive.css actually switches the
 * desktop menu on (below 1200px `.main-menu-list` is display:none and the
 * hamburger takes over). Nothing here touches the mobile nav.
 *
 * Selectors deliberately mirror amz_style.css's long chains plus
 * `header.sticky-header` so they out-specify the existing rules instead of
 * relying on load order.
 */

:root {
    --nm-red: #A41D21;
    --nm-red-dark: #7d1518;
    --nm-ink: #14171a;
    --nm-muted: #5c6670;
    --nm-line: #e6e8ec;
}

@media (min-width: 1200px) {

    /* ===================== HEADER BAR ===================== */
    /* `body` prefix beats amz_style's `header.sticky-header.home-page` regardless
       of stylesheet order. .home-page is hardcoded in header.php on every page. */
    body header.sticky-header.home-page {
        background: rgba(255, 255, 255, .8);   /* requested 0.8 white */
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(230, 232, 236, .55);
        box-shadow: 0 2px 18px rgba(20, 23, 26, .06);
        padding: 0;
        z-index: 100;                          /* was 1 — dropdown must clear the hero */
    }

    header.sticky-header .container-fluid {
        max-width: 1560px;
        margin: 0 auto;
        padding: 0 26px;
    }

    /* logo | nav (centered) | empty balancing column.
       Plain `1fr auto 1fr` (not minmax(150px,1fr)): the fr tracks keep an
       automatic content minimum, so the empty 3rd column collapses toward 0 when
       space runs out instead of reserving 150px and forcing the menu to overflow. */
    header.sticky-header .main-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 20px;
        padding: 12px 0;
    }

    header.sticky-header .main-header .logo {
        grid-column: 1;
        justify-self: start;
    }
    header.sticky-header .main-header .logo a {
        width: auto;
        display: block;
    }
    header.sticky-header .main-header .logo a img {
        height: clamp(42px, 3.4vw, 56px);
        width: auto;
        max-width: none;
        object-fit: contain;
        display: block;
    }

    header.sticky-header .main-header .main-menu {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
    }
    header.sticky-header .main-header .main-menu .mobile-menu-icon { display: none; }
    header.sticky-header .main-header .main-menu .main-menu-list {
        display: block;
        text-align: left;
    }

    /* ===================== MENU ROW ===================== */
    /* Everything below is sized with clamp() so the whole row — all 8 items plus
       the Order Online pill — stays on ONE line from 1200px up. */
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li {
        display: block;
        position: relative;
        margin: 0;
    }

    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > a {
        display: block;
        font-size: clamp(11px, .86vw, 13px);
        font-weight: 700;
        letter-spacing: .3px;
        line-height: 1.2;
        text-transform: uppercase;
        color: var(--nm-ink);
        padding: 10px clamp(5px, .72vw, 11px);
        border-radius: 8px;
        position: relative;
        text-decoration: none;
        white-space: nowrap;               /* no item ever breaks to a second line */
        transition: color .2s ease;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > a:hover {
        color: var(--nm-red);
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.current-menu-item > a,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.current-menu-ancestor > a {
        color: var(--nm-red);
    }

    /* animated underline */
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > a::after {
        content: "";
        position: absolute;
        left: clamp(5px, .72vw, 11px);
        right: clamp(5px, .72vw, 11px);
        bottom: 2px;
        height: 2px;
        background: var(--nm-red);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .25s ease;
        border-radius: 2px;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li:hover > a::after,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.current-menu-item > a::after,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.current-menu-ancestor > a::after {
        transform: scaleX(1);
    }

    /* caret for dropdown parents — WP outputs no icon, so it's a background SVG */
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.menu-item-has-children > a {
        padding-right: clamp(18px, 1.5vw, 26px);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right clamp(4px, .5vw, 8px) center;
        background-size: 9px 9px;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.menu-item-has-children:hover > a {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A41D21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.menu-item-has-children > a::after {
        right: clamp(18px, 1.5vw, 26px);
    }

    /* ===================== DROPDOWN ===================== */
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > .sub-menu {
        display: block;                    /* amz_style toggles display; we animate instead */
        list-style: none;
        margin: 0;
        padding: 8px;
        position: absolute;
        top: calc(100% + 2px);
        left: 50%;
        right: auto;
        min-width: 250px;
        background: #fff;
        border: 1px solid var(--nm-line);
        border-radius: 14px;
        box-shadow: 0 24px 50px rgba(20, 23, 26, .16);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 10px);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
        z-index: 120;
    }
    /* hover bridge so the 2px gap doesn't drop the menu */
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > .sub-menu::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.menu-item-has-children:hover > .sub-menu,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.menu-item-has-children:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }

    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > .sub-menu li {
        display: block;
        width: 100%;
        margin: 0;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > .sub-menu li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 600;
        color: var(--nm-ink);
        background: transparent;
        white-space: nowrap;
        text-decoration: none;
        transition: background .18s ease, color .18s ease, padding-left .18s ease;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > .sub-menu li a::before {
        content: "";
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--nm-red);
        opacity: 0;
        transform: scale(.4);
        transition: opacity .18s ease, transform .18s ease;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > .sub-menu li a:hover {
        background: #faf3f3;
        color: var(--nm-red);
        padding-left: 16px;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li > .sub-menu li a:hover::before {
        opacity: 1;
        transform: scale(1);
    }

    /* ===================== ORDER ONLINE PILL ===================== */
    /* amz_style pins this absolutely (right:20px; top:50%) — reset it so it flows
       at the end of the centered group like the approved design. */
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.order-btn,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.contact-btn {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-left: 6px;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.order-btn > a,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.contact-btn > a {
        display: block;
        background: var(--nm-red);
        color: #fff;
        border-radius: 999px;
        /* Optical centering: the label is uppercase, so its ink sits high in the
           line box and the pill reads as hanging low. 2px more top than bottom
           pulls the text down onto the pill's true centre — same trick and same
           2px delta amz_style.css already used (7px/5px) on the old button. */
        padding: 11px clamp(12px, 1.3vw, 20px) 9px;
        box-shadow: 0 10px 22px rgba(164, 29, 33, .28);
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.order-btn > a::after,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.contact-btn > a::after {
        display: none;
    }
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.order-btn > a:hover,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu > li.contact-btn > a:hover {
        background: var(--nm-red-dark);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(164, 29, 33, .38);
    }

    /* keyboard focus (the translucent bar washes out the default outline) */
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu a:focus-visible {
        outline: 2px solid var(--nm-red);
        outline-offset: 2px;
    }
}

/* =========================================================================
   MOBILE / TABLET NAV  (<=1199px — where responsive.css swaps in the panel)
   Markup is untouched: header.php's .mobile-menu > .mobile-header /
   .mobile-body / .mobile-footer-credit, and customScript.js's .active +
   .sub-menu.open toggles are reused as-is.
   ========================================================================= */
@media (max-width: 1199px) {

    /* --- Hamburger: CSS-drawn, replaces line.png ------------------------- */
    header .main-header .main-menu .mobile-menu-icon .mobile-menu-toggle {
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background-color: transparent;
        /* middle bar (the two pseudo-elements are the outer bars) */
        background-image: linear-gradient(var(--nm-ink), var(--nm-ink));
        background-size: 24px 2px;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    header .main-header .main-menu .mobile-menu-icon .mobile-menu-toggle img {
        display: none;
    }
    header .main-header .main-menu .mobile-menu-icon .mobile-menu-toggle::before,
    header .main-header .main-menu .mobile-menu-icon .mobile-menu-toggle::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 24px;
        height: 2px;
        margin-left: -12px;
        background: var(--nm-ink);
        border-radius: 2px;
    }
    header .main-header .main-menu .mobile-menu-icon .mobile-menu-toggle::before { top: calc(50% - 8px); }
    header .main-header .main-menu .mobile-menu-icon .mobile-menu-toggle::after  { top: calc(50% + 6px); }

    /* --- Panel ----------------------------------------------------------- */
    /* Was `top:100%` + translateY(-100%). Re-anchored to inset:0 so the panel
       can be a flex column; .active transform is overridden to match. */
    body .mobile-menu {
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        background: #fff !important;          /* beats responsive.css's !important */
        z-index: 9999;
        transform: translateY(100%);
        visibility: hidden;                   /* stops phantom taps while closed */
        transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility .38s;
        padding-bottom: env(safe-area-inset-bottom);
    }
    body .mobile-menu.active {
        transform: translateY(0);
        visibility: visible;
    }
    /* the old red bar + fading gradient across the top */
    body .mobile-menu::before,
    body .mobile-menu::after {
        display: none;
    }

    /* stop the page scrolling behind the open panel (JS already sets the class) */
    body.mobile-menu-open {
        overflow: hidden;
    }

    /* --- Panel header ---------------------------------------------------- */
    body .mobile-menu .mobile-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px calc(14px + env(safe-area-inset-top));
        padding-top: calc(14px + env(safe-area-inset-top));
        border-bottom: 1px solid var(--nm-line);
    }
    body .mobile-menu .mobile-header .mobile-logo {
        text-align: left;
    }
    body .mobile-menu .mobile-header .mobile-logo a {
        width: auto;
        margin: 0;
        display: block;
    }
    body .mobile-menu .mobile-header .mobile-logo a img {
        width: auto;
        height: 44px;
        display: block;
    }

    /* close button: circular, CSS-drawn ✕ (markup only has a bare "X" glyph) */
    body .mobile-menu .mobile-header .mobile-close {
        position: static;
        transform: none;
    }
    body .mobile-menu .mobile-header .mobile-close .mobile-close-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--nm-line);
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .2s ease, border-color .2s ease;
    }
    body .mobile-menu .mobile-header .mobile-close .mobile-close-btn:hover,
    body .mobile-menu .mobile-header .mobile-close .mobile-close-btn:focus-visible {
        background: #faf3f3;
        border-color: var(--nm-red);
    }
    body .mobile-menu .mobile-header .mobile-close span {
        position: relative;
        display: block;
        width: 18px;
        height: 18px;
        font-size: 0;                          /* hide the literal "X" character */
        line-height: 0;
        color: transparent;
    }
    body .mobile-menu .mobile-header .mobile-close span::before,
    body .mobile-menu .mobile-header .mobile-close span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        margin-top: -1px;
        background: var(--nm-ink);
        border-radius: 2px;
    }
    body .mobile-menu .mobile-header .mobile-close span::before { transform: rotate(45deg); }
    body .mobile-menu .mobile-header .mobile-close span::after  { transform: rotate(-45deg); }

    /* --- Scrollable body ------------------------------------------------- */
    /* Previously unscrollable: 8 items + submenus + 2 CTAs overflow a small
       phone and the tail was simply unreachable. */
    body .mobile-menu .mobile-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-top: none;
        padding: 8px 0 4px;
    }

    body .mobile-menu .mobile-body ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    body .mobile-menu .mobile-body ul li {
        border-bottom: 1px solid #f0f1f4;
        text-align: left;
    }
    body .mobile-menu .mobile-body > nav > ul > li:last-child {
        border-bottom: none;
    }
    body .mobile-menu .mobile-body ul li a {
        display: flex;
        align-items: center;
        min-height: 56px;                      /* comfortable touch target */
        padding: 14px 22px;
        color: var(--nm-ink);
        text-align: left;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .6px;
        text-decoration: none;
        transition: background .18s ease, color .18s ease;
    }
    body .mobile-menu .mobile-body ul li a:active {
        background: #faf3f3;
        color: var(--nm-red);
    }
    body .mobile-menu .mobile-body ul li.current-menu-item > a,
    body .mobile-menu .mobile-body ul li.current-menu-ancestor > a {
        color: var(--nm-red);
        box-shadow: inset 3px 0 0 var(--nm-red);
    }

    /* --- Accordion submenus ---------------------------------------------- */
    /* customScript.js toggles `.open` on .sub-menu; animate height instead of
       display:none so it reads as an accordion rather than a jump. */
    body .mobile-menu .mobile-body ul li.menu-item-has-children > a {
        justify-content: space-between;
        gap: 12px;
    }
    body .mobile-menu .mobile-body ul li.menu-item-has-children > a::after {
        content: "";
        flex: 0 0 auto;
        width: 11px;
        height: 11px;
        border-right: 2px solid var(--nm-muted);
        border-bottom: 2px solid var(--nm-muted);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .3s ease;
    }
    /* customScript.js only ever toggles `.open` on the .sub-menu itself, so the
       chevron state is read off the sibling with :has() rather than needing a
       class on the <a> (which nothing would ever set). */
    body .mobile-menu .mobile-body ul li.menu-item-has-children:has(> .sub-menu.open) > a::after {
        transform: rotate(-135deg) translate(-2px, 0);
        border-color: var(--nm-red);
    }

    body .mobile-menu .mobile-body ul li .sub-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        background: #fafafa;
        transition: max-height .32s ease;
    }
    body .mobile-menu .mobile-body ul li .sub-menu.open {
        max-height: 600px;
    }
    body .mobile-menu .mobile-body ul li .sub-menu li {
        border-bottom: none;
    }
    body .mobile-menu .mobile-body ul li .sub-menu li a {
        min-height: 48px;
        padding: 12px 22px 12px 38px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: none;
        color: #4a5158;
    }

    /* --- CTA buttons ------------------------------------------------------ */
    body .mobile-menu .mobile-body .mobile-cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 22px;
    }
    body .mobile-menu .mobile-body .mobile-cta-buttons .mobile-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        margin: 0;
        padding: 15px 24px 13px;               /* same uppercase optical nudge */
        border: 2px solid var(--nm-red);
        border-radius: 999px;
        background: var(--nm-red);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        text-decoration: none;
    }
    /* second CTA reads as the secondary action */
    body .mobile-menu .mobile-body .mobile-cta-buttons .mobile-cta-btn:last-child {
        background: #fff;
        color: var(--nm-red);
    }

    /* --- Footer credit ---------------------------------------------------- */
    /* was position:absolute; bottom:30px — it overlapped the menu once the list
       got long. Now it just sits at the end of the flex column. */
    body .mobile-menu .mobile-footer-credit {
        position: static;
        flex: 0 0 auto;
        padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--nm-line);
        text-align: center;
    }
    body .mobile-menu .mobile-footer-credit span {
        color: #9aa1a8;
        font-size: 11px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    body .mobile-menu a:focus-visible,
    body .mobile-menu button:focus-visible {
        outline: 2px solid var(--nm-red);
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu a,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu a::after,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu a::before,
    header.sticky-header .main-header .main-menu .main-menu-list ul.menu .sub-menu {
        transition: none;
    }
    body .mobile-menu,
    body .mobile-menu .mobile-body ul li a,
    body .mobile-menu .mobile-body ul li .sub-menu,
    body .mobile-menu .mobile-body ul li.menu-item-has-children > a::after {
        transition: none;
    }
}