/**
 * @file
 * Sitewide notice banner shown above the top nav (tp-topnav).
 *
 * Driven by the "Notice banner" theme settings. The accent colour and the
 * badge tint follow the notice type via the .tp-notice--TYPE modifier; all
 * types share one layout. Full-bleed bar, centred inner row, wraps on small
 * screens. Dismissal is handled in js/notice-dismiss.js (sets [hidden]).
 */

.tp-notice {
  /* Defaults (info). Per-type modifiers override these two tokens. */
  --tp-notice-accent: #1b3a6b;
  --tp-notice-bg: #eef3fb;
  width: 100%;
  background: var(--tp-notice-bg);
  color: #1f2937;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 2px 0 0 var(--tp-notice-accent);
}

.tp-notice[hidden] {
  display: none;
}

.tp-notice__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

.tp-notice__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tp-notice-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tp-notice__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.tp-notice__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.tp-notice__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--tp-notice-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tp-notice__cta:hover,
.tp-notice__cta:focus {
  filter: brightness(1.08);
}

.tp-notice__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}

.tp-notice__x:hover,
.tp-notice__x:focus {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

/* Per-type accents. */
.tp-notice--info        { --tp-notice-accent: #1b3a6b; --tp-notice-bg: #eef3fb; }
.tp-notice--deadline    { --tp-notice-accent: #b45309; --tp-notice-bg: #fff5e6; }
.tp-notice--maintenance { --tp-notice-accent: #475569; --tp-notice-bg: #eef1f5; }
.tp-notice--beta        { --tp-notice-accent: #6d28d9; --tp-notice-bg: #f3eefe; }
.tp-notice--success     { --tp-notice-accent: #15803d; --tp-notice-bg: #ecfaf0; }
.tp-notice--warning     { --tp-notice-accent: #b91c1c; --tp-notice-bg: #fdecec; }

@media (max-width: 720px) {
  .tp-notice__inner {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
  }
  .tp-notice__text {
    flex: 1 1 100%;
    order: 3;
  }
  .tp-notice__actions {
    margin-left: auto;
  }
}