/* =============================================================
   H2Oasis — Day / Dusk theming
   Floating toggle (lower-left) + light "daytime" palette and dark
   "sunset/dusk" palette for the Googly / Poolcare Elementor template.

   How it works
   ------------
   The template colors most things through Elementor "global color"
   CSS variables, which it defines on `body.elementor-kit-5`. To win
   that specificity we re-map the variables on `html.<mode> body`.

   The hard part: several of those variables are OVERLOADED — the same
   token is used as BOTH a background and a text color:
     - googly1  = brand "black"  -> used as black TEXT (50x) + black bg (3x)
     - googly7/8/9 = "white"      -> used as white TEXT (37x) + white bg
   A blanket flip therefore breaks whichever use is in the minority.
   So:
     - googly1  : flipped to white (text wins); the 3 black-bg sections
                  are corrected back to a dusky surface.
     - googly7/8/9 : kept WHITE (text wins); the specific white-bg
                  cards are corrected to a dusky surface instead.
   Brand accents (googly2 cyan, googly3 lime, accent, primary) are kept.
   ============================================================= */

/* ---------- Floating toggle button ---------- */
#h2o-theme-toggle {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 99999;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #27b0cc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: background .25s ease, color .25s ease,
              transform .2s ease, box-shadow .25s ease;
}
#h2o-theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
#h2o-theme-toggle:focus-visible {
  outline: 3px solid #27b0cc;
  outline-offset: 3px;
}
#h2o-theme-toggle svg { width: 24px; height: 24px; display: block; }
#h2o-theme-toggle .h2o-sun  { display: none; }
#h2o-theme-toggle .h2o-moon { display: block; }

html.h2o-dark #h2o-theme-toggle {
  background: #243154;
  color: #ffd35e;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
html.h2o-dark #h2o-theme-toggle .h2o-sun  { display: block; }
html.h2o-dark #h2o-theme-toggle .h2o-moon { display: none; }

@media (max-width: 600px) {
  #h2o-theme-toggle { left: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* Smooth the flip on the big structural surfaces */
body,
.site-header, .site-header-wrap, .site-main-header-wrap,
.site-footer, .site-footer-wrap,
.content-area, .site-main,
.elementor-widget-wrap, .uc_details, .uc_quote_item,
.elementor-icon-list-text,
.elementor-icon-list-icon svg,
.elementor-icon-list-icon i {
  transition: background-color .3s ease, color .3s ease,
              border-color .3s ease, fill .3s ease;
}

/* =============================================================
   LIGHT — "daytime": blue-tinted background, pure-white containers
   ============================================================= */
html:not(.h2o-dark) body {
  /* off-white sections -> pure white "clouds".
     !important is required: the theme outputs an inline
     `:root body.googly-elementor-colors { ... }` block (specificity 0,2,1)
     that otherwise out-ranks this rule and pins the Elementor globals. */
  --e-global-color-googly4: #ffffff !important;
  /* sky-blue background behind the white containers (sampled from swatch) */
  background-color: #87CEEB;
  /* "afternoon sky" band wash — daylight sibling of --h2o-sunset. Soft echo
     of the protected banner gradient (yellow -> white -> teal), desaturated
     so dark text and white cards keep full contrast on top of it. */
  --h2o-afternoon: linear-gradient(150deg, #fdf4d6 0%, #ffffff 48%, #d7f0f7 100%);
}

/* The theme paints a full-page WHITE layer on .site.wp-site-blocks, which
   sits on top of the body and hides its background (you can glimpse the body
   color mid-load before this layer paints). Make it transparent so the body
   color shows through — day blue (#d6ecf8) in light, dusk navy in dark. */
.site.wp-site-blocks { background-color: transparent !important; }

/* Section labels ("What We Do", "Our Services", "Why H2Oasis",
   "Pricing Plans") + their swim icon -> darker blue in daytime. */
html:not(.h2o-dark) .elementor-element-9ff2de9 .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-8e8ebae .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-62ebdcd .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-eb3caef .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-9d22fee .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-2602cdf .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-c84a9ca .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-83d36d1 .elementor-icon-list-text,
html:not(.h2o-dark) .elementor-element-9ff2de9 .elementor-icon-list-icon i,
html:not(.h2o-dark) .elementor-element-8e8ebae .elementor-icon-list-icon i,
html:not(.h2o-dark) .elementor-element-62ebdcd .elementor-icon-list-icon i,
html:not(.h2o-dark) .elementor-element-eb3caef .elementor-icon-list-icon i,
html:not(.h2o-dark) .elementor-element-9d22fee .elementor-icon-list-icon i,
html:not(.h2o-dark) .elementor-element-2602cdf .elementor-icon-list-icon i,
html:not(.h2o-dark) .elementor-element-c84a9ca .elementor-icon-list-icon i,
html:not(.h2o-dark) .elementor-element-83d36d1 .elementor-icon-list-icon i {
  color: #0e4d6e !important;
}
html:not(.h2o-dark) .elementor-element-9ff2de9 .elementor-icon-list-icon svg,
html:not(.h2o-dark) .elementor-element-8e8ebae .elementor-icon-list-icon svg,
html:not(.h2o-dark) .elementor-element-62ebdcd .elementor-icon-list-icon svg,
html:not(.h2o-dark) .elementor-element-eb3caef .elementor-icon-list-icon svg,
html:not(.h2o-dark) .elementor-element-9d22fee .elementor-icon-list-icon svg,
html:not(.h2o-dark) .elementor-element-2602cdf .elementor-icon-list-icon svg,
html:not(.h2o-dark) .elementor-element-c84a9ca .elementor-icon-list-icon svg,
html:not(.h2o-dark) .elementor-element-83d36d1 .elementor-icon-list-icon svg {
  fill: #0e4d6e !important;
}

/* =============================================================
   DARK — "sunset / dusk"
   ============================================================= */
html.h2o-dark {
  --h2o-bg:        #18233f; /* dusky blue main background */
  --h2o-surface:   #1f2c4a; /* cards / header             */
  --h2o-surface-2: #26345a; /* inputs                     */
  --h2o-ink:       #f2f6fb;
  --h2o-ink-soft:  #c2ccdb;
  /* sunset gradient, vibrance dialed back a touch (muted/dusty) */
  --h2o-sunset:    linear-gradient(150deg, #c07058 0%, #a55a78 50%, #6b5489 100%);
}

/* Re-map the Elementor globals (must beat body.elementor-kit-5).
   NOTE: googly7/8/9 (white) and googly6 (light borders) are intentionally
   NOT remapped — they're used mostly as light TEXT/borders that must stay
   light. The white *backgrounds* are handled by the card rules below. */
html.h2o-dark body {
  /* !important required — beats the theme's inline
     `:root body.googly-elementor-colors` block (0,2,1) that pins these. */
  --e-global-color-googly4: #2a2438 !important; /* off-white sections get the gradient below */
  --e-global-color-googly1:   #f2f6fb !important; /* "black" ink -> white (flips dark-on-dark text) */
  --e-global-color-googly5:   #c2ccdb !important;
  --e-global-color-text:      #c2ccdb !important;
  --e-global-color-secondary: #dbe3ee !important;
}

/* Structural wrappers (hardcoded light colors in the theme) */
html.h2o-dark body            { background-color: var(--h2o-bg); color: var(--h2o-ink-soft); }
/* Header & footer are kept STATIC across day/dusk: the teal brand "frame"
   (#27b0cc) stays constant while only the content area switches to dusk. So their
   wrappers are intentionally NOT darkened. (Previously .site-header* got a dusky
   surface and .site-footer-wrap a dusky bg that covered the teal footer bar.) */
html.h2o-dark .content-area,
html.h2o-dark .site-main       { background-color: var(--h2o-bg); }

/* Form fields */
html.h2o-dark input[type="text"],
html.h2o-dark input[type="email"],
html.h2o-dark input[type="url"],
html.h2o-dark input[type="tel"],
html.h2o-dark input[type="number"],
html.h2o-dark input[type="search"],
html.h2o-dark input[type="password"],
html.h2o-dark textarea,
html.h2o-dark select {
  background-color: var(--h2o-surface-2);
  border-color: #324063;
  color: var(--h2o-ink);
}
html.h2o-dark ::placeholder { color: #8893a8; }

/* The footer is kept static (teal) in dark mode, so its newsletter field keeps
   the light look (white field, dark text) instead of the dusky form styling. */
html.h2o-dark .site-footer input[type="text"],
html.h2o-dark .site-footer input[type="email"],
html.h2o-dark .site-footer input[type="url"],
html.h2o-dark .site-footer input[type="tel"],
html.h2o-dark .site-footer input[type="search"],
html.h2o-dark .site-footer textarea {
  background-color: #ffffff;
  border-color: #000000 #000000 #ffffff;
  color: #000000;
}
html.h2o-dark .site-footer ::placeholder { color: #767676; }

/* ---- Black-bg sections that use googly1 as BACKGROUND -> stay dusky ---- */
html.h2o-dark .elementor-element-538ec5e,
html.h2o-dark .elementor-element-72093e5,
html.h2o-dark .elementor-element-bd7dccd {
  background-color: var(--h2o-surface) !important;
}

/* ---- White CARD backgrounds -> dusky surface (keeps white TEXT white) ---- */
html.h2o-dark .elementor-element-e0c5a6d > .elementor-widget-wrap,
html.h2o-dark .elementor-element-b3c823e > .elementor-widget-wrap,
html.h2o-dark .elementor-element-4c2b182 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-a026074 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-9d4e2b6 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-6c3d9a7 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-3320a8f > .elementor-widget-wrap,
html.h2o-dark .elementor-element-7027069 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-f6d2c73 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-2013020 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-e8ed2dd .uc_details,
html.h2o-dark .elementor-element-3afd161 .uc_details,
html.h2o-dark .elementor-element-03adef4 .uc_details,
html.h2o-dark .elementor-element-26f0411 .uc_details,
html.h2o-dark .elementor-element-2f8a1e5 .uc_details,
html.h2o-dark .elementor-element-1e7b4c2 .uc_details,
html.h2o-dark .elementor-element-3e06413 .uc_quote_item,
html.h2o-dark .elementor-element-fc61e7f .uc_image_carousel_placeholder {
  background-color: var(--h2o-surface) !important;
}

/* ---- Icon-box "bubble" icons: keep the SAME brand-blue color in dark mode
   as light mode. Most instances of this widget still bind icon color to the
   googly1 token, which the block above intentionally flips to near-white so
   card TITLES stay legible on the dusky card background -- but that same
   flip washed the icon out to near-invisible (white glyph on the white icon
   bubble). Pin it to the brand teal instead. (The Home page's 6 cards now
   bind icon_color to googly2 directly -- which dark mode never remaps -- so
   this is belt-and-suspenders there and the actual fix everywhere else.) ---- */
html.h2o-dark .uc_details-icon,
html.h2o-dark .uc_details-icon svg {
  color: #27b0cc !important;
  fill: #27b0cc !important;
}

/* ---- Hardcoded dark TEXT that no variable covers -> light ---- */
html.h2o-dark .uc_text,
html.h2o-dark .uc_post_title { color: var(--h2o-ink) !important; }

/* Premium pricing "Get now" button (id 4a4c3da) is a white button with black
   text — keep it that way in dark mode too (the googly1->white flip would
   otherwise turn its label white and invisible on the white button). */
html.h2o-dark .elementor-element-4a4c3da .elementor-button {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Testimonial cards (UC quote widget, id 3e06413) hardcode black text. */
html.h2o-dark .elementor-element-3e06413 .ue_title { color: var(--h2o-ink) !important; }
html.h2o-dark .elementor-element-3e06413 .ue_subtitle,
html.h2o-dark .elementor-element-3e06413 .uc_quote_item p,
html.h2o-dark .elementor-element-3e06413 p { color: var(--h2o-ink-soft) !important; }

/* ---- Afternoon-sky containers, LIGHT mode (owner request 2026-07-18:
   "same as the dark gradient"). Identical two-layer recipe as the dark rule
   below: vertical sky fade at top+bottom over a diagonal wash, so the white
   bands melt out of and back into the daytime sky instead of hard edges. */
html:not(.h2o-dark) .elementor-element-4b76567,
html:not(.h2o-dark) .elementor-element-eb4deb3,
html:not(.h2o-dark) .elementor-element-d02abfa {
  background-image:
    linear-gradient(180deg,
      #87CEEB 0%, rgba(135, 206, 235, 0) 180px,
      rgba(135, 206, 235, 0) calc(100% - 180px), #87CEEB 100%),
    var(--h2o-afternoon) !important;
}

/* ---- Sunset containers (the former off-white sections) ----
   The diagonal sunset alone puts full-strength coral against the navy body at
   the band's top/bottom edges — a hard rectangle. Layer a vertical navy fade
   over it so each band melts out of and back into the page sky. */
html.h2o-dark .elementor-element-4b76567,
html.h2o-dark .elementor-element-eb4deb3,
html.h2o-dark .elementor-element-d02abfa {
  background-color: #2a2438 !important;
  background-image:
    linear-gradient(180deg,
      var(--h2o-bg) 0%, rgba(24, 35, 63, 0) 180px,
      rgba(24, 35, 63, 0) calc(100% - 180px), var(--h2o-bg) 100%),
    var(--h2o-sunset) !important;
}

/* Section labels + swim icons INSIDE a sunset container -> white
   (descendant selectors, so this stays correct regardless of which
   label lives inside which sunset section). */
html.h2o-dark .elementor-element-4b76567 .elementor-icon-list-text,
html.h2o-dark .elementor-element-eb4deb3 .elementor-icon-list-text,
html.h2o-dark .elementor-element-d02abfa .elementor-icon-list-text,
html.h2o-dark .elementor-element-4b76567 .elementor-icon-list-icon i,
html.h2o-dark .elementor-element-eb4deb3 .elementor-icon-list-icon i,
html.h2o-dark .elementor-element-d02abfa .elementor-icon-list-icon i {
  color: #ffffff !important;
}
html.h2o-dark .elementor-element-4b76567 .elementor-icon-list-icon svg,
html.h2o-dark .elementor-element-eb4deb3 .elementor-icon-list-icon svg,
html.h2o-dark .elementor-element-d02abfa .elementor-icon-list-icon svg {
  fill: #ffffff !important;
}

/* ---- Home services grid: 3rd row added 2026-07-10 (Patio Surface Works /
   Commercial Pressure Washing / Plans & Free Estimates). Its columns were
   cloned with fresh ids, so the id-keyed card rules above missed them —
   dark mode left the cards white with white titles. Explicit ids + a
   generic :has() rule so ANY future row in this grid inherits the dark
   card treatment automatically. ---- */
html.h2o-dark .elementor-element-df07803 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-f48b365 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-e870fb4 > .elementor-widget-wrap,
html.h2o-dark .elementor-element-4b76567 .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-ucaddon_icon_image_content_box) > .elementor-widget-wrap {
  background-color: var(--h2o-surface) !important;
}

/* New-row cards also carry the widget-level white .uc_details panel (the six
   originals are keyed per-widget above). Generic rule for the whole grid. */
html.h2o-dark .elementor-element-4b76567 .uc_details {
  background-color: var(--h2o-surface) !important;
}


/* =====================================================================
   2026-07-21 — extend the HOME band recipes to every sunset-role section
   on the inner pages (owner: "side pages don't match the homepage").
   Same two-layer treatment as the home bands above: vertical sky/navy fade
   over the afternoon/sunset diagonal so bands melt into the page sky.
   The extra  in the selector out-ranks the per-page files'
   plain-sunset dark rules (equal !important, higher specificity).
   ===================================================================== */
html:not(.h2o-dark) body .elementor-element-03f8c25,
html:not(.h2o-dark) body .elementor-element-06d7b8f,
html:not(.h2o-dark) body .elementor-element-083f82b,
html:not(.h2o-dark) body .elementor-element-2444f18,
html:not(.h2o-dark) body .elementor-element-3137779,
html:not(.h2o-dark) body .elementor-element-445de99,
html:not(.h2o-dark) body .elementor-element-4dde303,
html:not(.h2o-dark) body .elementor-element-598c8c6,
html:not(.h2o-dark) body .elementor-element-7cbc3a3,
html:not(.h2o-dark) body .elementor-element-7d1f130,
html:not(.h2o-dark) body .elementor-element-82cd139,
html:not(.h2o-dark) body .elementor-element-878eedf,
html:not(.h2o-dark) body .elementor-element-8a955c2,
html:not(.h2o-dark) body .elementor-element-9594c11,
html:not(.h2o-dark) body .elementor-element-a1baf4f,
html:not(.h2o-dark) body .elementor-element-a1d4a24,
html:not(.h2o-dark) body .elementor-element-ad3744c,
html:not(.h2o-dark) body .elementor-element-b7d87a8,
html:not(.h2o-dark) body .elementor-element-ccdcd96,
html:not(.h2o-dark) body .elementor-element-e99a7bb,
html:not(.h2o-dark) body .elementor-element-f1ee292,
html:not(.h2o-dark) body .elementor-element-f2bd7c6,
html:not(.h2o-dark) body .elementor-element-f5ad35b,
html:not(.h2o-dark) body .elementor-element-fd69882,
html:not(.h2o-dark) body .elementor-element-fd7c5aa {
  background-image:
    linear-gradient(180deg,
      #87CEEB 0%, rgba(135, 206, 235, 0) 180px,
      rgba(135, 206, 235, 0) calc(100% - 180px), #87CEEB 100%),
    var(--h2o-afternoon) !important;
}
html.h2o-dark body .elementor-element-03f8c25,
html.h2o-dark body .elementor-element-06d7b8f,
html.h2o-dark body .elementor-element-083f82b,
html.h2o-dark body .elementor-element-2444f18,
html.h2o-dark body .elementor-element-3137779,
html.h2o-dark body .elementor-element-445de99,
html.h2o-dark body .elementor-element-4dde303,
html.h2o-dark body .elementor-element-598c8c6,
html.h2o-dark body .elementor-element-7cbc3a3,
html.h2o-dark body .elementor-element-7d1f130,
html.h2o-dark body .elementor-element-82cd139,
html.h2o-dark body .elementor-element-878eedf,
html.h2o-dark body .elementor-element-8a955c2,
html.h2o-dark body .elementor-element-9594c11,
html.h2o-dark body .elementor-element-a1baf4f,
html.h2o-dark body .elementor-element-a1d4a24,
html.h2o-dark body .elementor-element-ad3744c,
html.h2o-dark body .elementor-element-b7d87a8,
html.h2o-dark body .elementor-element-ccdcd96,
html.h2o-dark body .elementor-element-e99a7bb,
html.h2o-dark body .elementor-element-f1ee292,
html.h2o-dark body .elementor-element-f2bd7c6,
html.h2o-dark body .elementor-element-f5ad35b,
html.h2o-dark body .elementor-element-fd69882,
html.h2o-dark body .elementor-element-fd7c5aa {
  background-color: #2a2438 !important;
  background-image:
    linear-gradient(180deg,
      var(--h2o-bg) 0%, rgba(24, 35, 63, 0) 180px,
      rgba(24, 35, 63, 0) calc(100% - 180px), var(--h2o-bg) 100%),
    var(--h2o-sunset) !important;
}