.main-navigation { --nav-gap: 24px; font-size: 14px; }
.main-navigation > .nav-link::after, .main-navigation > .nav-dropdown::after {
    display: block; inset: auto 0 1px; height: 3px;
}
@media (min-width: 851px) {
    .masthead { gap: 20px; }
    .main-navigation { justify-content: center; gap: var(--nav-gap); }
    .main-navigation > .nav-link, .main-navigation > .nav-dropdown {
        flex: 0 0 auto; height: auto; align-self: center; padding: 4px 0 11px; margin-inline: 0; line-height: 1.3;
    }
    .main-navigation > .nav-dropdown > summary { padding: 0; }
    .main-navigation > .nav-link + .nav-link::before {
        content: ""; position: absolute; inset-inline-start: calc(var(--nav-gap) / -2); top: 1.5px; width: 1px; height: 23px;
        background: var(--muted); opacity: .7; pointer-events: none;
    }
}
@media (min-width: 851px) and (max-width: 1320px) {
    .masthead { flex-wrap: wrap; row-gap: 0; padding-top: 12px; }
    .main-navigation { order: 3; flex-basis: 100%; min-height: 44px; }
    .header-actions { margin-left: auto; }
}
@media (min-width: 851px) and (max-width: 1000px) {
    .main-navigation { --nav-gap: clamp(16px, calc(10vw - 69px), 24px); }
}
@media (max-width: 850px) {
    .main-navigation > .nav-link, .main-navigation > .nav-dropdown { align-self: stretch; padding: 13px 0; }
}

/* Category branches share one clear, keyboard-accessible disclosure. */
.main-navigation > .nav-dropdown > summary > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; color: var(--accent); background: transparent; border: 0; }
.main-navigation > .nav-dropdown > summary > span .fa-icon { width: 10px; height: 10px; }

.main-navigation > .nav-dropdown > .nav-dropdown-panel { min-width: 200px; }
@media (min-width: 851px) {
    html:not([data-layout-mode="social"]) .main-navigation > :is(.nav-link, .nav-dropdown) + :is(.nav-link, .nav-dropdown)::before { content: ""; position: absolute; inset-inline-start: calc(var(--nav-gap) / -2); top: 1.5px; width: 1px; height: 23px; background: var(--muted); opacity: .7; pointer-events: none; }
}
@media (max-width: 850px) {
    html .publication .site-header .main-navigation > .nav-dropdown { padding-block: 0; }
    html .publication .main-navigation > .nav-dropdown > summary { padding-block: 12px; }
}
html[data-layout-mode="social"] .main-navigation > .nav-dropdown { display: block; flex: none; align-self: stretch; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; }
html[data-layout-mode="social"] .main-navigation > .nav-dropdown::before,
html[data-layout-mode="social"] .main-navigation > .nav-dropdown::after { content: none; }
html[data-layout-mode="social"] .main-navigation > .nav-dropdown > summary { min-height: 42px; padding: 9px 14px; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; }
html[data-layout-mode="social"] .main-navigation > .nav-dropdown[open] > summary { color: var(--accent); background: var(--accent-soft); }
html[data-layout-mode="social"] .main-navigation .nav-dropdown-panel { position: static; width: auto; min-width: 0; max-width: none; margin: 4px 0 6px 12px; padding: 4px; border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--surface); box-shadow: none; }
html[data-layout-mode="social"] .main-navigation .nav-dropdown-panel > .nav-link { min-height: 32px; padding: 7px 10px; font-size: 12px; }
@media (min-width: 701px) and (max-width: 1100px) {
    html[data-layout-mode="social"] .main-navigation > .nav-dropdown > summary { font-size: 14px; }
}
@media (max-width: 700px) {
    html[data-layout-mode="social"] .main-navigation > .nav-dropdown { align-self: flex-start; }
    html[data-layout-mode="social"] .main-navigation > .nav-dropdown > summary { min-height: 36px; padding: 8px 12px; font-size: 12px; }
    html[data-layout-mode="social"] .main-navigation:has(> .nav-dropdown[open]) { align-items: flex-start; }
}

/* A yellow edge follows the hovered or keyboard-focused subcategory. */
.main-navigation .nav-dropdown-panel > .nav-link { position: relative; }
.main-navigation .nav-dropdown-panel > .nav-link::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 6px; width: 3px; background: #f4c430; transform: scaleY(0); transform-origin: center; transition: transform .16s ease; pointer-events: none; }
.main-navigation .nav-dropdown-panel > .nav-link:is(:hover, :focus-visible)::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
    .main-navigation .nav-dropdown-panel > .nav-link::before { transition: none; }
}

/* Keep the yellow edge as the only hover and keyboard-focus decoration. */
.main-navigation .nav-dropdown-panel { border-color: var(--line); }
html[data-layout-mode="social"] .main-navigation .nav-dropdown-panel { border-left: 1px solid var(--line); }
.main-navigation .nav-dropdown-panel > .nav-link:is(:hover, :focus-visible) { outline: none; box-shadow: none; background: transparent; color: var(--ink); }

/* Slightly smaller submenu without changing the main navigation. */
html:not([data-layout-mode="social"]) .main-navigation .nav-dropdown-panel > .nav-link { padding: 8px 11px; }
@media (min-width: 851px) {
    html:not([data-layout-mode="social"]) .main-navigation .nav-dropdown-panel { width: 160px; min-width: 140px; padding: 5px; }
}