/*
 * Site typography. Headings: Plus Jakarta Sans; everything else: Inter.
 *
 * Site-wide: both layouts (layouts/site, layouts/app) load the fonts and this
 * file last and put `ae-type` on <body>. The old faces (Poppins, Baloo 2,
 * Google Sans) were swapped for these in the page stylesheets themselves.
 * Fonts apply everywhere, header and footer included; the size scale below
 * applies to the page body (<main>) only.
 *
 * Roles, usable anywhere as classes:
 *   .t-h1 .t-h2 .t-h3 .t-h4  headings (h1–h4 inside <main> get these by default)
 *   .t-body                  body copy
 *   .t-small                 small text / captions
 *   .t-label                 labels / badges (uppercase)
 *   .t-btn                   buttons
 */

:root {
  --ae-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ae-font-body: 'Inter', system-ui, sans-serif;
}

/* ------------------------------------------------------------- base */
body.ae-type,
body.ae-type .ae-landing,
body.ae-type .ae-flow {
  font-family: var(--ae-font-body);
}

body.ae-type :is(button, input, select, textarea) {
  font-family: inherit;
}

/* The home landing / tool screens draw every display face from --ae-display. */
body.ae-type .ae-landing,
body.ae-type .ae-flow {
  --ae-display: var(--ae-font-heading);
}

/* Every heading on the site, whatever its page CSS says. The Halloween
   banner title keeps its themed face. */
body.ae-type :is(h1, h2, h3, h4, h5, h6):not(.ae-spooky-banner__title) {
  font-family: var(--ae-font-heading) !important;
  text-transform: capitalize;
}

/* API reference headings are paths and MIME types: keep their casing. */
body.ae-type .doc_main :is(h1, h2, h3, h4, h5, h6) {
  text-transform: none;
}

/* --------------------------------------------------------- headings
   Plain h1–h4 in the page body take the scale; the home tool card
   (.vai__view) has its own markup and is mapped by class further down. */
body.ae-type main :is(h1, h2, h3, h4):not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
body.ae-type :is(.t-h1, .t-h2, .t-h3, .t-h4),
body.ae-type .ae-landing .ae-hero__title,
body.ae-type .ae-flow .ae-screen__title,
body.ae-type :is(.ae-card__title, .ae-plan__name) {
  font-family: var(--ae-font-heading);
  text-transform: capitalize;
}

body.ae-type main h1:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
body.ae-type .t-h1,
body.ae-type .ae-landing .ae-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body.ae-type main h2:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
body.ae-type .t-h2,
body.ae-type .ae-flow .ae-screen__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body.ae-type main h3:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
body.ae-type .t-h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
}

body.ae-type main h4:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
body.ae-type .t-h4,
body.ae-type :is(.ae-card__title, .ae-plan__name) {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
}

/* ------------------------------------------------------------- text */
/* Article text only (WordPress / GenerateBlocks blocks, CMS and blog bodies):
   tool widgets share no wrapper, so a plain `main p` would resize their UI. */
body.ae-type main :is(p.wp-block-paragraph, p.has-text-align-center, p.gb-headline,
  .wp-block-list > li, .entry-content > p, .entry-content > :is(ul, ol) > li,
  .cms > p, .cms > :is(ul, ol) > li),
body.ae-type .t-body,
body.ae-type .ae-landing .ae-hero__lead {
  font-family: var(--ae-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
}

body.ae-type .t-small,
body.ae-type :is(.ae-card__sub, .ae-history__empty, .ae-quota__note, .ae-hero__chip),
body.ae-type .ae-landing .ae-plan__features li {
  font-family: var(--ae-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

body.ae-type .t-label,
body.ae-type :is(.ae-history__title, .ae-tools__title, .ae-tag, .ae-pill, .ae-badge,
  .ae-quota__label, .ae-sample__lbl, .ae-step__label, .ae-dz__formats-label, .ae-plan__off) {
  font-family: var(--ae-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.ae-type .t-btn,
body.ae-type :is(.ae-landing, .ae-flow) :is(.ae-btn, .ae-go),
body.ae-type .ae-pp .pp-tab {
  font-family: var(--ae-font-body);
  font-size: 16px;
  font-weight: 600;
}

/* ----------------------------------------------------------- mobile */
@media (max-width: 767px) {
  body.ae-type main h1:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
  body.ae-type .t-h1,
  body.ae-type .ae-landing .ae-hero__title {
    font-size: 32px;
  }

  body.ae-type main h2:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
  body.ae-type .t-h2,
  body.ae-type .ae-flow .ae-screen__title {
    font-size: 26px;
  }

  body.ae-type main h3:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
  body.ae-type .t-h3 {
    font-size: 20px;
  }

  body.ae-type main h4:not(:is(.vai__view, .vs_tool_wrapper, .vct_voice_changer_container) *),
  body.ae-type .t-h4,
  body.ae-type :is(.ae-card__title, .ae-plan__name) {
    font-size: 18px;
  }
}