/* ═════════════════════════════════════════════════════════════════════
   Yotta — Universal Responsive Layer
   Applies cross-page mobile enhancements. Loaded on every page.
   Rules here are designed to be safe with PeachWorlds templates:
   - Never remove DOM elements (hidden via CSS only where necessary)
   - Use !important where PW selectors use ID specificity
   - Preserve 3D canvas behavior
   ═════════════════════════════════════════════════════════════════════ */

/* ── Dynamic viewport variable (fallback-safe) ── */
:root {
  --y-vh: 1vh;
  --y-safe-top:    env(safe-area-inset-top, 0px);
  --y-safe-right:  env(safe-area-inset-right, 0px);
  --y-safe-bottom: env(safe-area-inset-bottom, 0px);
  --y-safe-left:   env(safe-area-inset-left, 0px);
}

/* ── Global foundations ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Note: overflow-x / max-width are intentionally NOT forced globally —
   PeachWorlds pages manage their own overflow and scroll containers.
   Per-page index.html files already set overflow-x: hidden where needed. */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive media defaults */
img, video, canvas, svg, iframe {
  max-width: 100%;
}

/* PW 3D canvas must keep fixed sizing — use 100% not 100vw to avoid
   horizontal scrollbar width overflow on some devices */
.pwb-scene > canvas,
.pwb-background > canvas {
  width: 100% !important;
  max-width: 100vw !important;
}

/* ═══ Touch-friendly tap targets (WCAG 2.5.5) ═══ */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], .option-card, .portfolio-item, .btn,
  .yotta-nav-links a, .yotta-nav-dropdown a, .yotta-footer-col a,
  .yotta-footer-social a, .yotta-nav-mobile-overlay a {
    touch-action: manipulation;
  }
  /* Ensure interactive elements meet 44px min on touch devices */
  .yotta-nav-cta a, .yotta-nav-mobile-cta, .yotta-footer-cta, .btn {
    min-height: 44px;
  }
}

/* ═══ iOS safe-area insets for fixed chrome ═══ */
@supports (padding: max(0px)) {
  .yotta-nav {
    padding-top: max(20px, calc(var(--y-safe-top) + 10px)) !important;
    padding-left: max(40px, calc(var(--y-safe-left) + 16px)) !important;
    padding-right: max(40px, calc(var(--y-safe-right) + 16px)) !important;
  }
  .yotta-nav-mobile-overlay {
    padding-top: var(--y-safe-top);
    padding-bottom: var(--y-safe-bottom);
    padding-left: var(--y-safe-left);
    padding-right: var(--y-safe-right);
  }
  .yotta-nav-mobile-overlay .close-btn {
    top: max(24px, calc(var(--y-safe-top) + 12px)) !important;
    right: max(40px, calc(var(--y-safe-right) + 16px)) !important;
  }
  .yotta-footer {
    padding-bottom: max(32px, calc(var(--y-safe-bottom) + 20px)) !important;
    padding-left: max(5vw, calc(var(--y-safe-left) + 16px)) !important;
    padding-right: max(5vw, calc(var(--y-safe-right) + 16px)) !important;
  }
}

/* ═══ Nav refinements for small screens ═══ */
@media (max-width: 768px) {
  .yotta-nav {
    background: linear-gradient(to bottom, rgba(6,4,10,0.92) 0%, rgba(6,4,10,0.6) 70%, transparent 100%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .yotta-nav-mobile-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Lock body scroll when mobile menu is open */
  body:has(.yotta-nav-mobile-overlay.open) {
    overflow: hidden;
  }
}

/* ═══ Contact page polish ═══ */
@media (max-width: 600px) {
  .contact-wrap {
    min-height: 100dvh;
    padding-top: max(80px, calc(var(--y-safe-top) + 60px)) !important;
    padding-bottom: max(24px, calc(var(--y-safe-bottom) + 16px)) !important;
  }
  .step-title br { display: none; }
  .input-field, .textarea-field, .field-input {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
}

/* ═══ Portfolio: density refinements ═══ */
@media (max-width: 600px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 420px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .portfolio-item { aspect-ratio: 4 / 3 !important; }
}

/* PW per-page ID-targeted rules live in each page's own index.html.
   Intentionally no generic [id^="..."] selectors here — they collide
   across pages since PW reuses IDs like #ispyh-2-x, #izvvl-x across
   different templates with very different meanings. */

/* ═══ Small landscape phones ═══ */
@media (max-height: 480px) and (orientation: landscape) {
  .yotta-nav { padding-top: 8px !important; padding-bottom: 8px !important; }
  .yotta-nav-logo img { height: 20px !important; }
  .yotta-nav-mobile-overlay { gap: 16px !important; }
  .yotta-nav-mobile-overlay a { font-size: 16px !important; }
  .yotta-footer-top { margin-bottom: 24px !important; }
  .contact-wrap { padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* ═══ Reduced-motion users ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ Very small devices (≤360px) ═══ */
@media (max-width: 360px) {
  .yotta-footer-brand img,
  .yotta-nav-logo img { height: 20px !important; }
  .yotta-nav-mobile-cta { font-size: 13px !important; padding: 10px 20px !important; }
  .yotta-footer-tagline { font-size: 15px !important; }
}

/* ═══ iOS Safari 100vh fix — prefer dynamic viewport ═══ */
@supports (height: 100dvh) {
  .contact-wrap { min-height: 100dvh !important; }
}
@supports not (height: 100dvh) {
  .contact-wrap { min-height: 100vh; min-height: calc(var(--y-vh, 1vh) * 100); }
}

/* ═══ Focus visibility on keyboard navigation ═══ */
:focus-visible {
  outline: 2px solid var(--y-cyan, #67E8F9);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══ Avoid tiny font rendering bugs ═══ */
@media (max-width: 768px) {
  body { font-size: 16px; }
}