@charset "UTF-8";
/* Hallmark · component: banner (site-wide promotional strip) · genre: atmospheric
 * design-system: design.md (Forge) — locked. Tokens mirrored page-scoped as --pb-*,
 * dual-band via data-bs-theme, Petrona display + Karla body, 12px CTA radius,
 * dark ink on amber (white fails contrast). No anvil/glow theatrics: this strip
 * rides on app pages too, so the wash is a static gradient, not an animated one.
 * states: default · hover · focus-visible · active · disabled · loading · error · success
 * contrast: measured, all text >= 4.5:1 in both bands. --pb-accent is a fill/border
 * colour; --pb-accent-text is its text-grade sibling (the brand amber is only 2.4:1
 * as 11px type on the cream wash). The purple CTA hover darkens rather than
 * lightens - white on a lighter purple is 3.3:1.
 */
.promo-banner {
  /* light (site default) */
  --pb-wash-1: #fff6e6;
  --pb-wash-2: #fdf1dc;
  --pb-rule: rgba(231, 141, 19, .34);
  --pb-ink: #141413;
  --pb-ink-2: #6f6c62;
  --pb-accent: var(--main-orange-darker, #e78d13);
  /* Separate text-grade accent: the brand amber is a fill/border colour and only
     reaches 2.4:1 as 11px type on the cream wash. Measured, not guessed. */
  --pb-accent-text: #8a5310;
  --pb-accent-soft: rgba(245, 164, 44, .16);
  --pb-fill: var(--main-orange, #f5a42c);
  --pb-fill-hover: #ffb949;
  --pb-on-fill: #1a1714;
  --pb-chip-bg: #ffffff;
  --pb-focus: rgba(245, 164, 44, .55);
  --pb-success: #276a42;
  --pb-error: #b02f22;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Queried below instead of the viewport: the admin previews render this strip in
     narrow columns of a wide page, where viewport breakpoints never fire. */
  container: promo-banner/inline-size;
  background: linear-gradient(100deg, var(--pb-wash-1) 0%, var(--pb-wash-2) 62%, var(--pb-wash-1) 100%);
  border-bottom: 1px solid var(--pb-rule);
  color: var(--pb-ink);
  font-family: var(--font-body), sans-serif;
  /* A faint accent bleed on the trailing edge. Static — the system reserves motion
     for entry pages. */
  /* ---------- icon medallion ---------- */
  /* ---------- copy ---------- */
  /* ---------- right-hand rail ---------- */
  /* ---------- code chip ---------- */
}
.promo-banner::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(60%, 420px);
  background: linear-gradient(90deg, transparent, var(--pb-accent-soft));
  pointer-events: none;
}
.promo-banner__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2cqi, 22px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px clamp(14px, 3cqi, 28px);
  min-width: 0;
}
.promo-banner__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--pb-accent-soft);
  color: var(--pb-accent);
  /* The global `i.icon` 1rem box off-centers oversized bi glyphs — let the glyph
     size the box instead. */
}
.promo-banner__mark i {
  width: auto;
  height: auto;
  min-width: 0;
  font-size: 1.15rem;
  line-height: 1;
}
.promo-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}
.promo-banner__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-accent-text);
  margin-bottom: 3px;
}
.promo-banner__title {
  margin: 0;
  font-family: var(--font-heading), serif;
  font-weight: 600;
  font-size: clamp(17px, 2cqi, 21px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  color: var(--pb-ink);
}
.promo-banner__body {
  margin: 3px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--pb-ink-2);
  overflow-wrap: anywhere;
}
.promo-banner__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.promo-banner__code {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px dashed var(--pb-rule);
  border-radius: 12px;
  background: var(--pb-chip-bg);
  overflow: hidden;
}
.promo-banner__code-value {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pb-ink);
  white-space: nowrap;
}
.promo-banner__deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--pb-accent-soft);
  color: var(--pb-accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.promo-banner__deadline i {
  width: auto;
  height: auto;
  min-width: 0;
  font-size: 0.85rem;
}

/* ============ copy button — 8 states ============ */
.promo-banner__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: 0;
  border-left: 1.5px dashed var(--pb-rule);
  background: transparent;
  color: var(--pb-accent-text);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.promo-banner__copy i {
  width: auto;
  height: auto;
  min-width: 0;
  font-size: 0.95rem;
}
.promo-banner__copy:hover, .promo-banner__copy.is-hover {
  background: var(--pb-accent-soft);
}
.promo-banner__copy:focus-visible, .promo-banner__copy.is-focus {
  outline: 3px solid var(--pb-focus);
  outline-offset: -3px;
}
.promo-banner__copy:active, .promo-banner__copy.is-active {
  background: var(--pb-accent-soft);
  transform: translateY(1px);
}
.promo-banner__copy:disabled, .promo-banner__copy[aria-disabled=true] {
  opacity: 0.45;
  cursor: not-allowed;
}
.promo-banner__copy[data-state=loading] {
  opacity: 0.6;
  cursor: progress;
}
.promo-banner__copy[data-state=success] {
  color: var(--pb-success);
  background: rgba(39, 106, 66, 0.12);
}
.promo-banner__copy[data-state=error] {
  color: var(--pb-error);
  background: rgba(176, 47, 34, 0.12);
}

/* ============ CTA — Forge primary voice ============ */
.promo-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--pb-fill);
  color: var(--pb-on-fill);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.promo-banner__cta i {
  width: auto;
  height: auto;
  min-width: 0;
  font-size: 0.9rem;
}
.promo-banner__cta:hover, .promo-banner__cta.is-hover {
  background: var(--pb-fill-hover);
  color: var(--pb-on-fill);
}
.promo-banner__cta:focus-visible, .promo-banner__cta.is-focus {
  outline: 3px solid var(--pb-focus);
  outline-offset: 2px;
  color: var(--pb-on-fill);
}
.promo-banner__cta:active, .promo-banner__cta.is-active {
  transform: translateY(1px);
}
.promo-banner__cta[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}

/* ============ dismiss ============ */
.promo-banner__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pb-ink-2);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.promo-banner__close i {
  width: auto;
  height: auto;
  min-width: 0;
  font-size: 0.8rem;
}
.promo-banner__close:hover, .promo-banner__close.is-hover {
  background: var(--pb-accent-soft);
  color: var(--pb-ink);
}
.promo-banner__close:focus-visible, .promo-banner__close.is-focus {
  outline: 3px solid var(--pb-focus);
  outline-offset: 2px;
}
.promo-banner__close:active, .promo-banner__close.is-active {
  transform: translateY(1px);
}

/* ============ tones ============ */
.promo-banner--purple {
  --pb-wash-1: #f6f2ff;
  --pb-wash-2: #efe8ff;
  --pb-rule: rgba(99, 73, 174, .32);
  --pb-ink-2: #5f5c54;
  --pb-accent: var(--secondary-dark, #6349ae);
  --pb-accent-text: #5a41a0;
  --pb-accent-soft: rgba(128, 95, 225, .14);
  --pb-fill: var(--secondary, #805fe1);
  /* Hover goes darker, not lighter: white on #9a7af0 is 3.3:1. Both values are
     the existing brand pair, so nothing off-palette is invented. */
  --pb-fill-hover: var(--secondary-dark, #6349ae);
  --pb-on-fill: #ffffff;
  --pb-focus: rgba(128, 95, 225, .5);
}

.promo-banner--neutral {
  --pb-wash-1: #faf9f5;
  --pb-wash-2: #f3f1ea;
  --pb-rule: rgba(20, 20, 19, .14);
  --pb-accent: #6f6c62;
  --pb-accent-text: #66635a;
  --pb-accent-soft: rgba(20, 20, 19, .06);
  --pb-fill: #2a2118;
  --pb-fill-hover: #3b2f21;
  --pb-on-fill: #faf9f5;
  --pb-focus: rgba(20, 20, 19, .35);
}

/* ============ dark band ============ */
[data-bs-theme=dark] .promo-banner {
  --pb-wash-1: #241d13;
  --pb-wash-2: #1c1712;
  --pb-rule: rgba(245, 164, 44, .3);
  --pb-ink: #efe7d8;
  --pb-ink-2: #b3a892;
  --pb-accent: var(--main-orange, #f5a42c);
  --pb-accent-text: var(--main-orange, #f5a42c);
  --pb-accent-soft: rgba(245, 164, 44, .16);
  --pb-chip-bg: rgba(20, 16, 11, .55);
  --pb-success: #6bbd8a;
  /* #e0685a is the admin danger colour but only 4.0:1 on its own soft ground here;
     #ec8074 is the existing --ad-danger-hi and clears it. */
  --pb-error: #ec8074;
}

[data-bs-theme=dark] .promo-banner--purple {
  --pb-wash-1: #221b33;
  --pb-wash-2: #1a1626;
  --pb-rule: rgba(154, 122, 240, .32);
  --pb-ink-2: #b3a892;
  --pb-accent: #9a7af0;
  --pb-accent-text: #9a7af0;
  --pb-accent-soft: rgba(154, 122, 240, .18);
  --pb-fill: #805fe1;
  --pb-fill-hover: var(--secondary-dark, #6349ae);
  --pb-on-fill: #ffffff;
}

[data-bs-theme=dark] .promo-banner--neutral {
  --pb-wash-1: #201d19;
  --pb-wash-2: #1a1815;
  --pb-rule: rgba(239, 231, 216, .16);
  --pb-accent: #b3a892;
  --pb-accent-text: #b3a892;
  --pb-accent-soft: rgba(239, 231, 216, .08);
  --pb-fill: #efe7d8;
  --pb-fill-hover: #ffffff;
  --pb-on-fill: #1a1714;
}

[data-bs-theme=dark] .promo-banner__copy[data-state=success] {
  background: rgba(107, 189, 138, 0.16);
}

[data-bs-theme=dark] .promo-banner__copy[data-state=error] {
  background: rgba(224, 104, 90, 0.16);
}

/* ============ responsive ============ */
/* < 1080px the rail drops under the copy rather than squeezing the headline. */
@container promo-banner (max-width: 1080px) {
  .promo-banner__inner {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .promo-banner__text {
    flex: 1 1 260px;
  }
  .promo-banner__aside {
    flex: 1 1 100%;
    order: 3;
  }
}
@container promo-banner (max-width: 560px) {
  .promo-banner__inner {
    padding: 12px 14px;
  }
  .promo-banner__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .promo-banner__aside {
    gap: 8px;
  }
  .promo-banner__code {
    flex: 1 1 100%;
  }
  .promo-banner__code-value {
    flex: 1 1 auto;
    justify-content: center;
    /* A long code must shrink rather than push the chip past the strip. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .promo-banner__cta {
    flex: 1 1 100%;
    justify-content: center;
  }
}
/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .promo-banner__copy,
  .promo-banner__cta,
  .promo-banner__close {
    transition-duration: 0.01ms;
  }
  .promo-banner__copy:active,
  .promo-banner__cta:active,
  .promo-banner__close:active {
    transform: none;
  }
}

/*# sourceMappingURL=promotional-banner.output.css.map */