/**
 * mobile-hero.css — EOnlineStyle
 * Mobile responsiveness fixes + hero effects + ticker animation
 * Author: frontend-dev-6 (Sprint 8, ISS-T16/T17)
 * Date: 2026-03-02
 *
 * Additive only — @media queries, hero animations, ticker.
 * Does NOT override base styles outside of breakpoints.
 */

/* ===========================
   GLOBAL MOBILE FIXES
   =========================== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    img, video, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }

    body {
        font-size: 16px;
    }

    input, select, textarea {
        font-size: 16px;
    }
}

/* ===========================
   HAMBURGER MENU TOGGLE
   EOnlineStyle stacks nav vertically at 768px
   but has no toggle button — this adds one
   =========================== */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        background: var(--color-primary, #FF1493);
        color: #fff;
        border: none;
        padding: 10px 14px;
        font-size: 18px;
        cursor: pointer;
        min-width: 44px;
        min-height: 44px;
        border-radius: 4px;
        position: relative;
        z-index: 100;
    }

    .menu-toggle:focus {
        outline: 2px solid var(--color-primary, #FF1493);
        outline-offset: 2px;
    }

    .main-navigation ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-nav-bg, #1a1a1a);
        z-index: 99;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .main-navigation.active ul,
    .main-navigation.toggled ul {
        display: flex;
    }

    .main-navigation a {
        padding: 12px 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* ===========================
   375px — iPhone SE
   =========================== */
@media (max-width: 375px) {
    /* Header */
    .site-title {
        font-size: 28px;
        letter-spacing: 0;
    }

    .site-description {
        font-size: 10px;
    }

    /* Hero */
    .hero-section {
        margin-bottom: 0.75rem;
    }

    .hero-featured {
        height: 300px;
    }

    .hero-title {
        font-size: 22px;
        line-height: 1.2;
    }

    .hero-excerpt {
        display: none;
    }

    .hero-category {
        font-size: 9px;
        padding: 4px 10px;
    }

    .hero-meta {
        font-size: 11px;
    }

    .hero-overlay {
        padding: 0.75rem;
    }

    /* Featured Grid */
    .featured-grid {
        gap: 0.75rem;
    }

    .featured-card-title {
        font-size: 14px;
    }

    .featured-card-overlay {
        padding: 0.75rem;
    }

    /* Content */
    .site-content {
        padding: 0.75rem;
    }

    .entry-title,
    .article-title {
        font-size: 24px;
        line-height: 1.2;
    }

    /* Magazine Cards */
    .magazine-card-title {
        font-size: 16px;
    }

    .magazine-card-excerpt {
        font-size: 13px;
    }

    .magazine-card-image {
        height: 180px;
    }

    /* Footer */
    .footer-nav a,
    .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 6px;
    }

    /* Ticker: faster on small screens for readability */
    .header-top-message {
        animation-duration: 12s;
    }
}

/* ===========================
   HERO OVERLAY ENHANCEMENT
   =========================== */

/* Enhanced gradient for better text contrast over images */
.hero-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.45) 55%,
        transparent 100%
    );
}

/* Subtle parallax-like effect on hero image */
.hero-featured img {
    transition: transform 0.4s ease;
}

.hero-section:hover .hero-featured img {
    transform: scale(1.03);
}

/* Featured card image hover */
.featured-card-image img {
    transition: transform 0.5s ease;
}

.featured-card:hover .featured-card-image img {
    transform: scale(1.08);
}

/* ===========================
   TICKER BAR MOBILE FIXES
   =========================== */
@media (max-width: 768px) {
    .header-top {
        padding: 4px 0;
        font-size: 12px;
    }

    .header-top-message {
        font-size: 12px;
    }
}

/* ===========================
   ACCESSIBILITY
   =========================== */
@media (prefers-reduced-motion: reduce) {
    .header-top-message {
        animation: none;
        padding-left: 0;
        white-space: normal;
    }

    .hero-featured img,
    .featured-card-image img {
        transition: none;
    }

    .hero-section:hover .hero-featured img,
    .featured-card:hover .featured-card-image img {
        transform: none;
    }
}