/**
 * Fake Studies — Mobile-First Responsive Stylesheet
 * Optimized for smartphones, touch gestures, iOS Safari, Android Chrome, and notched displays.
 */

:root {
    --fs-safe-top: env(safe-area-inset-top, 0px);
    --fs-safe-right: env(safe-area-inset-right, 0px);
    --fs-safe-bottom: env(safe-area-inset-bottom, 0px);
    --fs-safe-left: env(safe-area-inset-left, 0px);
    --fs-touch-target: 44px;
}

/* ==========================================================================
   1. GLOBAL MOBILE DEFAULTS & VIEWPORT SANITATION
   ========================================================================== */

html, body {
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* Safe Area Insets for notched phones (iPhone X+, Android punch-hole) */
body {
    padding-left: var(--fs-safe-left);
    padding-right: var(--fs-safe-right);
}

/* Prevent image and media overflow on small mobile screens */
img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Strict text wrap to prevent viewport blowing out with long scientific titles in prose/articles */
h1, h2, h3, h4, h5, h6, p, blockquote, .break-words-content, article {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Navigation items, menu pills, buttons, badges and controls must keep natural flow */
header, nav, .navbar, .nav-item, button, .btn, .badge, [role="navigation"] {
    overflow-wrap: normal;
    word-break: normal;
}

/* ==========================================================================
   2. MOBILE FORM INPUTS — ANTI-ZOOM & TOUCH SIZING (iOS Safari Fix)
   ========================================================================== */

/* iOS Safari auto-zooms if font-size < 16px on focus */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

/* Touch-friendly buttons and controls */
@media (pointer: coarse) {
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: var(--fs-touch-target);
        touch-action: manipulation;
    }

    /* Tactile touch feedback */
    button:active,
    a.btn:active,
    [role="button"]:active {
        transform: scale(0.98);
        transition: transform 0.08s ease;
    }
}

/* ==========================================================================
   3. HORIZONTAL MOMENTUM SCROLL (Tabs, Pills, Tickers, Chips)
   ========================================================================== */

.mobile-scroll-x,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none; /* Firefox */
}

.mobile-scroll-x::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Smooth snap scrolling for cards or category pills */
.mobile-snap-x {
    scroll-snap-type: x mandatory;
}

.mobile-snap-x > * {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/* ==========================================================================
   4. RESPONSIVE MODALS & BOTTOM SHEETS (< 640px)
   ========================================================================== */

@media (max-width: 639px) {
    /* Modal container takes full width with safe margin */
    .mobile-modal-sheet {
        width: calc(100% - 1rem) !important;
        margin: 0.5rem auto !important;
        max-height: calc(100dvh - 2rem) !important;
        max-height: calc(100vh - 2rem) !important;
        border-radius: 1.25rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Modal body scrolls independently */
    .mobile-modal-scroll {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
    }

    /* Sticky headers inside modals */
    .mobile-modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
    }

    /* Sticky footers inside modals for guaranteed action reach */
    .mobile-modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        padding-bottom: max(0.75rem, var(--fs-safe-bottom)) !important;
    }
}

/* ==========================================================================
   5. MOBILE STICKY SHARE & ACTION DOCK
   ========================================================================== */

.mobile-bottom-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    padding-left: max(0.75rem, var(--fs-safe-left));
    padding-right: max(0.75rem, var(--fs-safe-right));
    padding-top: 0.5rem;
    padding-bottom: max(0.5rem, var(--fs-safe-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 -4px 16px -1px rgba(0, 0, 0, 0.08);
}

.mobile-bottom-dock-dark {
    background: rgba(15, 23, 42, 0.94);
    border-top: 1px solid rgba(51, 65, 85, 0.85);
    box-shadow: 0 -4px 16px -1px rgba(0, 0, 0, 0.35);
}

/* Provide bottom page clearance when mobile dock is active */
.has-mobile-dock {
    padding-bottom: calc(4.5rem + var(--fs-safe-bottom)) !important;
}

/* ==========================================================================
   6. RESPONSIVE NEWSPAPER TYPOGRAPHY SCALING
   ========================================================================== */

/* Tabloid Headlines on compact screens */
@media (max-width: 639px) {
    .font-tabloid {
        letter-spacing: -0.02em;
    }

    /* Prevent massive text from breaking awkwardly */
    .font-tabloid.text-3xl,
    .font-tabloid.text-4xl,
    .font-tabloid.text-5xl,
    .font-tabloid.text-6xl {
        font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
        line-height: 1.02 !important;
    }

    .font-broadsheet.text-3xl,
    .font-broadsheet.text-4xl,
    .font-broadsheet.text-5xl,
    .font-broadsheet.text-6xl {
        font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
        line-height: 1.15 !important;
    }

    .font-editorial.text-3xl,
    .font-editorial.text-4xl,
    .font-editorial.text-5xl,
    .font-editorial.text-6xl {
        font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important;
        line-height: 1.12 !important;
    }
}

/* ==========================================================================
   7. TOUCH TARGET ACCESSIBILITY UTILITIES
   ========================================================================== */

.touch-target {
    min-height: var(--fs-touch-target);
    min-width: var(--fs-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Extra touch padding without affecting layout */
.touch-hitbox {
    position: relative;
}

.touch-hitbox::after {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
}

/* ==========================================================================
   8. ACCESSIBILITY & USABILITY STANDARDS (WCAG 2.1 AA / Ley 11/2023)
   ========================================================================== */

/* Respect system-level reduced motion preferences for users with vestibular disorders */
@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;
    }
}

/* High-contrast, sharp visible focus ring for keyboard navigation */
:focus-visible {
    outline: 2px solid #0284c7 !important;
    outline-offset: 2px !important;
}

/* Screen reader only utility with robust fallback */
.sr-only:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}