/*
 * 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,
.read-more,
.details-btn,
.navbar-toggler,
.close-nav-mobile,
.menu-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Nav links */
.main-menu > ul > li > a,
.main-menu ul li a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Social icon links */
.social-links a,
.footer-social a,
.social-icon a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   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. NAVIGATION — MOBILE MENU SAFETY
   ============================================================================= */

/* Ensure mobile nav doesn't overflow viewport */
.mobile-menu,
.nav-overlay,
.side-nav {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Hamburger / toggle button always 44×44 */
.navbar-toggler {
  padding: 10px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   7. HERO AREA — MOBILE SAFETY
   ============================================================================= */

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

/* Decorative absolute-positioned elements should not cause horizontal scroll */
.hero-section .shape,
.hero-section .decor,
.hero-section .bg-decor,
.banner-area .shape {
  pointer-events: none;
  max-width: none; /* shapes use transforms, not width overflow */
}

/* =============================================================================
   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;
}

/* Project / portfolio grid items */
.project-item,
.portfolio-item,
.service-item,
.team-member {
  width: 100%;
}

@media (min-width: 576px) {
  /* Two columns on phones ≥576px for certain grid items */
  .col-sm-6 .project-item,
  .col-sm-6 .service-item {
    width: 100%; /* flex child — parent handles width */
  }
}

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

/* Footer columns stack on mobile */
footer .col-lg-3,
footer .col-lg-4,
footer .col-md-6 {
  margin-bottom: 32px;
}

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

/* Footer logo always contained */
.footer-logo img,
.site-logo img {
  max-width: 160px;
  height: auto;
}

/* =============================================================================
   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 */
  }
}