/* Load after the theme so wrapped navigation always contributes to header height. */
.topbar {
    height: auto;
    min-height: 76px;
    flex-wrap: wrap;
}
.topbar nav, .account { flex-wrap: wrap; min-width: 0; }
.account { padding-block: 8px; }
.account > span { overflow-wrap: anywhere; }
.menu-toggle { display: none; }
.page-heading, .detail-heading, .heading-actions, .detail-heading-actions { flex-wrap: wrap; }
.page-heading > *, .detail-heading > * { min-width: 0; }

@media (max-width: 1200px) {
    .topbar {
        position: relative;
        gap: 12px;
        padding: 12px 16px;
        min-height: 68px;
    }
    .topbar .brand { flex: 1; white-space: normal; font-size: 18px; }
    .brand::before { flex-shrink: 0; }
    .menu-toggle:not([hidden]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid var(--r-line);
        border-radius: 12px;
        background: var(--r-blue-pale);
        color: var(--r-ink);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }
    .topbar nav, .topbar .account {
        flex: 0 0 100%;
        order: 3;
        gap: 4px 12px;
        padding-block: 12px 0;
        border-top: 1px solid var(--r-line);
    }
    .topbar[data-menu-expanded="false"] nav,
    .topbar[data-menu-expanded="false"] .account { display: none; }
    .topbar nav a, .topbar .account > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 8px;
        font-size: 14px;
        white-space: normal;
    }
    .topbar .account > span { display: none; }
    .topbar nav a::after { bottom: 4px; }
    .menu-toggle:focus-visible, .topbar a:focus-visible {
        outline: 3px solid var(--r-blue);
        outline-offset: 3px;
    }
}

@media (max-width: 760px) {
    .page { padding-top: 24px; }
    .page-heading, .detail-heading { align-items: flex-start; }
    .page-heading > .heading-actions {
        width: 100%;
        flex-direction: row;
        align-items: stretch;
    }
    .heading-actions > a, .heading-actions > button {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .admin-heading-actions .secondary-link,
    .admin-heading-actions .button {
        flex-shrink: 1;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        white-space: normal;
    }
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
}