/* ============================================================
   SHEFA, the promotional banner: a slim STRIP fixed above the site header and
   an in-page BAND under the hero. Loaded AFTER main.css on the 8 marketing
   pages and on admin.html (for the live preview). NEVER on the 6 legal pages.

   The markup is rendered ONCE, in worker/src/lib/promotions.js. The Worker
   injects it with HTMLRewriter, scripts/serve-csp.py injects the same strings
   locally, and the admin preview sets them as innerHTML. This file is the only
   stylesheet for it: classes promo-*, properties --promo-*.

   Nothing here transitions or animates, so reduced motion needs no rule, and
   nothing here depends on JavaScript: both renderings are plain HTML that is
   readable the instant the page lands, with no `reveal` class on them.

   HOW THE PAGE MAKES ROOM. main.css reserves `--promo-h` (0px by default) in
   every rule that clears the fixed header: the header's own top, the two hero
   paddings, scroll-padding-top, the mobile menu and the sticky filter rail on
   the services page. This file sets --promo-h under html.has-promo-strip, and
   main.js overwrites it with the measured height once the sentence wraps. The
   two tokens stay separate: --promo-min is the strip's own minimum, --promo-h
   is what the page reserves, so a strip that un-wraps can shrink again.
   ============================================================ */

.promo-strip,
.promo-band {
  --promo-green: var(--green-800, #1B3B2C);
  --promo-ink: var(--green-900, #12291F);
  --promo-gold: var(--gold, #C2A25C);
  --promo-gold-soft: var(--gold-soft, #E7D9B4);
  --promo-gold-tint: var(--gold-tint, #F6F0E1);
  --promo-gold-text: var(--gold-text, #7F6428);
  --promo-muted: var(--muted, #5B6B60);
  --promo-white: var(--white, #FFFFFF);
  --promo-sans: var(--sans, "Inter", system-ui, sans-serif);
  --promo-radius: var(--radius, 10px);
  --promo-pill: var(--radius-pill, 999px);
  --promo-gutter: var(--gutter, clamp(20px, 4vw, 48px));
  font-family: var(--promo-sans);
}

/* 40px on a desktop, 44px for a finger (the site's own touch rule: no target
   under 44px), 56px on a phone where the sentence is allowed two lines. */
html.has-promo-strip { --promo-min: 40px; --promo-h: var(--promo-min); }
@media (pointer: coarse) { html.has-promo-strip { --promo-min: 44px; } }
@media (max-width: 720px) { html.has-promo-strip { --promo-min: 56px; } }

/* ---------- strip ---------- */
.promo-strip {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-promo, 110);
  min-height: var(--promo-min, 40px);
  background: var(--promo-green);
  color: var(--promo-white);
  border-bottom: 1px solid rgba(231, 217, 180, .22);
  container-type: inline-size;
}
.promo-strip-inner {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px 14px;
  min-height: var(--promo-min, 40px);
  width: min(1200px, 100% - 2 * var(--promo-gutter));
  margin-inline: auto;
  padding-block: 6px;
  font-size: .82rem; line-height: 1.35;
}
.promo-label {
  flex: none; display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: var(--promo-pill);
  background: var(--promo-gold); color: var(--promo-ink);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.promo-strip .promo-text {
  min-width: 0; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The only anchor. Its ::after is stretched over the whole strip, so the bar
   is one tap target while the accessible name stays the button text alone. */
.promo-strip .promo-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--promo-gold-soft); text-decoration: none;
  font-size: .7rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
}
.promo-strip .promo-cta::after { content: ""; position: absolute; inset: 0; }
.promo-strip .promo-cta:hover { color: var(--promo-white); }
.promo-strip .promo-cta:focus-visible { outline: 2px solid var(--promo-gold); outline-offset: 3px; }
.promo-strip:has(.promo-cta:focus-visible) { outline: 2px solid var(--promo-gold); outline-offset: -2px; }
.promo-arrow { width: 15px; height: 15px; flex: none; }

/* ---------- band ---------- */
.promo-band {
  padding-block: clamp(22px, 3.5vw, 40px);
  container-type: inline-size;
}
.promo-band-inner {
  width: min(1200px, 100% - 2 * var(--promo-gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label cta" "text cta" "fine cta";
  gap: 6px 28px; align-items: center;
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px);
  background: var(--promo-gold-tint);
  border: 1px solid var(--promo-gold-soft);
  border-radius: var(--promo-radius);
  color: var(--promo-ink);
}
/* --gold-text on --gold-soft is only 3.8:1, so the band's pill is inverted:
   dark green with gold-soft text, 8.8:1. Hard rule 4 holds on both surfaces. */
.promo-band .promo-label {
  grid-area: label; justify-self: start;
  background: var(--promo-green); color: var(--promo-gold-soft);
}
.promo-band .promo-text {
  grid-area: text; margin: 0;
  font-size: 1.02rem; line-height: 1.55; font-weight: 500;
  color: var(--promo-green);
}
.promo-band .promo-fine {
  grid-area: fine; margin: 0;
  font-size: .82rem; line-height: 1.5;
  color: var(--promo-muted);
}
/* .btn .btn-primary .btn-sm come from main.css; only the placement is ours. */
.promo-band .promo-cta { grid-area: cta; justify-self: end; }

/* ---------- narrow ----------
   A container query rather than a viewport one: on the site the strip and the
   band span the viewport, so this IS the 720px breakpoint; in the admin's
   preview it is the frame's width, which is what lets a 360px-wide frame show
   the real phone clamp from the same rules. */
@container (max-width: 720px) {
  .promo-strip-inner {
    gap: 6px 10px; padding-block: 7px;
    font-size: .78rem; justify-content: flex-start; text-align: left;
  }
  .promo-strip .promo-label { max-width: 38%; overflow: hidden; text-overflow: ellipsis; }
  .promo-strip .promo-text {
    flex: 1 1 auto;
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* The arrow stays as the visible cue; the words stay for a screen reader. */
  .promo-strip .promo-cta-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .promo-band-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "text" "fine" "cta";
    gap: 8px;
  }
  .promo-band .promo-cta { justify-self: start; }
}

/* ---------- print ----------
   The strip is chrome and goes; the band is content and prints. main.css
   zeroes --promo-h in print so the hidden strip reserves nothing on paper. */
@media print {
  .promo-strip { display: none !important; }
}