/* ==========================================================================
   2NetSolutions header customisations
   Every rule is scoped to .header-3.nts-hdr, a class only the updated header
   has, so other pages and the shared rules in style.css / responsive.css are
   not affected.
   - Logo: 247px wide on desktop, 150% of the previous 165px (client reference)
   - "Client Login" dropdown at the end of the main menu
   - Mobile: logo shrinks to fit beside the menu button; dropdowns open on tap
   ========================================================================== */

/* Menu labels stay on one line */
.header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item .nav-link {
    white-space: nowrap;
}

/* ---------- Laptop and desktop (992px and up) ---------- */
@media (min-width: 992px) {
    /* Columns size to their content so the bigger logo and the extra
       menu item fit on one row */
    .header-3.nts-hdr .nts-hdr-row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .header-3.nts-hdr .nts-hdr-brand,
    .header-3.nts-hdr .nts-hdr-actions-col {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .header-3.nts-hdr .nts-hdr-menu-col {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .header-3.nts-hdr .nts-hdr-logo img {
        width: 247px;
        max-width: none;
    }

    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item .nav-link {
        margin: 0 18px;
    }

    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item:first-child .nav-link {
        margin-left: 0;
    }

    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item:last-child .nav-link {
        margin-right: 0;
    }

    /* Dropdowns also open on click, tap and keyboard (Bootstrap adds .show),
       not only on mouse hover */
    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        margin-top: 0;
    }
}

/* ---------- Laptop (992px to 1199px) ----------
   Same width as the page content (Bootstrap's 960px container) */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-3.nts-hdr .this-container {
        max-width: 960px;
    }
}

/* ---------- Desktop (1200px and up) ----------
   The header uses the homepage's 1170px container on every page (the
   template's .this-container rule made it 1460px on inner pages), so it lines
   up with the page below. The menu spreads evenly between the logo and the
   buttons, and the buttons are slightly slimmer to make room for "Client Login". */
@media (min-width: 1200px) {
    .header-3.nts-hdr .this-container {
        max-width: 1170px;
    }

    .header-3.nts-hdr .mainmenu .navbar .navbar-nav {
        width: 100%;
        justify-content: space-between;
        padding: 0 12px;
    }

    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item .nav-link {
        margin: 0;
    }

    .header-3.nts-hdr .support-area ul li {
        margin-right: 10px;
    }

    .header-3.nts-hdr .support-area ul li:last-child {
        margin-right: 0;
    }

    .header-3.nts-hdr .support-area ul li a.quote-button {
        padding: 0 24px;
    }
}

/* ---------- Tablet and mobile (991px and below) ---------- */
@media (max-width: 991px) {
    /* Logo and menu button share one row; the logo shrinks to fit
       instead of running under the button on small phones */
    .header-3.nts-hdr .nts-hdr-brand-row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .header-3.nts-hdr .nts-hdr-logo-col {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        padding-right: 12px;
    }

    .header-3.nts-hdr .nts-hdr-toggle-col {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding-left: 0;
    }

    .header-3.nts-hdr .nts-hdr-logo a {
        display: inline-block;
        max-width: 100%;
    }

    .header-3.nts-hdr .nts-hdr-logo img {
        width: 320px;
        max-width: 100%;
        height: auto;
    }

    /* "Client Login" is the last menu item: keep its dropdown attached to it
       and put the menu's bottom spacing under the dropdown instead */
    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item.nts-hdr-client .nav-link {
        margin-bottom: 1px;
    }

    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item.nts-hdr-client {
        margin-bottom: 15px;
    }

    /* Dropdowns open and close on tap */
    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.show {
        display: block;
    }
}

/* Touch screens: no hover-only opening, so a second tap closes the dropdown */
@media (max-width: 991px) and (hover: none) {
    .header-3.nts-hdr .mainmenu .navbar .navbar-nav .nav-item.dropdown:hover .dropdown-menu:not(.show) {
        display: none;
    }
}