/**
 * Atlas Vertical – Mobile UX enhancements
 * Predictable, exceptional experience for touch users.
 * Touch target minimum: 44×44px. Safe areas for notched devices.
 */

/* ---------------------------------------------------------------
   Touch tokens (global)
   --------------------------------------------------------------- */

:root {
  --touch-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-top: env(safe-area-inset-top, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
}

/* Tap highlight: subtle, on-brand (optional) */
@media (hover: none) {
  a, button {
    -webkit-tap-highlight-color: rgba(0, 102, 204, 0.15);
  }

  [data-theme="dark"] a,
  [data-theme="dark"] button {
    -webkit-tap-highlight-color: rgba(91, 163, 255, 0.2);
  }
}

/* ---------------------------------------------------------------
   Mobile: touch targets, safe areas, predictable spacing
   --------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Main: safe area padding for notched devices */
  .site-main {
    padding-bottom: var(--safe-bottom);
  }

  /* Container: consistent horizontal padding */
  .container,
  .container--wide {
    padding-inline: max(var(--space-md), var(--safe-left)) max(var(--space-md), var(--safe-right));
  }

  /* Primary CTAs: full-width, min-height tap target */
  .home-hero__btn,
  .home-pricing__cta {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
  }

  .home-hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .home-hero__ctas .home-hero__btn {
    width: 100%;
    max-width: 100%;
  }

  /* Chips: adequate tap spacing (tap target via padding) */
  .home-hero__chip,
  .atlas-chip {
    min-height: auto;
    padding: var(--space-sm) var(--space-md);
  }

  /* Nav links: larger tap targets */
  .site-nav a {
    min-height: var(--touch-min);
    padding: var(--space-sm) var(--space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Subscribe form: stack on mobile, 16px input (prevents iOS zoom) */
  .subscribe-box__form {
    flex-direction: column;
    width: 100%;
  }

  .subscribe-box__input {
    min-width: 100%;
    min-height: var(--touch-min);
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: var(--space-md);
  }

  .subscribe-box__button {
    min-height: var(--touch-min);
    width: 100%;
    padding: var(--space-md);
  }

  /* Card links: full tap area */
  .card__link {
    min-height: auto;
    padding: 0;
  }

  /* Problem cards: full-width tap */
  .home-problem-item {
    padding: var(--space-lg);
  }

  /* Pricing card: full width, adequate touch spacing */
  .home-pricing__card {
    padding: var(--space-xl);
  }

  .home-pricing__cta {
    min-height: var(--touch-min);
  }

  /* Section spacing: consistent rhythm */
  .home-section {
    padding-block: var(--space-2xl);
  }

  /* Theme toggle: meet touch minimum */
  .theme-toggle {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    width: var(--touch-min);
    height: var(--touch-min);
  }

  /* Footer: safe area for notched devices */
  .site-footer__inner {
    padding-bottom: max(var(--space-xl), var(--safe-bottom));
  }

  /* Header: safe area top */
  .site-header__inner {
    padding-top: max(var(--space-md), var(--safe-top));
  }
}

/* ---------------------------------------------------------------
   Small phones: tighter but still touch-friendly
   --------------------------------------------------------------- */

@media (max-width: 390px) {
  .home-hero__headline {
    font-size: 1.5rem;
  }

  .home-section__title {
    font-size: 1.25rem;
  }
}