/**
 * NextHit Mobile & Professional Layout Fix
 * Fixes: Header/Footer, Touch Targets, Font Sizes, Horizontal Scroll
 * Date: 04.11.2025, 22:10 UTC
 */

/* ==================== CRITICAL: HORIZONTAL SCROLL FIX ==================== */

/* Prevent horizontal overflow on ALL elements */
* {
    max-width: 100%;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    margin: 0;
    padding: 0;
}

/* Fix wide tables on legal pages */
table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    display: block;
}

/* Fix long URLs and text that doesn't wrap */
.legal-content, .agb-section, .datenschutz-section {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==================== MOBILE TOUCH TARGETS (WCAG AA) ==================== */

@media (max-width: 768px) {
    /* All buttons MUST be at least 44x44px */
    button,
    .btn,
    .neon-button,
    .neon-button-large,
    .share-button,
    .license-button,
    .play-button,
    .like-button,
    .download-button,
    input[type="submit"],
    input[type="button"],
    .tab-button,
    .action-button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Share buttons in header */
    .share-button {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }

    /* Player controls */
    .player-controls button {
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /* Ranking like/play buttons */
    .track-actions button {
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 5px !important;
    }

    /* Cookie banner buttons */
    .cookie-accept,
    .cookie-decline {
        min-width: 120px !important;
        min-height: 44px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
    }

    /* Navigation links */
    nav a,
    .nav-link {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        line-height: 20px !important;
        display: inline-flex;
        align-items: center;
    }

    /* Form inputs */
    input,
    textarea,
    select {
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}

/* ==================== MOBILE FONT SIZES (READABILITY) ==================== */

@media (max-width: 768px) {
    /* Base text - minimum 14px */
    body, p, span, li, td {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Small text (copyright, disclaimers) - minimum 12px */
    small, .small-text, .copyright, .disclaimer {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Links */
    a {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Headings - scaled down but readable */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }
    h6 { font-size: 0.9rem !important; }

    /* Stats and numbers */
    .stats, .metric, .count {
        font-size: 14px !important;
    }

    /* Provision badges */
    .provision-badge {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Form labels */
    label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: block;
    }
}

/* ==================== HEADER/FOOTER CONSISTENCY ==================== */

/* Make sure header is visible on ALL pages */
header,
.nexthit-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1000;
}

/* Make sure footer is visible on ALL pages */
footer,
.nexthit-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 100;
    margin-top: 60px;
}

/* Legal pages need special footer styling */
.legal-content + footer,
.agb-container + footer,
.datenschutz-container + footer {
    margin-top: 60px !important;
}

/* ==================== COOKIE BANNER CONSISTENCY ==================== */

/* Cookie banner on ALL pages */
#cookieBanner,
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.95);
    border-top: 3px solid #E63946;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(230, 57, 70, 0.3);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .cookie-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.cookie-accept,
.cookie-decline {
    padding: 12px 24px;
    border: 2px solid #E63946;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 120px;
    min-height: 44px;
}

.cookie-accept {
    background: #E63946;
    color: #FFFFFF;
}

.cookie-accept:hover {
    background: #D62C3A;
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.5);
}

.cookie-decline {
    background: transparent;
    color: #FFFFFF;
}

.cookie-decline:hover {
    background: rgba(230, 57, 70, 0.1);
}

/* ==================== RESPONSIVE PADDING & MARGINS ==================== */

@media (max-width: 768px) {
    /* Reduce padding on mobile to maximize content area */
    .container {
        padding: 0 15px !important;
    }

    section {
        padding: 40px 15px !important;
    }

    /* Cards and boxes */
    .glass-card,
    .track-item,
    .agb-section,
    .legal-box {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
    }

    /* Hero section */
    .hero {
        padding: 60px 15px 40px !important;
    }

    /* Ranking section */
    .ranking {
        padding: 40px 15px !important;
    }

    /* Footer */
    .nexthit-footer {
        padding: 40px 15px 20px !important;
    }

    .footer-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .footer-links {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==================== ADMIN PAGE FOOTER FIX ==================== */

/* Admin page needs footer */
body.admin-page footer,
body.admin-page .nexthit-footer {
    display: block !important;
    visibility: visible !important;
}

/* ==================== LEGAL PAGES HEADER/FOOTER FIX ==================== */

/* Legal pages (AGB, Datenschutz, Impressum) need full header/footer */
body.legal-page header,
body.legal-page footer {
    display: block !important;
    visibility: visible !important;
}

/* If header is in <body> instead of before content */
.legal-content {
    margin-top: 100px; /* Account for fixed header */
}

/* ==================== PROFESSIONAL STYLING ENHANCEMENTS ==================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better focus states for accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #E63946;
    outline-offset: 2px;
}

/* Improved hover states */
@media (hover: hover) {
    button:hover,
    .btn:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease;
    }
}

/* Loading states */
button:disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */

/* Hardware acceleration for animations */
.neon-button,
.share-button,
.glass-card {
    will-change: transform;
    transform: translateZ(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== DARK MODE OPTIMIZATIONS ==================== */

/* Better contrast for dark backgrounds */
.nexthit-header,
.nexthit-footer {
    background: #000000;
    color: #FFFFFF;
}

/* Ensure text is always readable */
body {
    background: #000000;
    color: #FFFFFF;
}

/* ==================== Z-INDEX HIERARCHY ==================== */

/* Proper layering */
#cookieBanner { z-index: 2000; }
.modal, .overlay { z-index: 1500; }
header, .nexthit-header { z-index: 1000; }
.dropdown, .menu { z-index: 900; }
footer, .nexthit-footer { z-index: 100; }
.content, main { z-index: 1; }