/* ═══════════════════════════════════════════════════════════════════════
 ios-fixes.css — Safe-area & PWA Display-mode Fixes
 Peptelligence Storefront
 ═══════════════════════════════════════════════════════════════════════ */

/* ── Safe-area Insets (notch / Dynamic Island) ────────────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
 html {
 /* Prevent rubber-banding from showing white behind notch */
 background: var(--navy-deep, #061224);
 }

 body {
 /* Ensure content doesn't tuck under the notch or home indicator */
 padding-top: env(safe-area-inset-top);
 padding-left: env(safe-area-inset-left);
 padding-right: env(safe-area-inset-right);
 }

 /* Fixed elements need their own safe-area offsets */
 .topbar {
 top: calc(16px + env(safe-area-inset-top));
 }

 .mobile-overlay {
 padding-top: calc(24px + env(safe-area-inset-top));
 padding-bottom: calc(24px + env(safe-area-inset-bottom));
 padding-left: env(safe-area-inset-left);
 padding-right: env(safe-area-inset-right);
 }

 .toast {
 bottom: calc(24px + env(safe-area-inset-bottom));
 }

 .footer {
 padding-bottom: calc(48px + env(safe-area-inset-bottom));
 }

 /* Sticky elements in landscape */
 .disclaimer-strip {
 padding-left: calc(24px + env(safe-area-inset-left));
 padding-right: calc(24px + env(safe-area-inset-right));
 }
}

/* ── PWA Standalone Mode ──────────────────────────────────────────────── */
@media (display-mode: standalone) {
 /* Remove browser chrome spacing; safe-areas handle it */
 body {
 -webkit-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 }

 /* Allow text selection in content areas */
 main,
 .product-card-body,
 .faq-answer,
 .footer {
 -webkit-user-select: text;
 user-select: text;
 }

 /* Pull topbar tighter in standalone */
 .topbar {
 top: calc(8px + env(safe-area-inset-top, 0px));
 }

 /* Full-height hero accounting for no browser chrome */
 .hero {
 min-height: 100vh;
 min-height: 100dvh;
 }
}

/* iOS fullscreen (older apple-mobile-web-app-capable) */
@media (display-mode: fullscreen) {
 body {
 padding-top: env(safe-area-inset-top, 0px);
 }
 .topbar {
 top: calc(8px + env(safe-area-inset-top, 0px));
 }
}

/* ── iOS-specific Touch & Scroll Fixes ────────────────────────────────── */

/* Prevent iOS bounce scroll from showing white gaps */
html {
 overscroll-behavior-y: none;
}

/* Fix iOS input zoom (font-size < 16px triggers zoom) */
@supports (-webkit-touch-callout: none) {
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="search"],
 input[type="tel"],
 input[type="url"],
 input[type="number"],
 textarea,
 select {
 font-size: max(16px, 1em);
 }
}

/* Smooth momentum scrolling for overflow containers */
.scroll-container {
 -webkit-overflow-scrolling: touch;
 overflow-y: auto;
}

/* Prevent tap highlight flash on interactive elements */
a, button, .btn, .product-card, .faq-item summary, .topbar-toggle {
 -webkit-tap-highlight-color: transparent;
}

/* Fix sticky positioning in iOS Safari */
@supports (-webkit-touch-callout: none) {
 .topbar {
 /* Force GPU layer for smooth scroll tracking */
 will-change: transform;
 transform: translateX(-50%) translateZ(0);
 }
}

/* ── iOS Status Bar Theming ───────────────────────────────────────────── */
/* When apple-mobile-web-app-status-bar-style is "black-translucent",
 the hero section shows through the status bar. These rules ensure
 the topbar and hero content don't collide with the status bar text. */
@media (display-mode: standalone) {
 .hero-content {
 padding-top: calc(64px + env(safe-area-inset-top, 0px));
 }
}

/* ── Landscape orientation fixes ──────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
 .hero {
 min-height: auto;
 padding: calc(48px + env(safe-area-inset-top, 0px)) 24px 48px;
 }
 .hero h1 {
 font-size: clamp(1.5rem, 4vw, 2rem);
 }
 .hero .lede {
 display: none; /* Too tight in landscape phone view */
 }
}