/* ═══════════════════════════════════════════════════════════════
   D17 — Mobile menu "Register" (<992px). Replaces SlickNav.

   The šanón bar stays on top; the menu drops out from under it as a
   dark index sheet of the same folder: the three services as register
   tabs sealed with their mascot medallion (approved mascot-tint
   exception, PRODUCT.md), the secondary pages as a quiet two-column
   index, and the standing free-consultation offer at the foot.

   Markup: partials/header.php (.mnav-toggle + nav.mnav after </header>)
   Behaviour: js/d17-mobile-menu.js (html.mnav-open, inert, focus trap)
   Tokens: css/premium.css :root (--ink, --white, --accent, --ease-out)
   ═══════════════════════════════════════════════════════════════ */

.mnav {
    --mnav-top: 72px;
    --mnav-gold-hi: #f4e0ac;
    --mnav-gold-lo: #b8873c;
    --mnav-line: rgba(201, 162, 85, 0.22);
    --mnav-text-2: rgba(245, 244, 240, 0.62);
    --mnav-dur: 0.62s;
    display: none;
}

@media (max-width: 991.98px) {
    html.mnav-open,
    html.mnav-open body {
        overflow: hidden;
    }

    /* Keep the šanón bar (and its toggle) above the sheet and above
       floating widgets while the menu is open. */
    html.mnav-open header.main-header {
        z-index: 10001;
    }

    .mnav {
        position: fixed;
        inset: var(--mnav-top) 0 0 0;
        z-index: 10000;
        display: block;
        pointer-events: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        color: var(--white);
        background:
            radial-gradient(120% 60% at 85% 0%, rgba(201, 162, 85, 0.13), transparent 62%),
            radial-gradient(90% 50% at 0% 100%, rgba(201, 162, 85, 0.07), transparent 70%),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
            linear-gradient(180deg, #100e0b 0%, #070605 100%);
        clip-path: inset(0 0 100% 0);
        transition: clip-path var(--mnav-dur) var(--ease-out);
    }

    /* brass hairline where the sheet leaves the bar */
    .mnav::before {
        content: '';
        position: sticky;
        top: 0;
        z-index: 2;
        display: block;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(244, 224, 172, 0.75) 22%, var(--accent) 60%, transparent);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    }

    html.mnav-open .mnav {
        pointer-events: auto;
        clip-path: inset(0 0 0 0);
    }

    .mnav__sheet {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        gap: 28px;
        width: min(100%, 620px);
        margin: 0 auto;
        padding: 26px 20px max(28px, env(safe-area-inset-bottom));
    }

    /* ─── Staggered entrance ─────────────────────────────────────── */
    .mnav__motto,
    .mnav-svc,
    .mnav__pages li,
    .mnav__footer {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    html.mnav-open .mnav__motto,
    html.mnav-open .mnav-svc,
    html.mnav-open .mnav__pages li,
    html.mnav-open .mnav__footer {
        opacity: 1;
        transform: none;
        transition:
            opacity 0.5s var(--ease-out) calc(0.12s + var(--i, 0) * 0.055s),
            transform 0.7s var(--ease-out) calc(0.12s + var(--i, 0) * 0.055s);
    }

    /* ─── Motto ──────────────────────────────────────────────────── */
    .mnav__motto {
        margin: 0;
        max-width: 26ch;
        font-family: 'Lora', serif;
        font-style: italic;
        font-size: 1.02rem;
        line-height: 1.45;
        color: var(--mnav-gold-hi);
        text-wrap: balance;
    }

    /* ─── Service register tabs ──────────────────────────────────── */
    .mnav__services,
    .mnav__pages {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mnav__services {
        border-top: 1px solid var(--mnav-line);
    }

    .mnav-svc {
        border-bottom: 1px solid var(--mnav-line);
    }

    .mnav-svc__link {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 16px;
        min-height: 84px;
        padding: 14px 6px 14px 2px;
        color: var(--white);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* service-tinted haze, revealed on press / hover / current page */
    .mnav-svc__link::before {
        content: '';
        position: absolute;
        inset: 0 -20px;
        z-index: -1;
        background: radial-gradient(70% 120% at 12% 50%, rgb(var(--svc-rgb) / 0.2), transparent 70%);
        opacity: 0;
        transition: opacity 0.45s var(--ease-out);
    }

    .mnav-svc__link:is(:hover, :focus-visible, :active, .is-active)::before {
        opacity: 1;
    }

    .mnav .mnav-svc__seal {
        --size: 52px;
        padding: 2px;
        transition: transform 0.6s var(--ease-out);
    }

    .mnav-svc__link:is(:hover, :focus-visible) .mnav-svc__seal {
        transform: rotate(-6deg) scale(1.04);
    }

    .mnav-svc__text {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .mnav-svc__name {
        font-family: 'Lora', serif;
        font-size: clamp(1.45rem, 6.4vw, 1.75rem);
        font-weight: 500;
        line-height: 1.12;
        letter-spacing: -0.01em;
        color: var(--white);
        transition: color 0.3s ease;
    }

    .mnav-svc__desc {
        font-family: 'Instrument Sans', sans-serif;
        font-size: 0.84rem;
        line-height: 1.35;
        color: var(--mnav-text-2);
    }

    .mnav-svc__arrow {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: var(--accent);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.45s var(--ease-out);
    }

    .mnav-svc__link:is(:hover, :focus-visible) .mnav-svc__arrow {
        transform: translateX(4px);
    }

    .mnav-svc__link:is(:hover, :focus-visible) .mnav-svc__name,
    .mnav-svc__link.is-active .mnav-svc__name {
        color: var(--mnav-gold-hi);
    }

    /* current page: the arrow gives way to a small foil dot */
    .mnav-svc__link.is-active .mnav-svc__arrow {
        visibility: hidden;
    }

    .mnav-svc__link.is-active::after {
        content: '';
        position: absolute;
        right: 13px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, var(--mnav-gold-hi), var(--accent) 60%, var(--mnav-gold-lo));
        box-shadow: 0 0 0 4px rgba(201, 162, 85, 0.14);
    }

    .mnav-svc__link:focus-visible,
    .mnav__page:focus-visible,
    .mnav__contact a:focus-visible,
    .mnav__contact-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ─── Secondary pages ────────────────────────────────────────── */
    .mnav__pages {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    .mnav__page {
        display: flex;
        align-items: center;
        min-height: 52px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        font-family: 'Lora', serif;
        font-size: 1.14rem;
        color: rgba(245, 244, 240, 0.86);
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .mnav__page:is(:hover, :focus-visible, :active) {
        color: var(--mnav-gold-hi);
    }

    /* ─── Footer: consultation + direct contact ──────────────────── */
    .mnav__footer {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 4px;
    }

    .mnav__cta {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 58px;
        padding: 0 22px 0 26px;
        border-radius: 100px;
        font-family: 'Instrument Sans', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--ink);
        text-decoration: none;
        background: linear-gradient(135deg, var(--mnav-gold-hi), var(--accent) 58%, var(--mnav-gold-lo));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.38),
            0 14px 30px -10px rgba(201, 162, 85, 0.45),
            0 6px 14px rgba(0, 0, 0, 0.45);
        transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    }

    /* one slow foil sweep each time the sheet opens */
    .mnav__cta::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 35%, rgba(255, 252, 240, 0.55) 50%, transparent 65%);
        transform: translateX(-110%);
        pointer-events: none;
    }

    html.mnav-open .mnav__cta::after {
        animation: mnav-foil 1.4s var(--ease-out) 0.75s 1 both;
    }

    @keyframes mnav-foil {
        to { transform: translateX(110%); }
    }

    .mnav__cta svg {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.45s var(--ease-out);
    }

    .mnav__cta:is(:hover, :focus-visible) {
        color: var(--ink);
        transform: translateY(-1px);
    }

    .mnav__cta:is(:hover, :focus-visible) svg {
        transform: translateX(4px);
    }

    .mnav__cta:active {
        transform: scale(0.985);
    }

    .mnav__cta:focus-visible {
        outline: 2px solid var(--mnav-gold-hi);
        outline-offset: 4px;
    }

    .mnav__contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mnav__contact a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 50px;
        padding: 0 10px;
        border: 1px solid var(--mnav-line);
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.02);
        font-family: 'Instrument Sans', sans-serif;
        font-size: 0.86rem;
        font-weight: 500;
        color: var(--white);
        text-decoration: none;
        white-space: nowrap;
        transition: border-color 0.25s ease, background-color 0.25s ease;
    }

    .mnav__contact a:is(:hover, :focus-visible, :active) {
        border-color: rgba(201, 162, 85, 0.6);
        background: rgba(201, 162, 85, 0.08);
        color: var(--white);
    }

    .mnav__contact svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        fill: none;
        stroke: var(--accent);
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mnav__contact-link {
        align-self: center;
        padding: 6px 4px;
        font-family: 'Instrument Sans', sans-serif;
        font-size: 0.86rem;
        color: var(--mnav-text-2);
        text-decoration: underline;
        text-decoration-color: rgba(201, 162, 85, 0.45);
        text-underline-offset: 4px;
    }

    .mnav__contact-link:is(:hover, :focus-visible) {
        color: var(--mnav-gold-hi);
    }

    @media (max-width: 374.98px) {
        .mnav-svc__link {
            gap: 12px;
        }

        .mnav .mnav-svc__seal {
            --size: 44px;
        }

        .mnav-svc__name {
            font-size: 1.32rem;
        }

        .mnav-svc__desc {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 359.98px) {
        .mnav__contact {
            grid-template-columns: 1fr;
        }
    }

    /* Tablets: the sheet gets a touch more air */
    @media (min-width: 600px) {
        .mnav__sheet {
            gap: 36px;
            padding-top: 40px;
        }
    }

    /* ─── Toggle (inside the šanón bar) ──────────────────────────── */
    .mnav-toggle {
        position: relative;
        display: grid;
        place-items: center;
        width: clamp(44px, 6vw, 52px);
        height: clamp(44px, 6vw, 52px);
        padding: 0;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        background:
            linear-gradient(180deg, #1c1914, #0b0a08) padding-box,
            linear-gradient(150deg, rgba(244, 224, 172, 0.85), rgba(184, 135, 60, 0.35) 45%, rgba(244, 224, 172, 0.6)) border-box;
        border: 1px solid transparent;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 6px 14px rgba(0, 0, 0, 0.5);
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
    }

    .mnav-toggle:active {
        transform: scale(0.95);
    }

    .mnav-toggle:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

    .mnav-toggle__bars {
        position: relative;
        display: block;
        width: 22px;
        height: 12px;
    }

    .mnav-toggle__bars span {
        position: absolute;
        right: 0;
        height: 1.5px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--mnav-gold-hi, #f4e0ac), var(--accent));
        transition:
            transform 0.5s var(--ease-out),
            width 0.5s var(--ease-out),
            top 0.5s var(--ease-out);
    }

    .mnav-toggle__bars span:first-child {
        top: 0;
        width: 22px;
    }

    .mnav-toggle__bars span:last-child {
        top: 10.5px;
        width: 14px;
    }

    .mnav-toggle:hover .mnav-toggle__bars span:last-child {
        width: 22px;
    }

    .mnav-toggle[aria-expanded="true"] .mnav-toggle__bars span {
        top: 5.25px;
        width: 22px;
    }

    .mnav-toggle[aria-expanded="true"] .mnav-toggle__bars span:first-child {
        transform: rotate(45deg);
    }

    .mnav-toggle[aria-expanded="true"] .mnav-toggle__bars span:last-child {
        transform: rotate(-45deg);
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .mnav,
    html.mnav-open .mnav {
        clip-path: none;
        opacity: 0;
        transition: opacity 0.2s linear;
    }

    html.mnav-open .mnav {
        opacity: 1;
    }

    .mnav__motto,
    .mnav-svc,
    .mnav__pages li,
    .mnav__footer,
    html.mnav-open .mnav__motto,
    html.mnav-open .mnav-svc,
    html.mnav-open .mnav__pages li,
    html.mnav-open .mnav__footer {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.mnav-open .mnav__cta::after {
        animation: none;
    }

    .mnav-toggle__bars span,
    .mnav-svc__seal,
    .mnav-svc__arrow {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .mnav {
        background: Canvas;
    }

    .mnav-toggle__bars span {
        background: CanvasText;
    }
}