/*
 * voxire-mobile-overrides.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Mobile-first fixes applied ON TOP of the legacy style.css (which is
 * desktop-first and cannot be safely refactored automatically).
 *
 * Philosophy: write the mobile base rule, then enhance upward.
 * Never use max-width queries in this file - min-width only.
 * This file is loaded after style.css, so specificity wins without !important
 * except where the legacy file uses it first.
 *
 * Sections:
 *  1. Global safety net
 *  2. iOS zoom prevention (form inputs)
 *  3. Touch targets
 *  4. Typography - mobile base sizes
 *  5. Section spacing
 *  6. Navigation - mobile menu
 *  7. Hero area
 *  8. Cards & grid items
 *  9. Footer
 * 10. Anchor scroll offset (fixed header clearance)
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* =============================================================================
   1. GLOBAL SAFETY NET
   ============================================================================= */

/* Prevent horizontal scroll on any viewport width */
html,
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* prevent iOS font-size inflation on landscape rotate */
}

/* Images always contained */
img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* =============================================================================
   2. iOS ZOOM PREVENTION - ALL FORM INPUTS
   iOS Safari zooms in whenever a focused input has font-size < 16px.
   This override ensures 16px minimum on all interactive form elements.
   ============================================================================= */

input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
  font-size: 16px; /* CRITICAL - do not reduce below 16px */
}

@media (min-width: 992px) {
  /* On desktop, match the Inter body size from voxire-system.css */
  input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 15px;
  }
}

/* =============================================================================
   3. TOUCH TARGETS
   Every tappable element must be at least 44×44px in hit area.
   We grow hit area with padding/min-height, not width/height, to avoid layout shift.
   ============================================================================= */

/* Generic interactive element baseline */
.theme-btn,
a.theme-btn {
  min-height: 44px;
  min-width: 44px;
}

/* =============================================================================
   4. TYPOGRAPHY - MOBILE BASE SIZES
   style.css sets heading sizes for desktop; these establish the mobile base.
   The legacy max-width overrides in style.css still apply via specificity,
   but these ensure a sensible floor on xs screens where style.css has no rule.
   ============================================================================= */

h1 {
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.15;
}

h2 {
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.2;
}

h3 {
  font-size: clamp(20px, 5vw, 28px);
  line-height: 1.25;
}

h4 {
  font-size: clamp(18px, 4.5vw, 22px);
  line-height: 1.3;
}

@media (min-width: 768px) {
  h1 { font-size: clamp(36px, 5vw, 60px); }
  h2 { font-size: clamp(30px, 4vw, 48px); }
  h3 { font-size: clamp(22px, 3vw, 32px); }
  h4 { font-size: clamp(18px, 2.5vw, 24px); }
}

@media (min-width: 992px) {
  /* Desktop - let style.css + voxire-system.css take over */
  h1, h2, h3, h4 {
    font-size: revert;
    line-height: revert;
  }
}

/* =============================================================================
   5. SECTION SPACING
   style.css uses large fixed padding values for sections without responsive
   adjustment. These override the desktop padding for mobile.
   ============================================================================= */

/* pt-* / pb-* utility overrides for mobile */
@media (max-width: 767px) {
  /* Reduce extreme padding on mobile - pt-120 through pt-200 become pt-60 */
  .pt-120, .py-120,
  .pt-130, .py-130,
  .pt-140, .py-140,
  .pt-150, .py-150,
  .pt-160, .py-160,
  .pt-170, .py-170,
  .pt-180, .py-180,
  .pt-190, .py-190,
  .pt-200, .py-200 {
    padding-top: 60px !important;
  }

  .pb-120, .py-120,
  .pb-130, .py-130,
  .pb-140, .py-140,
  .pb-150, .py-150,
  .pb-160, .py-160,
  .pb-170, .py-170,
  .pb-180, .py-180,
  .pb-190, .py-190,
  .pb-200, .py-200 {
    padding-bottom: 60px !important;
  }
}

/* Note: this file uses one max-width block above only because it's overriding
   style.css utility classes that themselves use max-width. All new Voxire
   component CSS goes into voxire-system.css using min-width only. */

/* =============================================================================
   6. HERO / BANNER AREA - MOBILE SAFETY
   ============================================================================= */

/* Banner sections should not overflow on xs */
[class*="banner-area"],
[class*="hero-area"] {
  max-width: 100vw;
  overflow-x: hidden;
}

/* =============================================================================
   8. CARDS & GRID ITEMS
   ============================================================================= */

/* Cards should never overflow their column */
[class*="-card"],
[class*="-item"],
[class*="-box"] {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* =============================================================================
   9. FOOTER
   ============================================================================= */

/* Footer should not overflow */
footer {
  overflow-x: hidden;
}

/* =============================================================================
   10. ANCHOR SCROLL OFFSET - FIXED HEADER CLEARANCE
   When a fixed header exists, anchor links land behind it.
   scroll-margin-top pushes the element down so it's fully visible.
   ============================================================================= */

[id] {
  scroll-margin-top: 80px; /* approximate fixed header height on mobile */
}

@media (min-width: 992px) {
  [id] {
    scroll-margin-top: 100px; /* desktop header is typically taller */
  }
}