/**
 * Novara — Flagship Mobile UX (v6.7.0)
 *
 * Target: premium native-app feel on iOS/Android.
 *
 * Covers: touch interactions, gestures, scroll smoothness, fluid typography,
 * fluid spacing, tap targets (WCAG 2.5.5 AAA), sticky elements, readability,
 * ad placement, and motion preferences.
 *
 * Mobile breakpoint: <= 768px (with refinements at 480px and 360px).
 *
 * @package Novara
 * @since 6.7.0
 */

/* ===================================================================
   1. GLOBAL TOUCH OPTIMIZATIONS — applied to ALL viewports
   =================================================================== */

* {
    /* Remove iOS Safari's 300ms tap delay on every element. */
    touch-action: manipulation;
    /* Disable iOS gray tap-highlight box (we provide our own via :active). */
    -webkit-tap-highlight-color: transparent;
}

html {
    /* iOS Safari momentum scrolling. */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll for all anchors (respected by SPA hash-links). */
    scroll-behavior: smooth;
    /* Anchor-link landing offset so sticky header doesn't overlap. */
    scroll-padding-top: 80px;
}

/* User prefers reduced motion → disable smooth scroll. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===================================================================
   2. FLUID TYPOGRAPHY — clamp()-based scale (Major Third 1.25)
   ===================================================================
   Smoothly interpolates between mobile (320px) and desktop (1200px).
   No more abrupt size jumps at breakpoints.
*/

:root {
    --novara-text-xs:   clamp(11px, 0.7vw + 9px, 13px);
    --novara-text-sm:   clamp(13px, 0.85vw + 11px, 15px);
    --novara-text-base: clamp(15px, 1vw + 12px, 17px);
    --novara-text-lg:   clamp(17px, 1.3vw + 13px, 20px);
    --novara-text-xl:   clamp(20px, 1.8vw + 14px, 26px);
    --novara-text-2xl:  clamp(24px, 2.4vw + 16px, 34px);
    --novara-text-3xl:  clamp(28px, 3.5vw + 18px, 48px);
    --novara-text-4xl:  clamp(34px, 5vw + 20px, 64px);

    /* Fluid spacing tokens (mobile-friendly). */
    --novara-space-xs:  clamp(4px,  0.5vw, 8px);
    --novara-space-sm:  clamp(8px,  1vw,   12px);
    --novara-space-md:  clamp(12px, 1.5vw, 20px);
    --novara-space-lg:  clamp(16px, 2vw,   28px);
    --novara-space-xl:  clamp(24px, 3vw,   40px);
    --novara-space-2xl: clamp(32px, 4vw,   56px);

    /* Tap target minimum (WCAG 2.5.5 Level AAA). */
    --novara-tap-target: 44px;
}

/* ===================================================================
   3. TAP TARGETS — WCAG 2.5.5 AAA on mobile
   =================================================================== */

@media (max-width: 768px) {
    a, button, .novara-icon-btn, .novara-suggestion-tag, .novara-reactions__btn,
    input[type="submit"], input[type="button"], .button, .wp-block-button__link {
        min-height: var(--novara-tap-target);
        min-width: var(--novara-tap-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Exception: inline text links inside paragraphs should not be enlarged. */
    p a, li a, .novara-card__excerpt a, .novara-search-result a {
        min-height: auto;
        min-width: auto;
        display: inline;
    }
}

/* ===================================================================
   4. MOBILE TYPOGRAPHY — readability optimizations
   =================================================================== */

@media (max-width: 768px) {
    body {
        font-size: var(--novara-text-base);
        line-height: 1.65;            /* improved mobile readability */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    h1 { font-size: var(--novara-text-3xl); line-height: 1.2;  }
    h2 { font-size: var(--novara-text-2xl); line-height: 1.25; }
    h3 { font-size: var(--novara-text-xl);  line-height: 1.3;  }
    h4 { font-size: var(--novara-text-lg);  line-height: 1.35; }

    /* Limit measure (line length) for prose readability. */
    .novara-post-content p,
    .novara-post-content li,
    .entry-content p,
    .entry-content li {
        max-width: 65ch;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===================================================================
   5. STICKY HEADER — hide-on-scroll-down, show-on-scroll-up
   =================================================================== */

.novara-header {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
    will-change: transform;
}
.novara-header[data-scroll-direction="down"] {
    transform: translateY(-100%);
}
.novara-header[data-scroll-direction="up"] {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Disable hide-on-scroll if user opted out via Customizer/JS. */
.novara-header[data-sticky-hide="false"] {
    transform: none !important;
}

/* ===================================================================
   6. MOBILE MENU — swipe-friendly, native-app feel
   =================================================================== */

@media (max-width: 768px) {
    .novara-mobile-menu {
        /* Smoother slide-in curve. */
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        /* iOS momentum scroll inside drawer. */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Larger tap targets in menu. */
        font-size: var(--novara-text-lg);
    }
    .novara-mobile-menu .novara-mobile-list a,
    .novara-mobile-menu li a {
        min-height: var(--novara-tap-target);
        padding: 14px 8px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
    }
    /* Active state during touch — instant feedback, no 300ms delay. */
    .novara-mobile-menu a:active,
    .novara-icon-btn:active,
    .novara-mobile-list a:active {
        background: rgba(230, 57, 70, 0.08);
        transition: background 0.05s linear;
    }
    /* Drawer dragging gesture indicator (handle). */
    .novara-mobile-menu::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        pointer-events: none;
    }
}

/* ===================================================================
   7. MOBILE SPA TRANSITIONS — shorter distance, faster feel
   =================================================================== */

@media (max-width: 768px) {
    [data-novara-spa-transition="slide"] {
        animation-duration: 0.25s !important;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    /* Reduce blur transitions on mobile (perf). */
    [data-novara-spa-transition="blur"] {
        filter: none !important;
    }
}

/* On slow networks (set by spa-recovery.js), skip transition animations. */
[data-novara-slow-network="true"] * {
    animation: none !important;
    transition: none !important;
}

/* ===================================================================
   8. RESPONSIVE SPACING
   =================================================================== */

.novara-container {
    padding-left:  var(--novara-space-md);
    padding-right: var(--novara-space-md);
}
.novara-section { margin-bottom: var(--novara-space-xl); }
.novara-card { padding: var(--novara-space-md); }

@media (max-width: 480px) {
    .novara-container {
        padding-left:  var(--novara-space-sm);
        padding-right: var(--novara-space-sm);
    }
}

/* ===================================================================
   9. MOBILE AD POSITIONING — sticky bottom + closable
   =================================================================== */

.novara-mobile-ad-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding: 8px 12px;
    z-index: 100;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    /* iOS notch safe-area. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.novara-mobile-ad-sticky[hidden] {
    transform: translateY(110%);
}
.novara-mobile-ad-sticky__close {
    position: absolute;
    top: -14px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 769px) {
    .novara-mobile-ad-sticky { display: none; }
}

/* Bottom-nav (mobile-only fixed bottom navigation) — safe-area aware. */
.novara-bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* ===================================================================
   10. SCROLL-TO-TOP BUTTON (mobile-friendly)
   =================================================================== */

.novara-scroll-top {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: var(--novara-tap-target);
    height: var(--novara-tap-target);
    background: var(--novara-crimson, #E63946);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 90;
    cursor: pointer;
    font-size: 20px;
}
.novara-scroll-top--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.novara-scroll-top:active { transform: scale(0.95); }
@media (min-width: 769px) {
    .novara-scroll-top { bottom: 24px; right: 24px; }
}

/* ===================================================================
   11. PULL-TO-REFRESH HINT (CSS only — JS triggers data attribute)
   =================================================================== */

.novara-pull-refresh-indicator {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    background: var(--novara-crimson, #E63946);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.novara-pull-refresh-indicator--visible {
    transform: translateX(-50%) translateY(0);
}

/* ===================================================================
   12. PERFORMANCE HINTS (mobile-specific)
   =================================================================== */

@media (max-width: 768px) {
    /* Use content-visibility for offscreen sections (massive paint savings). */
    .novara-section,
    .novara-card,
    .novara-grid > *:not(:first-child):not(:nth-child(2)) {
        content-visibility: auto;
        contain-intrinsic-size: 1px 400px;
    }
    /* Reduce decorative shadow blur on mobile (cheap repaints). */
    .novara-card { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); }
    .novara-header { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); }
}

/* ===================================================================
   13. TOUCH-FRIENDLY FORM CONTROLS
   =================================================================== */

@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="search"],
    input[type="url"], input[type="tel"], textarea, select {
        min-height: var(--novara-tap-target);
        font-size: 16px;            /* iOS prevents zoom-on-focus at 16px+ */
        padding: 12px 14px;
        border-radius: 8px;
    }
}

/* ===================================================================
   14. SAFE AREA INSETS (iOS notch/Dynamic Island)
   =================================================================== */

@supports (padding: max(0px)) {
    .novara-header,
    .novara-topbar {
        padding-left:  max(var(--novara-space-md), env(safe-area-inset-left));
        padding-right: max(var(--novara-space-md), env(safe-area-inset-right));
    }
    .novara-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* ===================================================================
   15. DARK MODE COLOR ADJUSTMENTS for mobile
   =================================================================== */

@media (max-width: 768px) {
    [data-theme="dark"] .novara-mobile-menu { background: #1a1a22; }
    [data-theme="dark"] .novara-mobile-ad-sticky { background: #1a1a22; border-top-color: #2a2a36; }
    [data-theme="dark"] .novara-mobile-ad-sticky__close { background: #2a2a36; border-color: #3a3a46; color: #fff; }
}