.er-section-nav {
    position: relative;
    z-index: 20;
    background: rgba(251, 247, 236, 0.96);
    border-top: 1px solid var(--er-rule);
    border-bottom: 1px solid var(--er-rule-hair);
    backdrop-filter: blur(14px);
}

.er-section-nav,
.er-section-nav * {
    box-sizing: border-box;
}

.er-section-nav__inner {
    width: min(var(--er-container), calc(100% - 32px));
    margin: 0 auto;
    padding: 10px 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.er-section-nav__label {
    font-family: var(--er-mono);
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: var(--er-tracking-meta);
    text-transform: uppercase;
    color: var(--er-ink-3);
    white-space: nowrap;
}

.er-section-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    overflow: visible;
}

.er-section-nav__item {
    margin: 0;
    padding: 0;
}

.er-section-nav__link,
.er-section-nav__menu-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--er-rule);
    border-radius: var(--er-r-md);
    background: rgba(246, 241, 228, 0.72);
    color: var(--er-ink-2);
    font-family: var(--er-sans);
    font-size: 0.875rem;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.er-section-nav__link {
    padding: 10px 13px;
}

.er-section-nav__link:hover,
.er-section-nav__link:focus-visible,
.er-section-nav__menu-link:hover,
.er-section-nav__menu-link:focus-visible {
    border-color: rgba(142, 78, 46, 0.38);
    background: rgba(255, 255, 240, 0.92);
    color: var(--er-clay-deep);
    outline: none;
}

.er-section-nav__link:focus-visible,
.er-section-nav__menu-link:focus-visible,
.er-section-nav__menu summary:focus-visible {
    box-shadow: 0 0 0 3px rgba(179, 106, 69, 0.22);
}

.er-section-nav__link[aria-current="true"],
.er-section-nav__menu-link[aria-current="true"] {
    border-color: rgba(142, 78, 46, 0.48);
    background: var(--er-paper);
    color: var(--er-clay-deep);
}

.er-section-nav__menu {
    display: none;
    min-width: 0;
}

.er-section-nav__menu summary {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--er-rule-hair);
    border-radius: var(--er-r-md);
    background: var(--er-paper);
    color: var(--er-ink);
    cursor: pointer;
    list-style: none;
    position: relative;
}

.er-section-nav__menu summary::-webkit-details-marker {
    display: none;
}

.er-section-nav__menu summary span {
    font-family: var(--er-mono);
    font-size: 0.75rem;
    letter-spacing: var(--er-tracking-meta);
    text-transform: uppercase;
    color: var(--er-ink-3);
}

.er-section-nav__menu summary strong {
    min-width: 0;
    font-family: var(--er-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: right;
    color: var(--er-clay-deep);
    overflow-wrap: anywhere;
}

.er-section-nav__menu summary::after {
    content: "";
    width: 8px;
    height: 8px;
    justify-self: end;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    grid-column: 3;
    margin-top: -4px;
}

.er-section-nav__menu[open] summary::after {
    transform: rotate(225deg);
    margin-top: 4px;
}

.er-section-nav__menu-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 0 2px;
}

.er-section-nav__menu-link {
    width: 100%;
    padding: 11px 13px;
}

:where(.er-city-hub-v1 .city-v1-section, .er-city-hub-v1 .city-hub-suggested, .er-saint-v1__section, .er-place-v1__section) {
    scroll-margin-top: 112px;
}

body.admin-bar :where(.er-city-hub-v1 .city-v1-section, .er-city-hub-v1 .city-hub-suggested, .er-saint-v1__section, .er-place-v1__section) {
    scroll-margin-top: 146px;
}

@media (max-width: 960px) {
    .er-section-nav__inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .er-section-nav__label,
    .er-section-nav__list {
        display: none;
    }

    .er-section-nav__menu {
        display: block;
    }
}

@media (max-width: 782px) {
    body.admin-bar :where(.er-city-hub-v1 .city-v1-section, .er-city-hub-v1 .city-hub-suggested, .er-saint-v1__section, .er-place-v1__section) {
        scroll-margin-top: 160px;
    }
}

@media (max-width: 520px) {
    .er-section-nav__inner {
        width: min(100% - 24px, var(--er-container));
    }

    .er-section-nav__menu summary {
        grid-template-columns: 1fr auto;
        gap: 4px;
    }

    .er-section-nav__menu summary strong {
        text-align: left;
        grid-column: 1;
    }

    .er-section-nav__menu summary::after {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .er-section-nav__link,
    .er-section-nav__menu-link {
        transition: none;
    }
}