/* Waterman Pools — Site-wide Dark Theme Override
   Applies the homepage's premium dark + cyan palette across the rest of the site.
   Loads AFTER style.css so it wins, and below the .wm-home scoped homepage CSS.
*/

:root {
  --wm-bg: #0c1117;
  --wm-bg-deep: #081019;
  --wm-text: #f4f7fb;
  --wm-muted: #b9c4d2;
  --wm-accent: #d8ecf6;
  --wm-line: rgba(255, 255, 255, 0.08);
  --wm-brand: #6fd0ff;
  --wm-brand-2: #9be7ff;
  --wm-panel: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  --wm-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

/* ---------- Body / global ---------- */
html, body {
  background: radial-gradient(circle at top right, rgba(111, 208, 255, 0.12), transparent 22%),
              linear-gradient(180deg, var(--wm-bg-deep) 0%, var(--wm-bg) 100%) !important;
  color: var(--wm-text) !important;
  min-height: 100vh;
}

body.bg-gray-100 { background-color: transparent !important; }

/* Default text on dark sections */
p, li, td, th, label, span, blockquote, address {
  color: var(--wm-accent);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--wm-text);
}

/* ---------- Header / Navigation ---------- */
header {
  background: rgba(8, 12, 18, 0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wm-line);
  color: var(--wm-text) !important;
  height: auto !important;
}

header .container > div {
  min-height: 100px;
  height: auto !important;
}

header img[alt*="Logo"] {
  height: 160px !important;
  width: auto !important;
  filter: brightness(0) invert(1);
  margin-top: -40px;
  margin-bottom: -40px;
  position: relative;
  z-index: 2;
}
header, header > div, header nav { overflow: visible !important; }

/* Desktop nav links */
header nav a {
  color: var(--wm-muted) !important;
  font-weight: 500;
  transition: all 0.2s ease;
}
header nav a:hover {
  color: var(--wm-text) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
header nav a.bg-slate-600,
header nav a.bg-slate-700 {
  background: linear-gradient(135deg, var(--wm-brand), var(--wm-brand-2)) !important;
  color: #04131c !important;
  font-weight: 700;
}
header nav a.bg-slate-600:hover,
header nav a.bg-slate-700:hover {
  filter: brightness(1.05);
  color: #04131c !important;
}

/* Active page highlight */
header nav a.bg-slate-600:not(.font-medium):not([href*="contact"]) {
  background: rgba(111, 208, 255, 0.15) !important;
  color: var(--wm-brand-2) !important;
  border: 1px solid rgba(111, 208, 255, 0.3);
}

/* Mobile menu button (already dark) */
#mobile-menu-button {
  background: linear-gradient(135deg, var(--wm-brand), var(--wm-brand-2)) !important;
  color: #04131c !important;
  border: none !important;
}

/* Mobile menu panel — keep readable on white */
#mobile-menu-panel {
  background: #0c1117 !important;
  color: var(--wm-text) !important;
}
#mobile-menu-panel h3 { color: var(--wm-text) !important; }
#mobile-menu-panel a {
  color: var(--wm-muted) !important;
}
#mobile-menu-panel a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--wm-text) !important;
}
#mobile-menu-panel a.bg-slate-600 {
  background: linear-gradient(135deg, var(--wm-brand), var(--wm-brand-2)) !important;
  color: #04131c !important;
}
#mobile-menu-panel .border-b { border-color: var(--wm-line) !important; }
#mobile-menu-close { color: var(--wm-muted) !important; }
#mobile-menu-close:hover { background: rgba(255,255,255,0.06) !important; }

/* ---------- Section backgrounds → subtle dark tints ---------- */
section.bg-gray-50,
section.bg-gray-100,
section.bg-gray-200 {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid var(--wm-line);
  border-bottom: 1px solid var(--wm-line);
}

/* Strong colored hero sections (slate/blue) → cyan-tinted dark band */
section.bg-slate-600,
section.bg-slate-700,
section.bg-blue-600,
section.bg-blue-700 {
  background: linear-gradient(135deg, rgba(111,208,255,0.12), rgba(255,255,255,0.03)) !important;
  border-top: 1px solid var(--wm-line);
  border-bottom: 1px solid var(--wm-line);
  color: var(--wm-text) !important;
}

/* ---------- Cards & panels ---------- */
.bg-white,
div.bg-gray-100,
div.bg-gray-50,
div.bg-gray-200 {
  background: var(--wm-panel) !important;
  border: 1px solid var(--wm-line);
  color: var(--wm-text) !important;
  box-shadow: var(--wm-shadow);
}

/* Service cards — keep their hover effect, retheme surface */
.service-card {
  background: var(--wm-panel) !important;
  border: 1px solid var(--wm-line) !important;
  box-shadow: var(--wm-shadow) !important;
  color: var(--wm-text);
}
.service-card:hover {
  border-color: rgba(111, 208, 255, 0.35) !important;
  box-shadow: 0 20px 48px rgba(111, 208, 255, 0.12) !important;
}

/* Service icons — give them a cyan glow */
.service-icon {
  filter: drop-shadow(0 4px 10px rgba(111, 208, 255, 0.4)) brightness(1.2);
}

/* Icon circles (about/values etc) */
.bg-blue-100 {
  background: rgba(111, 208, 255, 0.12) !important;
  border: 1px solid rgba(111, 208, 255, 0.35);
}
.text-blue-700,
.text-blue-800,
.text-blue-600 { color: var(--wm-brand-2) !important; }

/* ---------- Text colors ---------- */
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-slate-800,
.text-slate-700,
.text-slate-600 {
  color: var(--wm-accent) !important;
}

.text-gray-200, .text-gray-100, .text-white { color: var(--wm-text) !important; }

/* ---------- Buttons ---------- */
.bg-slate-600,
.bg-slate-700,
.bg-blue-600,
.bg-blue-700,
button.bg-slate-600,
button.bg-slate-700 {
  background: linear-gradient(135deg, var(--wm-brand), var(--wm-brand-2)) !important;
  color: #04131c !important;
  border: none !important;
}
.hover\:bg-slate-600:hover,
.hover\:bg-slate-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, var(--wm-brand), var(--wm-brand-2)) !important;
  color: #04131c !important;
}

/* "Inverse" white buttons inside dark CTA bands */
.bg-white.text-blue-800,
.bg-white.text-slate-700,
.bg-white.text-slate-800 {
  background: rgba(255,255,255,0.08) !important;
  color: var(--wm-text) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.bg-white.text-blue-800:hover,
.bg-white.text-slate-700:hover,
.bg-white.text-slate-800:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* "Bg-gray-200/300" hover for secondary buttons */
.bg-gray-200.text-slate-800,
.bg-gray-200.text-slate-700 {
  background: rgba(255,255,255,0.06) !important;
  color: var(--wm-text) !important;
  border: 1px solid var(--wm-line);
}

/* ---------- Section headings ---------- */
.section-heading {
  background: linear-gradient(90deg, var(--wm-brand), var(--wm-brand-2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.section-heading::after {
  background: linear-gradient(90deg, var(--wm-brand), var(--wm-brand-2)) !important;
}

/* ---------- Contact form ---------- */
.contact-form input,
.contact-form textarea,
.contact-form select {
  background-color: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--wm-line) !important;
  color: var(--wm-text) !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #8ea3b9 !important; }
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
  border-color: rgba(111, 208, 255, 0.4) !important;
  background-color: rgba(255,255,255,0.07) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--wm-brand) !important;
  box-shadow: 0 0 0 4px rgba(111, 208, 255, 0.15) !important;
  background-color: rgba(255,255,255,0.08) !important;
}
.contact-form label { color: var(--wm-brand-2) !important; }

/* ---------- Gallery overlay ---------- */
.gallery-overlay {
  background: linear-gradient(0deg, rgba(8,16,25,0.92) 0%, rgba(0,0,0,0.5) 100%) !important;
}
.gallery-overlay a.bg-white {
  background: linear-gradient(135deg, var(--wm-brand), var(--wm-brand-2)) !important;
  color: #04131c !important;
  border: none;
}

/* ---------- Footer ---------- */
/* Force footer to dark, overriding the slate→cyan button rule above */
footer,
footer.bg-slate-700,
footer.bg-slate-600 {
  background: linear-gradient(180deg, #0c1117 0%, #081019 100%) !important;
  border-top: 1px solid var(--wm-line) !important;
  color: var(--wm-text) !important;
}
footer h3, footer h4 { color: var(--wm-text) !important; }
footer p, footer span, footer li, footer a { color: var(--wm-muted) !important; }
footer a:hover { color: var(--wm-brand-2) !important; }
footer .border-t, footer .border-slate-800, footer .border-slate-600 {
  border-color: var(--wm-line) !important;
}
footer .text-blue-400, footer .text-blue-300 { color: var(--wm-brand-2) !important; }

/* ---------- Flash messages ---------- */
.flash-message {
  background: var(--wm-panel) !important;
  border: 1px solid var(--wm-line);
  color: var(--wm-text) !important;
}
.flash-message.success { border-color: rgba(111, 208, 255, 0.4); }
.flash-message.error { border-color: rgba(255, 100, 100, 0.4); }

/* ---------- Misc ---------- */
.bg-yellow-500 { color: #ffd24a !important; }

/* Hero existing slideshow on homepage gradient (used elsewhere if any) */
.hero-slide::before {
  background: linear-gradient(90deg, rgba(5,9,14,0.85) 0%, rgba(5,9,14,0.6) 100%) !important;
}

/* Borders */
.border, .border-slate-600, .border-slate-700, .border-gray-200, .border-gray-300 {
  border-color: var(--wm-line) !important;
}

/* ---------- FAQ <details> accordion (faq.html) ---------- */
details.bg-white {
  background: var(--wm-panel) !important;
  border: 1px solid var(--wm-line) !important;
  color: var(--wm-text) !important;
}
details summary,
details summary.bg-gray-50,
details summary.bg-gray-100 {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--wm-text) !important;
  border: none !important;
}
details summary span { color: var(--wm-text) !important; }
details summary:hover,
details summary.hover\:bg-gray-100:hover {
  background: rgba(111, 208, 255, 0.08) !important;
  color: var(--wm-brand-2) !important;
}
details[open] summary {
  background: rgba(111, 208, 255, 0.08) !important;
  color: var(--wm-brand-2) !important;
  border-bottom: 1px solid var(--wm-line) !important;
}
details[open] summary span { color: var(--wm-brand-2) !important; }
details .border-t, details .border-gray-200 {
  border-color: var(--wm-line) !important;
}
details p, details li { color: var(--wm-accent) !important; }
details strong { color: var(--wm-text) !important; }

/* ---------- Custom .testimonial cards (gallery, services, etc) ---------- */
.testimonial {
  background-color: rgba(255, 255, 255, 0.05) !important;
  background: var(--wm-panel) !important;
  border: 1px solid var(--wm-line) !important;
  box-shadow: var(--wm-shadow) !important;
  color: var(--wm-text) !important;
}
.testimonial:hover {
  border-color: rgba(111, 208, 255, 0.35) !important;
  box-shadow: 0 20px 48px rgba(111, 208, 255, 0.12) !important;
}
.testimonial p { color: var(--wm-accent) !important; }
.testimonial-author { color: var(--wm-brand-2) !important; }
.testimonial-author::before {
  background: linear-gradient(90deg, var(--wm-brand), var(--wm-brand-2)) !important;
}
.testimonial::before { color: rgba(111, 208, 255, 0.18) !important; }

/* Team member hover */
.team-member:hover {
  background-color: rgba(111, 208, 255, 0.06) !important;
}
.team-member-image {
  border-color: rgba(111, 208, 255, 0.3) !important;
}