/*
  The Creative Garage — Mobile Responsiveness System
  Adheres to .agents/skills/mobile-responsiveness/SKILL.md
  
  Tokens & Features:
  - Mobile-First Breakpoint Architecture
  - Safe Area Insets (Notch, Dynamic Island, Home Indicator)
  - 44x44px Minimum Touch Targets
  - Touch Hardening (Manipulation, Tap Highlights, Hover Isolation)
  - iOS Input Zoom Prevention (16px threshold)
  - Dynamic Viewport Units (dvh / svh)
  - Landscape Phone Handling
*/

:root {
  /* Safe area variables with fallback */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Touch target standard */
  --min-touch-target: 44px;

  /* Viewport heights */
  --viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

/* ==========================================================================
   1. Universal Touch & Safe Area Foundation
   ========================================================================== */

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-left: var(--sal);
  padding-right: var(--sar);
  min-height: 100%;
  min-height: var(--viewport-height);
}

body.menu-locked {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Touch Action Manipulation for responsive interactions */
a,
button,
input,
select,
textarea,
summary,
[role="button"],
.interactive-card,
.filter-btn,
.service-accordion summary {
  touch-action: manipulation;
}

/* Prevent auto-zoom on iOS when focusing inputs */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Ensure minimum touch targets */
button,
.btn,
.nav-cta,
.filter-btn,
.menu-toggle,
.modal-close,
.faq-question,
.category-filter a {
  min-height: var(--min-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle {
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  padding: 10px;
}

/* ==========================================================================
   2. Fixed Elements & Safe Area Positioning
   ========================================================================== */

/* Header with Top Safe Area */
.site-header {
  padding-top: var(--sat);
}

/* Mobile Fullscreen Navigation */
.mobile-menu {
  top: calc(74px + var(--sat));
  padding-left: max(22px, var(--sal));
  padding-right: max(22px, var(--sar));
  padding-bottom: max(32px, calc(var(--sab) + 20px));
  min-height: calc(100dvh - 74px - var(--sat));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu a {
  min-height: var(--min-touch-target);
  display: flex;
  align-items: center;
}

/* Floating WhatsApp Button */
.whatsapp-float {
  right: max(16px, calc(var(--sar) + 16px));
  bottom: max(18px, calc(var(--sab) + 18px));
  min-height: 52px;
}

/* Back to Top Floating Button */
.back-top {
  right: max(16px, calc(var(--sar) + 16px));
  bottom: max(82px, calc(var(--sab) + 82px));
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
}

/* Cookie Banner Card */
.cookie-card {
  left: max(14px, var(--sal));
  right: max(14px, var(--sar));
  bottom: max(14px, var(--sab));
}

/* Toast Notifications */
.toast-stack {
  right: max(16px, calc(var(--sar) + 16px));
  top: max(88px, calc(var(--sat) + 88px));
}

/* Project Dialog Modal */
.project-modal {
  max-height: calc(var(--viewport-height) - 40px - var(--sat) - var(--sab));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   3. Touch-Friendly Hover Isolation
   ========================================================================== */

/* Remove sticky hover states on touch screens */
@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .nav-cta:hover {
    transform: translateY(-2px);
  }

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

  .whatsapp-float:hover {
    transform: translateY(-3px);
  }
}

@media (hover: none) or (pointer: coarse) {
  .btn:active,
  .nav-cta:active,
  .filter-btn:active {
    transform: scale(0.97);
    transition: transform 120ms ease;
  }

  .interactive-card:active {
    transform: scale(0.99);
  }

  /* Custom cursor disabled on touch devices */
  .cursor-dot {
    display: none !important;
  }
}

/* ==========================================================================
   4. Mobile-First Layout Adjustments & Container Guard
   ========================================================================== */

/* Container responsiveness */
.section {
  padding-left: max(16px, var(--sal));
  padding-right: max(16px, var(--sar));
}

/* Responsive media containers */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent overflow bugs on smaller screens */
pre,
code {
  max-width: 100%;
  overflow-x: auto;
}

/* Landscape Phone Support */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-shell {
    height: 56px;
  }

  .mobile-menu {
    top: calc(56px + var(--sat));
    padding-top: 14px;
    padding-bottom: 24px;
  }

  .mobile-menu a {
    font-size: 1.4rem;
    padding: 10px 4px;
  }

  .whatsapp-float {
    min-height: 44px;
    height: 44px;
    bottom: max(10px, var(--sab));
  }

  .back-top {
    bottom: max(60px, calc(var(--sab) + 60px));
  }
}