/* ============================================================================
   OFFER - sitewide announcement bar. Scoped .s-offer.

   Geometry contract: --offer-h is 0 in tokens.css, so a page WITHOUT the bar
   computes --nav-clear to exactly the pre-bar 76px and .s-nav to its 14px offset.
   Only :root.has-offer (stamped by the assemblers) turns the height on, which is
   why the snapshot delta is confined to the routes that carry the bar.

   :not(.offer-off) folded into the same selector on purpose: a separate
   "dismissed" rule at equal specificity would be re-overridden by the <=639
   media query below and the bar would reappear on phones.
   ========================================================================== */
:root.has-offer:not(.offer-off){ --offer-h:44px }
@media (max-width:639px){ :root.has-offer:not(.offer-off){ --offer-h:48px } }
:root.offer-off .s-offer{ display:none }

.s-offer{
  position:fixed; top:0; left:0; right:0; height:var(--offer-h);
  z-index:calc(var(--z-nav) + 1);
  background:var(--lime); color:var(--lime-ink);
  font-family:var(--f-body);
}
.s-offer__inner{
  height:100%; max-width:var(--content-max); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:var(--s-4);
}
.s-offer__text{
  display:flex; align-items:center; gap:var(--s-3);
  font-size:var(--t-small); color:var(--lime-ink); margin:0; min-width:0;
}
.s-offer__tag{
  flex:none; font-size:var(--t-label); text-transform:uppercase;
  letter-spacing:var(--track-eyebrow);
  background:var(--lime-ink); color:var(--lime);
  padding:3px 8px; border-radius:var(--r-badge);
}
.s-offer__copy{ font-weight:600 }
.s-offer__price{ font-size:var(--t-label); opacity:.72 }

/* full bar height so the tap target clears 44px - the underline is drawn on the inner
   span instead, otherwise it would sit at the very bottom of a 44px-tall link */
.s-offer__cta{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  height:var(--offer-h); min-height:44px;
  font-size:var(--t-small); font-weight:600; color:var(--lime-ink);
  text-decoration:underline; text-underline-offset:3px;
}
.s-offer__cta .arw{ transition:transform var(--dur-fast) var(--ease-standard) }
.s-offer__cta:hover .arw{ transform:translateX(var(--arrow-shift)) }

/* 44px square: the accessibility floor for a touch target, and the reason the bar
   itself is 44px tall rather than the 36-40px an announcement strip usually gets. */
.s-offer__close{
  position:absolute; right:var(--gutter); top:0;
  width:44px; height:var(--offer-h);
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--lime-ink); cursor:pointer;
  opacity:.6; transition:opacity var(--dur-fast) var(--ease-standard);
}
.s-offer__close:hover{ opacity:1 }

/* Phone: the price clause is the first thing to go - the tag, the claim and the
   action still read, and the bar stays one line. */
/* Shed the clauses in priority order rather than letting the line ellipsis mid-word:
   the price goes first, then the partner name, leaving "custom property lists." whole
   next to the action even at 360. */
@media (max-width:767px){
  .s-offer__price{ display:none }
  .s-offer__inner{ justify-content:flex-start; gap:var(--s-3); padding-right:52px }
}
@media (max-width:560px){
  .s-offer__with{ display:none }
  .s-offer__text{ min-width:0 }
  .s-offer__copy{ white-space:nowrap }
}