/*
 * Canonical mobile typography
 *
 * Reference: the approved vivoChip-2x mobile page.
 * This file is the final authority for content typography at <= 782px.
 *
 * Rules for future changes:
 * 1. Change the tokens here; do not add page-specific mobile font sizes.
 * 2. Keep structural/layout selectors out of this file.
 * 3. Labels, captions, metadata, controls and data displays use the named
 *    supporting roles below rather than inheriting paragraph typography.
 */

:root {
  --vv-mobile-page-title-size: 42px;
  --vv-mobile-section-heading-size: 41.6px;
  --vv-mobile-subheading-size: 24px;
  --vv-mobile-paragraph-size: 20.8px;
  --vv-mobile-box-heading-size: 28px;
  --vv-mobile-cta-size: 20.8px;
  --vv-mobile-utility-link-size: 13px;
  --vv-mobile-label-size: 12px;
  --vv-mobile-caption-size: 12px;
}

@media screen and (max-width: 782px) {
  /* Repeated [class] selectors intentionally outrank legacy page-scoped
     !important declarations. Inline vivoChip-2x values already match these. */
  html body:not(.home) :is(main[class][class][class], article[class][class][class]) h1 {
    font-size: var(--vv-mobile-page-title-size) !important;
    line-height: 1.04 !important;
  }

  html body:not(.home) :is(main[class][class][class], article[class][class][class]) h2 {
    font-size: var(--vv-mobile-section-heading-size) !important;
    line-height: 1.06 !important;
  }

  html body:not(.home) :is(main[class][class][class], article[class][class][class]) :is(h3, h4, h5, h6) {
    font-size: var(--vv-mobile-subheading-size) !important;
    line-height: 1.18 !important;
  }

  html body:not(.home) :is(main[class][class][class], article[class][class][class]) :is(p, li) {
    font-size: var(--vv-mobile-paragraph-size) !important;
    line-height: 1.38 !important;
  }

  /* Box/card titles on vivoChip-2x are intentionally smaller than section H2s. */
  html body:not(.home) :is(main[class][class][class], article[class][class][class])
    :is([class*="card"], [class*="Card"], [class*="box"], [class*="Box"], [class*="tile"], [class*="Tile"])
    :is(h2, h3, h4) {
    font-size: var(--vv-mobile-box-heading-size) !important;
    line-height: 1.15 !important;
  }

  /* Text CTAs follow the vivoChip-2x Request a Quote treatment. */
  html body:not(.home) :is(main[class][class][class], article[class][class][class])
    :is([class*="quote-link"], [class*="cta-link"], .vv-text-cta) {
    font-size: var(--vv-mobile-cta-size) !important;
    line-height: 1.38 !important;
  }

  /* Supporting roles remain deliberately compact. */
  html body:not(.home) :is(main[class][class][class], article[class][class][class])
    :is([class*="text-link"], [class*="utility-link"]) {
    font-size: var(--vv-mobile-utility-link-size) !important;
    line-height: 1.35 !important;
  }

  html body:not(.home) :is(main[class][class][class], article[class][class][class])
    :is([class*="eyebrow"], [class*="kicker"], [class*="label"], [class*="tag"], [class*="meta"], [class*="feature-line"]) {
    font-size: var(--vv-mobile-label-size) !important;
    line-height: 1.35 !important;
  }

  html body:not(.home) :is(main[class][class][class], article[class][class][class]) figcaption {
    font-size: var(--vv-mobile-caption-size) !important;
    line-height: 1.4 !important;
  }

  /* Navigation, form controls, icon-only controls and numeric displays retain
     their component sizing and are not editorial text roles. */
  html body:not(.home) :is(main[class][class][class], article[class][class][class])
    :is(button, input, select, textarea, [class*="metric"], [class*="stat"]) :is(p, li, span, strong) {
    font-size: inherit !important;
  }
}