@use 'uswds-core' as uswds;
@use 'variables' as *;


.usgs-header {
  // Set the header bar color to official USGS blue
  background-color: $usgs-blue;

  // For the section immediately after the header, have no top border.
  + main {
    @include uswds.at-media('desktop') {
      border-top: none;
    }
  }

  // Position and size the USGS logo
  .usa-logo {
    @include uswds.at-media('desktop') {
      margin-top: uswds.units(1);
      margin-bottom: uswds.units(1);
      font-size: uswds.size(uswds.$theme-header-font-family, 'sm') !important;
      line-height: uswds.line-height(uswds.$theme-header-font-family, 2);
    }

    // Size the USGS logo for different screen sizes
    img {
      vertical-align: bottom;
      height: 2.75em;
      padding: .5em 1em .5em 0;
      @include uswds.at-media('mobile') {
        height: 3.1875em;
      }
      @include uswds.at-media('tablet') {
        height: 3.625em;
      }
      @include uswds.at-media('desktop') {
        height: 4.0625em;
      }
    }
  }

  // Set the background color of the navigational links bar
  .usa-nav {
    background-color: uswds.color('gray-5');
  }
  // Style the secondary links (the links above the search bar when viewed at desktop widths)
  .usa-nav__secondary-links {
    a {
      // Make the secondary links blue when they are compressed down it to the menu
      // button (since the background there is different the when the application is at desktop dimensions)
      color: uswds.color('blue-50');
      // Make the secondary links white at desktop resolution, so they show up against the blue header
      @include uswds.at-media('desktop') {
        color: uswds.color('white');
      }

      &:hover {
        color: uswds.color('primary-lighter');
        text-decoration: underline;
      }
    }
  }
}