/* Common styles for Water IDC – white/grid premium theme */

:root {
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --accent: #00c2ff;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --border: #e5e7eb;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --radius: 14px;
}

/* Reset & base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.theme-white { background: var(--bg); }

/* Optional subtle grid background */
body.has-grid-bg {
  background-image:
    linear-gradient(0deg, rgba(2,6,23,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,6,23,.04) 1px, transparent 1px),
    radial-gradient(600px 200px at 80% -10%, rgba(37,99,235,.08), transparent 50%),
    radial-gradient(500px 180px at 10% 0%, rgba(0,194,255,.08), transparent 50%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
}

.container-narrow { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section-title { font-weight: 800; letter-spacing: -0.02em; }
.subtle { color: var(--muted); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(1.2) blur(12px);
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(226,232,240,.7);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); background: rgba(255,255,255,.85); }

.navbar-wrap { display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 14px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color: var(--text); text-decoration:none; }
.brand img { height: 28px; width: auto; display:block; object-fit: contain; max-width: 120px; }
@media (max-width: 576px) { .brand img { height: 24px; max-width: 100px; } }
.brand .dot { display:none; }

.nav { display:flex; align-items:center; gap: 6px; }
.nav a { color: var(--text-2); text-decoration:none; padding: 8px 12px; border-radius: 10px; font-weight:600; }
.nav a:hover { background: rgba(37,99,235,.08); color: var(--primary-700); }
.nav a.active { color: var(--primary-700); background: rgba(37,99,235,.12); }

.cta { display:flex; align-items:center; gap:10px; }
.btn { appearance:none; border:1px solid var(--border); background: #fff; color: var(--text); padding: 10px 14px; border-radius: 12px; font-weight:700; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.08); border-color: rgba(37,99,235,.35); }
.btn-primary { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-600)); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); }

/* Mobile nav */
.nav-toggle { display:none; border:1px solid var(--border); background:#fff; width:38px; height:38px; border-radius:10px; align-items:center; justify-content:center; }
.nav-toggle i { font-size:18px; }

@media (max-width: 992px) {
  .nav { display:none; position: absolute; top: 64px; left: 16px; right: 16px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow-md); padding: 8px; flex-direction: column; z-index: 100; }
  .nav.show { display:flex; }
  .nav a { margin: 2px 0; }
  .cta { display:none; }
  .nav-toggle { display:flex; }
}

/* Cards */
.card { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-body { padding: 22px; }
.card-title { font-weight: 700; font-size: 18px; }
.card-sub { color: var(--muted); font-size: 14px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: #fff; }
.footer-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.footer-brand { grid-column: span 4; }
.footer-links { grid-column: span 8; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.footer-links a { color: var(--text-2); text-decoration:none; }
.footer-links a:hover { color: var(--primary-600); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }

@media (max-width: 992px) {
  .footer-grid { grid-template-columns: repeat(6, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-links { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Loader overlay */
.loader-overlay {
  position: fixed;
  inset: 0;
  background:#fff;
  display:grid;
  place-items:center;
  z-index: 2000;
  transition: opacity .25s ease, visibility .25s ease;
}
.loader-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-content {
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 12px;
  color: var(--text);
  text-align: center;
}
.loader-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loader-text {
  font-weight: 700;
  color: var(--text-2);
  font-size: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Neomorphic cards */
.neo {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.02);
  box-shadow: -6px -6px 12px rgba(255,255,255,.8), 6px 6px 12px rgba(15,23,42,.06);
  transition: transform .2s ease, box-shadow .25s ease;
}
.neo:hover {
  box-shadow: -8px -8px 18px rgba(255,255,255,.9), 10px 10px 24px rgba(15,23,42,.09);
  transform: translateY(-2px);
}
.neo .card-body { padding: 22px; }

/* Override default card styles for neo cards */
.card.neo { border: 1px solid rgba(0,0,0,0.02); }
.card.neo:hover { border-color: rgba(0,0,0,0.02); }