/* ================================================
   styles.css — Shared styles for rishabhsaxena.co.in
   Contains: CSS tokens, reset, body, nav (desktop + mobile)
   Page-specific CSS remains inline in each HTML file
   ================================================ */

/* ── TOKENS ── */
:root {
  --sf-navy: #0A1F44;
  --sf-blue: #0070D2;
  --sf-electric: #1B96FF;
  --sf-text: #0A1F44;
  --sf-subtext: #5C6B7A;
  --sf-card: #FFFFFF;
  --sf-border: #E0E5EB;
  --sf-light-bg: #F4F6F9;
  --sf-tag-bg: #EEF4FF;
  --bg: #F4F6F9;
  --shadow-card: 0 2px 20px rgba(0,0,0,0.07);
  --watch-dial: #ffffff;
  --watch-hand: #0A1F44;
  
  /* Depth & Glass Tokens */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(32px);
  --glass-bg: rgba(255, 255, 255, 0.3);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-glow: rgba(255, 255, 255, 0.5);
  --shadow-float: 0 16px 40px rgba(0, 50, 100, 0.08), 0 4px 12px rgba(0, 50, 100, 0.04);
  --shadow-overlay: 0 24px 60px rgba(0, 60, 120, 0.15), 0 8px 24px rgba(0, 60, 120, 0.08);
  --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  
  /* Blob Colors - Light Mode */
  --blob-1: #cce0ff;
  --blob-2: #e6f0ff;
  --blob-3: #99c2ff;
  --blob-blend: multiply;
  --blob-opacity: 0.8;
}

[data-theme="dark"] {
  --sf-text: #E8F4FF;
  --sf-subtext: #8CA0B8;
  --sf-card: #0F2847;
  --sf-border: #1A3A5C;
  --sf-light-bg: #081830;
  --sf-tag-bg: #0D2240;
  --bg: #060F1E;
  --shadow-card: 0 2px 20px rgba(0,0,0,0.3);
  --watch-dial: #0A1F44;
  --watch-hand: #E8F4FF;

  /* Depth & Glass Tokens - Dark Mode */
  --glass-bg: rgba(20, 50, 90, 0.75); /* Bolder opacity */
  --glass-border: rgba(255, 255, 255, 0.3); /* Stronger border for "separate tab" look */
  --glass-glow: rgba(255, 255, 255, 0.08);
  --shadow-float: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 30px 80px rgba(0, 0, 0, 0.8);
  --shadow-inset: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);

  /* Blob Colors - Dark Mode */
  --blob-1: #002b5e;
  --blob-2: #051329;
  --blob-3: #004080;
  --blob-blend: screen;
  --blob-opacity: 0.8;
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── BASE ── */
body {
  font-family: 'DM Sans', sans-serif;
  background: transparent; /* Changed to let blobs show behind everything */
  color: var(--sf-text);
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* ── AMBIENT BLOBS ── */
.glow-container {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  transition: background 0.3s;
}
.blob {
  position: absolute;
  filter: blur(80px);
  opacity: var(--blob-opacity);
  border-radius: 50%;
  animation: blob-float 8s infinite alternate ease-in-out;
  mix-blend-mode: var(--blob-blend);
  will-change: transform;
}
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--blob-1); animation-delay: 0s; }
.blob-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: var(--blob-2); animation-duration: 6s; animation-delay: -2s; }
.blob-3 { top: 30%; left: 50%; width: 40vw; height: 40vw; background: var(--blob-3); animation-duration: 10s; animation-delay: -5s; }

@keyframes blob-float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, 15%) scale(1.15); }
  66% { transform: translate(-5%, -10%) scale(0.9); }
  100% { transform: translate(12%, 5%) scale(1.05); }
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 68px;
  background: var(--glass-bg);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; z-index: 1000;
  transition: background 0.3s, border-color 0.3s;
}
[data-theme="dark"] nav { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); }
.nav-logo a { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 44px; width: 44px; border-radius: 50%; object-fit: cover; }
.nav-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 28px;
}
.nav-center a {
  text-decoration: none; color: var(--sf-text);
  font-size: 0.88rem; font-weight: 400;
  transition: color 0.2s; white-space: nowrap;
}
.nav-center a:hover { color: var(--sf-blue); }
.nav-item { position: relative; padding-bottom: 16px; margin-bottom: -16px; }
.nav-item .has-dropdown {
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  font-size: 0.88rem; font-weight: 400; color: var(--sf-text);
  text-decoration: none; white-space: nowrap;
}
.nav-item .has-dropdown::after { content: "▾"; font-size: 0.7rem; opacity: 0.5; margin-left: 2px; }
.dropdown {
  display: none; position: absolute; top: 100%; left: -16px;
  background: var(--sf-card); border: 1px solid var(--sf-border);
  border-radius: 12px; padding: 8px 0; min-width: 220px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 2000;
}
.dropdown a {
  display: flex; align-items: center; padding: 9px 20px;
  font-size: 0.88rem; color: var(--sf-text); text-decoration: none; transition: background 0.15s;
}
.dropdown a:hover { background: var(--sf-tag-bg); }
.nav-item:hover .dropdown, .nav-item .dropdown.open { display: block; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  background: var(--sf-tag-bg); border: 1px solid var(--sf-border);
  color: var(--sf-text); padding: 6px 14px; border-radius: 20px;
  cursor: pointer; font-size: 0.78rem; font-family: "Sora", sans-serif;
  font-weight: 600; transition: all 0.2s; white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--sf-blue); color: var(--sf-blue); }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--sf-text); border-radius: 2px; transition: 0.3s; }
@media (max-width: 768px) {
  .nav-center {
    display: none;
    position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    transform: none;
    background: var(--sf-card);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    border-top: 1px solid var(--sf-border);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    gap: 0;
    z-index: 999;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .nav-center.open { display: flex; }
  .nav-center > a {
    padding: 14px 24px;
    width: 100%;
    border-bottom: 1px solid var(--sf-border);
    font-size: 1rem !important;
    color: var(--sf-text) !important;
    display: block;
  }
  .nav-item {
    width: 100%;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--sf-border);
  }
  .nav-item .has-dropdown {
    padding: 14px 24px;
    width: 100%;
    font-size: 1rem !important;
    display: flex;
    justify-content: space-between;
  }
  .nav-item:hover .dropdown { display: none; }
  .dropdown {
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-float), var(--shadow-inset);
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: var(--sf-light-bg) !important;
    min-width: unset !important;
    display: none;
  }
  .dropdown.open { display: block !important; }
  .dropdown a {
    padding: 12px 24px 12px 40px !important;
    border-bottom: 1px solid var(--sf-border) !important;
    font-size: 0.9rem !important;
  }
  .hamburger { display: flex !important; background: none; border: none; }
  .theme-toggle { font-size: 0.72rem; padding: 5px 10px; }
}
[data-theme="dark"] .nav-center.open { background: #132d56 !important; }
[data-theme="light"] .nav-center.open { background: #ffffff !important; }