/* Minimal overrides. The design system supplies everything else. */

/* --- theme color tokens --- */
/* USWDS 3 compiles its Sass to literal hex, so there are no custom properties
   to inherit. These are ours. Every value below is copied from that design
   system's own `.bg-<token>` utility class, so the custom layer moves with the
   theme instead of pinning it.
   
   Only some of the palette differs between USWDS and Grove: the primary and
   accent-warm ramps, base-lightest, base-light, and base-darkest. base-dark,
   base-lighter, and the info/warning/error/success colors are identical in
   both, so tokens built on those are listed once and simply do not change.
   That is Grove's choice, not an omission here. Maryland is a third case,
   noted with its own block below.
   
   `data-theme` is set on <html> by js/theme.js before first paint. The :root
   values are USWDS, so the page is correct even if that never runs. */

:root {
  --rfp-panel-bg: #d9e8f6;      /* primary-lighter */
  --rfp-panel-border: #73b3e7;  /* primary-light   */
  --rfp-accent-text: #1a4480;   /* primary-dark    */
  --rfp-urgent-bg: #c05600;     /* accent-warm-dark */
  --rfp-urgent-text: #ffffff;
  --rfp-rule: #dfe1e2;          /* base-lighter    */
  --rfp-quiet-text: #565c65;    /* base-dark       */
}

/* Maryland keeps USWDS's primary ramp and only re-themes secondary and
   accent-warm, so on these pages it differs from stock USWDS in exactly one
   place: the urgency tag. That is Maryland's design, not a vendoring mistake. */

[data-theme="mdwds"] {
  --rfp-panel-bg: #d9e8f6;
  --rfp-panel-border: #73b3e7;
  --rfp-accent-text: #1a4480;
  --rfp-urgent-bg: #936f38;     /* accent-warm-dark, Maryland's gold-brown */
  --rfp-urgent-text: #ffffff;
  --rfp-rule: #dfe1e2;
  --rfp-quiet-text: #565c65;
}

[data-theme="njwds"] {
  --rfp-panel-bg: #cfe8ff;
  --rfp-panel-border: #a1d3ff;
  --rfp-accent-text: #005ea2;
  /* Grove's accent-warm ramp is a cream rather than USWDS's orange, so the
     text on it has to flip to dark: #dec69a with white is 1.66:1. */
  --rfp-urgent-bg: #dec69a;
  --rfp-urgent-text: #1c1d1f;
  --rfp-rule: #dfe1e2;
  --rfp-quiet-text: #565c65;
}

/* --- federal banner: USWDS only --- */
/* The "official website of the State of ..." bar is the federal government
   banner. Under a state's own design system it is the wrong chrome, so it is
   hidden for every theme except USWDS.

   `[data-theme]:not(...)` rather than `:not([data-theme="uswds"])`: the
   attribute is absent until js/theme.js runs, and with scripting off it never
   arrives. Requiring the attribute to be present keeps the banner visible in
   that case, which is the correct USWDS default. */

[data-theme]:not([data-theme="uswds"]) .usa-banner__header {
  display: none;
}

/* The header carries the only control that collapses #gov-banner, so if the
   banner happened to be open at the moment of the switch its guidance panel
   would be left behind with nothing to close it. */

[data-theme]:not([data-theme="uswds"]) .usa-banner__content {
  display: none;
}

/* --- Maryland banner compensation --- */
/* MDWDS 0.50.2 restyles the banner as a single inline run — it sets the flag
   to `float:none` and the header text to `display:inline` — which assumes its
   own `.maryland-banner` markup, without the USWDS grid columns this
   prototype's banner uses.

   Against USWDS banner markup that produces a circular collapse. The flag
   loses its float, so it stays an inline replaced element; `img{max-width:100%}`
   then resolves against a parent whose width depends on the flag itself, and
   both settle at zero. The text column collapses the same way, to its 1px
   min-width, and wraps one character per line — a ~900px tall banner.

   Two fixes, verified in Chrome at 1280/700/375: let the columns grow rather
   than depend on an intrinsic width that resolves to zero, and free the flag
   from the percentage max-width. Scoped to the theme; the others are untouched.
   Measured banner height goes 904px -> 40px, flag 0px -> 16px. */

/* An explicit width, because the intrinsic one resolves to zero here and the
   flag ends up printed on top of the sentence. 1.5rem is the flag's own 1rem
   plus the 0.5rem gap restored below — the same 24px USWDS computes. */
[data-theme="mdwds"] .usa-banner__inner > .grid-col-auto {
  flex: 0 0 auto;
  width: 1.5rem;
  max-width: none;
}

[data-theme="mdwds"] .usa-banner__inner > .grid-col-fill {
  flex: 1 1 auto;
}

/* No `float` here on purpose: restoring it re-collapses the flag's grid column
   to 0 and the flag lands on top of the "A". Freeing the percentage max-width
   and restoring the gap Maryland's `margin:0` removed is enough. */
[data-theme="mdwds"] .usa-banner__header-flag {
  margin-right: 0.5rem;
  max-width: none;
}

/* MDWDS ships no `.usa-header`, `.usa-navbar`, `.usa-logo` or `.usa-logo__text`
   at all — it has its own `.maryland-header` instead — so the site title falls
   back to an unstyled italic link, 18px tall against 74px under the others.
   Maryland expresses no opinion about this component, so this restores the
   USWDS treatment rather than inventing a Maryland one. */

[data-theme="mdwds"] .usa-header {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rfp-rule);
}

/* MDWDS ships no base `.usa-nav-container` rule either, so the title sat flush
   against the viewport edge. These are Maryland's own `.grid-container`
   values, so the header lines up with the page content under this theme. */

[data-theme="mdwds"] .usa-nav-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 87.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 55em) {
  [data-theme="mdwds"] .usa-nav-container {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}

[data-theme="mdwds"] .usa-logo__text {
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 700;
}

[data-theme="mdwds"] .usa-logo__text a {
  color: #1b1b1b;
  text-decoration: none;
}

/* --- list rows --- */

.rfp-row {
  border-top: 1px solid var(--rfp-rule);
  padding: 1.5rem 0;
}

.rfp-row__title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.31rem;
}

/* Quiet trailing metadata line: opportunity number and posted date. */
.rfp-row__quiet {
  color: var(--rfp-quiet-text);
  font-size: 0.93rem;
}

/* --- prominent metadata list on a row --- */

.rfp-meta {
  margin: 0.75rem 0;
}

.rfp-meta dt {
  color: var(--rfp-quiet-text);
  font-size: 0.93rem;
  margin-top: 0.5rem;
}

.rfp-meta dd {
  margin-left: 0;
  font-weight: 700;
}

/* --- detail page key facts --- */

.rfp-keyfacts {
  margin: 0;
}

.rfp-keyfacts__row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rfp-rule);
}

.rfp-keyfacts__row:last-child {
  border-bottom: 0;
}

.rfp-keyfacts dt {
  color: var(--rfp-quiet-text);
  font-size: 0.93rem;
}

.rfp-keyfacts dd {
  margin-left: 0;
  font-weight: 700;
}

@media screen and (min-width: 30em) {
  .rfp-keyfacts__row {
    display: flex;
    gap: 1rem;
  }

  .rfp-keyfacts dt {
    flex: 0 0 11rem;
  }

  .rfp-keyfacts dd {
    flex: 1;
  }
}

/* --- result count --- */

.rfp-result-count {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* --- urgency tag --- */
/* No design system here has a warning-colored tag, so this one borrows the
   theme's accent-warm-dark. All three disagree sharply — USWDS is a dark
   orange (#c05600), Grove a pale cream (#dec69a), Maryland a gold-brown
   (#936f38) — so the text color is paired with it. */

.rfp-tag--urgent {
  background-color: var(--rfp-urgent-bg);
  color: var(--rfp-urgent-text);
}

/* --- filter sidebar panel --- */
/* Tinted with the theme's own light primary. This used to copy
   .usa-summary-box, but all three systems set that from info-lighter, which
   they share — so the panel never changed. Overrides .usa-accordion__content's
   white background and tighter padding; both are single-class selectors, so
   load order settles it. */

.rfp-filter-panel {
  background-color: var(--rfp-panel-bg);
  border: 1px var(--rfp-panel-border) solid;
  border-radius: 0.25rem;
  padding: 1.5rem;
}

/* USWDS puts a white background on these containers, which would show as
   white blocks against the tint. The box itself is drawn by the label's
   ::before and stays white, as it should. */
.rfp-filter-panel .usa-checkbox,
.rfp-filter-panel .usa-radio {
  background: transparent;
}

/* Legends carry margin-top:1.5rem, which doubles up with the panel's own
   padding on the first group. */
.rfp-filter-panel .usa-fieldset:first-child .usa-legend {
  margin-top: 0;
}

/* --- filter options with an info tooltip --- */

.rfp-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.rfp-filter-option .usa-checkbox {
  flex: 1;
}

.rfp-filter-option > .usa-tooltip {
  flex: 0 0 auto;
  margin-top: 0.5rem;
}

/* 24x24 minimum target size (WCAG 2.2 AA, 2.5.8). */
.rfp-info {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--rfp-quiet-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.rfp-info__mark {
  font-size: 0.8rem;
  font-weight: 700;
  font-style: italic;
  color: var(--rfp-quiet-text);
  line-height: 1;
}

.rfp-info:hover .rfp-info__mark {
  color: var(--rfp-accent-text);
}

/* --- tooltip triggers rendered as text --- */
/* Dotted underline marks the word as explainable without looking like a link. */

.rfp-row__quiet .usa-tooltip__trigger,
.rfp-keyfacts .usa-tooltip__trigger {
  border-bottom: 1px dotted var(--rfp-quiet-text);
  cursor: help;
}

/* --- keeping filter tooltips out of the panel's overflow --- */
/* USWDS puts overflow:auto on .usa-accordion__content, which clips an
   absolutely positioned tooltip and turns the overhang into scrollable
   area instead. The panel is not a scrolling region here, so let it
   overflow visibly. */

.rfp-filter-panel {
  overflow: visible;
}

/* Two fixes on one rule, both because these tooltips are built after USWDS's
   init() has already run:
   1. USWDS sets width:auto and white-space:pre, so a two-sentence description
      lays out as one very long line. Cap the width and let it wrap.
   2. USWDS centers the body with a transform it calculates in JS during
      init(). That never happens here, so the body starts at the trigger's
      left edge and runs off a narrow screen. Anchoring it right opens it
      leftward, into the page.
   The selector repeats .usa-tooltip__body to outrank .usa-tooltip__body--top. */
.rfp-filter-option .usa-tooltip__body.usa-tooltip__body {
  width: 15rem;
  max-width: 15rem;
  white-space: normal;
  text-align: left;
  left: auto;
  right: 0;
}

/* The arrow is centered on the body (left:50%); with the body now right-
   anchored, move it over the trigger instead. */
.rfp-filter-option .usa-tooltip__body.usa-tooltip__body::after {
  left: auto;
  right: 0.5rem;
  margin-left: 0;
}

/* --- subscribe block --- */
/* Sits in the sidebar column below the filter accordion but outside it, so it
   stays visible under 64em where the filter panel is collapsed. The rule above
   it separates it from the filters without making it a second tinted box,
   which would read as part of the panel. */

.rfp-subscribe {
  border-top: 2px solid var(--rfp-rule);
  margin-top: 2rem;
  padding-top: 1rem;
}

.rfp-subscribe__heading {
  font-size: 1.13rem;
  margin-top: 0;
}

/* The sentence is the whole point of the feature, so it gets the theme's own
   light primary as a marker. Decorative, so no contrast requirement. */
.rfp-subscribe__summary {
  border-left: 4px solid var(--rfp-panel-border);
  padding-left: 0.75rem;
  margin: 0 0 1.5rem;
}

.rfp-subscribe__note {
  color: var(--rfp-quiet-text);
  font-size: 0.93rem;
}

/* A link on its own line, not inline in a sentence, so WCAG 2.2 2.5.8's inline
   exception does not cover it and SPEC 8.5's flat 24x24 floor applies. A bare
   line box comes up short of that under USWDS. */
.rfp-subscribe__rss {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

/* --- footer disclaimer --- */

.rfp-disclaimer {
  max-width: 60ch;
  margin: 0;
}

/* --- filters: sidebar on desktop, accordion on mobile --- */
/* SPEC 8.5 forbids sticky positioning, so this is plain document flow. */

@media screen and (min-width: 64em) {
  /* Desktop: drop the accordion wrapper, always show the panel. */
  .rfp-filter-accordion__heading {
    display: none;
  }

  .rfp-filter-panel {
    display: block !important;
  }
}

/* --- demo bar: design-system switcher --- */
/* A demonstration control, not site chrome (SPEC 8.7). Deliberately NOT
   tokenized: it is the one element that should hold still while everything
   below it changes, so it stays a fixed mid-slate under every theme.

   The value matters. This bar was #1b1b1b, which sits directly above the
   government banner — and Grove's banner is #1c1d1f, a contrast ratio of
   1.02 against it. The two merged into one black block and hid the most
   visible change Grove makes. base-dark is 5.92 against the USWDS banner
   (#f0f0f0) and 2.50 against Grove's, so the boundary reads under both.
   Dormant since the banner became USWDS-only, and kept for the same reason
   as the Maryland banner rules above: it is what keeps this correct if the
   banner is ever shown under a state theme again. */

.rfp-demo-bar {
  background-color: #565c65;
  color: #ffffff;
  padding: 0.75rem 0;
  border-bottom: 3px solid #1b1b1b;
}

.rfp-demo-bar__label {
  display: inline-block;
  margin-top: 0;
  margin-right: 0.5rem;
  color: #ffffff;
  font-weight: 700;
}

.rfp-demo-bar__select {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-top: 0;
}