/* Shared typography for the Huy Huynh Pack profile and QR templates.
 * Loaded after each layout stylesheet. Adjust the scale here for both pages.
 */
:is(.hpp, .htpqr) {
  --htp-type-body: 18px;
  --htp-type-leading: 1.65;
  --htp-type-control: 16px;
  --htp-type-meta: 14px;
  --htp-type-h1: clamp(54px, 4.5vw, 76px);
  --htp-type-h2: clamp(36px, 3.4vw, 52px);
  --htp-type-h3: 23px;
  --htp-type-article: 20px;
  --htp-type-eyebrow: 20px;
  --htp-type-button: 19px;
  --htpqr-text: var(--htp-type-body);
  --htpqr-card-text: var(--htp-type-control);
  --htpqr-small-text: var(--htp-type-meta);
  font: 400 var(--htp-type-body)/var(--htp-type-leading) "Lato", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Hero, product cards, solutions, articles, help, FAQ, contact and footer
 * all use the same prose size. An eyebrow or hero slogan is a display label.
 */
.hpp p:not(.hpp-eyebrow),
.hpp #hpp-qr-preview p,
.htpqr p:not(.htpqr-eyebrow):not(.htpqr-hero__tagline),
.htpqr-print-cta li small,
.htpqr-dynamic small,
.hpp-media-placeholder small {
  font: 400 var(--htp-type-body)/var(--htp-type-leading) "Lato", Arial, sans-serif;
}

:is(.hpp, .htpqr) h1,
:is(.hpp, .htpqr) h2,
:is(.hpp, .htpqr) h3,
.hpp .hpp-product-small h3,
.hpp .hpp-solution-list h3 {
  font-family: "Anton", Arial, sans-serif;
  font-weight: 400;
}
:is(.hpp, .htpqr) h1 {
  font-size: var(--htp-type-h1);
  line-height: 1.2;
}
:is(.hpp, .htpqr) h2 {
  font-size: var(--htp-type-h2);
  line-height: 1.2;
}
:is(.hpp, .htpqr) h3,
.hpp .hpp-product-small h3,
.hpp .hpp-solution-list h3 {
  font-size: var(--htp-type-h3);
  line-height: 1.3;
}
.hpp .hpp-article h3,
.hpp .hpp-featured h3,
.htpqr .htpqr-post-card h3,
.htpqr .htpqr-info-grid h3 {
  font: 700 var(--htp-type-article)/1.4 "Lato", Arial, sans-serif;
  text-transform: none;
}
.hpp .hpp-eyebrow,
.htpqr .htpqr-eyebrow {
  font: 400 var(--htp-type-eyebrow)/1.4 "Anton", Arial, sans-serif;
}
.htpqr .htpqr-accordions summary {
  font: 400 var(--htp-type-h3)/1.3 "Anton", Arial, sans-serif;
}

/* Navigation, buttons and form controls keep their own shared roles. */
.hpp .hpp-btn,
.hpp .hpp-download,
.hpp .hpp-tabs button,
.htpqr .htpqr-button,
.htpqr .htpqr-downloads button,
.htpqr .htpqr-tabs button {
  font: 400 var(--htp-type-button)/1.3 "Anton", Arial, sans-serif;
}
.hpp .hpp-menu a,
.htpqr .htpqr-menu a {
  font: 400 21px/1.3 "Anton", Arial, sans-serif;
}
.hpp label,
.htpqr .htpqr-tab-panel label,
.htpqr .htpqr-contact-form label {
  font: 700 var(--htp-type-control)/1.5 "Lato", Arial, sans-serif;
}
.hpp input:not([type="hidden"]),
.hpp select,
.hpp textarea,
.htpqr input:not([type="hidden"]),
.htpqr select,
.htpqr textarea {
  font: 400 var(--htp-type-control)/1.5 "Lato", Arial, sans-serif;
}
.hpp .hpp-product-link,
.hpp .hpp-article span,
.hpp .hpp-filters a:not(.hpp-btn),
.hpp .hpp-social a,
.hpp .hpp-qr-help,
.htpqr .htpqr-app-card a,
.htpqr .htpqr-post-card__link,
.htpqr .htpqr-post-filters a,
.htpqr .htpqr-trust li {
  font: 700 var(--htp-type-control)/1.5 "Lato", Arial, sans-serif;
}
.hpp .hpp-needs a {
  font: 700 var(--htp-type-body)/1.5 "Lato", Arial, sans-serif;
}
.hpp .hpp-email,
.hpp .hpp-zalo,
.htpqr .htpqr-contact__email,
.htpqr .htpqr-zalo {
  font: 700 var(--htp-type-body)/var(--htp-type-leading) "Lato", Arial, sans-serif;
}
.hpp .hpp-article time,
.htpqr .htpqr-post-card time,
.htpqr .htpqr-breadcrumbs .htpqr-container {
  font: 400 var(--htp-type-meta)/1.6 "Lato", Arial, sans-serif;
}

@media (min-width: 901px) and (max-width: 1600px) {
  :is(.hpp, .htpqr) { --htp-type-h1: clamp(48px, 4.5vw, 66px); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .hpp .hpp-menu a,
  .htpqr .htpqr-menu a { font-size: 19px; }
}
@media (max-width: 900px) {
  .hpp .hpp-menu a,
  .htpqr .htpqr-menu a { font-size: 20px; }
}
@media (max-width: 700px) {
  :is(.hpp, .htpqr) {
    --htp-type-body: 16px;
    --htp-type-h1: clamp(39px, 10.8vw, 54px);
    --htp-type-h2: clamp(30px, 8.5vw, 38px);
    --htp-type-h3: 21px;
    --htp-type-eyebrow: 16px;
    --htp-type-button: 18px;
  }
}
@media (max-width: 360px) {
  :is(.hpp, .htpqr) { --htp-type-h1: 38px; }
}