/**
 * Readability & Professionalism Enhancements
 * Ensures consistent, readable, professional typography across all pages
 */

/* ===== BASE READABILITY ===== */

html {
    font-size: 17px; /* Optimal base size for readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7 !important; /* Improved readability - 1.7 is optimal */
    color: #000000 !important;
    background: #FFFFFF !important;
    letter-spacing: -0.01em; /* Slight letter spacing for clarity */
}

/* ===== TYPOGRAPHY HIERARCHY ===== */

/* Headings - Professional, readable sizes */
h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important; /* Responsive scaling */
    font-weight: 700 !important;
    line-height: 1.2 !important; /* Tighter for headings */
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}

h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem) !important; /* Responsive scaling */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
    color: #000000 !important;
    margin-bottom: 1.25rem !important;
    text-align: center !important;
}

h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    margin-bottom: 1rem !important;
}

h4 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    margin-bottom: 0.75rem !important;
}

/* Paragraphs - Optimal readability */
p {
    font-size: 1.0625rem !important; /* 17px base */
    line-height: 1.75 !important; /* Excellent readability */
    color: #333333 !important; /* Slightly softer than pure black */
    margin-bottom: 1.25rem !important;
    max-width: 65ch !important; /* Optimal line length for reading */
    text-align: left !important; /* Left-align paragraphs */
}

/* Paragraphs in centered sections */
.text-center p,
.section p,
section p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== TEXT ELEMENTS ===== */

li {
    font-size: 1.0625rem !important;
    line-height: 1.75 !important;
    color: #333333 !important;
    margin-bottom: 0.5rem !important;
}

span, label, small {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #333333 !important;
}

/* ===== READABILITY ENHANCEMENTS ===== */

/* Improve text contrast */
strong, b {
    font-weight: 600 !important;
    color: #000000 !important;
}

em, i {
    font-style: italic;
    color: #333333 !important;
}

/* Links - Clear and professional */
a {
    color: #3498DB !important; /* Blue for links */
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    border-bottom: 1px solid transparent !important;
}

a:hover {
    color: #16A085 !important; /* Green on hover */
    border-bottom-color: #16A085 !important;
}

a:focus {
    outline: 2px solid #3498DB !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* ===== SPACING FOR READABILITY ===== */

/* Section spacing */
.section, section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

@media (min-width: 768px) {
    .section, section {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
}

/* Container readability */
.container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* ===== PROFESSIONAL CONSISTENCY ===== */

/* Remove all caps text */
.uppercase {
    text-transform: none !important;
    font-size: inherit !important;
}

/* Consistent button text */
button, .btn {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.5 !important;
}

/* Form elements readability */
input, textarea, select {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #000000 !important;
}

input::placeholder,
textarea::placeholder {
    color: #666666 !important;
    opacity: 0.8 !important;
}

/* ===== MOBILE READABILITY ===== */

@media (max-width: 768px) {
    html {
        font-size: 16px !important; /* Slightly smaller on mobile */
    }
    
    body {
        line-height: 1.6 !important; /* Slightly tighter on mobile */
    }
    
    p {
        font-size: 1rem !important; /* 16px on mobile */
        line-height: 1.7 !important;
    }
    
    /* Better spacing on mobile */
    .section, section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ===== ACCESSIBILITY & PROFESSIONALISM ===== */

/* Ensure minimum contrast */
* {
    color-scheme: light !important;
}

/* Focus states for accessibility */
*:focus-visible {
    outline: 2px solid #3498DB !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 100px !important;
}

/* ===== PRINT READABILITY ===== */

@media print {
    body {
        font-size: 12pt !important;
        line-height: 1.6 !important;
        color: #000000 !important;
    }
    
    h1, h2, h3, h4 {
        page-break-after: avoid !important;
    }
    
    p {
        orphans: 3 !important;
        widows: 3 !important;
    }
}