/* ======================================================================
   RECILENS — overrides.css
   Loaded AFTER the legacy nav and footer stylesheets, and only for that
   reason. It contains no new design decisions.

   Why it exists: nav.php and footer.php each link their own stylesheet
   from inside <body>, so those sheets land after everything in <head>.
   recilens-nav-styles.css sets `body { background-color: var(--rc-bg-dark) }`,
   which beat tokens.css on order alone and forced every page to the old
   dark ground in BOTH themes. The theme toggle was changing the tokens and
   nothing was reading them.

   The fix is order, not specificity: restate the token-driven values last.
   When the nav and footer are rebuilt onto components.css this file goes.
   ====================================================================== */

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.6;
}

/* The legacy nav and footer hardcode their own palette. Map their variables
   onto the contract so they follow the theme instead of fighting it. */
:root{
  --rc-bg-dark:var(--bg);
  --rc-text-light:var(--text);
  --rc-text-muted:var(--text-2);
  --rc-accent:var(--accent);
  --rc-font:var(--font-body);
  --rc-border:var(--hairline);
  --rc-card:var(--surface);
}

.recilens-nav,.recilens-navbar,nav.recilens-nav,
.recilens-footer,footer.recilens-footer{
  background:var(--surface);
  color:var(--text);
  border-color:var(--hairline);
}
.recilens-footer-link,.recilens-nav-link{ color:var(--text-2); }
.recilens-footer-link:hover,.recilens-nav-link:hover{ color:var(--text); }

/* The launcher never sits over the hero headline. Outline until the hero
   has scrolled away, then filled — the approved wireframe call. */
.rc-fab,[data-rc-launcher]{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:var(--z-float);
}
@media (max-width:400px){ .rc-fab,[data-rc-launcher]{ width:52px; height:52px; } }
html[data-modal="open"] .rc-fab,
html[data-modal="open"] [data-rc-launcher],
html[data-modal="open"] .rc-widget-panel{ visibility:hidden; }

/* ----------------------------------------------------------------------
   LEGACY FIXED ELEMENTS, brought into the ladder.

   Found at 320px: the sticky nav at z-index 2000, the cookie banner at
   99999 and the cookie modal at 100000. Three arbitrary numbers competing
   with each other and with the chat launcher, which is the exact problem
   the ladder exists to stop.

   The cookie modal is the worse of the two. It sits at opacity 0 but
   display:flex and visibility:visible, covering the entire viewport at the
   highest z-index on the page. Invisible, and in front of everything.
   ---------------------------------------------------------------------- */

.rc-navbar-sticky-wrapper{ z-index:var(--z-nav); }
.rc-cookie-banner{ z-index:var(--z-toast); }
.rc-cookie-modal{ z-index:var(--z-modal); }

/* A fixed bottom banner covers whatever is under it, so the page reserves
   the space instead. site.js sets --rc-banner-h to its measured height. */
body{ padding-bottom:var(--rc-banner-h,0px); }

/* The launcher sits above the banner rather than behind it, and it is 52px
   below 400px so it clears a 44px touch target with room either side. */
@media (max-width:400px){
  .rc-chat,.rc-fab,[data-rc-launcher]{ width:52px; height:52px; }
}
.rc-chat,.rc-fab,[data-rc-launcher]{
  bottom:calc(16px + var(--rc-banner-h,0px) + env(safe-area-inset-bottom));
}

/* Nothing floating stays visible while a modal is open. */
html[data-modal="open"] .rc-chat,
html[data-modal="open"] .rc-cookie-banner{ visibility:hidden; }

/* ----------------------------------------------------------------------
   COOKIE BANNER — compact bottom bar, not a card over the page.

   At 320px it rendered as a 272x375 card floating at the middle of the
   viewport, directly over the hero CTAs. A consent notice has to appear,
   but it does not have to cover 40% of a phone screen or the one button
   the page exists to get pressed.

   Below 600px it becomes a bar pinned to the bottom edge, capped in
   height and scrollable inside itself if the text runs long. Combined
   with the --rc-banner-h reserve in site.js, nothing ends up unreachable.
   ---------------------------------------------------------------------- */
@media (max-width:600px){
  .rc-cookie-banner{
    left:0; right:0; bottom:0; width:auto; max-width:none;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
    max-height:34vh; overflow-y:auto;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .rc-cookie-banner .rc-cookie-title{ font-size:var(--fs-14); margin:0; }
  .rc-cookie-banner .rc-cookie-text{ font-size:var(--fs-12); margin:0; }
  .rc-cookie-banner .rc-cookie-buttons{ gap:8px; flex-wrap:wrap; }
  .rc-cookie-banner .rc-cookie-buttons > *{ flex:1 1 auto; min-height:44px; }
}

/* ----------------------------------------------------------------------
   THE FLOAT STACK, ACTUALLY STACKED

   `.rc-fab { position: fixed; bottom: 16px }` higher up this file dates
   from when the assistant button was the only floating control on the
   page. It is still pinning the button to the corner, which is why the
   WhatsApp button and the assistant have been sitting exactly on top of
   one another — the stack laid out three children and one of them was
   never in it.

   Anything inside .rc-float belongs to the stack and is positioned by the
   stack. The standalone launcher outside it keeps the old behaviour.
   ---------------------------------------------------------------------- */
.rc-float .rc-fab,
.rc-float .rc-wa,
.rc-float .rc-totop,
.rc-float [data-rc-launcher]{
  /* relative, not static: with every offset auto it sits in normal flow
     exactly as static would, but it stays a positioning context. The
     first version used static, which took the context away from the
     WhatsApp button - so its pulse ring and its hover label anchored to
     .rc-float instead and the ring expanded to the size of the whole
     stack. That is the wave that crossed the corner of the page. */
  position:relative !important;
  inset:auto !important;
  z-index:auto;
}