/* ABOUTME: Site-wide notice bar rendered under the header.
   ABOUTME: Unlayered on purpose — it must win over layered theme styles. */

.pl-site-notice {
  /* Both styles are checked against WCAG AA. The accent bar uses primary-dark
     rather than primary: white on primary clears 4.5:1 only just, and this text
     sits at body size on a full-bleed band where legibility matters most. */
  --pl-notice-bg: var(--pl-color-primary-dark, #2A6D41);
  --pl-notice-text: #FFFFFF;

  background: var(--pl-notice-bg);
  color: var(--pl-notice-text);
  border-bottom: 1px solid rgb(0 0 0 / 0.12);
}

.pl-site-notice--urgent {
  --pl-notice-bg: var(--pl-color-tertiary, #1D221E);
}

.pl-site-notice__inner {
  max-width: var(--pl-width-wide, 75rem);
  margin-inline: auto;
  padding: 0.75rem var(--pl-gutter, 1.5rem);
}

.pl-site-notice__text {
  margin: 0;
  color: inherit;
  font-size: var(--pl-text-base, 1rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.pl-site-notice__link {
  color: inherit;
  font-weight: var(--pl-weight-semibold, 600);
  /* Underlined rather than colour-shifted: a second colour on this band would
     have to clear contrast against the band itself, and inheriting keeps it
     legible on both styles. */
  text-decoration: underline;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

.pl-site-notice__link:hover,
.pl-site-notice__link:focus-visible {
  text-decoration-thickness: 2px;
}

.pl-site-notice__link:focus-visible {
  outline: 2px solid var(--pl-notice-text);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 30rem) {
  .pl-site-notice__inner { padding-block: 0.65rem; }
  .pl-site-notice__text { font-size: var(--pl-text-sm, 0.875rem); }
  /* Let a long link wrap on a narrow screen rather than force sideways scroll. */
  .pl-site-notice__link { white-space: normal; }
}

@media print {
  .pl-site-notice { display: none; }
}