/**
 * CrokScan Global Responsive Stylesheet
 * Loaded BEFORE inline <style> on every page so page-specific styles win by cascade.
 *
 * Owns: scroll/overflow fixes, iOS quirks, safe-area, font smoothing,
 *       touch-action, responsive spacing variables, input font-size baseline.
 * Does NOT own: page-specific layouts, heading sizes, card padding, button colors.
 *
 * Breakpoints: 480px (iPhone SE), 640px (phone), 768px (tablet), 1024px+ (desktop)
 */

/* ===== CSS VARIABLES ===== */
:root {
    /* Spacing tokens */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Page horizontal padding — pages can reference var(--page-px) */
    --page-px: 2rem;
    --page-max-width: 960px;

    /* Touch targets */
    --touch-min: 44px;

    /* Theme colors (low-priority defaults — pages redefine these) */
    --brown: #5a4a42;
    --sage: #9aa67c;
    --sage-light: #e8eddf;
    --sage-dark: #7a8a60;
    --bg: #f7f3f0;
    --text: #5a4a42;
    --text-muted: #8a7a72;
    --surface: #FFFFFF;
    --border: #e6ddd7;

    /* Animation */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== SCROLL & OVERFLOW FIXES ===== */
html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Images/media must not exceed their container */
img, video, iframe, canvas {
    max-width: 100%;
    height: auto;
}

/* ===== iOS ZOOM PREVENTION ===== */
/* Font size < 16px on inputs triggers iOS auto-zoom */
input, select, textarea {
    font-size: max(16px, 1em);
}

/* ===== TOUCH INTERACTION ===== */
/* Eliminate 300ms tap delay and highlight flash on all interactive elements */
a, button, [role="button"], input[type="submit"],
input[type="button"], label[for], select, summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ===== RESPONSIVE SPACING VARIABLE ===== */
@media (max-width: 768px) {
    :root { --page-px: 1.5rem; }
}
@media (max-width: 640px) {
    :root { --page-px: 1.25rem; }
}
@media (max-width: 480px) {
    :root { --page-px: 1rem; }
}

/* ===== SAFE AREAS (iPhone notch / dynamic island) ===== */
@supports (padding: env(safe-area-inset-top)) {
    .bottom-bar, .fixed-bottom, .fab {
        padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
    }
}

/* ===== SMOOTH SCROLLING ===== */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ===== PRINT ===== */
@media print {
    nav, .hamburger-btn, .nav-overlay, .fab, .bottom-bar {
        display: none !important;
    }
}