/* ================================================================
   TYPOGRAPHY SYSTEM — Theme 1.13.38

   One semantic reading scale for the whole site. Standard-mode tokens live
   in tokens.css; this layer applies semantic typography and the user-selected
   Large-mode overrides. Component-specific fixed sizes remain in main.css only where compact geometry or
   decorative/status elements intentionally do not follow the reading scale.

   Standard scale: 12 / 14 / 16 / 18 / 24 / 36-ish
   Large scale:    14 / 16 / 18 / 22 / 30 / 46-ish

   Font-size control policy:
   - Reading / comparison / action text scales up.
   - Headings keep a stronger jump than body text in Large mode.
   - Meaningful classification tags scale up one step.
   - Decorative/status badges and compact fixed-layout diagrams stay fixed.
   ================================================================ */


html[data-tsg-font-size="large"] {
  --tsk-type-caption: 14px;
  --tsk-type-small: 16px;
  --tsk-type-body: 18px;
  --tsk-type-subheading: 22px;
  --tsk-type-section: 30px;
  --tsk-type-page: clamp(34px, 4vw, 46px);
}

body {
  font-size: var(--tsk-type-body);
  line-height: var(--tsk-type-line-body);
}

/* ----------------------------------------------------------------
   Global controls / form text
   ---------------------------------------------------------------- */
.site-nav a,
.footer-tagline,
.footer-col a,
.content-detail__nav,
.content-share a,
.content-share button,
.content-prevnext a,
.btn--sm {
  font-size: var(--tsk-type-small);
}

.site-header__actions .btn,
.mobile-nav a,
.input,
.select,
.textarea,
.search-keyword-row input[type="search"],
.search-keyword-row input[type="text"],
.search-compact input,
.zip input,
.tsg-input-form input[type="text"],
.tsg-input-form input[type="email"],
.tsg-input-form input[type="tel"],
.tsg-input-form select,
.tsg-form-grid input,
.tsg-form-grid select,
.tsg-advertise-input-form input,
.tsg-advertise-input-form textarea,
.tsg-advertise-input-form select,
.btn,
.tsg-button,
.search-submit-btn,
.toggle-add,
.tsg-text-button {
  font-size: var(--tsk-type-body);
}

.site-header__secondary .header-search-form input[type="search"],
.site-header__secondary .header-search-form select {
  font-size: var(--tsk-type-body);
}

/* ----------------------------------------------------------------
   Header second row + font-size control
   ---------------------------------------------------------------- */
.font-size-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tsk-ink-700);
  font-family: var(--tsk-font-sans);
}

.font-size-control--header {
  flex: 0 0 auto;
  margin-left: 0;
  padding-left: 28px;
  border-left: 1px solid var(--tsk-ink-200);
}

.font-size-control__label {
  font-size: var(--tsk-type-small);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.font-size-control__buttons {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--tsk-ink-200);
  border-radius: var(--tsk-r-md);
  background: var(--tsk-ink-50, #f6f8f7);
}

.font-size-control__button {
  min-width: 46px;
  min-height: 34px;
  padding: 5px 10px;
  border: 0;
  border-radius: calc(var(--tsk-r-md) - 3px);
  background: transparent;
  color: var(--tsk-ink-600);
  font: inherit;
  font-size: var(--tsk-type-small);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.font-size-control__button--large { font-size: var(--tsk-type-body); }
.font-size-control__button:hover { color: var(--tsk-primary-700); }
.font-size-control__button[aria-pressed="true"] {
  background: #fff;
  color: var(--tsk-primary-800);
  box-shadow: 0 1px 4px rgba(28, 32, 32, .12);
}
.font-size-control__button:focus-visible {
  outline: none;
  box-shadow: var(--tsk-sh-focus);
}
.font-size-control--mobile { display: none; }

/* ----------------------------------------------------------------
   Home / shared cards
   ---------------------------------------------------------------- */
.hero-flow__title,
.site-hero--visual .hero-flow__title {
  font-size: var(--tsk-type-subheading);
}
/* The four-step flow is a compact diagram. Its internal text stays fixed
   so the 1 -> 2 -> 3 -> 4 structure never collapses in Large mode. */
.hero-flow__text,
.site-hero--visual .hero-flow__text,
.hero-flow__step:last-of-type .hero-flow__text,
.site-hero--visual .hero-flow__step:last-of-type .hero-flow__text {
  font-size: 14px;
  white-space: nowrap;
}
.hero-flow__num,
.site-hero--visual .hero-flow__num {
  font-size: 12px;
}

.section-head p,
.content-card__excerpt {
  font-size: var(--tsk-type-body);
  line-height: var(--tsk-type-line-body);
}

/* School/campus list cards are scan-and-compare UI, not long-form reading.
   Keep their summary copy one level below the 16px reading body. */
.card__desc,
.card--vert .card__desc {
  font-size: var(--tsk-type-small);
  line-height: 1.75;
}

.card__parent-school,
.card__address {
  margin: 0 0 6px;
  color: var(--tsk-ink-500);
  font-size: var(--tsk-type-small);
  line-height: 1.6;
}
.card__parent-school { margin-bottom: 4px; }
.card__parent-school a { color: var(--tsk-primary-600); }

/* Decorative eyebrows are fixed UI labels; dates/meta/captions are readable
   content and therefore participate in the font-size control. */
.section-eyebrow,
.hero-eyebrow {
  font-size: 12px;
}

.content-card__date,
.content-detail__meta,
.content-share span,
.cc-image figcaption,
.cc-embed figcaption,
.cc-quote figcaption,
.footer-col h5,
.footer-bottom small,
.footer-legal a {
  font-size: var(--tsk-type-caption);
}

/* Semantic tags/chips are user-readable comparison/filter information, so they
   scale. Media badges (school/campus/PICK UP) stay fixed in main.css. */
.card__meta,
.stat,
.card--row .stats .row,
.tag,
.chip,
.tsg-chip,
.content-tags a,
.social-link {
  font-size: var(--tsk-type-small);
}

/* Attribute tags are tertiary information inside school/campus cards. */
.card__tags .tag {
  font-size: var(--tsk-type-caption);
  line-height: 1.45;
  padding: 2px 7px;
}
.card__tags .tag.card-term-area,
.card__tags a.tag.card-term-area {
  font-size: var(--tsk-type-caption);
  padding: 2px 7px;
}
/* School type is a category label, so keep it one level above feature tags. */
.card__meta .tag {
  font-size: var(--tsk-type-small);
  line-height: 1.4;
  padding: 3px 9px;
}

.card__title,
.content-card h3 {
  font-size: var(--tsk-type-subheading);
  line-height: var(--tsk-type-line-heading);
}

/* ----------------------------------------------------------------
   Semantic headings + search controls
   Headings retain stronger hierarchy in Large mode; search chips/labels are
   meaningful interactive text and therefore scale with the control.
   ---------------------------------------------------------------- */
.section-head h2,
.detail-section h2,
.prose h2,
.cc-heading--h2,
.qa-section h2,
.tsg-request-box h2,
.tsg-request-side-list h2,
.tsg-request-empty h2 {
  font-size: var(--tsk-type-section);
  line-height: var(--tsk-type-line-heading);
}

.search-form-wrap--finder .search-form-head__label,
.info-card h3,
.prose h3,
.cc-heading--h3,
.cc-heading--h4,
.tsg-request-box h3 {
  font-size: var(--tsk-type-subheading);
  line-height: var(--tsk-type-line-heading);
}

.search-form-wrap--finder .search-field-label,
.search-form-wrap--finder .filter-group legend,
.search-form-wrap--finder .chip,
.search-details summary,
.field__label,
.fg__label span,
.tsg-input-form label > span {
  font-size: var(--tsk-type-small);
}

/* ----------------------------------------------------------------
   Search / comparison pages
   ---------------------------------------------------------------- */
body.page-template-page-search .search-form-head p,
body.page-template-page-search .search-form-clear,
body.page-template-page-search .pickup-results-intro p {
  font-size: var(--tsk-type-body);
  line-height: var(--tsk-type-line-body);
}

body.page-template-page-search .search-field-label,
body.page-template-page-search .filter-group legend,
body.page-template-page-search .result-summary__label,
body.page-template-page-search .result-summary__breakdown,
body.page-template-page-search .view-switcher a,
body.page-template-page-search .card__meta,
body.page-template-page-search .card--row .stats .row,
body.page-template-page-search .chip {
  font-size: var(--tsk-type-small);
}

body.page-template-page-search .card__title {
  font-size: var(--tsk-type-subheading);
  line-height: var(--tsk-type-line-heading);
}

/* ----------------------------------------------------------------
   School / campus detail pages

   Body copy is intentionally unified at one level.  Hierarchy comes
   from section headings and card headings, not arbitrary body-size
   changes between content blocks.
   ---------------------------------------------------------------- */
body.single-school .detail-breadcrumb,
body.single-campus .detail-breadcrumb,
body.single-school .detail-term-label,
body.single-campus .detail-term-label {
  font-size: var(--tsk-type-caption);
}

body.single-school .detail-hero h1,
body.single-campus .detail-hero h1 {
  font-size: var(--tsk-type-page);
  line-height: 1.32;
}

body.single-school .detail-catch,
body.single-campus .detail-catch {
  margin: 0 0 12px;
  color: var(--tsk-ink-700);
  font-size: var(--tsk-type-subheading);
  line-height: 1.75;
}

body.single-campus .detail-parent-school,
body.single-school .detail-access-info__line span,
body.single-campus .detail-access-info__line span,
body.single-school .detail-access-info__note,
body.single-campus .detail-access-info__note,
body.single-school .detail-cta-copy,
body.single-campus .detail-cta-copy {
  font-size: var(--tsk-type-small);
}
body.single-campus .detail-parent-school a { color: var(--tsk-primary-700); }

body.single-school .detail-address-line,
body.single-campus .detail-address-line,
body.single-school .prose-content,
body.single-campus .prose-content,
body.single-school .info-card p,
body.single-campus .info-card p,
body.single-school .detail-dl dt,
body.single-school .detail-dl dd,
body.single-campus .detail-dl dt,
body.single-campus .detail-dl dd,
body.single-school .detail-access-info__line b,
body.single-campus .detail-access-info__line b,
body.single-school .detail-request-band__label,
body.single-campus .detail-request-band__label {
  font-size: var(--tsk-type-body);
  line-height: var(--tsk-type-line-body);
}

body.single-school .detail-term-chip,
body.single-campus .detail-term-chip {
  font-size: var(--tsk-type-small);
}

body.single-school .detail-section h2,
body.single-campus .detail-section h2 {
  font-size: var(--tsk-type-section);
  line-height: var(--tsk-type-line-heading);
}

body.single-school .info-card h3,
body.single-campus .info-card h3 {
  font-family: var(--tsk-font-display);
  font-size: var(--tsk-type-subheading);
  font-weight: 700;
  line-height: 1.45;
  color: var(--tsk-ink-800);
  text-transform: none;
  letter-spacing: 0;
}

body.single-school .detail-cta-title,
body.single-campus .detail-cta-title {
  margin-bottom: 14px;
  font-family: var(--tsk-font-display);
  font-size: var(--tsk-type-subheading);
  font-weight: 700;
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   Guide / Q&A / static information pages
   ---------------------------------------------------------------- */
.prose,
.prose p,
.prose li,
body.single-tsg_guide .cc-text,
body.single-tsg_guide .cc-list,
body.single-tsg_guide .cc-note,
body.single-tsg_guide .cc-cta p,
body.single-tsg_qa .cc-text,
body.single-tsg_qa .cc-list,
body.single-tsg_qa .cc-note,
body.single-tsg_qa .qa-answer {
  font-size: var(--tsk-type-body);
  line-height: var(--tsk-type-line-body);
}

.static-page h1,
.content-detail__header h1 {
  font-size: var(--tsk-type-page);
  line-height: 1.32;
}

.prose h2,
.cc-heading--h2 {
  font-size: var(--tsk-type-section);
  line-height: var(--tsk-type-line-heading);
}

.prose h3,
.cc-heading--h3,
.cc-heading--h4 {
  font-size: var(--tsk-type-subheading);
  line-height: var(--tsk-type-line-heading);
}

.prose table,
.cc-table {
  font-size: var(--tsk-type-body);
}

/* ----------------------------------------------------------------
   Request / forms / helper text
   ---------------------------------------------------------------- */
.tsg-muted,
.tsg-request-item__campus-label,
.tsg-request-item__body ul li,
.tsg-notice,
.tsg-error-box,
.request-select,
.tsg-selected-request-block__text span,
.form-help,
.tsg-input-form small {
  font-size: var(--tsk-type-small);
}

.tsg-selected-request-block__text strong,
.tsg-request-item__body h3 {
  font-size: var(--tsk-type-subheading);
}



/* ----------------------------------------------------------------
   Table / definition-list labels
   Keep label cells at the same text size as their values. Hierarchy is
   expressed with weight/background rather than an extra font-size step.
   ---------------------------------------------------------------- */
.detail-dl,
.tsg-definition-list {
  grid-template-columns: 180px minmax(0, 1fr);
}

.detail-dl dt,
.detail-dl dd,
.tsg-definition-list dt,
.tsg-definition-list dd,
.prose th,
.prose td,
.cc-table th,
.cc-table td {
  font-size: var(--tsk-type-body);
  line-height: var(--tsk-type-line-body);
}

.detail-dl dt,
.tsg-definition-list dt,
.prose th,
.cc-table th {
  font-weight: 600;
}

.detail-dl dt,
.tsg-definition-list dt {
  white-space: nowrap;
}

.cc-table th {
  white-space: nowrap;
}

@media (max-width: 900px) and (min-width: 601px) {
  .detail-dl,
  .tsg-definition-list {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .detail-dl,
  .tsg-definition-list {
    grid-template-columns: 1fr;
  }
  .detail-dl dt,
  .tsg-definition-list dt {
    white-space: normal;
  }
}

/* ----------------------------------------------------------------
   Large mode spacing rhythm
   ---------------------------------------------------------------- */
html[data-tsg-font-size="large"] .card--vert .card__body,
html[data-tsg-font-size="large"] .content-card { padding: 22px; }

html[data-tsg-font-size="large"] .card--vert .card__footer {
  padding-top: 15px;
  gap: 10px;
}

html[data-tsg-font-size="large"] .info-card { padding: 23px; }

html[data-tsg-font-size="large"] .detail-dl dt,
html[data-tsg-font-size="large"] .detail-dl dd {
  padding: 15px 18px;
}

html[data-tsg-font-size="large"] .prose-content { padding: 30px 36px; }

html[data-tsg-font-size="large"] .content-detail__body,
html[data-tsg-font-size="large"] .qa-answer {
  padding: clamp(28px, 3.5vw, 44px);
}

html[data-tsg-font-size="large"] .cc-table th,
html[data-tsg-font-size="large"] .cc-table td,
html[data-tsg-font-size="large"] .prose th,
html[data-tsg-font-size="large"] .prose td {
  padding: 14px 16px;
}

html[data-tsg-font-size="large"] .search-form-wrap {
  padding: 28px;
  gap: 22px;
}

html[data-tsg-font-size="large"] .tag,
html[data-tsg-font-size="large"] .chip,
html[data-tsg-font-size="large"] .tsg-chip {
  padding: 5px 10px;
}
html[data-tsg-font-size="large"] .card__tags .tag,
html[data-tsg-font-size="large"] .card__tags .tag.card-term-area,
html[data-tsg-font-size="large"] .card__tags a.tag.card-term-area {
  padding: 3px 8px;
}
html[data-tsg-font-size="large"] .card__meta .tag {
  padding: 4px 10px;
}

html[data-tsg-font-size="large"] .site-main .btn,
html[data-tsg-font-size="large"] .site-main .tsg-button,
html[data-tsg-font-size="large"] .site-main .search-submit-btn,
html[data-tsg-font-size="large"] .site-main .toggle-add,
html[data-tsg-font-size="large"] .site-main .tsg-text-button {
  min-height: 46px;
  padding-top: 12px;
  padding-bottom: 12px;
}

html[data-tsg-font-size="large"] .tsg-input-form input,
html[data-tsg-font-size="large"] .tsg-input-form select,
html[data-tsg-font-size="large"] .tsg-form-grid input,
html[data-tsg-font-size="large"] .tsg-form-grid select,
html[data-tsg-font-size="large"] html[data-tsg-font-size="large"] .tsg-advertise-input-form input,
html[data-tsg-font-size="large"] .tsg-advertise-input-form textarea,
html[data-tsg-font-size="large"] .tsg-advertise-input-form select {
  padding: 13px 16px;
  line-height: 1.55;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .font-size-control--header { padding-left: 20px; }
}

@media (max-width: 900px) {
  .font-size-control--mobile {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 2px;
    padding: 12px 8px;
    border-top: 1px solid var(--tsk-ink-100);
    border-bottom: 1px solid var(--tsk-ink-100);
  }
  .search-form-actions { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .hero-flow__title,
  .site-hero--visual .hero-flow__title { font-size: var(--tsk-type-body); }

  .hero-flow__text,
  .site-hero--visual .hero-flow__text,
  .hero-flow__step:last-of-type .hero-flow__text,
  .site-hero--visual .hero-flow__step:last-of-type .hero-flow__text {
    font-size: 12px;
    white-space: normal;
  }

  .search-form-actions {
    gap: 12px;
    align-items: stretch;
    flex-direction: column;
  }
  .search-form-actions .btn,
  .search-submit-btn { width: 100%; }

  html[data-tsg-font-size="large"] .prose-content,
  html[data-tsg-font-size="large"] .content-detail__body,
  html[data-tsg-font-size="large"] .qa-answer {
    padding: 24px 20px;
  }
  html[data-tsg-font-size="large"] .search-form-wrap {
    padding: 22px 18px;
  }
}


/* Home FV main catch participates in Large mode, but keeps conservative
   responsive caps so the fixed visual composition does not reflow. */
@media (min-width: 761px) {
  html[data-tsg-font-size="large"] .site-hero--visual .hero-h1 {
    font-size: clamp(37px, 2.9vw, 46px);
  }
}
@media (max-width: 760px) {
  html[data-tsg-font-size="large"] .site-hero--visual .hero-copy {
    width: 55%;
    max-width: 216px;
  }
  html[data-tsg-font-size="large"] .site-hero--visual .hero-h1 {
    max-width: 216px;
    font-size: 30px;
  }
}
@media (max-width: 430px) {
  html[data-tsg-font-size="large"] .site-hero--visual .hero-copy {
    width: 64%;
    max-width: 220px;
  }
  html[data-tsg-font-size="large"] .site-hero--visual .hero-h1 {
    max-width: 220px;
  }
}
@media (max-width: 370px) {
  html[data-tsg-font-size="large"] .site-hero--visual .hero-copy {
    width: 60%;
    max-width: 194px;
  }
  html[data-tsg-font-size="large"] .site-hero--visual .hero-h1 {
    max-width: 194px;
    font-size: 27px;
  }
}

/* ----------------------------------------------------------------
   Home hero lead: restrained scaling for fixed FV composition
   ---------------------------------------------------------------- */
.hero-lead,
.site-hero--visual .hero-lead {
  font-size: 15px;
  line-height: 1.9;
}

html[data-tsg-font-size="large"] .hero-lead,
html[data-tsg-font-size="large"] .site-hero--visual .hero-lead {
  font-size: 16px;
}

@media (max-width: 760px) {
  .hero-lead,
  .site-hero--visual .hero-lead {
    font-size: 12.5px;
  }

  html[data-tsg-font-size="large"] .hero-lead,
  html[data-tsg-font-size="large"] .site-hero--visual .hero-lead {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .hero-lead,
  .site-hero--visual .hero-lead {
    font-size: 12px;
  }

  html[data-tsg-font-size="large"] .hero-lead,
  html[data-tsg-font-size="large"] .site-hero--visual .hero-lead {
    font-size: 13px;
  }
}