/* ═══════════════════════════════════════════════════════════════════
   BMI VISUALIZER — style.css
   Clean, professional healthcare design system
   Dark background · Cyan accent · Minimal glow · Readable
   ═══════════════════════════════════════════════════════════════════ */

/* ── ROOT TOKENS ──────────────────────────────────────────────────── */
:root {
  --cyan:         #22d3ee;
  --cyan-dark:    #0891b2;
  --cyan-subtle:  rgba(34, 211, 238, 0.08);
  --cyan-border:  rgba(34, 211, 238, 0.18);
  --bg:           #0d1117;
  --bg-card:      #161b22;
  --bg-card-hover:#1c2128;
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text:         #e6edf3;
  --text-muted:   #8b949e;
  --text-dim:     #484f58;
  --transition:   all 0.2s ease;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
}

/* ── GLOBAL RESETS ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

img, canvas { display: block; max-width: 100%; }

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── FOCUS ───────────────────────────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* ── NAVBAR ──────────────────────────────────────────────────────── */
.nav-bar {
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-logo-icon {
  background: var(--cyan-subtle);
  border: 1px solid var(--cyan-border);
  color: var(--cyan);
}

/* ── SECTION CARD ────────────────────────────────────────────────── */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.section-card:hover {
  border-color: var(--border-hover);
}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--cyan);
  color: #0d1117;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  font-family: inherit;
}

.btn-primary:hover {
  background: #67e8f9;
  transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.btn-secondary:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.04);
}

/* ── UNIT TOGGLE ─────────────────────────────────────────────────── */
.unit-toggle { background: var(--bg); }

.unit-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

.unit-btn.active {
  background: var(--cyan-subtle);
  color: var(--cyan);
}

/* ── GENDER BUTTONS ──────────────────────────────────────────────── */
.gender-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

.gender-btn:hover { color: var(--text); }

.gender-btn.active {
  background: var(--cyan-subtle);
  border-color: var(--cyan-border);
  color: var(--cyan);
}

/* ── NOUISLIDER OVERRIDES ────────────────────────────────────────── */
.noUi-target {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  box-shadow: none;
  height: 6px;
  border-radius: 100px;
}

.noUi-connects { border-radius: 100px; }

.noUi-connect {
  background: var(--cyan);
  border-radius: 100px;
}

.noUi-handle {
  background: #fff;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  cursor: grab;
  width: 18px !important;
  height: 18px !important;
  top: -6px !important;
  right: -9px !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.noUi-handle:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px var(--cyan-subtle), 0 1px 6px rgba(0,0,0,0.4);
}

.noUi-handle:active { cursor: grabbing; }

.noUi-handle::before, .noUi-handle::after { display: none; }

/* ── BMI RESULT ROW ──────────────────────────────────────────────── */
.bmi-result-row {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
}

/* ── BMI SCALE BAR ───────────────────────────────────────────────── */
.bmi-scale-bar {
  background: linear-gradient(
    to right,
    #60a5fa  0%,
    #4ade80  27%,
    #facc15  55%,
    #f87171  100%
  );
  position: relative;
}

#bmi-indicator {
  box-shadow: 0 0 4px rgba(255,255,255,0.7);
}

/* ── BMI CATEGORY CARDS ──────────────────────────────────────────── */
.bmi-cat-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  transition: var(--transition);
}

.bmi-cat-card.active-cat {
  background: rgba(34, 211, 238, 0.04);
  border-color: rgba(34, 211, 238, 0.2);
}

.bmi-cat-card[data-cat="underweight"].active-cat { background: rgba(96,165,250,0.06); border-color: rgba(96,165,250,0.25); }
.bmi-cat-card[data-cat="healthy"].active-cat     { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.25); }
.bmi-cat-card[data-cat="overweight"].active-cat  { background: rgba(250,204,21,0.06); border-color: rgba(250,204,21,0.25); }
.bmi-cat-card[data-cat="obese"].active-cat       { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.25); }

/* BMI category text colours */
#bmi-category.underweight { color: #93c5fd; }
#bmi-category.healthy     { color: #86efac; }
#bmi-category.overweight  { color: #fde047; }
#bmi-category.obese       { color: #fca5a5; }

/* ── TOOL CHIPS ──────────────────────────────────────────────────── */
.tool-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.tool-chip:hover {
  background: var(--cyan-subtle);
  border-color: var(--cyan-border);
  color: var(--cyan);
}

/* ── VIEWER ──────────────────────────────────────────────────────── */
.viewer-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.viewer-hint-pill {
  background: rgba(13,17,23,0.8);
  border: 1px solid var(--border);
  border-radius: 100px;
}

.viewer-ctrl-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

.viewer-ctrl-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  color: var(--text);
}

.viewer-ctrl-btn.active-ctrl {
  background: var(--cyan-subtle);
  border-color: var(--cyan-border);
  color: var(--cyan);
}

/* ── LOADER ──────────────────────────────────────────────────────── */
.loader-ring {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── HOW IT WORKS ────────────────────────────────────────────────── */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--cyan-subtle);
  border: 1px solid var(--cyan-border);
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: var(--transition);
}

.faq-item:hover { border-color: var(--border-hover); }

.faq-item.open {
  border-color: rgba(34, 211, 238, 0.15);
  background: rgba(34, 211, 238, 0.02);
}

.faq-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

.faq-item.open .faq-chevron svg { transform: rotate(180deg); color: var(--cyan); }

/* ── GSAP REVEAL ─────────────────────────────────────────────────── */
.gsap-reveal { opacity: 0; transform: translateY(24px); }

/* ── BREADCRUMB ──────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb span { color: var(--text-dim); }

/* ── PAGE INTRO SECTION ──────────────────────────────────────────── */
.page-intro {
  padding: 7rem 1rem 3rem;
  max-width: 680px;
  margin: 0 auto;
}

.page-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--cyan-subtle);
  border: 1px solid var(--cyan-border);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}

/* ── CONTENT PROSE ───────────────────────────────────────────────── */
.prose p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.8; margin-bottom: 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose h3 { color: var(--text); font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 1.5rem; }

/* ── WEIGHT COMPARISON TABLE ─────────────────────────────────────── */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.compare-table td {
  font-size: 0.85rem;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ── RESPONSIVE OVERRIDES ────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-intro { padding-top: 5.5rem; }
  #three-canvas { height: 320px !important; }
  .section-card[style*="480px"] { height: 320px !important; }
}

@media print {
  .nav-bar, #mobile-menu-btn { display: none; }
  body { background: #fff; color: #000; }
}