/*
Theme Name: What If Labs
Theme URI: https://what-if.sg
Author: What If Labs
Description: Custom theme from Stitch designs
Version: 1.0.0
*/

:root {
  --primary: #0066CC;
  --dark: #0A1628;
  --white: #FFFFFF;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero {
  background: var(--dark);
  color: var(--white);
  padding: 120px 0;
  text-align: center;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 60px 0;
}

.card {
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
}

/* Custom Animations from Stitch */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s ease-out;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s ease-out;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Image hover effects */
img.hover-scale {
  transition: transform 0.5s ease;
}

img.hover-scale:hover {
  transform: scale(1.05);
}

/* ===================================
   RESPONSIVE TRANSITIONS
   Smooth desktop → mobile transitions
   =================================== */

/* Smooth all layout changes */
* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation transitions */
nav {
  transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Mobile menu slide animation */
@media (max-width: 768px) {
  .mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-menu.active {
    transform: translateX(0);
  }
  
  /* Smooth hamburger icon animation */
  .hamburger span {
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  
  /* Fade content on resize */
  body {
    animation: fadeInMobile 0.5s ease-out;
  }
}

/* Card transitions */
.modular-container {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (max-width: 768px) {
  .modular-container {
    transform: translateY(0);
  }
  
  .modular-container:hover {
    transform: scale(1.02);
  }
}

/* Grid to stack transition */
.grid {
  transition: grid-template-columns 0.4s ease;
}

/* Image lazy load fade-in */
img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.loaded, img[src] {
  opacity: 1;
}

/* Text scaling transitions */
h1, h2, h3, h4, h5, h6, p {
  transition: font-size 0.3s ease, line-height 0.3s ease;
}

/* Button touch feedback */
button, a.button {
  transition: transform 0.2s ease, background-color 0.3s ease;
}

button:active, a.button:active {
  transform: scale(0.95);
}

/* Section fade on scroll */
section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframes */
@keyframes fadeInMobile {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInMenu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Stop animations during resize */
.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

}


/* Contact Form 7 - Dark Mode Fixed */
:root {
  /* Your existing variables (keep these) */
  --text: #0f172a;
  --text-muted: #64748b;
  --primary: #0066cc;
  --background-light: #ffffff;
  --slate-border: #1e2e42;
}

/* Force light-mode colors for form fields (ignores body.dark) */
:not(.dark) .wpcf7 input[type="text"],
:not(.dark) .wpcf7 input[type="email"],
:not(.dark) .wpcf7 input[type="tel"],
:not(.dark) .wpcf7 input[type="url"],
:not(.dark) .wpcf7 textarea,
:not(.dark) .wpcf7 select {
  color: #000000 !important;
  background-color: var(--background-light, #ffffff) !important;
  border: 1px solid var(--slate-border, #1e2e42) !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  width: 100% !important;
  transition: border-color 0.2s ease !important;
}

/* Focus states (light mode) */
:not(.dark) .wpcf7 input:focus,
:not(.dark) .wpcf7 textarea:focus {
  outline: none !important;
  border-color: var(--primary, #0066cc) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
}

/* Placeholders (light mode) */
:not(.dark) .wpcf7 input::placeholder,
:not(.dark) .wpcf7 textarea::placeholder {
  color: var(--text-muted, #64748b) !important;
  opacity: 1;
}

/* Labels (light mode) */
:not(.dark) .wpcf7 label {
  color: var(--text, #ffffff) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Paragraph spacing */
:not(.dark) .wpcf7 p {
  margin-bottom: 1.5rem !important;
}

/* Submit button - FIXED for dark mode */
:not(.dark) .wpcf7 input[type="submit"],
:not(.dark) .wpcf7 button,
:not(.dark) .wpcf7 input[type="button"] {
  background-color: var(--primary, #0066cc) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

:not(.dark) .wpcf7 input[type="submit"]:hover,
:not(.dark) .wpcf7 button:hover,
:not(.dark) .wpcf7 input[type="button"]:hover {
  background-color: #0052a3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

:not(.dark) .wpcf7 input[type="submit"]:active,
:not(.dark) .wpcf7 button:active,
:not(.dark) .wpcf7 input[type="button"]:active {
  transform: translateY(0) !important;
}