/* Site-wide notification banners (below nav, backend-managed — wp-admin →
   Notifications). Markup is built client-side by js/notifications-inline.js
   into the #rs-notifs mount; see includes/notifications.php. Supersedes the
   old .rs-games-banner rules in style.css (kept until edge-cached pages
   carrying the old markup rotate out). */

/* Container: constrained to the theme's content width (not 100vw), banners
   stacked with a gap. Deliberately NO z-index — the fixed z9999 adhesion ads
   must never have to fight an in-flow element. */
.rs-notifs {
  /* width:100% + border-box: the parent (.site) is a flex container, so
     without an explicit width the mount shrinks to its content instead of
     filling the row up to the content-width cap. */
  width: 100%;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 6px auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rs-notifs:empty {
  display: none;
  margin: 0;
}

/* Per-banner colors come from the admin color pickers, applied as inline
   styles by the renderer; the values here are only the fallback (the classic
   yellow promo scheme, see rivalskins_notification_default_colors()). */
.rs-notif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 32px 6px 14px;
  border-radius: 10px;
  background: #fcd92d;
  color: #14181c;
}
.rs-notif[hidden] {
  display: none;
}

.rs-notif-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.rs-notif-link:hover {
  color: inherit;
}
.rs-notif-text {
  font-size: 0.95em;
  overflow: hidden;
}
.rs-notif-cta {
  flex-shrink: 0;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  /* The CTA renders as an <a> when the text carries its own inline link
     (anchors must not nest, so the wrapper is a <span> then). */
  text-decoration: none;
  background: #14181c;
  color: #fcd92d;
}
.rs-notif-link:hover .rs-notif-cta {
  filter: brightness(1.15);
}

/* Bare glyph, no chrome: color follows the banner's text color (inherit
   defeats theme-wide button styling). Slightly faded until hovered. */
.rs-notif-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  box-shadow: none;
  color: inherit;
  opacity: 0.65;
  font-size: 14px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}
.rs-notif-close:hover,
.rs-notif-close:focus {
  background: transparent;
  color: inherit;
  opacity: 1;
}

/* Keyboard a11y: visible focus ring (mouse hover stays chrome-free). */
.rs-notif-link:focus-visible,
.rs-notif-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Per-device alignment + CTA placement (attribute-gated; center + after are
   the defaults and carry no rule, so old markup without these attrs is
   unaffected). Desktop rules are min-width so they never bleed onto mobile.
   ---------------------------------------------------------------------- */
@media (min-width: 601px) {
  /* Two-up when several banners are live: banners pair on a row; with an odd
     count the FIRST (top of the admin sort order) takes a full row to itself.
     Structural CSS only — dismiss() removes the banner from the DOM, so the
     layout re-evaluates and a lone survivor grows back to full width. */
  .rs-notifs { flex-direction: row; flex-wrap: wrap; }
  .rs-notif { flex: 1 1 calc(50% - 3px); min-width: 0; }
  .rs-notif:first-child:nth-last-child(odd) { flex-basis: 100%; }

  /* Clamp instead of single-line ellipsis so half-width cards keep a bit
     more of a longer message before cutting off. */
  .rs-notif-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .rs-notif[data-align-d="left"]  { justify-content: flex-start; }
  .rs-notif[data-align-d="right"] { justify-content: flex-end; }
  /* Wider right lane in end mode so the far-right CTA clears the ✕ hit area. */
  .rs-notif[data-cta-d="end"] { padding-right: 38px; }
  .rs-notif[data-cta-d="end"] .rs-notif-link { width: 100%; justify-content: space-between; }
  .rs-notif[data-cta-d="end"] .rs-notif-text { flex: 1 1 auto; min-width: 0; }
  .rs-notif[data-cta-d="end"][data-align-d="center"] .rs-notif-text { text-align: center; }
  .rs-notif[data-cta-d="end"][data-align-d="right"]  .rs-notif-text { text-align: right; }
}

/* -------------------------------------------------------------------------
   Visual effects — all additive and gated on data-fx tokens, so markup
   without data-fx (old cached snapshots) keeps the current flat look. The
   accent bar (inset shadow) is applied inline in build() because it's
   CTA-colored; here we only cover the shadow-without-accent case.
   ---------------------------------------------------------------------- */
.rs-notif[data-fx~="shadow"] {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .06);
}
@media (prefers-reduced-motion: no-preference) {
  .rs-notif.rs-notif-enter { animation: rs-notif-in .35s ease-out; }
}
@keyframes rs-notif-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.rs-notif[data-fx~="cta"] .rs-notif-cta {
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rs-notif[data-fx~="cta"] .rs-notif-link:hover .rs-notif-cta {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.rs-notif[data-fx~="cta"] .rs-notif-link:active .rs-notif-cta {
  transform: translateY(0);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .rs-notif-cta { transition: none; }
}

@media (max-width: 600px) {
  .rs-notifs {
    /* Keep a small inset on mobile so banners don't touch the screen edges. */
    padding: 0 10px;
  }
  .rs-notif-text {
    white-space: normal;
    font-size: 0.85em;
  }
  .rs-notif[data-align-m="left"]  { justify-content: flex-start; }
  .rs-notif[data-align-m="right"] { justify-content: flex-end; }
  .rs-notif[data-cta-m="end"] { padding-right: 38px; }
  .rs-notif[data-cta-m="end"] .rs-notif-link { width: 100%; justify-content: space-between; }
  .rs-notif[data-cta-m="end"] .rs-notif-text { flex: 1 1 auto; min-width: 0; }
  .rs-notif[data-cta-m="end"][data-align-m="center"] .rs-notif-text { text-align: center; }
  .rs-notif[data-cta-m="end"][data-align-m="right"]  .rs-notif-text { text-align: right; }
}