/* Navbar should always be able to wrap, with wrapped items right-aligned */
header.fixed nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}

header.fixed nav > a:first-child {
    margin-right: auto;
}

/* Responsive navbar for mobile */
@media (max-width: 600px) {
    header.fixed nav {
        padding: 0.25rem;
        gap: 0.25rem;
    }

    header.fixed nav .site-title {
        font-size: 1rem !important;
    }

    header nav > a > span,
    header nav > button > span {
        display: none;
    }

    header nav > button > i.arrow-icon {
        display: none;
    }

    .nav-search-toggle {
        display: flex !important;
    }

    .nav-search-inline {
        display: none !important;
    }

    .nav-search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 0.5rem;
        background: var(--surface);
        border-bottom: 1px solid var(--outline-variant);
        z-index: 100;
        display: none;
        gap: 0.5rem;
    }

    .nav-search-overlay.active {
        display: flex;
    }

    .nav-search-overlay .field {
        flex: 1;
        margin: 0 !important;
    }
}

@media (min-width: 601px) {
    .nav-search-toggle {
        display: none !important;
    }

    .nav-search-inline {
        display: flex !important;
    }

    .nav-search-overlay {
        display: none !important;
    }
}

/* Dialog responsive */
@media (max-width: 600px) {
    dialog {
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        margin: 1rem;
    }
}

/* Card form responsive on small screens */
@media (max-width: 400px) {
    .card-form {
        max-width: none;
        margin: 0 0.5rem;
    }

    .center-page {
        padding: 1rem;
    }
}

/* Admin tabs: horizontal scroll on small screens */
@media (max-width: 600px) {
    nav.tabbed {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    nav.tabbed::-webkit-scrollbar {
        display: none;
    }

    nav.tabbed > a {
        flex-shrink: 0;
        padding: 0.5rem 0.75rem !important;
    }

    nav.tabbed > a > div {
        display: none;
    }
}

/* Page-level navbars: wrap and icon-only buttons on mobile */
@media (max-width: 600px) {
    .page-nav {
        flex-wrap: wrap;
    }

    .page-nav > .button > span,
    .page-nav > a.button > span,
    .page-nav > form > .button > span {
        display: none;
    }

    .page-nav > .button.back-btn > span {
        display: inline;
    }
}

/* Home page title row */
@media (max-width: 600px) {
    .wishes-header {
        flex-wrap: wrap;
    }

    .wishes-header .wishes-title {
        margin-right: 0.5rem;
    }
}

/* Keep text visible for buttons that need it */
.keep-text > span {
    display: inline !important;
}