/*
 * Readability / accessibility overrides (WCAG 2.1 AA, Google Lighthouse "legible font sizes").
 * Loaded LAST in app/layout.tsx so it wins over style.css, themeatrix.css and bootstrap.css
 * without editing those original files.
 *
 *  - Root size is a percentage, so text follows the visitor's browser font-size setting
 *    (Bootstrap hard-codes html{font-size:10px}). 62.5% keeps 1rem = 10px by default.
 *  - Body copy 16px (was 14px), line-height 1.5.
 *  - Nothing below 14px; mobile menu links 18px with 48px tap targets.
 */

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* ---------- Hero / headline text: keep today's rendered size ----------
   These are sized in em, so they would grow with the new 16px body and
   collide with the fixed hero margins in style.css. Pinned to the px values
   they rendered at before (base 14px). */
#home_text { font-size: 3.1rem; }
.home_btn { font-size: 4.2rem; }
.center_info blockquote { font-size: 4.2rem; }

@media (max-width: 800px) {
  .center_info blockquote { font-size: 3.5rem; }
}
@media (max-width: 480px) {
  .center_info h2, .center_info h3,
  .center_info_wide h2, .center_info_wide h3,
  .center_info blockquote { font-size: 2.5rem; }
}
@media (max-width: 320px) {
  .center_info h2, .center_info h3,
  .center_info_wide h2, .center_info_wide h3,
  .center_info blockquote { font-size: 2rem; }
}
@media (max-width: 209px) {
  .center_info h2, .center_info h3,
  .center_info_wide h2, .center_info_wide h3,
  .center_info blockquote { font-size: 1.6rem; }
}

/* ---------- Small text raised to a 14–16px minimum ---------- */
.faq .answer { font-size: 1.6rem; }        /* contact FAQ: was 12px */
.int_link { font-size: 1.4rem; }           /* international language labels: was 11px */
.award_, .crticial { font-size: 1.4rem; }  /* about page awards: was 12px */
.clear { font-size: 1.4rem; }              /* footer copyright: was 12px */

@media (max-width: 370px) {
  .download_col { font-size: 1.4rem; }     /* educator downloads table: was 12px */
}

/* ---------- Top navigation (desktop) ----------
   12px is kept only between 791–899px, where a larger size would push the
   six links onto a second line next to the logo. */
@media (min-width: 900px) {
  #nav { font-size: 1.3rem; }
}
@media (min-width: 1000px) {
  #nav { font-size: 1.4rem; }
}

/* ---------- Mobile menu (matches the max-width:790px rules in style.css) ---------- */
@media (max-width: 790px) {
  #nav ul {
    overflow-y: auto;                      /* short/landscape screens can scroll to every link */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }
  #nav li {
    height: auto;
    margin: 6px auto 0 auto !important;
    padding: 0;
  }
  #nav li a {
    display: block;
    min-height: 48px;                      /* Google / WCAG 2.5.5 tap target */
    padding: 10px 4px;
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}

/* ---------- Footer ---------- */
#footer_links a { font-size: 1.6rem; }
#footer li {
  height: auto;
  line-height: 1.5;
}

@media (max-width: 800px) {
  #footer { font-size: 1.4rem; }           /* was 13px */
  #footer li { padding: 6px 8px; }         /* spacing between tappable links */
}