/* ==========================================================================
   Typography and Contrast Improvements
   Based on WCAG 2.1 Level AA and modern web typography best practices
   ========================================================================== */

/* CSS Custom Properties (Variables) */
:root {
    /* Typography Scale */
    --font-size-base: 1rem;           /* 16px */
    --font-size-lg: 1.125rem;         /* 18px */
    --font-size-sm: 0.875rem;         /* 14px */

    /* Line Heights - Optimized for readability */
    --line-height-body: 1.6;          /* Body text (WCAG recommends 1.5 minimum) */
    --line-height-heading: 1.3;       /* Headings */
    --line-height-compact: 1.4;       /* Lists, navigation */

    /* Content Width - Optimal reading line length */
    --content-max-width: 75ch;        /* 45-75 characters per line for readability */

    /* High Contrast Colors - WCAG AA compliant (4.5:1 for normal text, 3:1 for large text) */
    --color-text-primary: #212529;    /* Dark gray - Bootstrap's default */
    --color-text-secondary: #6c757d;  /* Medium gray */
    --color-bg-light: #f8f9fa;        /* Light background */
    --color-badge-dark: #212529;      /* High contrast badge background */
    --color-badge-text: #ffffff;      /* White text on dark background */

    /* Touch-friendly sizes (WCAG 2.5.5) */
    --min-touch-target: 44px;         /* Minimum 44x44px for touch targets */
}

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
    line-height: var(--line-height-body);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

/* Improved heading hierarchy */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

h1 {
    font-size: 2rem;        /* 32px */
    font-weight: 700;
}

h2 {
    font-size: 1.5rem;      /* 24px */
}

h3 {
    font-size: 1.25rem;     /* 20px */
}

/* Paragraphs and text blocks */
p {
    margin-bottom: 1rem;
}

/* Lists */
ol, ul {
    line-height: var(--line-height-compact);
}

/* ==========================================================================
   Content Width for Readability
   ========================================================================== */

.content-wrapper {
    max-width: var(--content-max-width);
}

/* ==========================================================================
   High Contrast Badge (WCAG AA Compliant)
   ========================================================================== */

/* Override Bootstrap's .bg-secondary badge for better contrast */
.badge.bg-dark,
.badge-high-contrast {
    background-color: var(--color-badge-dark) !important;
    color: var(--color-badge-text) !important;
    font-weight: 600;
    /* Contrast ratio: 15.3:1 - Exceeds WCAG AAA (7:1) */
}

/* Ensure readable badge text size */
.badge {
    font-size: 0.875rem;    /* 14px - minimum for readability */
    padding: 0.35em 0.65em;
}

/* ==========================================================================
   Links and Interactive Elements
   ========================================================================== */

/* Touch-friendly link areas in list groups */
.list-group-item a {
    display: inline-block;
    padding: 0.25rem 0;
    min-height: var(--min-touch-target);
    line-height: var(--min-touch-target);
}

/* Breadcrumb links - ensure adequate touch target */
.breadcrumb-item a {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
}

/* Improve focus visibility for keyboard navigation (WCAG 2.4.7) */
a:focus,
button:focus,
.btn:focus {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* Remove outline for mouse users (keep for keyboard) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */

/* Mobile - smaller font sizes for better fit */
@media (max-width: 767.98px) {
    :root {
        --font-size-base: 0.9375rem;  /* 15px */
    }

    h1 {
        font-size: 1.75rem;  /* 28px */
    }

    h2 {
        font-size: 1.375rem; /* 22px */
    }

    /* Increase touch targets on mobile */
    .list-group-item {
        padding: 1rem 1.25rem;
        min-height: var(--min-touch-target);
    }

    /* Larger breadcrumb items for touch */
    .breadcrumb-item {
        font-size: 0.9375rem;  /* 15px */
    }

    .breadcrumb-item a {
        padding: 0.5rem;
        margin: -0.5rem;
    }
}

/* Tablet and up - optimal reading sizes */
@media (min-width: 768px) {
    body {
        font-size: 1rem;  /* 16px */
    }
}

/* Desktop - slightly larger for comfortable reading */
@media (min-width: 1200px) {
    body {
        font-size: 1.0625rem;  /* 17px */
    }

    h1 {
        font-size: 2.25rem;  /* 36px */
    }
}

/* ==========================================================================
   List Groups - Improved Typography
   ========================================================================== */

.list-group-numbered {
    line-height: var(--line-height-compact);
}

.list-group-item {
    line-height: var(--line-height-body);
}

/* Exercise names in sessions - improved hierarchy */
.list-group-item h2,
.list-group-item .h5 {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */

.visually-hidden-focusable:focus {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1050;
    padding: 0.75rem 1rem;
    background-color: var(--color-badge-dark);
    color: var(--color-badge-text);
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 0.25rem 0;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

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

    h1 {
        font-size: 18pt;
    }

    h2 {
        font-size: 14pt;
    }

    /* Hide navigation elements */
    header,
    footer,
    nav,
    .breadcrumb {
        display: none;
    }

    /* Ensure content doesn't break across pages */
    .list-group-item {
        page-break-inside: avoid;
    }

    /* High contrast for print */
    .badge {
        border: 1px solid #000;
        color: #000 !important;
        background-color: #fff !important;
    }
}