/* Professional Typography System - EduGlobal LMS */
/* Simple & Effective Contrast Solution */

/* =================================
   EMERGENCY VISIBILITY FIX
   (Forces headings to be visible)
   ================================= */
   
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #000000 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.5) !important;
}

/* For dark backgrounds - if parent has these classes */
.bg-blue-600 h1, .bg-blue-600 h2, .bg-blue-600 h3, .bg-blue-600 h4, .bg-blue-600 h5, .bg-blue-600 h6,
.bg-blue-700 h1, .bg-blue-700 h2, .bg-blue-700 h3, .bg-blue-700 h4, .bg-blue-700 h5, .bg-blue-700 h6,
.bg-green-600 h1, .bg-green-600 h2, .bg-green-600 h3, .bg-green-600 h4, .bg-green-600 h5, .bg-green-600 h6,
.bg-green-700 h1, .bg-green-700 h2, .bg-green-700 h3, .bg-green-700 h4, .bg-green-700 h5, .bg-green-700 h6,
section.bg-gradient-to-r h1, section.bg-gradient-to-r h2, section.bg-gradient-to-r h3,
.bg-gradient-to-r h1, .bg-gradient-to-r h2, .bg-gradient-to-r h3,
header h1, header h2, header h3, header h4, header h5, header h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* =================================
   FONT IMPORTS & VARIABLES
   ================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Typography Scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --text-quaternary: #9ca3af;
    --text-inverse: #ffffff;
    --text-link: #2563eb;
    --text-link-hover: #1d4ed8;
    --text-success: #059669;
    --text-warning: #d97706;
    --text-error: #dc2626;
}

/* =================================
   BASE TYPOGRAPHY
   ================================= */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =================================
   HEADINGS - STRONG CONTRAST
   ================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: #111827; /* Very dark for maximum contrast */
    letter-spacing: var(--letter-spacing-tight);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    text-shadow: 0 0 1px rgba(0,0,0,0.1); /* Subtle shadow for better definition */
}

h1, .h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: 1.5rem;
    color: #0f172a; /* Even darker for h1 */
}

h2, .h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.25rem;
    color: #111827;
}

h3, .h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 1rem;
    color: #111827;
}

h4, .h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.75rem;
    color: #111827;
}

h5, .h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    color: #111827;
}

h6, .h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: #111827;
}

/* =================================
   SPECIFIC BACKGROUND OVERRIDES
   ================================= */

/* Dark backgrounds need white text */
.bg-blue-600 h1, .bg-blue-600 h2, .bg-blue-600 h3, .bg-blue-600 h4, .bg-blue-600 h5, .bg-blue-600 h6,
.bg-blue-700 h1, .bg-blue-700 h2, .bg-blue-700 h3, .bg-blue-700 h4, .bg-blue-700 h5, .bg-blue-700 h6,
.bg-blue-800 h1, .bg-blue-800 h2, .bg-blue-800 h3, .bg-blue-800 h4, .bg-blue-800 h5, .bg-blue-800 h6,
.bg-green-600 h1, .bg-green-600 h2, .bg-green-600 h3, .bg-green-600 h4, .bg-green-600 h5, .bg-green-600 h6,
.bg-green-700 h1, .bg-green-700 h2, .bg-green-700 h3, .bg-green-700 h4, .bg-green-700 h5, .bg-green-700 h6,
.bg-yellow-600 h1, .bg-yellow-600 h2, .bg-yellow-600 h3, .bg-yellow-600 h4, .bg-yellow-600 h5, .bg-yellow-600 h6,
.bg-yellow-700 h1, .bg-yellow-700 h2, .bg-yellow-700 h3, .bg-yellow-700 h4, .bg-yellow-700 h5, .bg-yellow-700 h6,
section.bg-gradient-to-r h1, section.bg-gradient-to-r h2, section.bg-gradient-to-r h3, section.bg-gradient-to-r h4, section.bg-gradient-to-r h5, section.bg-gradient-to-r h6,
.bg-gradient-to-r h1, .bg-gradient-to-r h2, .bg-gradient-to-r h3, .bg-gradient-to-r h4, .bg-gradient-to-r h5, .bg-gradient-to-r h6,
.bg-gradient-to-l h1, .bg-gradient-to-l h2, .bg-gradient-to-l h3, .bg-gradient-to-l h4, .bg-gradient-to-l h5, .bg-gradient-to-l h6 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Elements with text-white class */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Header and footer */
header h1, header h2, header h3, header h4, header h5, header h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* =================================
   UTILITY CLASSES
   ================================= */

.heading-light { 
    color: #ffffff; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.heading-dark { 
    color: #0f172a; 
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

/* =================================
   BODY TEXT & PARAGRAPHS
   ================================= */

p {
    margin: 0 0 1rem 0;
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

.text-lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.text-large {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
}

.text-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

/* =================================
   TEXT UTILITIES
   ================================= */

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-quaternary { color: var(--text-quaternary); }
.text-inverse { color: var(--text-inverse); }
.text-link { color: var(--text-link); }
.text-success { color: var(--text-success); }
.text-warning { color: var(--text-warning); }
.text-error { color: var(--text-error); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-normal-case { text-transform: none; }

.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* =================================
   LINKS
   ================================= */

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
    border-radius: 2px;
}

.link-unstyled {
    color: inherit;
    text-decoration: none;
}

.link-unstyled:hover {
    color: inherit;
    text-decoration: none;
}

/* =================================
   LISTS
   ================================= */

ul, ol {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.25rem;
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* =================================
   BLOCKQUOTES
   ================================= */

blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--text-link);
    background: #f8fafc;
    font-style: italic;
    color: var(--text-secondary);
    border-radius: 0 8px 8px 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}

.blockquote-footer {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-top: 0.5rem;
}

.blockquote-footer::before {
    content: "— ";
}

/* =================================
   CODE & PREFORMATTED TEXT
   ================================= */

code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875em;
    color: #e11d48;
    background: #fef2f2;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    border: 1px solid #fecaca;
}

pre {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid #374151;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: none;
    font-size: var(--font-size-sm);
}

/* =================================
   BADGES & LABELS
   ================================= */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.badge-primary { background: #dbeafe; color: #1e40af; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-error { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f3f4f6; color: #374151; }

/* =================================
   RESPONSIVE TYPOGRAPHY
   ================================= */

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
        --font-size-2xl: 1.5rem;
    }
    
    h1, .h1 { margin-bottom: 1rem; }
    h2, .h2 { margin-bottom: 0.875rem; }
    h3, .h3 { margin-bottom: 0.75rem; }
    
    .text-lead {
        font-size: var(--font-size-base);
    }
}

/* =================================
   ACCESSIBILITY ENHANCEMENTS
   ================================= */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

@media (prefers-contrast: high) {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        color: #000000;
        text-shadow: none;
        font-weight: var(--font-weight-extrabold);
    }
    
    .heading-light { 
        color: #ffffff; 
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }
    
    a:focus {
        outline-width: 3px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =================================
   CONTRAST FIX - OVERRIDE TAILWIND CLASSES
   ================================= */

/* Neutralize problematic Tailwind text color classes */
.text-white {
    color: unset !important;
}

.text-gray-100 {
    color: unset !important;
}

.text-gray-200 {
    color: unset !important;
}

.text-gray-300 {
    color: unset !important;
}

/* Allow these elements to inherit proper colors from parent or use default styling */
.text-white,
.text-gray-100,
.text-gray-200,
.text-gray-300 {
    color: inherit !important;
}