/*
 * usda.gov-style masthead adjustments.
 *
 * Overrides a handful of rules from presentation-refresh.css without editing
 * that file, so this customization stays separate. Loads after
 * nass/global-styling (library dependency), and every selector matches the
 * original's specificity, so source order decides.
 *
 * What changes vs. presentation-refresh.css:
 * - Logo sized by height (3.5rem, ~usda.gov's): the NASS lockup is a wide
 *   2.52:1 SVG, so sizing by height is what makes it visually equal.
 * - Wordmark: "U.S. Department of Agriculture" over the NASS line, both in
 *   NASS blue at regular weight (markup order comes from
 *   block--system-branding-block.html.twig).
 * - No border between the masthead and the nav rail.
 */

#header .nass-modern-masthead {
  border-bottom: 0;
}

#header .nass-modern-masthead__brand .agency-banner {
  gap: .6rem;
}

#header .nass-modern-masthead__brand .logo-img img {
  width: auto;
  height: 3.5rem;
}

/* Block-level anchors: the inline <a> wrappers around each wordmark line
   add stray line-box whitespace that pushes the lines apart. */
#header .nass-modern-masthead__brand .usa-logo__text a {
  display: block;
  min-height: 24px;
  line-height: 1;
  text-decoration: none;
}

#header .nass-modern-masthead__brand .agency-name {
  color: #18336f;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
}

#header .nass-modern-masthead__brand .tag-line {
  display: block;
  min-height: 0;
  margin-top: 0;
  color: #18336f;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: none;
}

@media (max-width: 63.99rem) {
  /* The wordmark is hidden at this width (presentation-refresh.css); shrink
     the logo with it. */
  #header .nass-modern-masthead__brand .logo-img img {
    height: 2.6rem;
  }

  /* Let the search area shrink instead of overflowing the viewport:
     presentation-refresh gives it a fixed width, which pushes the masthead
     (and everything right-aligned below it) past the screen edge on
     narrow phones. */
  #header .nass-modern-masthead__brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  #header .nass-modern-masthead__tools {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  #header .nass-modern-search {
    flex: 0 1 auto;
    width: auto;
    max-width: 12rem;
    min-width: 0;
  }

  #header .nass-modern-search .usa-input {
    width: 100%;
    min-width: 0;
  }
}