/*
 *  nb_header.css
 *
 *  New-branding header logo (images/nb/usa-logo.svg, 126x46 intrinsic).
 *
 *  The AMMS header was built around the portrait shield mark
 *  (icons/logo.png, 964x1501), which style.css absolutely positions so it
 *  overhangs the bottom of the header bar:
 *
 *      .header-left           { padding: 0 20px 0 50px }
 *      .header-left .logo     { position: relative; width: 90px;
 *                               margin-left: 30px }
 *      .header-left .logo img { position: absolute; top: 22px;
 *                               width: 100%; max-width: 90px }
 *
 *  The new mark is a horizontal lockup, not a hanging shield, so the
 *  overhang is removed and the mark is centred in the bar instead -- which
 *  is how the reference site treats it (`<img class="h-full w-40">` in an
 *  `h-20 flex items-center` bar).
 *
 *  IMPORTANT -- why sizes are explicit px and not `width: 100%`:
 *  AMMS could use `width: 100%` because the img was position:absolute, so
 *  the percentage resolved against `.logo` (position:relative). Once the img
 *  returns to static flow the percentage resolves against its parent <a>,
 *  whose width is derived from its own content -- a circular dependency that
 *  collapses to the SVG's intrinsic 126x46. Explicit px sizing avoids it.
 *
 *  Selectors MIRROR the originals in style.css so specificity matches
 *  exactly; this file loads after style.min.css in css.html, so it wins on
 *  document order. The `.sticky` rules are (0,6,1) and need their own
 *  overrides -- the base (0,5,1) rules cannot reach them.
 *
 *  Note on the box: the SVG keeps its 2.739 aspect (preserveAspectRatio
 *  defaults to `xMidYMid meet`), so inside a 160x79 box the visible mark is
 *  160x58, centred. This mirrors the reference. To make the mark itself 79px
 *  tall instead, the width would need to be ~216px.
 *
 *  The mark is now the raster lockup images/nb/usa-logo.png (1500x611,
 *  aspect 2.455). Raster images do not letterbox themselves the way SVG
 *  preserveAspectRatio does, so every img rule carries `object-fit:
 *  contain` to reproduce the same centred, undistorted fit in the boxes.
 */


/* ------------------------------------------------------------------
 *  Desktop -- default (unscrolled) state, 108px bar
 * ------------------------------------------------------------------ */

/*  50px inset -> 30px, measured from the viewport edge.  */
header .header-desktop .header-container .header-left {
    padding-left: 30px;
}

header .header-desktop .header-container .header-left .logo {
    width: 160px;
    display: flex;
    align-items: center;
    margin-left: 0;
    margin-right: 10px;
}

/*  style.css has no `.logo a` rule at all, so the anchor is a bare inline
    box. Made a full-height flex row so the mark centres in the bar.  */
header .header-desktop .header-container .header-left .logo a {
    display: flex;
    align-items: center;
    height: 100%;
}

header .header-desktop .header-container .header-left .logo img {
    position: static;
    top: auto;
    width: 160px;
    height: 79px;
    max-width: none;
    object-fit: contain;
}


/* ------------------------------------------------------------------
 *  Desktop -- scrolled/sticky state, bar shrinks to 70px
 *  (`header .header-desktop.sticky .header-container { height: 70px }`)
 *  A 79px box will not fit, so the box shortens to 60px. The visible mark
 *  stays 160x58, so the logo does not appear to jump on scroll.
 * ------------------------------------------------------------------ */

header .header-desktop.sticky .header-container .header-left .logo {
    width: 160px;
    margin-left: 0;
    margin-right: 10px;
}

header .header-desktop.sticky .header-container .header-left .logo img {
    position: static;
    top: auto;
    width: 160px;
    height: 60px;
    max-width: none;
    object-fit: contain;
}


/* ------------------------------------------------------------------
 *  Desktop -- narrow viewports. style.css shrinks the bar to 70px here
 *  too, so the box matches the sticky state.
 * ------------------------------------------------------------------ */

@media (max-width: 1200px) {
    header .header-desktop .header-container .header-left {
        padding-left: 30px;
    }

    header .header-desktop .header-container .header-left .logo {
        width: 160px;
        margin-left: 0;
        margin-right: 10px;
    }

    header .header-desktop .header-container .header-left .logo img {
        position: static;
        top: auto;
        width: 160px;
        height: 60px;
        max-width: none;
        object-fit: contain;
    }
}


/* ------------------------------------------------------------------
 *  Mobile -- 72px bar. `.header-top` keeps its own `padding: 0 20px`
 *  page gutter (the nav icons on the right need it), and `.logo` keeps
 *  its 10px, giving the same 30px from the viewport edge as desktop.
 * ------------------------------------------------------------------ */

header .header-mobile .header-top .logo {
    padding-left: 10px;
}

header .header-mobile .header-top .logo img {
    width: 160px;
    height: 62px;
    max-width: none;
    object-fit: contain;
}