/* -------------------------------------------*\
    Oreneta Notice bar

    A single strip of text across the top of the document. It sits before
    the header in source order, so a sticky header still sticks below it.
\*------------------------------------------- */

.oreneta-notice-bar {
  /* Both colours arrive inline from the notice itself, so any pair is
     possible; these are only the fallback. */
  background: var(--oreneta-notice-bar-background, #3643ba);
  color: var(--oreneta-notice-bar-color, #fff);
  /* A strip a touch taller than a line of text with a background behind it, so it
     reads as a band of its own above the header. One-line notices settle on this
     height; longer ones grow past it. */
  --oreneta-notice-bar-min-height: 3rem;
  /* Stated, not inherited from a reset: min-height applies to the content box, so
     without this the padding is added on top of the height and the bar comes out
     half again as tall as it asked to be. */
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oreneta-semantic-spacing-sm, 12px);
  min-height: var(--oreneta-notice-bar-min-height);
  /* Symmetric, so the centred text stays centred, and wide enough that a long
     notice cannot run under the close button in the corner. */
  padding: var(--oreneta-semantic-spacing-sm, 12px) calc(40px + var(--oreneta-semantic-spacing-sm, 12px));
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;
}

@media (width <= 640px) {
  .oreneta-notice-bar {
    --oreneta-notice-bar-min-height: 2.75rem;

    padding-inline: calc(40px + var(--oreneta-semantic-spacing-2xs, 6px));
  }
}

/* Inline flow, not two flex columns: a notice is one run of text with a link
   in it, and it should wrap like a sentence rather than break into blocks. */

.oreneta-notice-bar__inner {
  width: min(100%, var(--oreneta-shell, 90rem));
}

.oreneta-notice-bar__text {
  display: inline;
  margin: 0;
}

.oreneta-notice-bar__link {
  margin-left: 0.4em;
  color: inherit;
  font-weight: var(--oreneta-core-font-weight-semibold, 600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Centred by the grid it sits in, not by a translate: a square box with the icon
   centred inside it lands on the middle of the bar whatever height the bar ends
   up being, and gives the thumb a 40px target instead of a 20px glyph. */

.oreneta-notice-bar__dismiss {
  position: absolute;
  top: 50%;
  right: var(--oreneta-semantic-spacing-sm, 12px);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.oreneta-notice-bar__dismiss svg {
  inline-size: 18px;
  block-size: 18px;
  display: block;
}

.oreneta-notice-bar__dismiss:hover,
.oreneta-notice-bar__dismiss:focus-visible {
  opacity: 1;
}

/* Hidden either by rotation or by a dismissal. `display` has to win over the
   flex above, which [hidden] alone does not. */

.oreneta-notice-bar-rotator[hidden],
.oreneta-notice-bar[hidden] {
  display: none;
}

.oreneta-notice-bar.is-current {
  animation: oreneta-notice-bar-in 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes oreneta-notice-bar-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oreneta-notice-bar.is-current {
    animation-duration: 1ms;
  }
}