/* Header top row while the quality pages are on (flag pep_quality_pages_enabled).
   Before: 64px between items (25px margins each side + a 14px flex gap), labels allowed to wrap, a
   300px search field at every desktop width — so "Why Us?", "Testing & QA" and "Analytical Labs"
   broke onto two lines from 1440 down. After: the same face (Inter 500, ink, pink hover), a label
   never wraps, the gaps are even and quiet, and the search field yields first: below 1280 it folds
   behind its icon exactly the way the phone header already does (same markup, same common.js). */

@media (min-width: 992px) {
    header.main-head > .container { max-width: calc(100% - 32px); }
    header.main-head .navbar { gap: 16px; }
    header.main-head .navbar-nav { gap: 0; }
    header.main-head .navbar-nav > li { margin: 0 9px; }
    header.main-head .navbar-nav > li:first-child { margin-left: 0; }
    header.main-head .navbar-nav > li:last-child { margin-right: 0; }
    header.main-head .navbar-nav > li.menu-item-has-children { padding-right: 20px; }
    header.main-head .navbar-nav li a { white-space: nowrap; font-size: 13.5px; letter-spacing: 0; }
    header.main-head .navbar-collapse { flex: 0 0 auto; }
}

/* 992–1279: the search field folds behind its icon (the phone pattern from style.css) */
@media (min-width: 992px) and (max-width: 1279px) {
    header.main-head .mobile-search { display: flex; }
    header.main-head .header-search { margin-right: 6px; }
    header.main-head .header-search-form {
        width: 100%; display: flex; align-items: center; padding: 22px 32px;
        position: fixed; left: 0; right: 0; top: 0; z-index: 40;
        transform: translateY(-100%); background: var(--light-gray, #f5f5f7);
        transition: transform .3s ease-in-out;
    }
    header.main-head .header-search-form.show { transform: translateY(0); }
    header.main-head .header-search-close { display: flex; }
    header.main-head .header-search-form .dgwt-wcas-search-wrapp { min-width: 0; max-width: 720px; flex: 1 1 auto; margin: 0 auto; }
}

@media (min-width: 1200px) {
    header.main-head > .container { max-width: calc(100% - 40px); }
    header.main-head .navbar { gap: 20px; }
    header.main-head .navbar-nav > li { margin: 0 10px; }
}

@media (min-width: 1280px) {
    header.main-head .navbar { gap: 22px; }
    header.main-head .navbar-nav > li { margin: 0 10px; }
    header.main-head .dgwt-wcas-search-wrapp { min-width: 160px; max-width: 200px; flex: 1 1 160px; }
}

@media (min-width: 1440px) {
    header.main-head > .container { max-width: min(1760px, calc(100% - 80px)); }
    header.main-head .navbar { gap: 32px; }
    header.main-head .navbar-nav > li { margin: 0 12px; }
    header.main-head .navbar-nav li a { font-size: 14.5px; }
    header.main-head .dgwt-wcas-search-wrapp { min-width: 240px; max-width: 280px; }
}

@media (min-width: 1680px) {
    header.main-head .navbar { gap: 44px; }
    header.main-head .navbar-nav > li { margin: 0 16px; }
    header.main-head .dgwt-wcas-search-wrapp { min-width: 300px; max-width: 340px; }
}