/* Reader feedback strip (website.announcement in _quarto.yml).
   Plain CSS, listed under format.html.css in _quarto.yml. Quarto renders the
   strip as .alert.alert-light inside the fixed header, so it stays pinned at
   the top while the page scrolls. White text on violet, one line at laptop
   widths, "Tell me how" in the yellow marker. The X is a real button (see
   styles/feedback-strip-v6.js) and hides the strip for the current page only.

   The colors live on :root so the Send feedback button on feedback.qmd uses
   the same violet. */
:root {
  --strip-bg: #6d28d9;
  --strip-fg: #ffffff;
  --strip-close: rgba(255, 255, 255, 0.85);
  --strip-cta-bg: #fde047;
  --strip-cta-fg: #1a1a1a;
}

#quarto-announcement.alert-light {
  background-color: var(--strip-bg);
  color: var(--strip-fg);
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

#quarto-announcement.alert-light .quarto-announcement-content {
  flex-grow: 1;
  max-width: 90rem;
  margin: 0 auto;
}

/* Some site themes color every paragraph; the strip text keeps the strip's color. */
#quarto-announcement.alert-light .quarto-announcement-content p {
  margin: 0;
  color: inherit;
}

#quarto-announcement.alert-light a.strip-cta {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.1em 0.45em;
  border-radius: 0.15rem;
  color: var(--strip-cta-fg);
  background-color: var(--strip-cta-bg);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

#quarto-announcement.alert-light a.strip-cta::after {
  content: " \2192";
}

#quarto-announcement.alert-light a.strip-cta:hover,
#quarto-announcement.alert-light a.strip-cta:focus {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

#quarto-announcement.alert-light .quarto-announcement-action {
  color: var(--strip-close);
  cursor: pointer;
}

/* A 24 px target (WCAG 2.2 minimum) that reaches into the strip's side padding,
   so it takes no more text width than the icon it replaces. */
#quarto-announcement.alert-light button.strip-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0 -0.25rem 0 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  font: inherit;
  line-height: 1;
}

#quarto-announcement.alert-light .quarto-announcement-action:hover,
#quarto-announcement.alert-light button.strip-dismiss:focus-visible {
  color: var(--strip-fg);
}

#quarto-announcement.alert-light button.strip-dismiss:focus-visible {
  outline: 2px solid var(--strip-cta-bg);
  outline-offset: 1px;
}

/* After a keyboard dismissal the script moves focus to the page content. */
main[tabindex="-1"]:focus {
  outline: none;
}

@media (max-width: 767.98px) {
  #quarto-announcement.alert-light {
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: left;
  }

  #quarto-announcement.alert-light button.strip-dismiss {
    margin: 0 -0.45rem 0 0.25rem;
  }
}