/* Plain static CSS (no HubL templating) - responsive heading sizes on
   mobile. Deliberately not part of the theme.json-driven settings
   pipeline (_hs/css/settings|elements/_typography.hubl.css), which has
   shown build/publish inconsistencies: successful builds not reliably
   reflected in the live compiled output. This file goes through the
   same static-asset pathway as everything else in the theme, which has
   been reliably updating within ~1 minute all day.

   Per-level modifiers (not one flat percentage): larger headings need
   more aggressive reduction on narrow screens, smaller ones barely
   need adjusting.
*/

/*
  General-purpose utility, not heading-size-specific like the rest of
  this file - lives here anyway since it shares this file's breakpoint
  and is mostly used inside headings. Type a literal <br class="hs-
  elevate-mobile-break"> into a text field (rendered as sanitized HTML,
  not plain text) to force a line break only below this breakpoint,
  without touching the desktop wrapping or duplicating the module.
  Declared BEFORE the media query on purpose: same-specificity rules
  resolve by source order regardless of which one sits inside a media
  block, so the unconditional default has to come first or it always
  wins over the mobile override below, at every viewport width.
*/
.hs-elevate-mobile-break {
  display: none;
}

@media (width < 767px) {
  h1,
  .hs-elevate-h1 {
    font-size: calc(var(--hsElevate--h1__fontSize) * 0.65) !important;
  }

  h2,
  .hs-elevate-h2 {
    font-size: 32px !important;
  }

  h3,
  .hs-elevate-h3 {
    font-size: calc(var(--hsElevate--h3__fontSize) * 0.78) !important;
  }

  h4,
  .hs-elevate-h4 {
    font-size: calc(var(--hsElevate--h4__fontSize) * 0.85) !important;
  }

  h5,
  .hs-elevate-h5 {
    font-size: calc(var(--hsElevate--h5__fontSize) * 0.9) !important;
  }

  h6,
  .hs-elevate-h6 {
    font-size: calc(var(--hsElevate--h6__fontSize) * 0.95) !important;
  }

  .hs-elevate-mobile-break {
    display: block;
  }
}