/* ═══════════════════════════════════════════════════════════════════════════
   WaterQualitySD — Responsive Overrides (Light Theme)
   Breakpoints: sm 640px, md 768px, lg 1024px (matches dev_tools Tailwind)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Topbar sticky ──────────────────────────────────────────────────────── */
.wqo-topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important;
}

/* ─── Card hover (desktop only) ──────────────────────────────────────────── */
@media (hover: hover) and (min-width: 768px) {
  .wqo-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  .wqo-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

/* ─── Sticky mobile CTA — only below md ──────────────────────────────────── */
.wqo-sticky-cta {
  display: block;
}

@media (min-width: 768px) {
  .wqo-sticky-cta {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    padding: 0 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (max-width: 767px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Section padding — tighter on mobile */
  .wqo-section-white,
  .wqo-section-light,
  .wqo-section-dark {
    padding: 64px 20px !important;
  }

  /* Form grids → stack */
  .wqo-lead-form div[style*="grid-template-columns:1fr 1fr"],
  .wqo-cta-form div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap:12px"] {
    grid-template-columns: 1fr !important;
  }

  /* Topbar compact */
  .wqo-topbar {
    padding: 10px 16px !important;
  }

  /* Touch targets — minimum 48px */
  .wqo-lead-form input,
  .wqo-lead-form select,
  .wqo-cta-form input,
  .wqo-cta-form select,
  button[type="submit"] {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* CTA buttons → full width */
  .wqo-btn-cta .elementor-button,
  .wqo-btn-outline .elementor-button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* H1 → smaller */
  h1, .elementor-widget-heading h1 .elementor-heading-title {
    font-size: 1.875rem !important;
  }

  /* H2 → smaller */
  h2, .elementor-widget-heading h2 .elementor-heading-title {
    font-size: 1.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL MOBILE (max-width: 480px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wqo-section-white,
  .wqo-section-light,
  .wqo-section-dark {
    padding: 48px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .wq-fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--wq-primary);
  outline-offset: 2px;
}

/* Form placeholder */
::placeholder {
  color: var(--wq-muted);
  opacity: 0.7;
}