/* ==========================================================================
   Connecting H2O — "Bright Natural Water" (teal / emerald / gold) theme.
   Approved on the test page, rolled out to the live Home page, and now
   extended to the rest of the main site pages at the client's request:
   Home (36), Home test copy (306), Shop (6), How It Works (44),
   Know Your Water (111), About (112), Contact (113).

   SCOPED ONLY to these pages — every rule below is prefixed with all of
   them, so Cart, Checkout, My Account, individual product pages, blog
   posts, header/footer MARKUP, WooCommerce plugin files, and every global
   Elementor/theme setting remain completely untouched. Enqueued only on
   these specific pages/IDs (see functions.php). Note: the Shop page is the
   WooCommerce product archive, not a regular singular page — it never gets
   a body.page-id-6 class, only body.woocommerce-shop, so it needs its own
   selector everywhere else uses page-id-X.

   Also extended to every single product page (body.single-product — every
   individual product, whatever its post ID, gets this class; matched with
   is_product() in functions.php since a fixed page-ID list isn't possible).

   Nearly every widget across these pages already reads its colors from CSS
   custom properties (var(--primary), var(--foreground), var(--card), etc.
   — confirmed by auditing widgets.css/woocommerce.css for the widgets used
   on each of these pages), so the token redeclaration below carries almost
   all of it. Only the Home page's Hero/How/Footer widgets needed the extra
   hand fixes below, carried over unchanged from the earlier rollout. */

body.page-id-306,
body.page-id-36,
body.woocommerce-shop,
body.single-product,
body.woocommerce-cart,
body.page-id-44,
body.page-id-111,
body.page-id-112,
body.page-id-113 {
  --background: #FFFFFF;
--foreground: #162B3A;
--card: #FFFFFF;
--card-foreground: #162B3A;
--popover: #FFFFFF;
--popover-foreground: #162B3A;

--primary: #1769AA;
--primary-foreground: #FFFFFF;
--primary-light: #2C9EDB;

--secondary: #EAF7FC;
--secondary-foreground: #1769AA;

--muted: #F6FCFF;
--muted-foreground: #526575;

--accent: #F5A623;
--accent-foreground: #162B3A;

--destructive: #FF4D5E;
--destructive-foreground: #FFFFFF;

--success: #2C9EDB;

--border: #D9EAF3;
--input: #D9EAF3;
--ring: #2C9EDB;

--tint: #EAF7FC;

  /* Punchier, more saturated elevation than the site's default muted shadow. */
  --shadow-soft: 0 6px 20px -6px color-mix(in srgb, var(--primary) 22%, transparent);
  --shadow-card: 0 6px 24px -8px color-mix(in srgb, var(--primary) 18%, transparent);
  --shadow-lift: 0 24px 48px -16px color-mix(in srgb, var(--primary) 30%, transparent);

  background: var(--background);
  color: var(--foreground);
}

/* ---- Hero (Home page only — .ch2o-hero doesn't appear on the other
   pages): local gradient/accent variables, scoped to .ch2o-hero itself,
   not the shared design tokens above. A vivid teal-to-green gradient reads
   as natural/plant-fresh water rather than pure ocean blue, while the
   hero's own white card + dark-navy text (already hardcoded in the widget)
   need no changes at all — they're already a "bright" look. ---- */
body.page-id-306 .ch2o-hero,
body.page-id-36 .ch2o-hero {
  --ch2o-hero-grad-from: #1769AA;
--ch2o-hero-grad-to: #2C9EDB;
--ch2o-hero-accent: #1769AA;
}

/* Primary CTA gets the gold accent, used sparingly for maximum pop against
   the teal/white surroundings — everything else (ghost button, check
   bubbles, ripple rings, floating drops) keeps the vivid teal accent. */
body.page-id-306 .ch2o-hero__btn--primary,
body.page-id-36 .ch2o-hero__btn--primary {
  background: var(--accent);
  color: var(--accent-foreground);
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
body.page-id-306 .ch2o-hero__btn--primary:hover,
body.page-id-36 .ch2o-hero__btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 92%, white 8%);
  box-shadow: 0 14px 30px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* The stat cards had a second, later rule pinning them to a flat teal
   (#009BD6) that would otherwise outrank a same-specificity override. Each
   of the three cards now gets its own color from the site's palette —
   teal, emerald, gold — instead of all three sharing one gradient. */
body.page-id-306 .ch2o-hero__stat-card,
body.page-id-36 .ch2o-hero__stat-card {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
}
body.page-id-306 .ch2o-hero__stats-col .ch2o-hero__stat-card:nth-child(1),
body.page-id-36 .ch2o-hero__stats-col .ch2o-hero__stat-card:nth-child(1) {
  background: linear-gradient(135deg, #1769AA, #2C9EDB) !important;
}
body.page-id-306 .ch2o-hero__stats-col .ch2o-hero__stat-card:nth-child(2),
body.page-id-36 .ch2o-hero__stats-col .ch2o-hero__stat-card:nth-child(2) {
  background: linear-gradient(135deg, #2C9EDB, #5BC0EB) !important;
}
body.page-id-306 .ch2o-hero__stats-col .ch2o-hero__stat-card:nth-child(3),
body.page-id-36 .ch2o-hero__stats-col .ch2o-hero__stat-card:nth-child(3) {
  background: linear-gradient(135deg, #D97706, #FFB020) !important;
}

/* Hero water motion: the ripple rings and floating droplets both use
   --ch2o-hero-accent, which is now the same teal as the gradient background
   they sit on — correct for the eyebrow text/check icons inside the white
   card, but too low-contrast to actually read as ripples/drops against a
   teal-to-green backdrop. Give them their own bright, distinct colors so
   the water motion is clearly visible. */
body.page-id-306 .ch2o-hero__ripple,
body.page-id-36 .ch2o-hero__ripple {
  border-color: rgba(255, 255, 255, 0.75);
}
body.page-id-306 .ch2o-hero__drop,
body.page-id-36 .ch2o-hero__drop {
  background: linear-gradient(160deg, #ffffff, #6EE7B7);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* ---- How It Works widget (used on the Home page AND the "How It Works"
   page itself): number badge shifts from amber to the brand gold accent
   for consistency; everything else in this widget (white glass cards,
   light veil) already suits a bright theme as shipped. ---- */
body.page-id-306 .ch2o-how__num,
body.page-id-36 .ch2o-how__num,
body.page-id-44 .ch2o-how__num {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* ---- Footer: appears on every page, always a fixed dark band
   (oklch(0.24 0.06 245) — unrelated to any token), so it kept its original
   dark navy-purple regardless of page theme. Recolored to a rich dark teal
   to match on every page in this rollout, with bright mint-white text/links
   (independent of --foreground, which is dark and meant for the light page
   background, not this dark band). ---- */
body.page-id-306 .ch2o-footer,
body.page-id-36 .ch2o-footer,
body.woocommerce-shop .ch2o-footer,
body.single-product .ch2o-footer,
body.woocommerce-cart .ch2o-footer,
body.page-id-44 .ch2o-footer,
body.page-id-111 .ch2o-footer,
body.page-id-112 .ch2o-footer,
body.page-id-113 .ch2o-footer {
  background: linear-gradient(160deg, #0B2742, #123A5A);
color: #EAF7FC;
}

/* ---- "Proof" photo cards (Cards widget, Home page — the 6-photo grid:
   "On-Site Water Testing", "Field Testing at the Source", etc.): the
   widget's own CSS fixes the image at a tiny 6rem x 5rem box with
   object-fit: contain, but something in the page's generated CSS is
   stretching that wrapper much larger while keeping "contain" — so each
   portrait photo shows small and centered with a lot of empty space (and
   the section's own tinted background) on either side. Forcing a
   consistent box + object-fit: cover makes every photo fill its frame
   completely, edge to edge, with no dead space. */
body.page-id-306 .ch2o-cards__img,
body.page-id-36 .ch2o-cards__img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: var(--radius-xl, 1rem) !important;
  overflow: hidden !important;
}
body.page-id-306 .ch2o-cards__img img,
body.page-id-36 .ch2o-cards__img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

/* ---- "Proof" photo cards, first photo only: the source file itself has
   thin black bars baked into its left/right edges (a pre-existing export
   artifact, not something this stylesheet created). object-fit: cover only
   crops top/bottom on this particular image's proportions, so those bars
   stayed visible once the photo was made to fill its frame. A small extra
   zoom pushes just enough of the image outside the frame to crop the bars
   away; the other five photos have no such bars and are left untouched. ---- */
body.page-id-306 .ch2o-cards__grid > .ch2o-cards__card:first-child .ch2o-cards__img img,
body.page-id-36 .ch2o-cards__grid > .ch2o-cards__card:first-child .ch2o-cards__img img {
  transform: scale(1.18) !important;
}
/* ---- "Proof" photo cards, second photo ("Field Testing at the Source"):
   her face sits near the very top of the original portrait photo, so the
   default centered crop from object-fit: cover was cutting into it. Biasing
   the crop toward the top keeps her whole face in frame and only trims
   from lower down (the water/reflection area) instead. ---- */
body.page-id-306 .ch2o-cards__grid > .ch2o-cards__card:nth-child(2) .ch2o-cards__img img,
body.page-id-36 .ch2o-cards__grid > .ch2o-cards__card:nth-child(2) .ch2o-cards__img img {
  object-position: center 12% !important;
}

/* ---- REAL hero background source (found via DevTools inspection): the
   plugin CSS has a LATER rule that sets .ch2o-hero's background property
   directly with hardcoded oklch() values, completely bypassing the
   --ch2o-hero-grad-from/-to custom properties overridden above. That is
   the actual visible gradient; overriding the variables never touched it.
   Same structure (160deg, same lightness/chroma stops at 0/55/100%), hue
   rotated from blue (~220°) to teal-green (160°) to match the client's
   reference image — same tonal softness, just green instead of blue. ---- */
body.page-id-306 .ch2o-hero,
body.page-id-36 .ch2o-hero {
background: linear-gradient(160deg, oklch(0.82 0.07 220) 0%, oklch(0.90 0.045 220) 55%, oklch(0.97 0.015 220) 100%) !important;}