/* ============================================
   HubSpot cookie-consent banner — CSS override only.

   This banner is NOT part of the Loom theme's own markup - it's
   HubSpot's native "Cookie Consent Banner" feature, injected
   client-side by HubSpot's tracking script on every page (this repo
   has no control over its DOM structure or when it renders). It's
   configured in HubSpot: Settings -> Privacy & Consent -> Cookies ->
   [domain] -> Consent Banner Options -> Customize. That tool only
   exposes button colors/shape - not layout, shadow, or link color -
   so this file covers everything its own editor doesn't.

   Real DOM (confirmed via live outerHTML, 2026-07-09):
     #hs-eu-cookie-confirmation                    outer, fixed position
       #hs-eu-cookie-confirmation-inner            the visible white card
         #hs-eu-header-container > #hs-eu-close-button
         #hs-eu-policy-wording > <p>...</p>          the banner text
         #hs-eu-cookie-confirmation-buttons-area
           #hs-eu-confirmation-button-group
             #hs-eu-opt-in-buttons
               #hs-eu-confirmation-button (Accept all)
               #hs-eu-decline-button (Decline all)

   Every selector below is qualified with the outer #hs-eu-cookie-
   confirmation ancestor ID, not just the target element's own ID.
   A single-ID override + !important still lost to some of HubSpot's
   own rules (especially at a mobile breakpoint) - !important only
   wins a tie when specificity is equal, and HubSpot's own responsive
   rules apparently qualify their selectors more precisely than a
   lone ID. Doubling the ID count here guarantees at least matching
   that, regardless of stylesheet load order. Same underlying gotcha
   as every other HubSpot-injected surface on this theme (forms,
   HUBSPOT-NOTES.md §14). ============================================ */

#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
  position: relative !important;
  display: flex !important;
  /* Deliberate column stack, not a row-with-wrap-fallback: the policy
     text is long enough that it always claims a full row on its own
     regardless of viewport width, so "row" never actually achieved
     side-by-side layout in practice - it just wrapped to two rows
     every time, and space-between pushed those two rows to the
     extremes of the box. Column + an explicit gap gives predictable
     spacing regardless of text length or box height. */
  flex-direction: column !important;
  align-items: center !important;
  /* center, not flex-start - if the box has any forced min-height
     taller than the actual content, flex-start pools all the extra
     space at the bottom instead of distributing it evenly. */
  justify-content: center !important;
  gap: 1.75rem !important;
  padding: 2rem !important;
  border-radius: 16px !important;
  /* Matches the documented shadow for elements that need to lift off
     an arbitrary background (dark hero or light section) rather than
     read as a flat overlay - see PATTERNS.md §5.2 (.gs-glass). This
     banner can render on top of any page/section, so it needs the
     same universally-legible shadow, not a light-bg-only one. */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
}

#hs-eu-cookie-confirmation #hs-eu-policy-wording {
  width: 100% !important;
  /* width alone doesn't guarantee full-width text - if HubSpot's own
     default CSS also sets a max-width here (never checked/reset
     before), that wins over width and caps the actual rendered
     column narrower than the card, making text wrap early and leave
     unused space on the right. */
  max-width: none !important;
}

#hs-eu-cookie-confirmation #hs-eu-policy-wording p {
  margin: 0 !important;
  max-width: none !important;
}

/* body-qualified rather than the plain div#..div#..a form - there's
   a competing inline <style> rule (not from this stylesheet, likely
   leftover custom CSS from the old banner setup) using that exact
   selector with color/font-weight set to !important. Identical
   selector = tied specificity, and that rule was winning the tie.
   The extra body ancestor qualifier makes this rule strictly more
   specific, so it wins outright regardless of !important or source
   order on the other side. */
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a {
  color: #525c68 !important;
  font-weight: normal !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  transition: color 0.2s ease;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a:hover {
  color: var(--color-brand-accent) !important;
  /* Without this, the competing inline rule's own :hover selector
     (font-weight: 500 !important) wins specifically during hover -
     its pseudo-class tier ties with this rule's, and pseudo-class
     ties are resolved before type-selector count is ever considered,
     so the extra "body" qualifier that won the base (non-hover) case
     doesn't help here. Repeating normal weight keeps it constant
     through hover so only color actually changes, as asked. */
  font-weight: normal !important;
}

#hs-eu-cookie-confirmation #hs-eu-opt-in-buttons {
  display: flex !important;
  gap: 0.75rem !important;
}

/* Accept all — same treatment as .gs-btn .gs-btn--primary .gs-btn--sm
   (btn.css) - the exact size used by the site header's own CTA. */
body div#hs-eu-cookie-confirmation #hs-eu-confirmation-button {
  background: var(--gradient-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.4rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  transition: transform 0.1s ease-out, filter 0.15s ease;
}

/* Standard .gs-btn:hover treatment - scale up, not a sheen sweep. */
body div#hs-eu-cookie-confirmation #hs-eu-confirmation-button:hover {
  transform: scale(1.06) !important;
  filter: brightness(1.08);
}

/* Decline all — same treatment as .gs-btn .gs-btn--secondary .gs-btn--sm
   (btn.css): outline button, thicker 1.5px border at this smaller
   size (btn.css's own documented rule for --sm buttons). Explicit
   var(--color-fg) instead of relying on currentColor inheritance -
   more reliable against the same kind of competing rule the link
   color hit. */
body div#hs-eu-cookie-confirmation #hs-eu-decline-button {
  background: transparent !important;
  color: var(--color-fg) !important;
  border: 1.5px solid var(--color-fg) !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.4rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  transition: transform 0.1s ease-out;
}

body div#hs-eu-cookie-confirmation #hs-eu-decline-button:hover {
  transform: scale(1.06) !important;
}