/* =============================================================================
   USA Banner — "Official website of the U.S. government"
   -----------------------------------------------------------------------------
   Self-contained stylesheet for the USWDS usa-banner component. No build
   tooling, no framework dependencies. Drop this CSS file, the two SVG icons,
   and the flag PNG into any site and pair with the reference HTML and JS.

   Source of truth: U.S. Web Design System (USWDS) v3 usa-banner package.
     https://github.com/uswds/uswds/tree/develop/packages/usa-banner
   USWDS is a work of the U.S. federal government — public domain (CC0).

   Colors below match USWDS theme defaults:
     - banner background: #f0f0f0  (color "gray-cool-2" / theme default)
     - link color:        #005ea2  (color "primary")
     - link hover:        #1a4480
   The 8pt-unit spacing values from USWDS have been resolved to px.
   ============================================================================= */

.usa-banner {
  background-color: #f0f0f0;
  color: #1b1b1b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 0.8rem;
  line-height: 1.1;
  box-sizing: border-box;
}
.usa-banner *,
.usa-banner *::before,
.usa-banner *::after {
  box-sizing: inherit;
}

/* Container / grid helpers used by the banner markup ------------------------ */
.usa-banner .grid-row {
  display: flex;
  flex-wrap: wrap;
}
.usa-banner .grid-row.grid-gap-lg {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.usa-banner .grid-row.grid-gap-lg > * {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.usa-banner .grid-col-auto {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}
.usa-banner .grid-col-fill {
  flex: 1 1 0;
  width: auto;
  min-width: 1px;
}

/* Header (collapsed, mobile-first) ------------------------------------------ */
.usa-banner__header {
  padding: 0.5rem 1rem;
  min-height: 3rem;                 /* 48px touch target */
  position: relative;
  color: #1b1b1b;
  font-size: 0.73rem;
}

.usa-banner__inner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 64rem;                 /* USWDS "desktop" max-width */
  margin: 0 auto;
  padding-right: 0;
}

.usa-banner__header-flag {
  float: left;
  margin-right: 0.5rem;
  width: 1rem;
  height: auto;
}

.usa-banner__header-text {
  margin: 0;
  font-size: 0.73rem;
  line-height: 1.1;
  font-weight: 400;
}

.usa-banner__header-action {
  color: #005ea2;
  line-height: 1.1;
  margin: 2px 0 0 0;
  text-decoration: underline;
}
.usa-banner__header-action::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  margin-left: 2px;
  background-color: #005ea2;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Expand/collapse button (full-width tap target on mobile) ------------------ */
.usa-banner__button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #005ea2;
  display: block;
  font-size: 0.73rem;
  line-height: 1.1;
  padding: 0;
  text-align: left;
  text-decoration: none;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.usa-banner__button:focus {
  outline: 0.25rem solid #2491ff;
  outline-offset: -0.25rem;
}

.usa-banner__button-text {
  /* screen-reader only on mobile */
  position: absolute;
  left: -999em;
  right: auto;
  text-decoration: underline;
}

/* Content region (expanded panel) ------------------------------------------- */
.usa-banner__content {
  background-color: transparent;
  color: #1b1b1b;
  font-size: 1rem;
  max-width: 64rem;
  margin: 0 auto;
  overflow: hidden;
  padding: 0.25rem 1rem 1rem 1rem;
  width: 100%;
}
.usa-banner__content[hidden] { display: none; }
.usa-banner__content p:first-child { margin: 0; }

.usa-banner__guidance {
  display: flex;
  align-items: flex-start;
  max-width: 64ex;
  padding-top: 1rem;
}

.usa-banner__icon {
  width: 2.5rem;
  height: auto;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.usa-media-block__body { flex: 1 1 auto; }
.usa-media-block__body p { margin: 0; line-height: 1.35; }

.usa-banner__lock-image {
  height: 1.5ex;
  width: calc(1.5ex * (52 / 64));
  vertical-align: baseline;
}
.usa-banner__lock-image path { fill: currentColor; }
@media (forced-colors: active) {
  .usa-banner__lock-image path { fill: CanvasText; }
}

.icon-lock { white-space: nowrap; }

/* Expanded-state modifier (mobile close button) ----------------------------- */
.usa-banner__header--expanded {
  padding-right: calc(3rem + 0.5rem);
}
.usa-banner__header--expanded .usa-banner__header-action { display: none; }

/* Tablet and up ------------------------------------------------------------- */
@media (min-width: 40em) {
  .usa-banner { font-size: 0.73rem; padding-bottom: 0; }

  .usa-banner__header {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: 0;
  }

  .usa-banner__inner { align-items: center; }

  .usa-banner__header-action { display: none; }

  .usa-banner__button {
    position: relative;
    display: inline;
    width: auto;
    margin-left: 0.5rem;
    padding: 0;
    color: #005ea2;
    text-decoration: underline;
  }
  .usa-banner__button:hover { text-decoration: none; }
  .usa-banner__button::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    margin-left: 2px;
    background-color: #005ea2;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .usa-banner__button[aria-expanded="true"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z'/></svg>");
  }

  .usa-banner__button-text {
    position: static;
    display: inline;
    left: auto;
  }

  .usa-banner__content { padding: 1.5rem 1rem; }

  .usa-banner__guidance { padding-top: 0; }

  .tablet\:grid-col-6 {
    flex: 0 1 auto;
    width: 50%;
    max-width: 50%;
  }
  .tablet\:grid-col-auto {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }

  .usa-banner__header--expanded { padding-right: 0; background-color: transparent; }
  .usa-banner__header--expanded .usa-banner__inner { margin-left: auto; }
}

/* Forced-colors / high-contrast --------------------------------------------- */
@media (forced-colors: active) {
  .usa-banner__header-action { color: LinkText; }
  .usa-banner__button-text   { color: LinkText; }
}