/* ═══════════════════════════════════════════════════════════════════
   Jyotiza — Mobile-First Responsive Stylesheet
   Breakpoints: mobile ≤ 640px | tablet ≤ 900px | desktop > 900px
═══════════════════════════════════════════════════════════════════ */

/* ─── Global Resets ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
  height: auto;
}

h1,h2,h3,h4,p,span,div { overflow-wrap: break-word; word-wrap: break-word; }

/* Prevent iOS input zoom */
input, select, textarea {
  font-size: 16px !important;
}

/* ─── Focus Styles ──────────────────────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #d4a017;
  outline-offset: 2px;
}

/* ─── Scrollbar styling ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2540; border-radius: 4px; }

/* ─── Sidebar overlay backdrop ──────────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 900;
  backdrop-filter: blur(2px);
}

/* ─── Desktop sidebar: persistent left panel ───────────────────── */
.sidebar-mobile {
  /* On desktop (>900px) the sidebar sits in normal flow */
  position: sticky !important;
  top: 68px !important;
  left: auto !important;
  height: calc(100vh - 68px) !important;
  transform: none !important;
  z-index: auto !important;
  width: 210px !important;
  transition: none;
}

/* ─── Hamburger button (hidden on desktop) ──────────────────────── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(212,160,23,0.06);
  border: 1px solid rgba(212,160,23,0.2);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.hamburger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #d4a017;
  border-radius: 2px;
  transition: all 0.22s;
}

.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Tables: always scrollable ─────────────────────────────────── */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ─── Tablet (≤ 900px) ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hamburger-btn { display: flex; }
  .sidebar-backdrop { display: block; }
  .navbar-marketing-links { display: none !important; }

  /* Override desktop sticky — revert to mobile slide-in */
  .sidebar-mobile {
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 950 !important;
    width: 260px !important;
  }

  .sidebar-mobile.open {
    transform: translateX(0) !important;
  }

  /* Hero banner: full-width gradient overlay on tablet */
  .hero-section {
    min-height: 70vh !important;
    background-position: center center !important;
  }
}

/* ─── Tamil-specific typography adjustments ─────────────────────
   Tamil glyphs render taller than Latin at the same point size,
   so headlines styled for English overflow the layout in Tamil.
   Scale down hero + marketing headings ~20% when html[lang="ta"].
─────────────────────────────────────────────────────────────── */
html[lang="ta"] .hero-title {
  font-size: clamp(26px, 4.2vw, 48px) !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}
html[lang="ta"] .hero-subtitle {
  font-size: clamp(13px, 1.3vw, 16px) !important;
  line-height: 1.8 !important;
}
html[lang="ta"] h1,
html[lang="ta"] h2 {
  letter-spacing: 0 !important;
}

/* ─── Mobile (≤ 640px) ──────────────────────────────────────────── */
@media (max-width: 640px) {
  html[lang="ta"] .hero-title {
    font-size: clamp(24px, 7vw, 34px) !important;
  }

  /* ── Navbar ── */
  .navbar-logo-text { display: none !important; }
  .navbar-signup-text { display: none; }

  /* ── Hero ── */
  .hero-section {
    min-height: 100svh !important;
    background-position: 70% center !important;
  }

  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(6,4,14,0.75) 0%,
      rgba(6,4,14,0.88) 40%,
      rgba(6,4,14,0.97) 75%,
      rgba(6,4,14,1) 100%
    ) !important;
  }

  .hero-content {
    padding: 100px 20px 60px !important;
    max-width: 100% !important;
    align-items: flex-start !important;
  }

  .hero-title { font-size: clamp(30px, 9vw, 42px) !important; }
  .hero-subtitle { font-size: 14px !important; }

  .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .hero-cta-row a {
    text-align: center;
    justify-content: center !important;
  }

  .hero-stats { gap: 20px !important; flex-wrap: wrap !important; }
  .hero-stats > div { flex: 1 1 40%; }

  /* ── Feature grid ── */
  .feature-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── Panchang widget grid ── */
  .panchang-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── KP / meaning cards grid ── */
  .meaning-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Form cards ── */
  .form-card {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }

  /* ── Page section padding ── */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Time picker row ── */
  .time-picker-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Chart selector tabs ── */
  .chart-selector { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Chart SVGs: constrain size ── */
  .chart-svg-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart-svg-wrapper svg { max-width: 100% !important; height: auto !important; }

  /* ── Planet table ── */
  .planet-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Dasha timeline ── */
  .dasha-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Matching / comparison layout ── */
  .two-col-form {
    flex-direction: column !important;
  }

  /* ── Admin / profile grid ── */
  .admin-grid, .profile-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Very small screens (≤ 380px) ─────────────────────────────── */
@media (max-width: 380px) {
  .feature-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-stats { gap: 14px !important; }
  .hero-stats > div { flex: 1 1 100%; }
}

/* ─── Print ──────────────────────────────────────────────────────── */
@media print {
  nav, footer, aside, [style*="position: fixed"], [style*="position: sticky"] {
    display: none !important;
  }
  body, main, div { background: white !important; color: black !important; }
}

/* ─── Reduced Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}