/* Overrides loaded after new-student.css to ensure font state rules win */

/* Ensure Font Awesome icons always use the FA font (including pseudo-elements) */
.fa, .fas, .far, .fal, .fab,
.fa:before, .fas:before, .far:before, .fal:before, .fab:before,
.fa:after, .fas:after, .far:after, .fal:after, .fab:after,
[class^="fa-"], [class*=" fa-"], [class^="fas-"], [class*=" fas-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-weight: 900 !important;
}

/* Rollama: apply to sidebar, quests, top-nav, and quest-title specifically */
body.rollama-font .sidebar-wrapper,
body.rollama-font .sidebar-menu,
body.rollama-font .sidebar-menu a,
body.rollama-font .sidebar-menu ul li,
body.rollama-font .sidebar-menu ul li a,
body.rollama-font .quests,
body.rollama-font .quest-title,
body.rollama-font .dashboard-nav,
body.rollama-font .dashboard-nav *,
body.rollama-font .page-content,
body.rollama-font .top-nav,
body.rollama-font .menu-action {
  font-family: llamarollFont !important;
}

/* Also target quest menu and list items explicitly */
body.rollama-font .card-header,
body.rollama-font .list-group-item,
body.rollama-font .quest-title {
  font-family: llamarollFont !important;
}

/* Generic/Arial state */
body.generic-font .sidebar-wrapper,
body.generic-font .sidebar-menu,
body.generic-font .sidebar-menu a,
body.generic-font .sidebar-menu ul li,
body.generic-font .sidebar-menu ul li a,
body.generic-font .quests,
body.generic-font .quest-title,
body.generic-font .dashboard-nav,
body.generic-font .dashboard-nav *,
body.generic-font .page-content,
body.generic-font .top-nav,
body.generic-font .menu-action {
  font-family: Arial, Helvetica, sans-serif !important;
}

body.generic-font .card-header,
body.generic-font .list-group-item,
body.generic-font .quest-title {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Dyslexic state */
body.dyslexic-font .sidebar-wrapper,
body.dyslexic-font .sidebar-menu,
body.dyslexic-font .sidebar-menu a,
body.dyslexic-font .sidebar-menu ul li,
body.dyslexic-font .sidebar-menu ul li a,
body.dyslexic-font .quests,
body.dyslexic-font .quest-title,
body.dyslexic-font .dashboard-nav,
body.dyslexic-font .dashboard-nav *,
body.dyslexic-font .page-content,
body.dyslexic-font .top-nav,
body.dyslexic-font .menu-action {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

body.dyslexic-font .card-header,
body.dyslexic-font .list-group-item,
body.dyslexic-font .quest-title {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* Declare a scaling variable and apply it to the root when the HTML element
   is marked with the dyslexic state. Some components use rem units (and some
   inline styles use rems), so setting the root font-size when the page is in
   dyslexic mode ensures those rem-based sizes scale uniformly. */
:root {
  --dyslexic-scale: 1;
  /* legacy/compiled SCSS uses --_dyslexic-scale (with underscore) in several places */
  --_dyslexic-scale: 1;
}

html.dyslexic-font {
  /* scale the root font-size to 80% */
  --dyslexic-scale: 0.8;
  --_dyslexic-scale: 0.8;
  /* set root font-size so rem units scale uniformly */
  font-size: calc(var(--_dyslexic-scale) * 100%) !important;
}

/* Ensure body-level font-size rules (compiled CSS sometimes sets body.dyslexic-font to a fixed 1rem)
   are instead expressed relative to the established dyslexic scale so rem-based sizing
   and any calc(var(--_dyslexic-scale) * ...) rules pick up the adjustment. */
body.dyslexic-font {
  font-size: calc(var(--_dyslexic-scale) * 1.2rem) !important;
}

/* High-specificity overrides to catch inline-style selectors (e.g. [style*="font-family"]) and
   ensure components compiled into student.css or new-student.css pick up the dyslexic font/scale.
   NOTE: do NOT blanket-apply font-size to every descendant here (that caused unintended shrinking).
   Only target elements that carry inline font markers or the body itself for font-family. */
html.dyslexic-font body.dyslexic-font,
html.dyslexic-font [style*="font-family"],
html.dyslexic-font [style*="font-size"],
html.dyslexic-font [style*="font-size"] * {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
  /* Scale using the element's --original-size if present; fallback to 1rem */
  font-size: calc(var(--_dyslexic-scale) * var(--original-size, 1rem)) !important;
  line-height: 1.5 !important;
}

/* If some elements still have inline or very-specific font rules, force fallback for textual elements (but not icons) */
body.rollama-font *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
  font-family: llamarollFont !important;
}
body.generic-font *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
  font-family: Arial, Helvetica, sans-serif !important;
}
body.dyslexic-font *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* Targeted tweak: quest titles often use an inline 36px which is too big in dyslexic mode.
   Scale that specific case to 36px * var(--_dyslexic-scale) so it fits the card. */
body.dyslexic-font .quest-title h2,
html.dyslexic-font body.dyslexic-font .quest-title h2,
body.dyslexic-font .quest-title h2[style*="font-size"] {
  font-size: calc(36px * var(--_dyslexic-scale)) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}