/* assets/css/components/announcement-bar.css
 *
 * @layer components — .announce-bar, first child inside the fixed #masthead.
 * Inherits the header's positioning entirely; tuck-on-scroll keys off the
 * header's existing .is-scrolled state. JS (IIFE 50) owns rotation + dismiss.
 */

@layer components {

  body.has-announce-bar {
    --announce-bar-height: 2.75rem;
  }

  /* Ink — matches the hero overlay's darkest stop exactly. A near-miss teal
     (e.g. --primary-dark, 11 L-points off) reads as a mistake stacked against
     the hero; an exact match reads as one continuous dark mass.
     position+z-index lift the bar above the hero scrim ::before, same as the
     __inner z-index:1 pattern in nav.css. */
  .announce-bar {
    position: relative;
    z-index: 1;
    block-size: var(--announce-bar-height);
    overflow: hidden;
    background-color: var(--primary-ultra-dark);
    padding-inline: var(--gutter);
    transition: block-size var(--duration-normal) var(--ease-default);
  }

  .announce-bar[hidden] {
    display: none;
  }

  /* Tucked: scrolled past the sentinel, or the search modal is open (the
     modal's inset assumes a bar-less header). The inner keeps its fixed
     height, so tucking clips — it never squashes or reflows the content. */
  .site-header.is-scrolled .announce-bar,
  body.has-search-open .announce-bar {
    block-size: 0;
  }

  .announce-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    block-size: var(--announce-bar-height);
    max-inline-size: var(--content-width);
    margin-inline: auto;
  }

  .announce-bar__viewport {
    position: relative;
    flex: 1;
    min-inline-size: 0;
    display: grid;
    block-size: 100%;
  }

  /* Every message shares the one grid cell: rotation is opacity/transform
     only, so it can never change the bar's height. */
  .announce-bar__item {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    min-inline-size: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-3xs));
    transition:
      opacity    var(--duration-normal) var(--ease-default),
      transform  var(--duration-normal) var(--ease-default),
      visibility 0s var(--duration-normal);
  }

  .announce-bar__item.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity    var(--duration-normal) var(--ease-default),
      transform  var(--duration-normal) var(--ease-default),
      visibility 0s 0s;
  }

  .announce-bar__kicker {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--secondary-semi-light);
  }

  .announce-bar__kicker::after {
    content: '';
    display: inline-block;
    inline-size: var(--line-thin);
    block-size: var(--text-xs);
    margin-inline-start: var(--space-s);
    vertical-align: text-bottom;
    background-color: color-mix(in oklch, var(--white) 25%, transparent);
  }

  /* 90% white, not pure — pure white on near-black teal vibrates at small
     sizes. Still comfortably above AA. */
  .announce-bar__message {
    min-inline-size: 0;
    font-size: var(--text-s);
    line-height: var(--leading-snug);
    color: color-mix(in oklch, var(--white) 90%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .announce-bar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-shrink: 0;
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--secondary-semi-light);
    text-decoration: underline;
    text-decoration-thickness: var(--line-thin);
    text-underline-offset: var(--space-2xs);
    transition:
      color var(--duration-fast) var(--ease-default),
      text-decoration-color var(--duration-fast) var(--ease-default);
  }

  .announce-bar__link:hover {
    color: var(--white);
    text-decoration-color: var(--white);
  }

  .announce-bar__link:focus-visible {
    outline: var(--line-medium) solid var(--secondary-semi-light);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .announce-bar__link svg {
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .announce-bar__link:hover svg {
    transform: translateX(var(--space-3xs));
  }

  .announce-bar__controls {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex-shrink: 0;
  }

  .announce-bar__dots {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .announce-bar__dot {
    inline-size: var(--space-xs);
    block-size: var(--space-3xs);
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background-color: color-mix(in oklch, var(--white) 35%, transparent);
    cursor: pointer;
    transition:
      inline-size      var(--duration-normal) var(--ease-default),
      background-color var(--duration-fast)   var(--ease-default);
  }

  .announce-bar__dot:hover {
    background-color: color-mix(in oklch, var(--white) 60%, transparent);
  }

  .announce-bar__dot.is-active {
    inline-size: var(--space-m);
    background-color: var(--white);
  }

  .announce-bar__dot:focus-visible {
    outline: var(--line-thin) solid var(--white);
    outline-offset: var(--focus-ring-offset);
  }

  /* Full-bar-height square hit area (44px, WCAG AA) from a small glyph; the
     negative inline-end margin keeps the glyph optically flush with the
     container edge — the sanctioned optical-alignment margin. */
  .announce-bar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-inline-end: calc(var(--space-s) * -1);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: color-mix(in oklch, var(--white) 70%, transparent);
    cursor: pointer;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default);
  }

  .announce-bar__close:hover {
    color: var(--white);
    background-color: color-mix(in oklch, var(--white) 12%, transparent);
  }

  .announce-bar__close:focus-visible {
    outline: var(--line-thin) solid var(--white);
    outline-offset: calc(var(--focus-ring-offset) * -1);
  }

  @media (max-width: 48em) {
    .announce-bar__kicker,
    .announce-bar__dots {
      display: none;
    }

    .announce-bar__item {
      gap: var(--space-xs);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .announce-bar,
    .announce-bar__item,
    .announce-bar__dot,
    .announce-bar__link svg {
      transition: none;
    }

    .announce-bar__item {
      transform: none;
    }
  }

}