/* Use the existing compact header before desktop navigation starts to collide. */
@media (min-width: 769px) and (max-width: 1100px) {
    .header .header-container { padding-inline: 20px; }
    .header .logo,
    .header .search-section,
    .header .search-section__form,
    .header .search-section__bar { display: contents; }

    .header .logo img,
    .header .menu-container,
    .header .user-dropdown,
    .header .project-button,
    .header .search-section__input { display: none; }

    .header .logo-mobile {
        display: block;
        width: 130px !important;
        height: 24px !important;
        flex-shrink: 0;
    }
    .header .header-bars {
        display: block;
        width: 24px;
        height: 24px;
        cursor: pointer;
    }
    .header .search-section__button {
        display: block;
        position: static;
        transform: none;
    }
}

@media (min-width: 1101px) and (max-width: 1300px) {
    .header .header-container { padding-inline: 20px; }
    .header div.header-section:nth-child(2),
    .header div.header-section:nth-child(3) { gap: 16px; }
    .header .search-section { width: 250px; margin-right: 0; }
    .header .project-button a { padding-inline: 16px; white-space: nowrap; }
    .header .menu-button { white-space: nowrap; }
}