/* The public site header, reproduced for the sign-in screens so that arriving from
   routiness.com does not feel like arriving somewhere else. Every value was read off the
   deployed site rather than guessed: the wordmark is 20px/700 uppercase black, the two blocks
   beside it are 13x10 in #2f89fc and #293955, and the links are 13px uppercase.

   The structure is Bootstrap 5 - the bundle is already loaded, and it brings the collapse and
   the dropdown - but the look is written here, because the site is on Bootstrap 4 and its
   navbar classes are not the same ones. */

/* The site is set in Open Sans, this application in Poppins, and the wordmark is the one thing
   a visitor recognises. It has to be stated on the elements rather than inherited: site.css
   carries a universal "* { font-family: Poppins }", and a rule matching an element directly
   always beats a value it would otherwise inherit. The font is loaded by _LayoutEmpty. */
.auth-header,
.auth-header * {
    font-family: "Open Sans", Arial, sans-serif;
}

/* Absolutely positioned, as on the site: the sign-in pages centre their content in a vh-100
   section, and a header in the flow would push that past the fold. */
.auth-header {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 3;
}

.auth-header .navbar {
    padding: 8px 0;
}

.auth-header__inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.auth-header__brand {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    padding: 5px 0;
    text-transform: uppercase;
    text-decoration: none;
}

.auth-header__brand:hover,
.auth-header__brand:focus {
    color: #999;
}

.auth-header__mark {
    display: inline-block;
    width: 13px;
    height: 10px;
}

.auth-header__mark--blue {
    background: #2f89fc;
}

.auth-header__mark--navy {
    background: #293955;
}

/* Three classes, not two: Bootstrap ships .navbar-expand-lg .navbar-nav .nav-link with 8px of
   side padding, which outranks a shorter selector and left HOME pressed against the language
   selector. This ties on specificity and wins on order, being loaded after it. */
.auth-header .navbar-nav .nav-link {
    color: #000;
    font-size: 13px;
    font-weight: 400;
    padding: 8px 20px;
    text-transform: uppercase;
}

.auth-header .navbar-nav .nav-link:hover,
.auth-header .navbar-nav .nav-link:focus {
    color: #2f89fc;
}

.auth-header__flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    vertical-align: middle;
}

.auth-header__toggle {
    border: 0;
    padding: 0 4px;
    background: transparent;
    color: #000;
    font-size: 28px;
    line-height: 1;
}

.auth-header__toggle:focus {
    box-shadow: none;
    outline: 0;
}

/* The menu, matched to the site rather than left on Bootstrap defaults: a 10px radius, a soft
   shadow instead of a border, 180px wide, and items at 14.4px with room to breathe. The
   selected language is a pale blue panel with blue text, which is what the site does - not the
   solid blue bar with white text that Bootstrap gives an .active dropdown item. */
.auth-header__lang-menu {
    min-width: 180px;
    padding: 6px 0;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 34px -20px rgba(0, 0, 0, 0.41);
}

.auth-header__lang-menu .dropdown-item {
    padding: 7px 16px;
    color: #212529;
    font-size: 14.4px;
    line-height: 25.92px;
}

.auth-header__lang-menu .dropdown-item.active,
.auth-header__lang-menu .dropdown-item:active {
    color: #2f6fed;
    background-color: #f1f6fd;
    font-weight: 600;
}

/* Below the breakpoint the navbar collapses, so the header returns to the flow: an open menu
   floating over a centred form would cover the very fields it sits above, and there is no room
   to overlay anything on a phone. The panel gets a background of its own for the same reason -
   the header itself is transparent. */
@media (max-width: 991.98px) {
    .auth-header {
        position: static;
    }

    .auth-header .navbar {
        padding: 12px 0;
    }

    .auth-header .navbar-collapse {
        margin-top: 8px;
        padding: 8px 0;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .auth-header .navbar-nav .nav-link {
        padding: 10px 16px;
    }
}

/* The heading icon on the sign-in screen. Sized in em so it follows the heading rather than
   fixing it, and in the same blue as the blocks beside the wordmark, so the page and the header
   agree on what the brand colour is. */
.auth-heading-icon {
    color: #2f89fc;
    margin-right: 0.7rem;
    font-size: 1.1em;
    vertical-align: -2px;
}