/* ===========================================================================
   Federal chrome — U.S. government banner, CDC masthead, agency footer.
   SPN Solutions Inc. for CDC | RFQ 75D301-26-Q-00146

   These are the elements that make a page read as a genuine federal health
   service rather than a product that borrowed a blue. The banner follows the
   USWDS specification; the masthead follows CDC's agency lockup; the footer
   carries the links every HHS property is required to expose.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. Official U.S. government banner (USWDS specification)
   Appears above everything, on every page.
   ------------------------------------------------------------------------ */
.usa-banner {
  background: var(--surface-2);
  border-bottom: var(--hair) solid var(--line);
  font-size: .75rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.usa-banner__inner {
  max-width: 90rem; margin: 0 auto;
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 1.5rem;
  flex-wrap: wrap;
}
.usa-banner__flag {
  width: 1rem; height: .75rem; flex: none; border-radius: 1px;
  /* The flag is drawn rather than fetched — one less request, and it cannot
     break if an asset path changes. */
  background:
    linear-gradient(180deg,
      #b31942 0 7.7%, #fff 7.7% 15.4%, #b31942 15.4% 23.1%, #fff 23.1% 30.8%,
      #b31942 30.8% 38.5%, #fff 38.5% 46.2%, #b31942 46.2% 53.9%, #fff 53.9% 61.6%,
      #b31942 61.6% 69.3%, #fff 69.3% 77%, #b31942 77% 84.7%, #fff 84.7% 92.4%,
      #b31942 92.4% 100%);
  position: relative;
}
.usa-banner__flag::before {
  content: ""; position: absolute; inset: 0 60% 46% 0; background: #0a3161;
}
.usa-banner__text { color: var(--ink-3); }
.usa-banner__toggle {
  /* WCAG 2.2 SC 2.5.8 asks for a 24x24 CSS pixel target. The banner sits in a
     tight strip, so the height comes from padding rather than font size. */
  display: inline-flex; align-items: center; gap: .2rem; min-height: 1.5rem;
  background: none; border: none; padding: .25rem .3rem; cursor: pointer;
  color: var(--cdc-blue); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.usa-banner__toggle:hover { color: var(--cdc-blue-deep); }
.usa-banner__toggle svg { width: .7rem; height: .7rem; transition: transform var(--t-fast); }
.usa-banner__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.usa-banner__content {
  max-width: 90rem; margin: 0 auto;
  padding: 1rem 1.5rem 1.25rem;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  border-top: var(--hair) solid var(--line);
  background: var(--surface);
}
.usa-banner__guidance { display: flex; gap: .7rem; align-items: flex-start; }
.usa-banner__icon { width: 2.5rem; height: 2.5rem; flex: none; color: var(--cdc-blue); }
.usa-banner__guidance p { margin: 0; font-size: .8125rem; color: var(--ink-2); }
.usa-banner__guidance strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   2. CDC masthead — the agency lockup
   ------------------------------------------------------------------------ */
.cdc-masthead {
  background: var(--surface);
  border-bottom: var(--hair) solid var(--line);
  position: relative;
}
/* A hairline of the signature gradient under the masthead. Small, but it is
   what stops the header reading as generic. */
.cdc-masthead::after {
  content: ""; position: absolute; inset: auto 0 -2px 0; height: 2px;
  background: var(--grad-hair);
}
.cdc-masthead__inner {
  max-width: 90rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .85rem 1.5rem;
  flex-wrap: wrap;
}
.cdc-lockup { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.cdc-lockup:hover .cdc-lockup__name { color: var(--cdc-blue-deep); }
.cdc-seal {
  width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%;
  background: var(--grad-primary);
  display: grid; place-items: center;
  box-shadow: 0 3px 10px -3px rgba(0,94,170,.6);
  position: relative; overflow: hidden;
}
.cdc-seal svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.cdc-lockup__dept {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-4); font-weight: 600; display: block; line-height: 1.3;
}
.cdc-lockup__name {
  font-size: 1.05rem; font-weight: 700; color: var(--cdc-blue-deep);
  letter-spacing: -.015em; line-height: 1.2; display: block;
  transition: color var(--t-fast);
}
.cdc-lockup__sub {
  font-size: .75rem; color: var(--ink-3); display: block; line-height: 1.3;
}
@media (max-width: 640px) {
  .cdc-lockup__dept { display: none; }
  .cdc-lockup__name { font-size: .95rem; }
}

/* ---------------------------------------------------------------------------
   3. Agency footer
   ------------------------------------------------------------------------ */
.cdc-footer {
  background: var(--cdc-slate);
  color: #dfe6ea;
  padding: 2.5rem 1.5rem 1.75rem;
  margin-top: 4rem;
}
.cdc-footer__inner { max-width: 90rem; margin: 0 auto; }
.cdc-footer__top {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: 1.75rem;
  border-bottom: var(--hair) solid rgba(255,255,255,.14);
}
.cdc-footer h2 {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--cdc-blue-2); font-weight: 700; margin: 0 0 .7rem;
}
.cdc-footer ul { list-style: none; margin: 0; padding: 0; }
.cdc-footer li { margin-bottom: .4rem; }
.cdc-footer li { margin-bottom: 0; }
.cdc-footer a {
  color: #dfe6ea; text-decoration: none; font-size: .8125rem;
  border-bottom: 1px solid transparent; transition: all var(--t-fast);
  /* Each link is its own 24px-tall target, per WCAG 2.2 SC 2.5.8. Inline-flex
     rather than block so the underline tracks the text, not the column. */
  display: inline-flex; align-items: center; min-height: 1.5rem;
  padding: .15rem 0;
}
.cdc-footer a:hover { color: #fff; border-bottom-color: var(--cdc-blue-2); }
.cdc-footer a:focus-visible { outline: 3px solid var(--cdc-blue-2); outline-offset: 2px; }
.cdc-footer__brand { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.cdc-footer__brand .cdc-seal { box-shadow: none; }
.cdc-footer__brand strong { color: #fff; font-size: .95rem; display: block; line-height: 1.25; }
.cdc-footer__brand span { font-size: .75rem; color: var(--cdc-slate-3); }
.cdc-footer__bottom {
  padding-top: 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .75rem; color: var(--cdc-slate-3);
}
.cdc-footer__note {
  margin-top: 1rem; padding: .8rem 1rem;
  background: rgba(255,255,255,.06); border-left: 3px solid var(--cdc-amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .75rem; color: #eef3f6;
}
.cdc-footer__spn { display: flex; align-items: center; gap: .6rem; }
.cdc-footer__spn img { height: 1.6rem; width: auto; filter: brightness(0) invert(1); opacity: .8; }