/*
 * Site-wide readable type scale.
 *
 * The original page styles use viewport units for most text. That makes copy
 * shrink below a comfortable reading size on phones and grow too aggressively
 * on large displays. These bounded sizes keep the existing hierarchy while
 * protecting legibility at every viewport width.
 */

:root {
  --text-body: clamp(1rem, 0.25vw + 0.94rem, 1.125rem);
  --text-small: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);
  --text-button: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
  --text-h3: clamp(1.2rem, 0.7vw + 1rem, 1.625rem);
  --text-h2: clamp(1.5rem, 1.35vw + 1rem, 2.5rem);
  --text-h1: clamp(2rem, 2.4vw + 1rem, 3.75rem);
  --text-hero: clamp(2.4rem, 4.5vw, 5rem);
}

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

body {
  font-size: var(--text-body);
  line-height: 1.6;
}

/*
 * Keep long-form and supporting copy at 16px or larger. !important is
 * intentional here because page-level selectors otherwise reintroduce tiny
 * viewport-based sizes.
 */
p,
li,
label,
address {
  font-size: var(--text-body) !important;
  line-height: 1.65;
}

input,
textarea,
select,
button {
  font: inherit;
  font-size: var(--text-button) !important;
  line-height: 1.35;
}

small,
.job-tags,
.job-tags .tag {
  font-size: var(--text-small) !important;
  line-height: 1.45;
}

h1 {
  font-size: var(--text-h1) !important;
  line-height: 1.15;
}

h2 {
  font-size: var(--text-h2) !important;
  line-height: 1.2;
}

h3 {
  font-size: var(--text-h3) !important;
  line-height: 1.3;
}

#topcard-title,
#title {
  font-size: var(--text-hero) !important;
  line-height: 1.08;
}

/* Keep desktop navigation balanced with the logo and available header width. */
.main-header nav a,
.small-header nav a,
.dropdown-content a {
  font-size: clamp(0.9rem, 0.35vw + 0.65rem, 1rem) !important;
  font-weight: 500;
  line-height: 1.4;
}

.main-header .mobile-menu a {
  font-size: clamp(1.125rem, 2vw + 0.75rem, 1.5rem) !important;
  line-height: 1.35;
}

/* Standalone content links inherit the readable body-copy floor. */
.maincontainer ul li a {
  font-size: var(--text-body) !important;
  line-height: 1.6;
}

/* Footer text should be secondary, but never miniature on desktop. */
.footer p,
.footer li,
.footer a,
.footer-contact li,
.footer-contact a,
.footer-bottom p,
.footer-bottom a {
  font-size: var(--text-small) !important;
  line-height: 1.55;
}

.footer h3,
.footer-toggle {
  font-size: clamp(1.125rem, 0.45vw + 1rem, 1.375rem) !important;
  line-height: 1.3;
}

.footer-brand h2 {
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
  line-height: 1;
}

/* Make controls comfortable to read and tap, especially on forms. */
.contact-form .form-group label,
.contact-form .checkbox-group label,
.checkbox-group label {
  font-size: var(--text-body) !important;
  line-height: 1.5;
}

.contact-form input:not([type="checkbox"]),
.contact-form textarea,
.contact-form select {
  min-height: 2.75rem;
}

.view-details-button,
.buttonsholder button,
.buttonsholder .button-link,
#other-button,
.our-schools button,
.side-container button {
  font-size: var(--text-button) !important;
  line-height: 1.3;
}

/* Card labels carry meaning and need to remain readable on narrow cards. */
.card h3,
.valuecard h2,
.job-card .job-title {
  font-size: var(--text-h3) !important;
}

@media (max-width: 700px) {
  :root {
    --text-h1: clamp(1.8rem, 7vw, 2.5rem);
    --text-h2: clamp(1.45rem, 5.5vw, 2rem);
    --text-h3: clamp(1.125rem, 4.5vw, 1.45rem);
    --text-hero: clamp(2.1rem, 10vw, 3.25rem);
  }

  p,
  li,
  label,
  address {
    line-height: 1.6;
  }

  .mobile-menu li {
    margin: 0.75rem 0;
  }

  .footer p,
  .footer li,
  .footer a,
  .footer-contact li,
  .footer-contact a,
  .footer-bottom p,
  .footer-bottom a {
    font-size: 1rem !important;
  }
}