/**
 * HUO Movement Studio - Mobile Optimizations
 * Loaded only on screens <= 768px via media attribute
 *
 * NOTE: Rules for selectors that also appear in front-page.php
 * inline <style> live THERE (in an @media block) to avoid
 * source-order specificity conflicts. This file handles
 * global styles, typography, buttons, footer, and accessibility.
 */

/* ============================================
   GLOBAL
   ============================================ */
body {
    -webkit-tap-highlight-color: transparent;
}

.container {
    padding: 0 20px;
}

:root {
    --section-pad: 60px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }

p {
    font-size: 0.95rem;
    line-height: 1.7;
}

.label {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    padding: 16px 32px;
    font-size: 0.75rem;
    width: 100%;
    max-width: 320px;
    justify-content: center;
}

/* ============================================
   SECTION HEADER COMPONENT
   ============================================ */
.section-header {
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 1.8rem;
}

.section-header__sub {
    font-size: 0.9rem;
}

/* ============================================
   AMBIENT LIGHTS - Lighter for performance
   ============================================ */
.ambient-orb {
    filter: blur(50px);
}

.ambient-orb--5,
.ambient-orb--7 {
    display: none;
}

.grain-overlay {
    opacity: 0.2;
}

.grain-overlay::before {
    animation: none;
}

/* ============================================
   FOOTER
   ============================================ */
.footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
}

.footer-links-group {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding-top: 16px;
}

/* ============================================
   PAGE CONTENT (inner pages)
   ============================================ */
.huo-page-content {
    padding: 40px 0;
}

/* ============================================
   ACCESSIBILITY: prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ambient-orb { display: none; }
    .grain-overlay::before { animation: none; }
    .fire-particles { display: none; }

    [data-motion] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    [data-stagger-item] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ============================================
   SAFE AREA (notch devices)
   ============================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .site-footer {
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }
}