/* CTA banners — three shapes, all self-contained + theme-aware via CSS vars the
   renderer can override per-banner (--banner-bg / --banner-text / --banner-accent). */
.hwy-banner {
   --banner-bg: #0b3d2e;
   --banner-text: #ffffff;
   --banner-accent: #ffd83d;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   z-index: 900;
}
.hwy-banner a { text-decoration: none; }
/* An open app menu always outranks a promotion — drop every banner beneath the
   header's stacking context while the menu is up (appMenu.js sets the class). */
body.app-menu-open .hwy-banner { z-index: 300 !important; }
.hwy-banner-cta {
   display: inline-block; background: var(--banner-accent); color: #1b1b1b; font-weight: 800;
   border-radius: 999px; padding: 9px 18px; white-space: nowrap;
}
.hwy-banner-cta:hover { filter: brightness(1.06); }
.hwy-banner-link { color: var(--banner-text); text-decoration: underline; font-size: 13px; opacity: 0.9; white-space: nowrap; }
.hwy-banner-close {
   background: rgba(255, 255, 255, 0.2); color: var(--banner-text); border: none; border-radius: 50%;
   width: 32px; height: 32px; cursor: pointer; font-size: 15px; line-height: 1; flex: 0 0 auto;
   display: inline-flex; align-items: center; justify-content: center;
}

/* ── Oval: a floating pill, bottom-center ─────────────────────────────── */
.hwy-banner-oval {
   position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
   background: var(--banner-bg); color: var(--banner-text);
   border-radius: 999px; padding: 10px 14px 10px 20px;
   box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
   max-width: min(560px, calc(100vw - 24px));
}
.hwy-banner-oval-inner { display: flex; align-items: center; gap: 14px; }
.hwy-banner-oval .hwy-banner-text { font-weight: 700; font-size: 14.5px; }
.hwy-banner-oval .hwy-banner-close { margin-left: 2px; }

/* ── Band: full-width bar pinned to the top; pushes page content down ──── */
.hwy-banner-band {
   position: fixed; top: 0; left: 0; right: 0;
   background: var(--banner-bg); color: var(--banner-text);
   display: flex; align-items: center; padding: 10px 16px; gap: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
body.has-banner-band { padding-top: 60px; }
.hwy-banner-band-inner { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; }
.hwy-banner-band .hwy-banner-text { display: flex; flex-direction: column; }
.hwy-banner-band .hwy-banner-text strong { font-size: 15px; }
.hwy-banner-band .hwy-banner-text span { font-size: 12.5px; opacity: 0.85; }
.hwy-banner-band .hwy-banner-actions { display: flex; align-items: center; gap: 12px; }

/* ── Sash: diagonal "Miss America" ribbon across a top corner ─────────── */
.hwy-banner-sash { position: fixed; top: 0; width: 210px; height: 210px; overflow: hidden; pointer-events: none; }
.hwy-banner-sash-right { right: 0; }
.hwy-banner-sash-left { left: 0; }
.hwy-banner-sash-inner {
   position: absolute; top: 40px; width: 300px; padding: 9px 0; text-align: center;
   background: var(--banner-bg); color: var(--banner-text); font-weight: 800; font-size: 13.5px;
   letter-spacing: 0.3px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); pointer-events: auto;
}
.hwy-banner-sash-right .hwy-banner-sash-inner { right: -80px; transform: rotate(45deg); }
.hwy-banner-sash-left .hwy-banner-sash-inner { left: -80px; transform: rotate(-45deg); }
.hwy-banner-sash .hwy-banner-close {
   position: absolute; top: 6px; pointer-events: auto; width: 26px; height: 26px; font-size: 12px;
}
.hwy-banner-sash-right .hwy-banner-close { right: 6px; }
.hwy-banner-sash-left .hwy-banner-close { left: 6px; }

@media (max-width: 520px) {
   .hwy-banner-oval-inner { flex-wrap: wrap; justify-content: center; }
   .hwy-banner-band-inner { justify-content: flex-start; }
}