/**
 * Senior-Friendly Typography Override Stylesheet
 * 
 * This stylesheet applies senior-friendly typography recommendations to improve
 * readability for older users. All changes are overrides that can be easily
 * reverted by removing this stylesheet link.
 * 
 * REVERSIBILITY: To revert all changes, simply remove or comment out the
 * <link> tag for this stylesheet in base.njk (or the specific layout file).
 * 
 * IMPORTANT: All styles exclude #stage divs (used for interactive game elements).
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */
:root {
  /* Base typography */
  --senior-body-size: 1.25rem;        /* ~20px base size */
  --senior-line-height: 1.6;          /* Comfortable line spacing */
  --senior-min-text: 1rem;            /* Minimum 16px - never go below this */
  
  /* Heading sizes */
  --senior-h1-size: 2.5rem;           /* ~40px */
  --senior-h2-size: 2rem;             /* ~32px */
  --senior-h3-size: 1.75rem;          /* ~28px */
  --senior-h4-size: 1.5rem;           /* ~24px - larger than body to stand out */
  
  /* High contrast text color */
  --senior-text-color: #222222;       /* Dark text for high contrast */
}

/* ==========================================================================
   Exclusion Rules - Preserve #stage divs
   ========================================================================== */
/* All styles below explicitly exclude #stage divs to preserve game elements */
/* Note: We use :not() selectors in rules below, but also add explicit exclusions */
#stage,
#stage * {
  /* Preserve existing styles - do not override typography changes */
  /* Font sizes, weights, and line-heights should remain as originally set */
}

/* ==========================================================================
   Root Typography Overrides
   ========================================================================== */
html {
  font-size: 100% !important; /* Respect user browser settings */
}

body {
  font-size: var(--senior-body-size) !important;
  line-height: var(--senior-line-height) !important;
  font-weight: 300 !important; /* Light weight */
  color: var(--senior-text-color) !important;
}

/* List items - match body styling and remove bullets */
li {
  font-size: var(--senior-body-size) !important;
  line-height: var(--senior-line-height) !important;
  font-weight: 300 !important; /* Match body weight */
  color: var(--senior-text-color) !important;
  list-style: none !important; /* Remove dots/bullets */
}

ul,
ol {
  list-style: none !important; /* Remove default list styling */
  padding-left: 0 !important; /* Remove default padding */
}

/* Ensure high contrast for all text */
body,
.lesson-body,
.light-block,
.bright-block-details {
  color: var(--senior-text-color) !important;
}

/* ==========================================================================
   Heading Size Overrides
   ========================================================================== */
h1 {
  font-size: var(--senior-h1-size) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important; /* Regular or Semi-Bold, never Light */
  color: var(--senior-text-color) !important;
}

h2 {
  font-size: var(--senior-h2-size) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  color: var(--senior-text-color) !important;
}

h3 {
  font-size: var(--senior-h3-size) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: var(--senior-text-color) !important;
}

h4 {
  font-size: var(--senior-h4-size) !important; /* 1.5rem - larger than body text */
  line-height: 1.4 !important;
  font-weight: 600 !important; /* Semi-Bold for better visibility */
  color: var(--senior-text-color) !important;
  margin-top: 3rem !important; /* Double spacing to make it stand out more */
  margin-bottom: 0.25rem !important; /* Smaller bottom margin - spacing controlled by adjacent selector */
}

/* Reduce spacing between h4 and following paragraph */
h4 + p {
  margin-top: 0.5rem !important; /* Smaller gap after h4 */
}

/* Maintain normal spacing between paragraphs */
p + p {
  margin-top: 1rem !important; /* Normal gap between paragraphs */
}

/* Override any heading with Light font-weight */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400 !important;
}

h4 {
  font-weight: 600 !important; /* H4 specifically uses Semi-Bold */
}

/* ==========================================================================
   Lesson Page Specific Overrides
   ========================================================================== */
.lesson-intro {
  font-size: 1.3rem !important;
  line-height: var(--senior-line-height) !important;
  font-weight: 400 !important;
  color: var(--senior-text-color) !important;
  /* Responsive width constraints - using ch units for optimal readability */
  max-width: 70ch !important; /* Optimal reading width for intro text */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  box-sizing: border-box !important;
}

/* Responsive width constraints for lesson headings */
/* Match intro text width for visual consistency */
.lesson-body h1,
article.lesson-body h1 {
  max-width: 70ch !important; /* Match intro text width for consistency */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  box-sizing: border-box !important;
}

.light-block {
  font-size: 1.125rem !important;
  line-height: var(--senior-line-height) !important;
  font-weight: 300 !important; /* Light weight */
  color: var(--senior-text-color) !important;
}

/* Override light weight in light-block children */
.light-block p,
.light-block div,
.light-block span,
.light-block .twoColumns,
.light-block .twoColumns > * {
  font-weight: 300 !important; /* Light weight */
}

.bright-block-details,
.bridgeNotation {
  font-size: 1.125rem !important;
  line-height: var(--senior-line-height) !important;
  font-weight: 400 !important;
  color: var(--senior-text-color) !important;
}

.lesson-text {
  font-size: 1.125rem !important;
  line-height: var(--senior-line-height) !important;
  font-weight: 400 !important;
  color: var(--senior-text-color) !important;
}

/* ==========================================================================
   Course Page Specific Overrides
   ========================================================================== */
/* Preserve white text in course hero (it's on a dark background) */
.course-hero__content,
.course-hero__content *,
.course-hero__content h1,
.course-hero__content p {
  color: white !important;
}

.course-hero__content p {
  font-weight: 400 !important; /* Override Light (300) */
  line-height: var(--senior-line-height) !important;
}

.course-card__description {
  line-height: var(--senior-line-height) !important;
  font-weight: 400 !important;
  font-size: 1.125rem !important;
}

.section-header {
  font-size: var(--senior-min-text) !important; /* Minimum 1rem */
  font-weight: 600 !important; /* Semi-Bold */
}

/* ==========================================================================
   Table Text Overrides
   ========================================================================== */
table {
  font-size: var(--senior-min-text) !important; /* Minimum 1rem */
  line-height: 1.5 !important;
}

table th,
table td {
  font-size: var(--senior-min-text) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

table th {
  font-weight: 600 !important; /* Semi-Bold for headers */
}

/* Table responsive wrapper */
.table-responsive .table {
  font-size: var(--senior-min-text) !important;
}

.table-responsive .table th,
.table-responsive .table td {
  font-size: var(--senior-min-text) !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   Quiz and Form Text Overrides
   ========================================================================== */
form,
form label,
form div,
form input[type="checkbox"] + * {
  font-size: var(--senior-min-text) !important;
  line-height: var(--senior-line-height) !important;
  font-weight: 400 !important;
}

/* Quiz answer display */
.quiz-answer-display {
  font-size: var(--senior-min-text) !important;
  line-height: var(--senior-line-height) !important;
}

/* ==========================================================================
   Small Text & Captions - Ensure Minimum 1rem
   ========================================================================== */
.lesson-breadcrumb {
  font-size: var(--senior-min-text) !important;
}

.lesson-breadcrumb a {
  font-size: var(--senior-min-text) !important;
}

.custom-dropdown__trigger,
.custom-dropdown__selected,
.custom-dropdown__item {
  font-size: 1.25rem !important; /* Changed from var(--senior-min-text) to 1.25rem to match .light-block size */
}

.custom-dropdown__group-label {
  font-size: var(--senior-min-text) !important;
}

.lesson-badge {
  font-size: var(--senior-min-text) !important;
}

.course-meta {
  font-size: var(--senior-min-text) !important;
}

.breadcrumbs {
  font-size: var(--senior-min-text) !important;
}

/* Override specific small text elements to ensure minimum 1rem */
.site-header a,
.lesson-breadcrumb,
.custom-dropdown__trigger,
.custom-dropdown__item,
.custom-dropdown__group-label,
.lesson-badge,
.course-meta,
.breadcrumbs,
.lesson-breadcrumb a,
.lesson-breadcrumb span {
  font-size: var(--senior-min-text) !important;
}

/* Override dropdown items to match .light-block size */
.custom-dropdown__trigger,
.custom-dropdown__item {
  font-size: 1.25rem !important; /* Match .light-block size (1.125rem) - slightly larger for visibility */
}

/* Ensure specific small text classes meet minimum */
.lesson-breadcrumb a {
  font-size: var(--senior-min-text) !important;
}

/* ==========================================================================
   Practice Game Link Panel
   ========================================================================== */
/* Preserve white text in practice game link panel (it's on a colored background) */
.practice-game-link-panel,
.practice-game-link-panel *,
.practice-game-link-panel h2,
.practice-game-link-panel p,
.practice-game-link-panel a {
  color: white !important;
}

.practice-game-link-panel {
  font-size: 1.125rem !important;
  line-height: var(--senior-line-height) !important;
}

.practice-game-link-panel h2 {
  font-size: var(--senior-h2-size) !important;
}

.practice-game-link-panel p {
  font-size: 1.125rem !important;
  line-height: var(--senior-line-height) !important;
}

/* ==========================================================================
   Responsive Design Overrides
   ========================================================================== */
/* Large desktop (1200px and above) */
@media screen and (min-width: 1200px) {
  .lesson-body h1,
  article.lesson-body h1 {
    max-width: 75ch !important; /* Match intro text width on large screens */
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  
  .lesson-intro {
    max-width: 75ch !important; /* Wider intro text on large screens */
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media screen and (max-width: 900px) {
  h1 {
    font-size: 2rem !important; /* Slightly smaller on tablets */
  }
  
  h2 {
    font-size: 1.75rem !important;
  }
  
  body {
    font-size: 1.125rem !important; /* Minimum maintained */
  }
  
  /* Tablet width constraints */
  .lesson-body h1,
  article.lesson-body h1 {
    max-width: 65ch !important; /* Match intro text width on tablets */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  .lesson-intro {
    max-width: 65ch !important; /* Narrower intro text on tablets */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media screen and (max-width: 600px) {
  /* Mobile typography */
  h1 {
    font-size: 1.5rem !important; /* Smaller for mobile phones */
    line-height: 1.3 !important;
    padding-left: 1rem !important; /* Add left padding */
    padding-right: 1rem !important; /* Add right padding */
  }
  
  h2 {
    font-size: 1.5rem !important; /* Minimum for mobile */
  }
  
  body {
    font-size: 1.125rem !important; /* Minimum maintained */
    line-height: 1.5 !important;
  }
  
  .lesson-body h1,
  article.lesson-body h1 {
    max-width: 100% !important; /* Full width on mobile */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  .lesson-intro {
    font-size: 1.125rem !important; /* Minimum on mobile */
    padding-left: 1.5rem !important; /* Add horizontal padding on mobile */
    padding-right: 1.5rem !important; /* Add horizontal padding on mobile */
    max-width: 100% !important; /* Full width on mobile */
  }
  
  .light-block {
    font-size: 1.125rem !important; /* Minimum on mobile */
  }
  
  /* Reduce breadcrumb font size on mobile to prevent wrapping */
  /* More specific selectors to override the base rules */
  .lesson-breadcrumb,
  .lesson-breadcrumb *,
  .lesson-breadcrumb a,
  .lesson-breadcrumb span {
    font-size: 0.7rem !important; /* 11.2px - smaller to prevent wrapping */
  }
  
  .lesson-breadcrumb {
    padding-left: 1.5rem !important; /* Keep left padding */
    padding-right: 0.5rem !important; /* Reduce right padding on mobile */
  }
  
  /* Reduce dropdown text size on mobile */
  .custom-dropdown__trigger,
  .custom-dropdown__selected,
  .custom-dropdown__item,
  .custom-dropdown__group-label {
    font-size: 0.75rem !important; /* Smaller text for dropdown on mobile */
  }
  
  /* Remove left and right margins/padding from lesson layout and body on mobile */
  .lesson-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .lesson-body {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Remove left and right margins from light-block on mobile */
  .light-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Remove all left and right margins from bright-block on mobile */
  .bright-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .bright-block-details,
  .bridgeNotation {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   Additional Component Overrides
   ========================================================================== */
.centered-lesson-content h1 {
  font-size: var(--senior-h1-size) !important;
}

.centered-lesson-content p {
  font-size: 1.125rem !important;
  line-height: var(--senior-line-height) !important;
}

.course-card__title {
  font-size: 1.35rem !important; /* Already good, but ensure it's maintained */
}

/* Ensure all paragraph text matches body styling */
p {
  font-size: var(--senior-body-size) !important; /* 1.25rem - match body */
  line-height: var(--senior-line-height) !important;
  font-weight: 300 !important; /* Match body weight, not 400 */
  color: var(--senior-text-color) !important;
}

/* Override Light font weights in specific components - all should match body weight */
.course-hero__content p,
.light-block,
.light-block *,
.bright-block-details,
.bridgeNotation {
  font-weight: 300 !important; /* Match body weight (300) */
}

/* Ensure glossary links match body styling */
.glossary-link,
.glossary-link a,
.glossary-underline,
.tooltip-container {
  font-size: var(--senior-body-size) !important; /* Match body size */
  font-weight: 300 !important; /* Match body weight */
  color: var(--senior-text-color) !important;
}

/* ==========================================================================
   End of Senior-Friendly Typography Overrides
   ========================================================================== */