/* =============================================================================
   Water Tech. — site styles
   Light-mode only. Tokens, base, components, layout helpers, a11y.
   ----------------------------------------------------------------------------
   Section index:
     1.  Design tokens (CSS custom properties)
     2.  Base typography
     3.  Brand utilities (gradients, patterns)
     4.  Shadows
     5.  Form controls (range, field, select)
     6.  Buttons
     7.  Chips & cards
     8.  Navigation & header
     9.  Animations
    10.  Accessibility helpers
    11.  Misc utilities
============================================================================= */


/* 1. DESIGN TOKENS ========================================================= */
:root {
  /* neutrals */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;

  /* brand — sky family (calm "deep water" range) */
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;

  /* brand — cyan accent (used sparingly to avoid neon feel) */
  --cyan-500: #06b6d4;
  --cyan-700: #0e7490;
  --cyan-900: #164e63;

  /* status colours */
  --emerald-500: #10b981;
  --amber-500:   #f59e0b;
  --rose-500:    #f43f5e;
  --blue-700:    #1d4ed8;

  --white: #ffffff;
}


/* 2. BASE TYPOGRAPHY ====================================================== */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink-700);
  background: var(--white);
}

h1, h2, h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}
/* :where() keeps specificity at 0 so utility classes (text-white, etc.) override easily */
:where(h1, h2, h3, h4, h5) { color: var(--ink-900); }


/* 3. BRAND UTILITIES ====================================================== */
.brand-gradient {
  background: linear-gradient(135deg, #0c4a6e 0%, #075985 55%, #164e63 100%);
}

.text-brand-gradient {
  background: linear-gradient(135deg, #075985, #0369a1 60%, #0c4a6e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.water-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgb(2 132 199 / 0.12) 1px, transparent 0);
  background-size: 24px 24px;
}

.grid-pattern {
  background-image:
    linear-gradient(to right, rgb(2 132 199 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(2 132 199 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero-overlay {
  background: linear-gradient(110deg,
    rgba(255,255,255,0.97) 0%,
    rgba(240,249,255,0.92) 45%,
    rgba(186,230,253,0.45) 75%,
    rgba(255,255,255,0)    100%);
}

.glow-cyan::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 30%, rgba(6,182,212,0.18) 0%, transparent 55%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}


/* 4. SHADOWS ============================================================== */
.soft-shadow {
  box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.04), 0 2px 4px -2px rgb(15 23 42 / 0.04);
}

.lift-shadow {
  box-shadow: 0 10px 30px -12px rgb(2 132 199 / 0.18), 0 4px 12px -6px rgb(15 23 42 / 0.06);
}


/* 5. FORM CONTROLS ======================================================== */

/* Range slider (used on calculator + hero live snapshot) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 28px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #ffffff;
  border: 3px solid var(--sky-600);
  margin-top: -8px;
  box-shadow: 0 4px 12px -2px rgb(2 132 199 / 0.4);
  transition: transform 120ms ease;
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #ffffff;
  border: 3px solid var(--sky-600);
  box-shadow: 0 4px 12px -2px rgb(2 132 199 / 0.4);
  transition: transform 120ms ease;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgb(2 132 199 / 0.18);
}

/* Generic input / textarea / select baseline */
.field {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--ink-200);
  border-radius: 0.625rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--ink-900);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field:focus {
  outline: none;
  border-color: var(--sky-500);
  box-shadow: 0 0 0 4px rgb(14 165 233 / 0.12);
}
.field::placeholder { color: var(--ink-400); }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}


/* 6. BUTTONS ============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.7rem 1.25rem;
  border-radius: 0.625rem;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  white-space: nowrap;
  min-height: 44px; /* touch target */
}

.btn-primary {
  background: linear-gradient(135deg, var(--sky-700), var(--sky-600));
  color: #ffffff;
  box-shadow: 0 8px 20px -10px rgb(3 105 161 / 0.45);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--sky-800), var(--sky-700));
  box-shadow: 0 10px 24px -10px rgb(3 105 161 / 0.55);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #ffffff;
  color: var(--sky-700);
  border: 1px solid var(--sky-200);
}
.btn-secondary:hover {
  background: var(--sky-50);
  border-color: var(--sky-500);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-700);
}
.btn-ghost:hover {
  color: var(--sky-700);
  background: var(--sky-50);
}


/* 7. CHIPS & CARDS ======================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--sky-50);
  color: var(--sky-700);
  border: 1px solid var(--sky-100);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
}

.card {
  background: #ffffff;
  border: 1px solid var(--ink-100);
  border-radius: 1rem;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.card-hoverable:hover {
  border-color: var(--sky-200);
  box-shadow: 0 18px 40px -20px rgb(2 132 199 / 0.25);
  transform: translateY(-2px);
}


/* 8. NAVIGATION & HEADER ================================================== */
.nav-link {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-700);
  transition: color 150ms ease, background-color 150ms ease;
}
.nav-link:hover {
  color: var(--sky-700);
  background: var(--sky-50);
}
.nav-link.active {
  color: var(--sky-700);
  background: var(--sky-50);
}
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 22px;
  height: 3px;
  background: linear-gradient(90deg, var(--sky-700), var(--sky-500));
  border-radius: 9999px;
  transform: translateX(-50%);
}

#site-header {
  transition: box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}
#site-header.is-stuck {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--ink-100);
  box-shadow: 0 4px 16px -8px rgb(15 23 42 / 0.08);
}


/* 9. ANIMATIONS =========================================================== */
.fade-in-up { animation: fadeInUp 600ms ease both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 10. ACCESSIBILITY HELPERS ============================================== */

/* Visually-hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip-to-main-content link (becomes visible on focus) */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--sky-700);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.18);
  transition: top 150ms ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--sky-300);
  outline-offset: 2px;
}

/* Strong focus ring for keyboard navigation (mouse users not impacted) */
*:focus-visible {
  outline: 2px solid var(--sky-600);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 11. MISC UTILITIES ====================================================== */
.scrollbar-thin::-webkit-scrollbar { height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: 9999px;
}

@media (max-width: 1023px) {
  body.menu-open { overflow: hidden; }
}