/* Google Analytics consent banner, shared by every app on this site.
 *
 * Neutral by default and themed through the custom properties below, so the
 * atlas can be green and the other apps can stay Bootstrap-grey without three
 * copies of the layout. The two copies this replaces carried ~10 inline style
 * declarations each in the template, which is why they had drifted apart.
 *
 * Both buttons are the same size and weight on purpose. The old markup had a red
 * "No" against a green "Yes", which reads as a warning against declining --
 * consent has to be a free choice, so neither answer is styled as the risky one.
 */
:root {
  --b2b-consent-bg: #ffffff;
  --b2b-consent-fg: #212529;
  --b2b-consent-muted: #5b6659;
  --b2b-consent-border: rgba(0, 0, 0, 0.12);
  --b2b-consent-accent: #33532e;
  --b2b-consent-accent-fg: #ffffff;
}

.b2b-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: 1rem 1.25rem;
  background: var(--b2b-consent-bg);
  color: var(--b2b-consent-fg);
  border-top: 1px solid var(--b2b-consent-border);
  box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.12);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The [hidden] attribute is how the banner starts and how it is dismissed, so it
 * has to win against the display above -- Bootstrap's reboot sets
 * [hidden] { display: none !important }, but this file may load after it. */
.b2b-consent[hidden] {
  display: none;
}

.b2b-consent__inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.b2b-consent__text {
  flex: 1 1 22rem;
  margin: 0;
}

.b2b-consent__title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.b2b-consent__detail {
  color: var(--b2b-consent-muted);
}

.b2b-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.b2b-consent__button {
  padding: 0.5rem 1.1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--b2b-consent-accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  /* !important on the colour only, and only because it has to be: the lab theme
   * sets `color: #ffffff !important` on every input[type=submit], button and
   * .button (lab/static/lab/css/main.css, "/* Button *\/" section). Without this
   * the decline button rendered white text on a transparent background -- an
   * apparently empty box where "No thanks" should be, i.e. a consent banner with
   * only one visible answer. No amount of specificity beats an !important, so
   * this matches it, scoped to this one class. Everything else in this rule wins
   * on specificity alone; verified in the browser against all three apps. */
  color: var(--b2b-consent-accent) !important;
}

.b2b-consent__button--accept {
  background: var(--b2b-consent-accent);
  color: var(--b2b-consent-accent-fg) !important;
}

.b2b-consent__button:focus-visible {
  outline: 2px solid var(--b2b-consent-accent);
  outline-offset: 2px;
}

/* The banner takes focus only when reopened from a footer link, and a focus ring
 * on a whole region is noise -- the heading inside it is what gets announced. */
.b2b-consent:focus {
  outline: none;
}

@media (max-width: 575.98px) {
  .b2b-consent__actions {
    width: 100%;
  }

  .b2b-consent__button {
    flex: 1 1 auto;
  }
}