/* =========================================
   1. UNIVERSAL RESET & MOBILE FIX (CRITICAL)
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden; /* Stops the mobile side-scroll/sliding issue */
}

img, iframe, video, object, embed {
    max-width: 100% !important; /* Prevents images from breaking mobile layout */
}

/* Break long links/words so they don't push the screen out */
p, a, h1, h2, h3, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* =========================================
   2. VARIABLES (THEME COLORS)
   ========================================= */
:root {
    --primary: #0F766E;       /* Brand Teal */
    --primary-dark: #0D5F58;
    --accent: #F59E0B;        /* Brand Gold */
    --accent-hover: #d97706;
    --bg: #F8FAFC;            /* Light Grey Background */
    --white: #FFFFFF;
    --text-main: #1E293B;     /* Dark Blue-Grey Text */
    --text-light: #64748B;    /* Lighter Text */
    --border: #e2e8f0;
}

/* =========================================
   3. BASE STYLES
   ========================================= */
body { 
    font-family: 'Poppins', sans-serif; 
    background: var(--bg); 
    color: var(--text-main);
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { padding-left: 20px; }

/* =========================================
   4. HEADER
   ========================================= */
.site-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 15px 20px;
    text-align: center;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: sticky; /* Keeps header visible slightly */
    top: 0;
    z-index: 100;
}
.site-header a:hover { opacity: 0.9; }

/* =========================================
   5. MAIN LAYOUT (FLEXBOX)
   ========================================= */
.container { 
    display: flex;
    flex-wrap: wrap; /* Allows Sidebar to drop down on mobile */
    gap: 25px;
    max-width: 1100px; 
    margin: 30px auto; 
    padding: 0 15px; /* Safety padding */
}

/* Content Area (Left) */
.main-content { 
    flex: 3; /* Takes 75% width on Desktop */
    min-width: 300px; /* If screen gets small, it takes full width */
    background: var(--white); 
    padding: 30px; 
    border-radius: 16px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
}

/* Sidebar Area (Right) */
.sidebar { 
    flex: 1; /* Takes 25% width on Desktop */
    min-width: 280px; /* Drops below content on Mobile */
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* =========================================
   6. CARDS & TYPOGRAPHY
   ========================================= */
h1 { color: var(--primary); margin-top: 0; font-size: 1.8rem; line-height: 1.2; }
h2 { color: var(--text-main); font-size: 1.4rem; margin-top: 30px; border-bottom: 2px solid #f1f5f9; padding-bottom: 10px; }
h3 { color: var(--primary); margin-top: 20px; font-size: 1.1rem; }

.sidebar-card, .belowbar-card { 
    background: var(--white); 
    padding: 20px; 
    border-radius: 16px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    border: 1px solid var(--border);
}

/* Exam Details Box */
.exam-details { 
    background: #F0FDFA; /* Light Teal */
    padding: 20px; 
    border-radius: 12px; 
    margin: 25px 0; 
    border-left: 5px solid var(--primary);
}
.exam-details li { margin-bottom: 8px; font-size: 0.95rem; }

/* =========================================
   7. BUTTONS & DOWNLOADS
   ========================================= */
.download-box {
    background: #FFFBEB; /* Light Gold */
    border: 1px dashed var(--accent);
    padding: 25px;
    text-align: center;
    border-radius: 12px;
    margin: 30px 0;
}

.btn-download { 
    background: var(--accent); 
    color: var(--white) !important; 
    padding: 12px 30px; 
    border-radius: 50px; 
    display: inline-block; 
    font-weight: bold; 
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    transition: transform 0.2s, background 0.2s;
    border: none;
    cursor: pointer;
    text-align: center;
}
.btn-download:hover { transform: translateY(-2px); background: var(--accent-hover); }

/* Finger-Friendly Buttons for Mobile */
button, .btn-download, .sub-btn {
    min-height: 44px;
    touch-action: manipulation;
}

/* =========================================
   8. TABLES & LISTS
   ========================================= */
.science-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9rem;
}
.science-table th { background: var(--primary); color: white; padding: 12px; text-align: left; }
.science-table td { border: 1px solid var(--border); padding: 12px; }
.science-table tr:nth-child(even) { background: #f8fafc; }

.related-links a { 
    display: block; 
    padding: 10px 0; 
    color: var(--text-light); 
    border-bottom: 1px solid #f1f5f9; 
    font-size: 0.9rem;
}
.related-links a:hover { color: var(--accent); padding-left: 5px; }

/* =========================================
   9. FOOTER
   ========================================= */
footer { 
    text-align: center; 
    padding: 40px 20px; 
    margin-top: 50px;
    border-top: 1px solid var(--border);
    color: var(--text-light);
    font-size: 0.9rem;
    background: var(--white);
}
footer a { color: var(--primary); margin: 0 8px; font-weight: 600; }

/* =========================================
   10. MOBILE OPTIMIZATION ( < 768px )
   ========================================= */
@media (max-width: 768px) {
    /* Stack Sidebar below Main Content */
    .container {
        flex-direction: column;
        gap: 20px;
    }

    .main-content, .sidebar {
        width: 100%;
        min-width: 0; /* Prevents overflow issues */
    }

    /* Reduce Padding for small screens */
    .main-content { padding: 20px; }
    
    /* Smaller Text */
    h1 { font-size: 1.5rem; }
    
    /* Hide timer text initially to save space */
    #timer-msg { font-size: 0.85rem; }
    
    /* Adjust PDF Preview height */
    .pdf-preview iframe { height: 350px; }
}