/* ═══════════════════════════════════════════════════════════════════
   AstroKamya™ — GLOBAL PAGES BASE (mobile + tablet) v1 (2026-05-08)
   Loaded by Layout.astro on every page.
   - Provides minimum body styling (dark bg + Inter font) so unstyled
     pages never render with white/Times default
   - Mobile/tablet overflow safety
   - Tap target minimums
   - iOS form 16px
   Only applies to ≤1024px breakpoints + base body fallback.
   Pages with their own body bg (index, soulsync, etc) override this.
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Base body fallback (lowest specificity, all viewports) ───── */
html {
  background-color: #06030F;
  color-scheme: dark;
}
body {
  background-color: #06030F;
  color: #F0EDE4;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* ───── Mobile + tablet (≤1024) shared rules ───── */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Section overflow safety */
  body > section,
  body > main,
  body > div,
  body > article,
  body > footer {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

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

  /* iOS form 16px to prevent autozoom */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="url"], input[type="date"],
  textarea, select {
    font-size: 16px !important;
  }

  /* Tap targets */
  button, a.btn, a.button {
    min-height: 40px;
  }

  /* Remove iOS UA boxes on inputs */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="url"], textarea {
    -webkit-appearance: none;
    appearance: none;
  }

  /* Universal hide back-to-top — chat FAB only */
  .back-to-top {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Mobile typography tightening */
  h1 { line-height: 1.05; letter-spacing: -0.02em; }
  h2 { line-height: 1.15; letter-spacing: -0.015em; }
  h3 { line-height: 1.25; }
}

/* ───── Mobile (≤640) extras ───── */
@media (max-width: 640px) {
  body {
    font-size: 15px;
    line-height: 1.55;
  }
}

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