/*
 * Tutor24Hour canonical typography layer.
 * Font family and control rhythm are shared platform primitives. Display-heading
 * sizes are intentionally surface-scoped so application screens do not inherit
 * marketing hero typography and homepage variants retain ownership of their
 * comparator-specific display hierarchy.
 */
:root {
  --t24-am-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --t24-am-text-xs: .75rem;      /* 12px metadata floor */
  --t24-am-text-sm: .82rem;      /* 13.12px compact metadata */
  --t24-am-text-nav: .9rem;      /* 14.4px navigation */
  --t24-am-text-control: .9rem;  /* 14.4px controls */
  --t24-am-text-body: 1rem;      /* 16px body */
  --t24-am-text-lead: 1.1rem;    /* 17.6px marketing lead */
  --t24-am-app-h1: clamp(1.55rem, 2.2vw, 2rem);
  --t24-am-app-h2: clamp(1.3rem, 1.8vw, 1.65rem);
  --t24-am-app-h3: clamp(1.12rem, 1.4vw, 1.35rem);
  --t24-am-line-body: 1.55;
  --t24-am-line-heading: 1.15;
}

html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea,
optgroup {
  font-family: var(--t24-am-font) !important;
}

body {
  font-size: var(--t24-am-text-body);
  line-height: var(--t24-am-line-body);
  font-weight: 400;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--t24-am-font) !important;
  line-height: var(--t24-am-line-heading);
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Application/operations typography is intentionally compact and task-first. */
.t24-application-surface :where(h1, .h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
  font-size: var(--t24-am-app-h1);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.025em;
}
.t24-application-surface :where(h2, .h2) { font-size: var(--t24-am-app-h2); font-weight: 800; }
.t24-application-surface :where(h3, .h3) { font-size: var(--t24-am-app-h3); font-weight: 800; }
.t24-application-surface :where(h4, .h4) { font-size: 1.1rem; font-weight: 750; }
.t24-application-surface :where(h5, .h5) { font-size: 1rem; font-weight: 750; }
.t24-application-surface :where(h6, .h6) { font-size: .95rem; font-weight: 750; }

p, li, dd, dt, td, blockquote { line-height: var(--t24-am-line-body); }

/* Marketing pages keep display sizes in their owning page/variant stylesheet. */
.t24-marketing-surface .lead,
.t24-marketing-surface .hero p,
.t24-marketing-surface .home-hero p,
.t24-marketing-surface [class*="hero"] > p,
.t24-marketing-surface [class*="hero"] .lead {
  font-size: var(--t24-am-text-lead);
  line-height: 1.6;
}

.app-navbar .nav-link,
.app-navbar a,
.navbar .nav-link,
.navbar a,
.dropdown-item,
.breadcrumb,
.pagination,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-size: var(--t24-am-text-nav) !important;
  line-height: 1.25;
}

button,
.btn,
input,
select,
textarea,
.form-control,
.form-select,
.input-group-text {
  font-size: var(--t24-am-text-control) !important;
  line-height: 1.35;
}

label,
.form-label,
.table th,
thead th,
.badge,
.pill,
.eyebrow,
[class*="kicker"],
[class*="meta-label"] {
  font-size: var(--t24-am-text-sm);
}

small,
.small,
.form-text,
.text-muted small,
[class*="caption"] {
  font-size: var(--t24-am-text-xs);
  line-height: 1.45;
}

.card-title,
.panel-title,
.modal-title,
.offcanvas-title {
  font-family: var(--t24-am-font) !important;
  letter-spacing: -.02em;
}

.card-title { font-size: 1.15rem; font-weight: 800; }
.modal-title, .offcanvas-title { font-size: 1.35rem; font-weight: 800; }

.table th,
thead th {
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .04em;
}

/* Preserve intentionally distinct document/certificate typography. */
.lc-certificate-body h1,
.certificate-sheet h1,
.certificate-title {
  font-family: Georgia, "Times New Roman", serif !important;
}

@media (max-width: 860px) {
  :root {
    --t24-am-app-h1: clamp(1.45rem, 6vw, 1.9rem);
    --t24-am-app-h2: 1.4rem;
    --t24-am-app-h3: 1.2rem;
  }
}
