/* css/mobile.css
   Phase 1 — Touch-friendly fixes
   Applied across all Adheetha pages via <link>
   ─────────────────────────────────────────── */

/* ── PREVENT iOS FONT SCALING ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── PREVENT iOS INPUT ZOOM (must be 16px+) ── */
input,
select,
textarea {
  font-size: 16px !important;
}

/* ── REMOVE iOS INPUT STYLING ── */
input,
select,
textarea,
button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
}

/* ── MINIMUM TOUCH TARGETS (44x44px Apple guideline) ── */
button,
.btn,
.submit-btn,
.next-btn,
.cta-btn,
.sign-out-btn,
.nav-cta,
.nav-back,
.resend-btn {
  min-height: 44px;
  min-width: 44px;
}

/* ── ACTIVE STATES FOR TAP FEEDBACK ── */
/* replaces :hover which doesn't fire reliably on touch */
.option-card:active,
.subject-card:active,
.explore-card:active,
.feature-card:active,
.hcard:active,
.stat-card:active {
  transform: scale(0.97);
  opacity: 0.85;
  transition: transform 0.1s, opacity 0.1s;
}

.submit-btn:active:not(:disabled),
.next-btn:active:not(:disabled),
.cta-btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-white:active {
  transform: scale(0.97) translateY(0) !important;
  transition: transform 0.1s !important;
}

/* ── SMOOTH NATIVE SCROLLING ── */
html, body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── PREVENT TEXT SELECTION ON CARDS ── */
.option-card,
.subject-card,
.explore-card,
.hcard {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── REMOVE TAP HIGHLIGHT ON ALL CLICKABLE ELEMENTS ── */
a, button, [onclick] {
  -webkit-tap-highlight-color: transparent;
}

/* ── PHONE (max 430px) ── */
@media (max-width: 430px) {

  /* Navigation */
  nav {
    padding: 0.9rem 4%;
  }

  /* OTP boxes — bigger and better spaced on small phones */
  .otp-box {
    width: 42px !important;
    height: 52px !important;
    font-size: 1.4rem !important;
    border-radius: 10px !important;
  }
  #otpRow {
    gap: 0.4rem !important;
  }

  /* Onboarding subject grid — single column on tiny phones */
  .subject-grid {
    grid-template-columns: 1fr !important;
  }

  /* Option cards — more padding for fat fingers */
  .option-card {
    padding: 1rem 1.1rem;
    min-height: 60px;
  }

  /* Subject cards */
  .subject-card {
    padding: 1.1rem;
  }

  /* Hero headline */
  h1 {
    font-size: clamp(2.4rem, 11vw, 3.5rem);
  }

  /* CTA button full width */
  .cta-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  /* Path strip nodes — reduce font size */
  .path-arch-name {
    font-size: 0.62rem !important;
  }
  .path-arch-sanskrit {
    display: none;
  }
  .path-arch-title {
    display: none;
  }
  .path-circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.55rem !important;
  }
  .path-line {
    width: 16px !important;
  }

  /* Dashboard subject grid */
  .my-subjects {
    grid-template-columns: 1fr !important;
  }
  .explore-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stats */
  .stats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Registration form row */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Card padding */
  .card {
    padding: 1.8rem 1.4rem !important;
    border-radius: 20px !important;
  }

  /* Reveal screen */
  .reveal-archetype-name {
    font-size: 2.8rem !important;
  }
  .reveal-path {
    gap: 0.2rem !important;
  }

  /* Sign out button — bigger */
  .sign-out-btn {
    padding: 0.5rem 0.9rem !important;
  }

  /* Bottom strip hide on tiny screens */
  .strip-left {
    display: none;
  }
}

/* ── TABLET (431px – 900px) ── */
@media (min-width: 431px) and (max-width: 900px) {

  /* Onboarding subject grid — 2 cols */
  .subject-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Dashboard */
  .my-subjects {
    grid-template-columns: 1fr 1fr !important;
  }
  .explore-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Stats */
  .stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── iOS SAFE AREAS (notch + home bar) ── */
@supports (padding: max(0px)) {
  nav {
    padding-left:  max(4%, env(safe-area-inset-left));
    padding-right: max(4%, env(safe-area-inset-right));
    padding-top:   max(1rem, env(safe-area-inset-top));
  }
  .strip, .main {
    padding-bottom: max(1.2rem, env(safe-area-inset-bottom));
  }
  .page {
    padding-bottom: max(4rem, env(safe-area-inset-bottom));
  }
}

/* ── iPAD SPECIFIC ── */
@media (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  /* slightly larger touch targets on retina iPads */
  .option-card {
    min-height: 64px;
  }
  .subject-card {
    min-height: 120px;
  }
}