/* ===========================================================
   IMPORTANT NOTICE BAR
   Sits above the nav pill — rotating admissions/exam alerts.
   Dismissible per-session; collapses cleanly so layout never
   leaves a gap.
   =========================================================== */

.notice-bar {
  position: relative;
  z-index: 210;
  /* above .nav (200) */
  background: var(--ink-900);
  color: var(--bone-100);
  overflow: hidden;
  max-height: 44px;
  transition: max-height var(--dur-med) var(--ease-in-out),
    opacity var(--dur-fast) var(--ease-out);
}

/* On small screens the message has to wrap onto 2-3 lines, so the bar
   needs a taller max-height ceiling than desktop's single-line 44px.
   The actual height is still driven by content (.notice-bar__inner is
   no longer hard-pinned to 44px below 720px); this raises the
   transition ceiling so wrapped text isn't clipped by the bar's own
   overflow:hidden (used for the dismiss collapse animation). */
@media (max-width: 720px) {
  .notice-bar {
    max-height: 140px;
  }
}

.notice-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 50%, rgba(201, 154, 61, 0.16), transparent 60%),
    radial-gradient(circle at 88% 50%, rgba(63, 139, 196, 0.14), transparent 60%);
  pointer-events: none;
}

.notice-bar.is-dismissed {
  max-height: 0;
  opacity: 0;
}

.notice-bar__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  height: 44px;
}

@media (max-width: 720px) {
  .notice-bar__inner {
    height: auto;
    min-height: 44px;
  }
}

/* ---- "NOTICE" tag, fixed at left ---- */
.notice-bar__tag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.notice-bar__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 0 rgba(201, 154, 61, 0.6);
  animation: notice-pulse 2.2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes notice-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 154, 61, 0.55);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(201, 154, 61, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(201, 154, 61, 0);
  }
}

/* ---- Rotating message viewport ---- */
.notice-bar__viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.notice-bar__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.notice-bar__item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notice-bar__item-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-300);
  background: rgba(116, 168, 84, 0.14);
  border: 1px solid rgba(116, 168, 84, 0.28);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.notice-bar__item-text {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--bone-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-bar__item-text a {
  color: var(--gold-300);
  text-decoration: underline;
  text-decoration-color: rgba(227, 199, 133, 0.4);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.notice-bar__item-text a:hover {
  text-decoration-color: var(--gold-300);
}

/* ---- Dots (which message is showing) ---- */
.notice-bar__dots {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-right: var(--sp-2);
}

.notice-bar__dots button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  padding: 0;
}

.notice-bar__dots button.is-active {
  background: var(--gold-500);
  transform: scale(1.3);
}

.notice-bar__dots button:hover {
  background: var(--bone-100);
}

/* ---- Close button ---- */
.notice-bar__close {
  flex-shrink: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.notice-bar__close:hover {
  color: var(--bone-100);
  background: rgba(255, 255, 255, 0.06);
}

.notice-bar__close svg {
  width: 14px;
  height: 14px;
}

/* ---- Push nav + hero down to make room (JS sets this var) ---- */
.nav {
  top: var(--notice-offset, 0px);
}

@media (max-width: 720px) {
  .notice-bar__tag {
    padding: 0 var(--sp-3);
    font-size: 0.62rem;
  }

  .notice-bar__item-label {
    display: none;
  }

  .notice-bar__viewport {
    padding-left: 0;
  }

  .notice-bar__dots {
    display: none;
  }

  /* Items were absolutely positioned to overlay each other for the
     desktop crossfade, with text clipped to one line via nowrap +
     ellipsis. That hid the back half of every message — including
     the link — on narrow screens. Below 720px we instead let the
     active item sit in normal flow and wrap onto multiple lines, so
     the full message (and its link) is always readable and tappable. */
  .notice-bar__viewport {
    position: relative;
    /* The base rule sets overflow: hidden, which still clipped wrapped
       multi-line text even after the item itself was allowed to wrap.
       The viewport must allow content to be fully visible on mobile. */
    overflow: visible;
  }

  .notice-bar__item {
    position: absolute;
    align-items: flex-start;
    padding: 0.5rem 0;
  }

  .notice-bar__item.is-active {
    position: relative;
  }

  .notice-bar__item-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
    display: block;
  }

  .notice-bar__item-text a {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .notice-bar__inner {
    align-items: flex-start;
  }

  .notice-bar__tag {
    padding-top: 0.5rem;
  }

  .notice-bar__close {
    align-self: flex-start;
    margin-top: 0.2rem;
  }
}

@media (max-width: 480px) {
  .notice-bar__inner {
    gap: var(--sp-2);
  }

  .notice-bar__item-text {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice-bar__tag-dot {
    animation: none;
  }
}