/**
 * Quality Portal 2026 Enhancement Stylesheet
 * ===========================================
 * Universal styling enhancements for all quality content pages
 * - Increased font sizes for better readability
 * - Modern 2026 design improvements
 * - Responsive typography
 * - Professional color enhancements
 *
 * Auto-applied to all legacy content pages
 * Created: December 2025
 */

/* ===================================
   TYPOGRAPHY ENHANCEMENTS - 2026
   =================================== */

/* Base body font size - increased from typical 12-14px to 16px */
body {
    font-size: 16px !important;
    line-height: 1.8 !important;
    font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: #2c3e50 !important;
}

/* Headings - significantly larger and more impactful */
h1 {
    font-size: 2.5em !important;  /* Was typically 1.5-2em, now 40px */
    line-height: 1.3 !important;
    margin-bottom: 0.8em !important;
    font-weight: 700 !important;
    color: #c25450 !important;
}

h2 {
    font-size: 2em !important;  /* Was typically 1.3-1.5em, now 32px */
    line-height: 1.4 !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.6em !important;
    font-weight: 600 !important;
    color: #34495e !important;
}

h3 {
    font-size: 1.6em !important;  /* Was typically 1.1-1.3em, now 25.6px */
    line-height: 1.4 !important;
    margin-top: 1em !important;
    margin-bottom: 0.5em !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
}

h4 {
    font-size: 1.3em !important;  /* Was typically 1em, now 20.8px */
    line-height: 1.5 !important;
    margin-top: 0.8em !important;
    margin-bottom: 0.4em !important;
    font-weight: 600 !important;
    color: #34495e !important;
}

h5 {
    font-size: 1.15em !important;  /* Was typically 0.9em, now 18.4px */
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
}

h6 {
    font-size: 1.05em !important;  /* Was typically 0.8em, now 16.8px */
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #34495e !important;
}

/* Paragraph text - increased for better readability */
p {
    font-size: 1.05em !important;  /* 16.8px base */
    line-height: 1.8 !important;
    margin-bottom: 1.2em !important;
}

/* Lists - larger and more spacious */
ul, ol {
    font-size: 1.05em !important;
    line-height: 1.9 !important;
    margin-left: 2em !important;
    margin-bottom: 1.2em !important;
}

li {
    margin-bottom: 0.6em !important;
    line-height: 1.9 !important;
}

/* Table text - increased for readability */
table {
    font-size: 1.05em !important;
    line-height: 1.7 !important;
}

th {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    padding: 12px 15px !important;
}

td {
    padding: 10px 15px !important;
    line-height: 1.7 !important;
}

/* Links - more visible and modern */
a {
    font-size: inherit !important;
    color: #c25450 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: #e85d54 !important;
    text-decoration: underline !important;
}

/* Strong/Bold text - enhanced visibility */
strong, b {
    font-weight: 700 !important;
    color: #2c3e50 !important;
}

/* Emphasis text */
em, i {
    font-style: italic !important;
    color: #34495e !important;
}

/* Code blocks - larger monospace text */
code {
    font-family: 'Roboto Mono', 'Courier New', monospace !important;
    font-size: 1.05em !important;
    background: #f8f9fa !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    color: #c25450 !important;
}

pre {
    font-size: 1em !important;
    line-height: 1.6 !important;
    padding: 15px !important;
    background: #f8f9fa !important;
    border-left: 4px solid #c25450 !important;
    overflow-x: auto !important;
}

pre code {
    background: transparent !important;
    padding: 0 !important;
}

/* Blockquotes - enhanced styling */
blockquote {
    font-size: 1.15em !important;
    line-height: 1.8 !important;
    padding: 15px 20px !important;
    margin: 1.5em 0 !important;
    border-left: 5px solid #c25450 !important;
    background: #f5ebeb !important;
    font-style: italic !important;
}

/* Form elements - larger and more accessible */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    font-size: 1.05em !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
}

button,
input[type="button"],
input[type="submit"] {
    font-size: 1.05em !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

/* Labels */
label {
    font-size: 1.05em !important;
    font-weight: 500 !important;
}

/* ===================================
   RESPONSIVE FONT SCALING - 2026
   =================================== */

/* Tablet devices (768px - 1024px) */
@media screen and (max-width: 1024px) {
    body {
        font-size: 15px !important;
    }

    h1 {
        font-size: 2.2em !important;
    }

    h2 {
        font-size: 1.8em !important;
    }

    h3 {
        font-size: 1.5em !important;
    }
}

/* Mobile devices (max 767px) */
@media screen and (max-width: 767px) {
    body {
        font-size: 14px !important;
    }

    h1 {
        font-size: 2em !important;
    }

    h2 {
        font-size: 1.6em !important;
    }

    h3 {
        font-size: 1.4em !important;
    }

    h4 {
        font-size: 1.2em !important;
    }
}

/* Large desktop (1920px+) - even larger fonts for comfort */
@media screen and (min-width: 1920px) {
    body {
        font-size: 18px !important;
    }
}

/* ===================================
   MODERN LAYOUT IMPROVEMENTS - 2026
   =================================== */

/* Better spacing and padding */
.content,
.main-content,
article,
section {
    max-width: 1200px !important;
    padding: 20px 30px !important;
}

/* Card-style content blocks */
.card,
.info-box,
.note,
.tip,
.warning {
    padding: 20px 25px !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
    font-size: 1.05em !important;
    line-height: 1.8 !important;
}

/* Enhanced visibility for important content */
.important,
.highlight {
    font-size: 1.15em !important;
    font-weight: 600 !important;
    color: #c25450 !important;
}

/* Better readability for long-form content */
.article-content,
.documentation,
.guide-content {
    font-size: 1.1em !important;
    line-height: 1.9 !important;
    max-width: 800px !important;
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS - 2026
   =================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #c25450 !important;
    outline-offset: 2px !important;
}

/* Better contrast for readability */
.text-muted,
.secondary-text {
    color: #6c757d !important;
    font-size: 1em !important;
}

/* Skip to content link (accessibility) */
.skip-to-content {
    font-size: 1.1em !important;
    padding: 10px 15px !important;
}

/* ===================================
   PRINT STYLES - 2026
   =================================== */

@media print {
    body {
        font-size: 12pt !important;
        line-height: 1.6 !important;
        color: #000 !important;
    }

    h1 {
        font-size: 24pt !important;
    }

    h2 {
        font-size: 18pt !important;
    }

    h3 {
        font-size: 14pt !important;
    }

    p, li, td {
        font-size: 12pt !important;
    }
}

/* ===================================
   QUALITY-SPECIFIC ENHANCEMENTS
   =================================== */

/* ISO standard references */
.iso-reference,
.standard-reference {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: #34495e !important;
}

/* Quality metrics and KPIs */
.metric,
.kpi,
.statistic {
    font-size: 1.8em !important;
    font-weight: 700 !important;
    color: #c25450 !important;
}

/* Process steps */
.step,
.procedure-step {
    font-size: 1.1em !important;
    line-height: 1.8 !important;
    margin-bottom: 1em !important;
}

/* Requirements and clauses */
.requirement,
.clause {
    font-size: 1.05em !important;
    line-height: 1.8 !important;
    padding: 10px 15px !important;
}

/* ===================================
   LEGACY BROWSER SUPPORT
   =================================== */

/* Ensure minimum font sizes even in old browsers */
* {
    min-font-size: 14px;
}

/* Fallback for browsers that don't support viewport units */
html {
    font-size: 100%;  /* 16px */
}

/* ===================================
   UTILITY CLASSES - 2026
   =================================== */

.text-small {
    font-size: 0.9em !important;
}

.text-large {
    font-size: 1.3em !important;
}

.text-xlarge {
    font-size: 1.6em !important;
}

.text-xxlarge {
    font-size: 2em !important;
}

/* Line height utilities */
.line-height-tight {
    line-height: 1.4 !important;
}

.line-height-normal {
    line-height: 1.6 !important;
}

.line-height-relaxed {
    line-height: 1.8 !important;
}

.line-height-loose {
    line-height: 2 !important;
}

/* ===================================
   END OF 2026 ENHANCEMENTS
   =================================== */