/* ===== TYPOGRAPHY SYSTEM ===== */
/* Professional typography system for EPSF-Sinai website */

/* ===== FONT IMPORTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* ===== TYPOGRAPHY CSS CUSTOM PROPERTIES ===== */
:root {
    /* Font Families */
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Enhanced Font Sizes - Professional Scale */
    --font-size-xs: 0.75rem;      /* 12px - Captions, notes */
    --font-size-sm: 0.875rem;     /* 14px - Small text, buttons */
    --font-size-base: 1rem;       /* 16px - Body text */
    --font-size-lg: 1.125rem;     /* 18px - Large body text */
    --font-size-xl: 1.25rem;      /* 20px - Subheadings (H3) */
    --font-size-2xl: 1.5rem;      /* 24px - Section titles (H2) */
    --font-size-3xl: 2rem;        /* 32px - Main title (H1) */
    --font-size-4xl: 2.5rem;      /* 40px - Large titles */
    --font-size-5xl: 3rem;        /* 48px - Hero titles */
    --font-size-6xl: 3.5rem;      /* 56px - Display titles */
    --font-size-7xl: 4rem;        /* 64px - Mega titles */
    --font-size-8xl: 4.5rem;      /* 72px - Ultra titles */
    
    /* Enhanced Font Weights */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Professional Line Heights */
    --line-height-tight: 1.1;     /* Headings */
    --line-height-normal: 1.4;    /* Subheadings */
    --line-height-relaxed: 1.6;   /* Body text */
    --line-height-loose: 1.8;     /* Large paragraphs */
    --line-height-ultra: 2.0;     /* Special cases */
    
    /* Enhanced Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* Professional Typography Colors */
    --text-heading: #1A2E50;      /* Dark navy blue for headings */
    --text-heading-light: #2A3E60; /* Lighter navy for secondary headings */
    --text-body: #334E68;         /* Dark grayish blue for body text */
    --text-body-light: #4A5F7A;   /* Lighter body text */
    --text-secondary: #7B93AF;    /* Light gray-blue for secondary text */
    --text-muted: #A0B4CC;        /* Very light gray-blue for notes/captions */
    --text-muted-light: #B8C7D9;  /* Lighter muted text */
    --text-link: #0052D4;         /* Main blue for links */
    --text-link-hover: #003BA1;   /* Darker blue for link hover */
    --text-white: #FFFFFF;        /* White text */
    --text-white-muted: rgba(255, 255, 255, 0.9); /* Muted white text */
    
    /* Professional Spacing System */
    --spacing-heading: 1.5rem;    /* Space between titles and text */
    --spacing-paragraph: 1.25rem; /* Space between paragraphs */
    --spacing-section: 2rem;      /* Space between sections */
    --spacing-large: 3rem;        /* Large spacing */
    --spacing-xl: 4rem;           /* Extra large spacing */
    
    /* Enhanced Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== BASE TYPOGRAPHY ===== */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--text-body);
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== ENHANCED HEADING HIERARCHY ===== */

/* Main Title (H1) - Page headline */
h1, .h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-heading);
    margin-bottom: var(--spacing-heading);
    letter-spacing: var(--letter-spacing-tight);
    text-rendering: optimizeLegibility;
}

/* Section Titles (H2) - Big section names */
h2, .h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-heading);
    margin-bottom: var(--spacing-heading);
    letter-spacing: var(--letter-spacing-tight);
}

/* Subheadings (H3) - Used under sections */
h3, .h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--text-heading-light);
    margin-bottom: var(--spacing-heading);
    letter-spacing: var(--letter-spacing-normal);
}

/* H4 - Smaller subheadings */
h4, .h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--text-heading-light);
    margin-bottom: var(--spacing-heading);
}

/* H5 - Small headings */
h5, .h5 {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--text-heading-light);
    margin-bottom: var(--spacing-heading);
}

/* H6 - Smallest headings */
h6, .h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--text-heading-light);
    margin-bottom: var(--spacing-heading);
}

/* ===== ENHANCED PARAGRAPH STYLES ===== */
p {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--text-body);
    margin-bottom: var(--spacing-paragraph);
    text-align: justify;
    max-width: 65ch; /* Optimal reading width */
    text-rendering: optimizeLegibility;
}

/* Large paragraphs */
p.large {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    color: var(--text-body-light);
}

/* Small paragraphs */
p.small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
}

/* Lead paragraph */
p.lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-loose);
    color: var(--text-body-light);
    margin-bottom: var(--spacing-paragraph);
}

/* ===== ENHANCED SMALL TEXT STYLES ===== */
.small-text, .caption, .note {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-muted);
}

.caption {
    font-style: italic;
    color: var(--text-muted-light);
}

.note {
    background: rgba(0, 82, 212, 0.05);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border-left: 3px solid var(--text-link);
}

/* ===== ENHANCED BUTTON TYPOGRAPHY ===== */
.btn {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-decoration: none;
    text-rendering: optimizeLegibility;
}

.btn-large {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.btn-small {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* ===== ENHANCED LINK STYLES ===== */
a {
    color: var(--text-link);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-weight: var(--font-weight-medium);
}

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

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

/* ===== ENHANCED LIST STYLES ===== */
ul, ol {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-body);
    margin-bottom: var(--spacing-paragraph);
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
    text-align: left;
}

ul li::marker {
    color: var(--text-link);
}

ol li::marker {
    color: var(--text-heading);
    font-weight: var(--font-weight-medium);
}

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

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Font Weights */
.font-thin { font-weight: var(--font-weight-thin); }
.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); }
.font-black { font-weight: var(--font-weight-black); }

/* Text Colors */
.text-heading { color: var(--text-heading); }
.text-heading-light { color: var(--text-heading-light); }
.text-body { color: var(--text-body); }
.text-body-light { color: var(--text-body-light); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-muted-light { color: var(--text-muted-light); }
.text-link { color: var(--text-link); }
.text-link-hover { color: var(--text-link-hover); }
.text-white { color: var(--text-white); }
.text-white-muted { color: var(--text-white-muted); }

/* Font Sizes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }
.text-7xl { font-size: var(--font-size-7xl); }
.text-8xl { font-size: var(--font-size-8xl); }

/* Line Heights */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }
.leading-ultra { line-height: var(--line-height-ultra); }

/* Letter Spacing */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.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); }

/* Spacing */
.mb-heading { margin-bottom: var(--spacing-heading); }
.mb-paragraph { margin-bottom: var(--spacing-paragraph); }
.mb-section { margin-bottom: var(--spacing-section); }
.mb-large { margin-bottom: var(--spacing-large); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* ===== ENHANCED RESPONSIVE TYPOGRAPHY ===== */
@media (max-width: 768px) {
    :root {
        /* Adjust font sizes for mobile */
        --font-size-3xl: 1.75rem;  /* H1 */
        --font-size-2xl: 1.5rem;   /* H2 */
        --font-size-xl: 1.125rem;  /* H3 */
        --font-size-lg: 1rem;      /* H4 */
        --font-size-base: 0.9375rem; /* Body */
        --font-size-sm: 0.8125rem; /* Small */
        --font-size-xs: 0.6875rem; /* Extra small */
    }
    
    /* Reduce paragraph width on mobile */
    p {
        max-width: 100%;
        text-align: left; /* Change from justified to left-aligned on mobile */
    }
    
    /* Adjust spacing for mobile */
    :root {
        --spacing-heading: 1rem;
        --spacing-paragraph: 1rem;
        --spacing-section: 1.5rem;
    }
}

@media (max-width: 480px) {
    :root {
        /* Further reduce font sizes for very small screens */
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
        --font-size-xl: 1rem;
        --font-size-lg: 0.9375rem;
        --font-size-base: 0.875rem;
        --font-size-sm: 0.75rem;
        --font-size-xs: 0.625rem;
    }
}

/* ===== ENHANCED SPECIAL TYPOGRAPHY STYLES ===== */

/* Hero Titles */
.hero-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-heading);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--spacing-heading);
    text-rendering: optimizeLegibility;
}

/* Section Headers */
.section-header {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-heading);
    text-align: center;
    margin-bottom: var(--spacing-section);
    letter-spacing: var(--letter-spacing-tight);
}

/* Card Titles */
.card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-heading);
    margin-bottom: var(--spacing-heading);
}

/* Navigation Text */
.nav-text {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wide);
}

/* Footer Text */
.footer-text {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
}

/* Display Text */
.display-text {
    font-family: var(--font-heading);
    font-size: var(--font-size-7xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    color: var(--text-heading);
    letter-spacing: var(--letter-spacing-tighter);
    text-rendering: optimizeLegibility;
}

/* ===== ENHANCED ACCESSIBILITY FEATURES ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --text-heading: #000000;
        --text-heading-light: #000000;
        --text-body: #000000;
        --text-body-light: #000000;
        --text-secondary: #333333;
        --text-muted: #666666;
        --text-muted-light: #666666;
    }
}

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

/* Enhanced focus styles for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ===== ENHANCED PRINT STYLES ===== */
@media print {
    :root {
        --text-heading: #000000;
        --text-heading-light: #000000;
        --text-body: #000000;
        --text-body-light: #000000;
        --text-secondary: #333333;
        --text-muted: #666666;
        --text-muted-light: #666666;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        orphans: 3;
        widows: 3;
    }
    
    p {
        orphans: 3;
        widows: 3;
    }
    
    a {
        color: #000000;
        text-decoration: underline;
    }
    
    .btn {
        border: 1px solid #000000;
        color: #000000;
        text-transform: none;
    }
}