/*
 * Online quote page (templates/page-quote.php) — W-22 / RQI-03. Loaded ONLY on the quote page, after the redesign layer.
 * Every rule is scoped to body.aluminate-quote-page (a class printed by the template's body_class filter, not :has(),
 * critic G20). Rain Quote's own CSS/JS are not edited: the site sets Rain Quote's documented custom properties
 * (--rq-sticky-top, --rq-bar-h) and moves the SITE's floating controls out of the way.
 * Runtime values come from assets/js/quote-layout.js (ResizeObserver): --rq-sticky-top, --rq-bar-h, --aluminate-cookie-h
 * and the classes aluminate-quote-has-bar (the mobile price bar exists) / aluminate-cookie-open (cookie choice open).
 */

/* Sticky header (64 px) + 12 px gap; the quote template has no reading-progress bar. A plain px value on purpose:
   Rain Quote reads this property with parseInt() to offset its focus scrolling. JS replaces it with the measured value. */
body.aluminate-quote-page { --rq-sticky-top: 76px; }

/* ---------- page shell ---------- */
body.aluminate-quote-page .quote-shell { padding-block: 0 2.5rem; }
body.aluminate-quote-page .quote-shell__breadcrumbs .breadcrumbs { padding-block: .75rem .25rem; }
body.aluminate-quote-page .quote-page__intro { padding-block: .25rem .75rem; }
body.aluminate-quote-page .quote-page__brand { margin: 0 0 .25rem; color: #075CC9; font-size: .95rem; font-weight: 800; }
body.aluminate-quote-page .quote-page__title { margin: 0 0 .5rem; color: #0C3058; font-size: clamp(1.65rem, 5.5vw, 2.5rem); line-height: 1.2; }
body.aluminate-quote-page .quote-page__lead { max-width: 62ch; margin: 0 0 .4rem; color: #101319; font-size: 1.06rem; line-height: 1.6; }
body.aluminate-quote-page .quote-page__scope { max-width: 62ch; margin: 0 0 .25rem; color: #3d4a5c; line-height: 1.55; }
body.aluminate-quote-page .quote-page__other { margin: 0; }
body.aluminate-quote-page .quote-page__other a {
  display: inline-flex; align-items: center; min-height: 44px; color: #0C3058; font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px;
}
body.aluminate-quote-page .quote-page__other a:focus-visible { outline: 3px solid #075CC9; outline-offset: 2px; }
body.aluminate-quote-page .quote-page__app { max-width: 1180px; }
/* Rollback fallback (plugin inactive, templates/page-quote.php): a contact path instead of the configurator. */
body.aluminate-quote-page .quote-page__fallback {
  max-width: 62ch; margin-block: .5rem 2rem; padding: 1.25rem 1.35rem; color: #101319; background: #EAF2FE;
  border: 1px solid #b9d0ee; border-inline-start: 5px solid #075CC9; border-radius: 12px;
}
body.aluminate-quote-page .quote-page__fallback h2 { margin: 0 0 .5rem; color: #0C3058; font-size: 1.3rem; line-height: 1.3; }
body.aluminate-quote-page .quote-page__fallback p { margin: 0 0 .75rem; line-height: 1.6; }
body.aluminate-quote-page .quote-page__fallback-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
body.aluminate-quote-page .quote-page__fallback-actions .button { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 1.2rem; }
/* The app is an application, not an article: no article word-breaking or content max-width from the theme. */
body.aluminate-quote-page .quote-page__app .rq-app { overflow-wrap: normal; }

/* ---------- floating controls vs. the price bar (phones and small tablets: Rain Quote's bar mode) ---------- */
@media (max-width: 768px) {
  /* The accessibility toggle (z 9999999, bottom 88px since the redesign) sat on the price/CTA side of the bar. */
  html body.aluminate-quote-page.aluminate-quote-has-bar #sitelinx-toggle-toolbar {
    top: auto !important; bottom: calc(var(--rq-bar-h, 150px) + 12px) !important;
  }
  html body.aluminate-quote-page.aluminate-quote-has-bar .ai-float { bottom: calc(var(--rq-bar-h, 150px) + 12px) !important; }

  /* No cookie choice yet (critic G18: the panel must never act as a cookie wall). The price bar and the challenge box
     sit ABOVE the open panel, so a whole quote can be completed without choosing. */
  html body.aluminate-quote-page.aluminate-cookie-open .rq-app .rq-pricepanel { bottom: var(--aluminate-cookie-h, 0px); }
  html body.aluminate-quote-page.aluminate-cookie-open.aluminate-quote-has-bar #sitelinx-toggle-toolbar {
    bottom: calc(var(--aluminate-cookie-h, 45vh) + var(--rq-bar-h, 150px) + 12px) !important;
  }
  html body.aluminate-quote-page.aluminate-cookie-open .ai-float { visibility: hidden !important; }

  /* Compact cookie panel on the quote page: the same text and buttons (nothing hidden), less height.
     Buttons share one row whatever their number (2 today, 3 after the analytics/advertising consent change). */
  html body.aluminate-quote-page .cookie-panel {
    max-height: 42vh; overflow: auto; gap: 6px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.aluminate-quote-page .cookie-panel h2 { margin: 0 !important; font-size: 14px !important; line-height: 1.3 !important; }
  html body.aluminate-quote-page .cookie-panel p { font-size: 13px !important; line-height: 1.35 !important; }
  html body.aluminate-quote-page .cookie-panel__actions {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none !important; gap: 6px !important;
  }
  html body.aluminate-quote-page .cookie-panel__actions .button {
    min-height: 44px; padding: 0 6px !important; font-size: 13px !important; line-height: 1.2; white-space: normal;
  }
}

/* Up to 980 px the redesign parks the accessibility toggle at bottom:88px, on top of an open cookie panel (it only
   lifted it at <=600 px). On the quote page it sits above the panel at every width where it is bottom-anchored. */
@media (max-width: 980px) {
  html body.aluminate-quote-page.aluminate-cookie-open #sitelinx-toggle-toolbar {
    top: auto !important; bottom: calc(var(--aluminate-cookie-h, 45vh) + 12px) !important;
  }
}

/* Tablets/desktops: the cookie card sat centred over both columns and covered the sticky price panel and its CTA on
   short screens (1366x768). On the quote page it is a narrower card in the inline-start corner (right, RTL), under the
   form column; the price panel column stays clear, and keyboard focus stops above the card (scroll-padding). */
@media (min-width: 769px) {
  html body.aluminate-quote-page .cookie-panel {
    inset-inline-start: 16px !important; inset-inline-end: auto !important; width: min(420px, calc(100% - 32px)) !important;
    margin: 0 !important; grid-template-columns: 1fr !important;
    gap: 8px !important; padding: 12px 14px !important;
  }
  /* Three choices since the analytics/advertising consent change: a compact card (smaller type, the buttons on one row)
     so its top stays below the accessibility toggle on 768-px-high screens (1024x768 / 1366x768). */
  html body.aluminate-quote-page .cookie-panel h2 { font-size: 16px !important; margin: 0 0 4px !important; line-height: 1.3 !important; }
  html body.aluminate-quote-page .cookie-panel p { font-size: 14px !important; line-height: 1.4 !important; margin: 2px 0 !important; }
  html body.aluminate-quote-page .cookie-panel__actions {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none !important; gap: 6px !important;
  }
  html body.aluminate-quote-page .cookie-panel__actions .button {
    min-height: 44px; padding: 0 8px !important; font-size: 14px !important; line-height: 1.2; white-space: normal;
  }
}

/* The challenge box is fixed at the bottom at every width; keep it above an open cookie panel. */
html body.aluminate-quote-page.aluminate-cookie-open .rq-app .rq-verify { bottom: calc(var(--aluminate-cookie-h, 0px) + 1rem); }
@media (max-width: 768px) {
  /* While the challenge box is shown (full width on phones), the accessibility toggle moves above it and the AI float
     steps aside, so neither covers the challenge. */
  /* The repeated class outranks the cookie-open + price-bar rule above (the challenge box sits over both). */
  html body.aluminate-quote-page.aluminate-quote-verifying.aluminate-quote-verifying.aluminate-quote-verifying #sitelinx-toggle-toolbar {
    top: auto !important; bottom: calc(var(--aluminate-cookie-h, 0px) + var(--aluminate-verify-h, 140px) + 1rem + 12px) !important;
  }
  html body.aluminate-quote-page.aluminate-quote-verifying .ai-float { visibility: hidden !important; }
}

/* Rain Quote parks its honeypot at left:-10000px. In this right-to-left document that off-screen box is scrollable
   overflow, so the contact step gained ~10 000 px of sideways scroll on phones. Same hiding, without the offset. */
html body.aluminate-quote-page .rq-app .rq-hp {
  left: auto !important; right: auto !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  body.aluminate-quote-page .quote-page__other a { transition: none; }
}