/**
 * Site Announcements — Public Modal styles (Notes.md #5, Component C)
 * Design: docs/design/notes-backlog-ux-spec.md §C.2
 *
 * Extends the existing jwh-modal / Island Glass system (styles/confirm-modal.css).
 * A header close button doesn't exist yet on Island Glass modals (auth modals
 * close via footer buttons only), so this file introduces it, plus the
 * "N of M" index line under the message.
 */

.jwh-modal__close {
  /* Hotfix (2026-09-27, BUG-JWHMODALCLOSE-BUTTON-RESET-001): a real
     <button class="jwh-modal__close"> (frontend/scripts/site-announcements.js)
     also inherits main.css's global `button, .button` rule
     (height/line-height: 4em, computed off this element's own inherited
     font-size since no font-size is set here) -- verified live at 1280px:
     32x53px instead of the intended 32x32 circle (min-width/min-height
     were already explicit and won, but height/line-height/width were
     never contested so the inherited values applied). Same root cause as
     BUG-STATE-TILES-BUTTON-RESET-001 / BUG-SHARE-XCLOSE-002 /
     BUG-REVIEWSTATUSTAG-BUTTON-RESET-001. */
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
  width: 32px;
  height: 32px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  max-width: none;
  margin: 0;
}

.jwh-modal__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.jwh-modal__close:focus-visible {
  outline: 2px solid #ffee00;
  outline-offset: 2px;
}

/* 44px tap target via invisible padding — visual icon stays small
   (position: absolute already declared above; no need to repeat it here) */
.jwh-modal__close::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.jwh-announcement-index {
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
}

/* Long admin-authored messages (up to 1000 chars) must scroll within the
   modal body instead of pushing the footer off-screen (Nobara a11y review). */
#announcementModal .jwh-modal__body {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

/* "Don't show again" (TASK-ANN-DONTSHOW-001) — tertiary, link-style action
   below the primary button row, matching site-tour.js's welcome-prompt
   "Skip — don't ask again" pattern (styles/site-tour.css .jwh-tour-skip-link)
   but with a higher base opacity (0.75 vs 0.5) so normal-size text clears
   WCAG AA 4.5:1 against the Island Glass near-black background
   (rgba(0,0,0,0.72) in confirm-modal.css) — 0.5 does not. */
.jwh-announcement-dontshow-link {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 0 4px;
}

.jwh-announcement-dontshow-link:hover,
.jwh-announcement-dontshow-link:focus-visible {
  color: #fff;
}

.jwh-announcement-dontshow-link:focus-visible {
  outline: 2px solid #ffee00;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #announcementModal {
    transition: none !important;
  }
}