/* ================================================
   CRITICAL FIXES FOR MAC/iOS AND FONT SIZES
   Add this to the <style> section of your HTML files
   OR include as a separate stylesheet
   ================================================ */

/* ==================================================
   FIX 1: BACKGROUND FIX FOR MAC/iOS DEVICES
   This prevents white background on Safari/WebKit
   ================================================== */

html {
    background-color: #0a0a0a !important;
    background: #0a0a0a !important;
}

body {
    /* Solid fallback color */
    background-color: #0a0a0a !important;
    
    /* Gradient background */
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
    
    /* Critical for iOS - prevents background scrolling issues */
    background-attachment: fixed !important;
    
    /* Ensure full coverage */
    min-height: 100vh !important;
    
    /* Prevent any white space */
    margin: 0 !important;
    padding: 0 !important;
}

/* Additional iOS fix */
@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll !important;
        background-size: 100% 100% !important;
    }
}

/* ==================================================
   FIX 2: INCREASED FONT SIZES
   Making text more readable across all devices
   ================================================== */

/* Subject Card Description Text - MAIN FIX */
.subject-card p {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    color: #e0e0e0 !important;
    opacity: 0.95 !important;
}

/* Ensure subject card titles are also readable */
.subject-card h3 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
}

/* Resource Item Descriptions */
.resource-item p,
.resource-item .text-gray-300 {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
}

/* Year Card Text */
.year-card p {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
}

/* File Size Text */
.file-size {
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

/* Page Subtitle */
.page-subtitle {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
}

/* Menu Sub Text */
.menu-sub-text {
    font-size: 1rem !important;
}

/* ==================================================
   FIX 3: RESPONSIVE FONT ADJUSTMENTS
   Ensure readability on smaller screens
   ================================================== */

@media (max-width: 768px) {
    .subject-card p {
        font-size: 1.05rem !important;
    }
    
    .subject-card h3 {
        font-size: 1.4rem !important;
    }
    
    .page-subtitle {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 480px) {
    .subject-card p {
        font-size: 1rem !important;
    }
    
    .subject-card h3 {
        font-size: 1.3rem !important;
    }
}

/* ==================================================
   FIX 4: ENSURE ANIMATED BACKGROUND WORKS
   ================================================== */

.animated-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    overflow: hidden !important;
    background: 
        radial-gradient(circle at 20% 30%, rgba(128, 0, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(192, 192, 192, 0.08) 0%, transparent 50%) !important;
}

/* ==================================================
   FIX 5: PREVENT WHITE FLASHES ON PAGE LOAD (iOS)
   ================================================== */

html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: -2;
}