/* ==========================================================================
   INOSSI — Mobile navigation overlay.
   Everything here is reached only through #mobile-nav, which nav.js builds
   and only 18 pages contain — desktop (>=768px hides the trigger buttons via
   navigation.css) never sees any of this.
   ========================================================================== */

/* The `hidden` attribute's UA-stylesheet `display:none` loses to any
   author-stylesheet rule of equal specificity that also sets `display`
   (e.g. `.mnav{ display:flex }` below) — these rules reassert it with higher
   specificity so hidden panels/popular-chips actually stay hidden. Well-known
   CSS interaction, not a hack around this file's own architecture. */
#mobile-nav[hidden],
#mobile-nav .mnav__search-popular[hidden] {
    display: none;
}

.mnav {
    position: fixed;
    top: var(--header-h, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background-color: var(--color-bg, #fff);
    opacity: 0;
    transition: opacity 200ms var(--ease-standard, ease);
}
.mnav.is-open {
    opacity: 1;
}

body.mnav-lock {
    width: 100%;
}

/* -------------------------------------------------------------- viewport - */
.mnav__viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* The rail (Vitra mechanics): every panel is a same-width slot inside this
   track, laid out side by side. Only the track's own transform ever
   animates (350ms, matches the measured vitra.com timing) — panels keep
   whatever slot they already had unless their place in the stack actually
   changed, so a panel already on screen never moves when navigating deeper
   or back. See nav.js `layout()` for how slots are assigned. */
.mnav__track {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 350ms var(--ease-in-out, ease-in-out);
}
.mnav__panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 20px 32px;
    background-color: var(--color-bg, #fff);
    /* Only actually animates for a same-depth sibling swap (goTo): the two
       panels involved get different slot values while the track itself
       doesn't move. During push/pop every panel keeps its existing slot
       value, so this transition simply never triggers for them. */
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------- back row - */
/* First child of every sub-panel (main has none — it's the root). Sits
   inside the panel's own 24px top padding, same box model as .mnav__row
   below, so it lands at exactly the vertical position "Home" occupies on
   the main panel — no separate offset math to keep in sync. Sticky within
   the panel's own scroll container so it survives scrolling the list. */
/* z-index 2, not 1: the Treatments panel's category headings are also sticky
   and come later in the DOM, so they'd otherwise paint over this row as they
   slide underneath it. */
.mnav__panel-back {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 18px 4px;
    background-color: var(--color-bg, #fff);
    border-bottom: 1px solid var(--color-accent-soft, #ddcdbc);
}
/* The 44px touch target (required min size, see CLAUDE.md) is taller than
   this row's own text content — kept out of normal flow so it can't inflate
   the row past .mnav__row's height, which is what actually has to match.
   Centred over the row via top:50%, floating on the sticky positioned
   ancestor rather than a relative wrapper made just for this. */
.mnav__panel-back-title {
    display: block;
    padding: 0 44px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.4rem;
    color: var(--color-ink, #000);
}
/* Only the Treatments panel's title is a link (through to the services hub).
   Left visually identical to the plain title on every other panel — no
   underline, per Pasha 03.08.2026. The padding grows the tap target from the
   row's 27px content box past the required 44px, and the equal negative
   margin hands the row back its original height — this row's height has to
   keep matching .mnav__row. */
.mnav__panel-back-title--link {
    padding-top: 9px;
    padding-bottom: 9px;
    margin-top: -9px;
    margin-bottom: -9px;
    text-decoration: none;
}
.mnav__back {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-ink, #000);
    cursor: pointer;
}

.mnav__panel-title {
    margin: 4px 0 20px;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    font-weight: 500;
}

/* ------------------------------------------------------------------ rows - */
.mnav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 18px 4px;
    border: 0;
    border-bottom: 1px solid var(--color-accent-soft, #ddcdbc);
    background: none;
    text-align: left;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.4rem;
    color: var(--color-ink, #000);
    cursor: pointer;
}
.mnav__row-arrow {
    flex: 0 0 auto;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1.1rem;
    color: var(--color-text-muted, #6b6b6b);
}
.mnav__main-list,
.mnav__treatment-list {
    display: flex;
    flex-direction: column;
}

/* Section headings that are also links, through to this category preselected
   on the services hub. Deliberately sans-serif (Lato) against the serif
   (Cormorant) treatment names below them, the same contrast principle
   already used for kickers elsewhere on the site.

   Sticky within its own .mnav__cat section only — that wrapper is what
   confines the sticky range, so each heading pins directly beneath the back
   row while its own treatments scroll past, then releases as the next
   category's heading pushes it out. Identical mechanism to
   .radial__panel-heading inside .radial__panel on the services hub.
   --mnav-back-h is measured live in nav.js so this sits flush under the real
   back row rather than a guessed constant; z-index stays below that row's 2
   so the heading disappears underneath it rather than over it. */
.mnav__cat-heading {
    position: sticky;
    top: var(--mnav-back-h, 64px);
    z-index: 1;
    margin: 0;
    border-bottom: 1px solid var(--color-accent-soft, #ddcdbc);
    background-color: var(--color-bg, #fff);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink, #000);
}
/* Padding lives on the link, not the heading, so the whole row is tappable
   (its 55px height already clears the 44px minimum). No underline and no
   trailing arrow — per Pasha 03.08.2026 these headings stay visually plain
   dividers even though they now navigate. */
.mnav__cat-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 4px;
    color: inherit;
    text-decoration: none;
}
.mnav__cat-num {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-accent-text, #856828);
}
.mnav__row--treatment {
    align-items: flex-start;
    font-size: 1.375rem;
}
.mnav__row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mnav__row-meta {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    color: var(--color-text-muted, #6b6b6b);
}

/* ----------------------------------------------------------------- search - */
.mnav__search-field {
    margin-bottom: 16px;
}
.mnav__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mnav__search-input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: var(--radius-sm, 5px);
    background-color: var(--color-band, #f8f4ee);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
}
.mnav__search-input:focus-visible {
    outline: 2px solid var(--color-focus, #d2ab66);
    outline-offset: 2px;
}
.mnav__search-popular {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mnav__chip {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: 999px;
    background: none;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.85rem;
    color: var(--color-text-muted, #6b6b6b);
    cursor: pointer;
}
.mnav__search-empty {
    margin: 12px 0;
    font-family: var(--font-body, 'Lato', sans-serif);
    color: var(--color-text-muted, #6b6b6b);
}

/* --------------------------------------------------------------- location - */
.mnav__location-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mnav__location-item {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-accent-soft, #ddcdbc);
    cursor: pointer;
}
.mnav__location-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.mnav__location-name {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.3rem;
}
.mnav__location-check {
    color: var(--color-accent, #d2ab66);
}
.mnav__location-address,
.mnav__location-hours {
    margin: 2px 0;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    color: var(--color-text-muted, #6b6b6b);
}
.mnav__location-link {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    text-decoration: underline;
}

/* ------------------------------------------------------- treatment detail - */
/* Opened by tapping a row in the Treatments list or a search result.
   .mnav__detail-media/--photo mirror .radial__card-media/-icon/-photo in
   services-hub.css (same black/cover treatment now that all 12 services have
   a real photo, 08.08.2026) — reusing the already-approved card visual, not
   inventing a new one. The gradient/contain icon treatment stays in the CSS
   for a future 13th service, not currently used. */
.mnav__detail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mnav__detail-script {
    margin: 0;
    font-family: var(--font-accent, 'tyScript', 'classicaOne', cursive);
    font-size: clamp(1.6rem, 5vw, 2rem);
    color: var(--color-accent, #d2ab66);
}
.mnav__detail-meta {
    margin: 4px 0 0;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    color: var(--color-text-muted, #6b6b6b);
}
.mnav__detail-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-top: 12px;
    overflow: hidden;
    border-radius: var(--radius-sm, 5px);
    background: linear-gradient(155deg, var(--color-accent-soft, #ddcdbc), var(--color-band, #f8f4ee));
}
.mnav__detail-media img {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    object-fit: contain;
    opacity: 0.82;
}
.mnav__detail-media--photo {
    background-color: var(--color-ink, #000);
}
.mnav__detail-media--photo img {
    padding: 0;
    object-fit: cover;
    opacity: 1;
}
.mnav__detail-desc {
    margin: 12px 0 0;
    color: var(--color-text-muted, #6b6b6b);
}
.mnav__detail-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.mnav__detail-link {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    color: var(--color-ink, #000);
    text-decoration: underline;
}

/* ----------------------------------------------------------------- footer - */
/* No longer pinned under the viewport (that ate ~200px of screen height on
   every panel, per Pasha) — this is now the last thing in each panel's own
   scrollable content, right after the padding: 24px 20px 32px on
   .mnav__panel already used elsewhere gives it room to breathe below. */
.mnav__footer {
    margin-top: 32px;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-accent-soft, #ddcdbc);
    text-align: center;
}
.mnav__footer-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 12px;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.8rem;
    color: var(--color-text-muted, #6b6b6b);
}
.mnav__book {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 48px;
}
.mnav__social {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.mnav__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-ink, #000);
}
.mnav__utility {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.8rem;
    color: var(--color-text-muted, #6b6b6b);
}
.mnav__phone {
    color: inherit;
}
.mnav__lang {
    display: flex;
    gap: 8px;
}
.mnav__lang a {
    min-width: 32px;
    text-align: center;
    color: inherit;
}
.mnav__lang a[aria-current="true"] {
    color: var(--color-ink, #000);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .mnav,
    .mnav__track,
    .mnav__panel {
        transition: none !important;
    }
}

@media (min-width: 768px) {
    .mnav {
        display: none;
    }
}