/* =========================================================
   Always Clean Co — custom styles (layered on top of Tailwind)
   ========================================================= */

:root {
  --navy: #002857;
  --brand: #2E6FB0;
  --sky: #EAF3FC;
  --bubble: #CFE4F5;
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }

h1, h2, h3, h4, .font-heading { font-family: "Fraunces", Georgia, serif; }

::selection { background: var(--brand); color: #fff; }

/* Nicer focus ring for keyboard users */
:focus-visible { outline: 3px solid rgba(46,111,176,.55); outline-offset: 2px; border-radius: 4px; }

/* ---------- Header ---------- */
#site-header nav { }
#site-header.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -18px rgba(0,40,87,.35);
}
#site-header.scrolled nav { padding-top: .6rem; padding-bottom: .6rem; }

/* Animated underline for desktop nav */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: var(--brand);
  border-radius: 2px;
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

/* ---------- Hero gradient + blobs ---------- */
.hero-gradient {
  background:
    radial-gradient(1200px 600px at 85% -10%, #dcebfb 0%, rgba(220,235,251,0) 55%),
    radial-gradient(900px 500px at 0% 0%, #eaf3fc 0%, rgba(234,243,252,0) 60%),
    linear-gradient(180deg, #f3f8fe 0%, #ffffff 100%);
}
.section-sky { background: linear-gradient(180deg, #f4f9fe 0%, #eaf3fc 100%); }

/* ---------- Floating bubbles ---------- */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.bubble {
  position: absolute;
  bottom: 10%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,.95) 0%,
      rgba(233,243,252,.60) 18%,
      rgba(160,200,238,.42) 52%,
      rgba(96,158,214,.44) 80%,
      rgba(46,111,176,.32) 100%);
  border: 1px solid rgba(120,175,222,.55);
  box-shadow:
    inset -6px -8px 16px rgba(70,130,190,.30),
    inset 8px 10px 18px rgba(255,255,255,.65),
    0 10px 26px -8px rgba(46,111,176,.42);
  animation: floatUp linear infinite;
  will-change: transform, opacity;
}
/* Glossy specular highlight */
.bubble::after {
  content: "";
  position: absolute;
  top: 15%; left: 20%;
  width: 28%; height: 22%;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  filter: blur(1px);
}
/* Bubbles over dark / navy backgrounds */
.bubbles.on-dark .bubble {
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,.60) 0%,
      rgba(255,255,255,.24) 30%,
      rgba(190,216,240,.16) 62%,
      rgba(255,255,255,.05) 100%);
  border-color: rgba(255,255,255,.42);
  box-shadow:
    inset -4px -6px 14px rgba(255,255,255,.14),
    inset 6px 8px 16px rgba(255,255,255,.28),
    0 8px 22px -8px rgba(255,255,255,.22);
}
.bubbles.on-dark .bubble::after { background: rgba(255,255,255,.7); }

@keyframes floatUp {
  0%   { transform: translateY(26px) translateX(0) scale(.9); opacity: 0; }
  16%  { opacity: var(--peak, .75); }
  50%  { transform: translateY(-42px) translateX(12px) scale(1); }
  82%  { opacity: calc(var(--peak, .75) * .7); }
  100% { transform: translateY(-100px) translateX(-8px) scale(1.06); opacity: 0; }
}

/* ---------- Cards ---------- */
.lift { transition: transform .35s ease, box-shadow .35s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(0,40,87,.28); }

/* Image zoom-on-hover wrappers */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover img { transform: scale(1.06); }

/* Branded placeholder while/if an image fails */
.img-holder { background: linear-gradient(135deg, #dcebfb 0%, #cfe4f5 50%, #bcd8f0 100%); }

/* Button shine */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-shine:hover::before { left: 140%; }

/* Decorative underline for eyebrow labels */
.eyebrow { letter-spacing: .18em; }

/* Testimonials stars */
.stars i { color: #f6b73c; }

/* ---------- Article / blog prose ---------- */
.article { color: #334155; line-height: 1.75; }
.article > p { margin: 1.1rem 0; }
.article h2 { font-family: "Fraunces", Georgia, serif; color: #002857; font-size: 1.6rem; font-weight: 600; margin: 2.2rem 0 .8rem; line-height: 1.25; }
.article h3 { font-family: "Fraunces", Georgia, serif; color: #002857; font-size: 1.25rem; font-weight: 600; margin: 1.6rem 0 .6rem; }
.article ul, .article ol { margin: 1rem 0 1rem 1.3rem; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin: .45rem 0; padding-left: .25rem; }
.article a { color: #2E6FB0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: #002857; }
.article strong { color: #0f172a; font-weight: 700; }
.article blockquote { border-left: 4px solid #CFE4F5; padding-left: 1rem; color: #64748b; font-style: italic; margin: 1.3rem 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: .35; }
  .img-zoom img { transition: none; }
  * { scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}