/* Acqua Fresca: light redesign layer (2026-09-24).
 * Loaded after site.css on every page. Plain CSS targeting the existing
 * compiled Tailwind classes/structure -- no new Tailwind utilities are
 * introduced (only classes already present in _next/static/chunks work).
 * Removing this one <link> restores today's look (aside from the handful
 * of markup fixes noted in the commits: the /services nesting bug, the
 * sentence-case heading text, the hero restructure, and the .af-flatten /
 * .af-eyebrow-dup / .af-hero-* marker classes added in markup).
 *
 * Approach: calmer, fewer boxes, one consistent scale for radius, shadow,
 * eyebrows and headings. When unsure, this file removes decoration rather
 * than adding it. */

:root {
  --ink: #0b1f33;
  --muted: #475569;
  --surface: #f4f8fb;
  --line: #e2e8f0;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --radius-card: 1rem;
}

/* Real defect, found while verifying this pass: html/body never set an
   explicit background. Every section painted its own bg, so this was
   invisible in a light-mode browser -- but on a visitor with an OS/browser
   dark-mode preference, any unpainted strip (inter-section padding, and
   now the flattened cards below) renders the UA's default BLACK canvas
   instead of white. That is very likely the real cause behind the "big
   empty area" reports in the brief: not missing images, a dark band. */
html,
body {
  background-color: #ffffff;
}

/* ---------------------------------------------------------------------
   1. Headings: one scale, --ink colour, balanced wrapping.
   The compiled Tailwind h2 sizes vary (text-3xl/4xl/5xl mixed with
   sm:/lg: variants across pages) -- tighten to one desktop/mobile pair
   without touching h1 (hero/page-title sizing stays, it is not the
   "every section heading" complaint) or nav/button text.
--------------------------------------------------------------------- */
h1, h2, h3 {
  text-wrap: balance;
}

h2[class*="font-display"] {
  color: var(--ink);
  line-height: 1.15;
  font-size: 1.875rem; /* 30px mobile */
}
@media (min-width: 640px) {
  h2[class*="font-display"] {
    font-size: 2.375rem; /* ~38px desktop, within the 2.25-2.5rem range */
  }
}
/* Card/article h3 titles that sit on white or light backgrounds also take
   --ink; h3 on dark image cards (services, how-it-works figure captions)
   stay white via their own text-white class, untouched here. */
h3[class*="font-display"],
h3[class*="text-slate-950"] {
  color: var(--ink);
}
/* Root cause of "every heading is bright blue" (item 4): the compiled
   Tailwind chunk itself was hand-patched to redefine the token, not just
   a class some headings happen to use --
     .text-slate-950,.text-slate-900{color:var(--brand-title)}
   (101s3o-cv02.o-v2.css). That is every element carrying text-slate-950
   or text-slate-900 anywhere on the site, including h1 page titles and
   the font-display "mini-heading" p/span elements the h2/h3 rules above
   do not reach (buttons, pills, and form inputs also carry text-slate-950
   but are not font-display and are left on the brand-blue token, since
   blue CTAs are the existing, working, intentional look). */
h1[class*="text-slate-950"],
[class*="font-display"][class*="text-slate-950"] {
  color: var(--ink);
}
/* Exception: the hero "Get your free estimate" card is a dark frosted-glass
   panel (bg-sky-950/20, blurred) over the video, styled for light text on
   purpose. The blanket --ink rule above put dark ink on a dark card and
   made the heading unreadable -- keep it light there. */
h2[class*="text-blue-300"] {
  color: #eff6ff;
}

/* Repeated brand-blue used as EVERY step/benefit heading colour (item 4):
   keep brand blue only as the accent it already is elsewhere (buttons,
   the "vs." word, links) and give these repeated card headings the same
   --ink as every other heading on the page. */
#benefits h3[class*="text-[var(--brand-title)]"],
#how-it-works h3[class*="text-[var(--brand-title)]"] {
  color: var(--ink);
}

/* /about "Trusted by South Florida businesses..." heading (shared with
   the home reviews section) renders at a thin weight that does not match
   every other h2 on the page. Match it: semibold, tightened tracking. */
h2[class*="leading-[1.05]"] {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   2. Eyebrow labels: tone down. Brand blue, 600 weight, tighter tracking,
   smaller size, consistent across every uppercase/tracking label site-wide.
--------------------------------------------------------------------- */
p[class*="uppercase"][class*="tracking-"] {
  color: var(--brand-title);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.8125rem; /* 13px */
}
/* Eyebrows that sit on a dark/brand-blue background stay light so they
   remain readable (financing bar, dark service cards, hero eyebrow-style
   copy); brand blue on brand blue would disappear. */
p[class*="uppercase"][class*="text-blue-100"],
p[class*="uppercase"][class*="text-cyan-100"] {
  color: #e0f2fe;
}
/* Eyebrow that only repeats the heading immediately below it (news,
   review confirmation) -- hidden rather than reworded, per spec. */
.af-eyebrow-dup {
  display: none;
}

/* ---------------------------------------------------------------------
   3. Flatten nested "card inside a card" outer wrappers. Marked with
   .af-flatten in markup (home: comparison, reviews, cooler setups;
   about: commitment block) since a safe structural CSS selector for each
   one would be fragile across four different sections. Inner cards keep
   the site's single subtle shadow (section 4 below) or a hairline
   --line border, so the content keeps definition without the outer box.
--------------------------------------------------------------------- */
.af-flatten {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   4. One card radius, one shadow token. Cards currently use four
   different arbitrary radii (1.25rem/1.5rem/1.75rem/2rem); pills
   (rounded-full) are untouched per spec. Heavier/cyan-tinted card
   shadows collapse to the single subtle token.
--------------------------------------------------------------------- */
[class*="rounded-["] {
  border-radius: var(--radius-card) !important;
}
[class*="shadow-md"],
[class*="shadow-lg"],
[class*="shadow-xl"],
[class*="shadow-2xl"] {
  box-shadow: var(--shadow) !important;
}
/* Inner cards left without a shadow after the flatten above (the
   Healthier/Reduce Waste/Fast Service pills on /about, the step-number
   badges) read fine on the flattened section background as-is; no
   border added where none existed, to avoid a second decoration layer. */

/* ---------------------------------------------------------------------
   5. Alternate white / --surface section backgrounds on the home page so
   the page has rhythm without boxes. Sections that already carry a
   deliberate background (dark image, brand-blue financing bar, the
   about/contact gradient hero) are left alone.
--------------------------------------------------------------------- */
#why-switch,
#services {
  background-color: var(--surface);
}

/* ---------------------------------------------------------------------
   6. Vertical rhythm: the home page already uses py-24/py-20 (96px/80px)
   consistently; the one outlier was a redundant mt-14 on #coolers-preview
   (removed in markup). This just guards the same scale going forward.
--------------------------------------------------------------------- */
section {
  scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------------
   7. Focus rings + reduced motion.
--------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-title);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---------------------------------------------------------------------
   8. Home hero: white headline (was light blue on video, low contrast),
   restructured into a main line + smaller second line in markup. Overlay
   deepened slightly behind the new smaller subline for 4.5:1.
--------------------------------------------------------------------- */
.af-hero-subline {
  opacity: 0.94;
}
.af-hero-overlay {
  background-color: rgba(8, 44, 74, 0.62) !important;
}

/* ---------------------------------------------------------------------
   9. /services layout fix: with the markup nesting bug corrected (the
   "Areas we serve" band no longer lives inside the 4th grid cell), the
   4 cards already sit in one even grid. This just guarantees equal card
   heights/bottom-aligned "Read more" regardless of copy length.
--------------------------------------------------------------------- */
#main div[class*="xl:grid-cols-4"] > div[class*="reveal"] {
  display: flex;
}
#main div[class*="xl:grid-cols-4"] > div[class*="reveal"] > article {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#main div[class*="xl:grid-cols-4"] > div[class*="reveal"] > article > a {
  margin-top: auto;
}

/* Areas-we-serve city links: calmer wrapping row instead of a hard grid,
   still full width under the 4 service cards. */
.af-areas-band [class*="grid"][class*="sm:grid-cols-3"] {
  display: flex;
  flex-wrap: wrap;
}
.af-areas-band [class*="grid"][class*="sm:grid-cols-3"] > a {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   10. Home "how a bottleless system works" steps: already a single
   column of equal-width cards in markup; this guards against any
   leftover offset and keeps the panel image column stretched to match.
--------------------------------------------------------------------- */
#how-it-works [class*="lg:items-stretch"] {
  align-items: stretch;
}

/* ---------------------------------------------------------------------
   11. Reveal end state. In the compiled chunk `.reveal[data-reveal-from=right]`
   (0,2,0) outranks `.reveal-visible` (0,1,0), so every right-revealed
   element stayed at translate(.65rem) scale(.985) forever: the staggered
   how-it-works steps on / and the offset cards on /services. Pre-existing
   on the live site, not caused by this layer.
--------------------------------------------------------------------- */
.reveal.reveal-visible,
.reveal.reveal-visible[data-reveal-from],
.reveal.h-full.reveal-visible {
  transform: none;
}

/* ---------------------------------------------------------------------
   12. Headings that sit on dark or brand-blue panels keep light text. The
   --ink rules in section 1 are for light backgrounds; these panels set
   text-white on an ancestor and their headings inherit it (financing,
   both gradient CTA panels, the comparison column headers).
--------------------------------------------------------------------- */
[class*="text-white"] h2[class*="font-display"],
[class*="text-white"] h3[class*="font-display"],
[class*="text-white"] h2,
[class*="text-white"] h3,
h2[class*="text-white"],
h3[class*="text-white"] {
  color: #fff;
}

/* ---------------------------------------------------------------------
   13. Review and product carousels: cards carry h-full (height:100%) inside
   an auto-height flex row, which blocks stretch. One long review made the
   row 326px while the visible cards stayed 214px, leaving the blank band
   under the reviews. Let every card stretch to the tallest one instead.
--------------------------------------------------------------------- */
.snap-x > .reveal.h-full {
  height: auto;
  align-self: stretch;
}