/* Mobile navigation interactions follow the selected template's palette. */
.nav-mobile-menu {
    --mobile-hover-bg: #f8f0d9;
    --mobile-hover-ink: #8a681c;
    --mobile-hover-line: #d5ba72;
}
body[data-site-theme="dark-gold"] .nav-mobile-menu {
    --mobile-hover-bg: #2b3024;
    --mobile-hover-ink: #e4cfa1;
    --mobile-hover-line: #a98e55;
}
body[data-site-theme="soft-aisle"] .nav-mobile-menu {
    --mobile-hover-bg: #f7eee9;
    --mobile-hover-ink: #935f49;
    --mobile-hover-line: #d8b5a4;
}
body[data-site-theme="olive-garden"] .nav-mobile-menu {
    --mobile-hover-bg: #e1e8dc;
    --mobile-hover-ink: #3b4f43;
    --mobile-hover-line: #9caa90;
}
body[data-site-theme="blue-love"] .nav-mobile-menu {
    --mobile-hover-bg: #e2eff6;
    --mobile-hover-ink: #315f7b;
    --mobile-hover-line: #8ba8bd;
}
.nav-mobile-menu > a:is(:hover, :active, :focus-visible) {
    background: var(--mobile-hover-bg);
    color: var(--mobile-hover-ink);
    border-bottom-color: var(--mobile-hover-line);
}
.nav-mobile-menu > a::before,
.nav-mobile-menu > a::after {
    content: none;
    display: none;
}
.nav-mobile-menu > a:focus-visible {
    outline: 2px solid var(--mobile-hover-line);
    outline-offset: -2px;
}
.nav-mobile-menu > a:focus-visible::before,
.nav-mobile-menu > a:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}
.nav-mobile-menu .mobile-lang-pill:is(:hover, :active, :focus-visible),
.nav-mobile-menu .mobile-lang-pill.active {
    background: var(--mobile-hover-bg);
    color: var(--mobile-hover-ink);
    border-color: var(--mobile-hover-line);
}

/* Entrance staggering must not delay pointer/touch feedback. */
.nav-mobile-menu > a {
    letter-spacing: normal;
    transition: opacity .18s ease, transform .18s ease,
        color .1s ease, background-color .1s ease, border-color .1s ease;
}
.nav-mobile-menu.open > a:nth-child(n) { transition-delay: 0s; }
.nav-mobile-menu > a:is(:hover, :active, :focus-visible) { letter-spacing: normal; }