/* ============================================================================
   rr-cookiebot.css — mobile compaction of the Cookiebot consent banner
   ----------------------------------------------------------------------------
   WHAT: on phones (<=600px) the Cookiebot "Multilevel" dialog rendered as a
   ~98%-height overlay that covered the whole screen — the first thing a mobile
   visitor saw was a cookie wall, not the site. This restyles it into a compact
   bottom sheet so the hero/page shows above it.

   WHY THIS IS A STYLESHEET WE OWN (not a Cookiebot setting): Cookiebot's free
   tier does not allow changing the banner layout in their dashboard (paid), but
   the dialog renders as ordinary HTML in our page DOM, so our CSS can restyle it
   from our side for free. Cookiebot's sizing lives in THEIR stylesheet (the
   dialog's inline style is only `display:flex`), so we override with !important.

   COMPLIANCE — presentation only, do not weaken:
   - Copy and consent FUNCTION are untouched (this file only sizes/positions).
   - Allow all and Reject all keep EQUAL prominence and stay visible (the footer
     is pinned) — never let Reject scroll out of view or become a "ghost" button.
     That equal-prominence requirement is GDPR; keep it if you edit this.
   - The "Powered by Cookiebot" mark is left intact (free-tier requirement).

   SCOPE / FRAGILITY:
   - `@media (max-width:600px)` only — desktop/tablet keep Cookiebot's default
     centered dialog (they were never the problem).
   - Targets Cookiebot's #CybotCookiebotDialog* IDs. If Cookiebot changes their
     markup in a future update, these overrides may need revisiting (the banner
     would simply fall back to their default full-height layout — nothing breaks).
   - The Cookiebot banner only renders on the REGISTERED prod domain, so this can
     only be verified visually on production (not Local/staging). It was built and
     verified by live-prototyping on prod. See BUILD_LOG 2026-07-20.

   REVERSIBLE: delete this file + its enqueue line in rr-custom.php to restore the
   default banner exactly.
   ============================================================================ */

@media (max-width: 600px) {

  /* --- Dialog -> bottom sheet, capped so the page shows above it --- */
  #CybotCookiebotDialog {
    inset: auto 0 0 0 !important;
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    transform: none !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 50vh !important;
    border-radius: 16px 16px 0 0 !important;
    display: flex !important; flex-direction: column !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .18) !important;
  }
  #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper {
    max-height: 50vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* --- Shrink the chrome (logo strip + Consent/Details/About tabs) so the
         message and switches get the room instead of the header --- */
  #CybotCookiebotDialogHeader { padding: 5px 14px !important; }
  #CybotCookiebotDialogNav { padding: 0 !important; }
  #CybotCookiebotDialogNavList { margin: 0 !important; padding: 0 !important; }
  #CybotCookiebotDialogNavDeclaration,
  #CybotCookiebotDialogNavDetails,
  #CybotCookiebotDialogNavAbout,
  #CybotCookiebotDialogNav a,
  #CybotCookiebotDialogNav li {
    padding: 9px 6px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  /* --- Clamp the intro paragraph to 2 lines (full text still reachable by
         scrolling, and via the Details tab) --- */
  #CybotCookiebotDialogBodyContentText {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 6px 0 !important;
  }

  /* --- Switch rows: compact, and aligned to the 15px content gutter (without
         this they lose their padding and hug the left/right edges) --- */
  #CybotCookiebotDialogBodyLevelWrapper {
    padding-top: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .CybotCookiebotDialogBodyLevelButtonWrapper {
    min-height: 0 !important;
    padding: 8px 15px !important;
  }

  /* --- Footer: pinned so Allow all / Reject all are always visible; primary
         actions side-by-side (equal weight), Allow selection full-width below --- */
  #CybotCookiebotDialogFooter {
    position: sticky !important; bottom: 0 !important;
    background: #fff !important; z-index: 2 !important;
    box-shadow: 0 -6px 14px rgba(0, 0, 0, .08) !important;
    padding: 8px 12px !important;
  }
  #CybotCookiebotDialogBodyButtonsWrapper {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    gap: 6px !important; margin: 0 !important;
  }
  #CybotCookiebotDialogBodyButtonsWrapper .CybotCookiebotDialogBodyButton {
    width: auto !important; min-width: 0 !important; margin: 0 !important;
    padding: 9px 8px !important; font-size: 12.5px !important;
  }
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { order: 1 !important; flex: 1 1 46% !important; }
  #CybotCookiebotDialogBodyButtonDecline                 { order: 2 !important; flex: 1 1 46% !important; }
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { order: 3 !important; flex: 1 1 100% !important; }
}