/* static/css/site_chrome.css: the cookie banner (static/js/cookie_consent.js) and the sticky
   mobile sign-up button (static/js/sticky_cta.js) on the public pages. A file, not a <style>,
   so both pages share it and it stays inside the CSP target (style-src 'self').
   z-index: above the pages' views (3), below their dialogs (40 and up). */

.consent-banner {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 35;
  max-width: 640px; margin: 0 auto; padding: 14px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: #111114; color: #ffffff; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(17, 17, 20, 0.24);
  font-family: var(--brand-font-body, system-ui, sans-serif); font-size: 14px; line-height: 1.45;
}
.consent-text { margin: 0; flex: 1 1 260px; }
.consent-text a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }
.consent-btn {
  min-height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; color: #ffffff;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.4);
}
.consent-btn.primary { background: #ffffff; color: #111114; border-color: #ffffff; }
.consent-btn:focus-visible, .consent-text a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.sticky-cta { display: none; }
@media (max-width: 759px) {
  /* Top, not bottom, on phones: at the bottom it sat over the home page's phone field. */
  .consent-banner { top: max(10px, env(safe-area-inset-top)); bottom: auto; padding: 12px 14px; font-size: 13px; }
  .consent-btn { min-height: 36px; padding: 0 16px; }
  .sticky-cta:not([hidden]) {
    position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
    display: flex; align-items: center; justify-content: center; min-height: 52px;
    border-radius: 999px; background: var(--brand-primary-text, #111114); color: #ffffff;
    font-family: var(--brand-font-body, system-ui, sans-serif); font-size: 17px; font-weight: 600;
    text-decoration: none; box-shadow: 0 10px 30px rgba(17, 17, 20, 0.22);
  }
  .sticky-cta:focus-visible { outline: 3px solid #111114; outline-offset: 3px; }
}
@media (forced-colors: active) {
  .consent-banner, .sticky-cta { border: 1px solid CanvasText; }
}