/*
 * Agua Topone site-wide UI consistency layer — 2026-07-30
 *
 * Loaded after page-specific styles. It defines the invariants that must not
 * drift when pages are built in different batches:
 * - one heading/control font family;
 * - three intentional H1 tiers (display, standard page, long-form article);
 * - one section-heading tier per content context;
 * - one closing-CTA heading scale;
 * - responsive protection for long technical code and formulas.
 *
 * Page structure, content, palette roles and component-specific layouts remain
 * owned by their page templates.
 */

:root {
  --at-type-family: "Roboto", Arial, sans-serif;
  --at-type-h1-display: clamp(40px, 4.35vw, 60px);
  --at-type-h1-page: clamp(36px, 4.2vw, 45px);
  --at-type-h1-article: clamp(30px, 3.2vw, 38px);
  --at-type-h2-display: clamp(32px, 3.1vw, 42px);
  --at-type-h2-section: clamp(27px, 3vw, 32px);
  --at-type-h2-authority: clamp(28px, 3vw, 38px);
  --at-type-h2-article: clamp(23px, 2vw, 26px);
  --at-type-h3-section: clamp(20px, 1.8vw, 22px);
  --at-type-weight-heading: 700;
  --at-type-weight-subheading: 600;
  --at-type-line-display: 1.08;
  --at-type-line-heading: 1.22;
}

/* Global typography invariants. Component CSS may choose size and color, but
 * not a different family for headings or controls. */
body.site-body :is(h1, h2, h3, h4, h5, h6),
body.site-body :is(button, input, textarea, select) {
  font-family: var(--at-type-family) !important;
}

/* Display heroes: homepage, News archive, authority hubs and utility heroes. */
body.site-body :is(
  .hp-d,
  .arc,
  .about-review,
  .contact-online,
  .privacy-review,
  .search-review,
  .at-well,
  .at-evidence,
  .at-compliance,
  .at-quality,
  .at-cases,
  .at-applications,
  .at-resources
) h1 {
  font-size: var(--at-type-h1-display);
  font-weight: var(--at-type-weight-heading);
  line-height: var(--at-type-line-display);
}

/* Standard page heroes: products, series, FAQ/Support/Technology/ODM and
 * converted POU/POE landing pages. */
body.site-body :is(
  .ip,
  .product-directory,
  .ag40002,
  .ato-series,
  .pd--application
) h1,
body.site-body #content.site-main .page-header h1 {
  font-size: var(--at-type-h1-page);
  font-weight: var(--at-type-weight-heading);
  line-height: var(--at-type-line-heading);
}

/* Long-form article titles need a narrower measure and a calmer scale than
 * full-bleed marketing heroes. */
body.site-body .nat .nat__title {
  font-size: var(--at-type-h1-article);
  font-weight: var(--at-type-weight-heading);
  line-height: 1.15;
  letter-spacing: -.022em;
}

/* Standard section headings used by product and interior-page systems. */
body.site-body :is(.ip, .product-directory, .ag40002, .ato-series) h2 {
  font-size: var(--at-type-h2-section);
  font-weight: var(--at-type-weight-subheading);
  line-height: 1.24;
}

/* Engineering/authority pages share a slightly more prominent section scale. */
body.site-body :is(
  .at-well,
  .at-evidence,
  .at-compliance,
  .at-quality,
  .at-cases,
  .at-applications,
  .at-resources
) h2 {
  font-size: var(--at-type-h2-authority);
  font-weight: var(--at-type-weight-heading);
  line-height: 1.18;
}

/* News archive page headings, About sections and homepage editorial sections
 * all use the same display-section tier. */
body.site-body :is(.arc, .about-review, .hp-d) h2 {
  font-size: var(--at-type-h2-display);
  font-weight: var(--at-type-weight-heading);
  line-height: 1.14;
}

/* Legal, search and contact panels are regular sections, not display heroes. */
body.site-body :is(.privacy-review, .search-review, .contact-online) h2,
body.site-body #content.site-main h2 {
  font-size: var(--at-type-h2-section);
  font-weight: var(--at-type-weight-subheading);
  line-height: 1.24;
}

/* Long-form article hierarchy. */
body.site-body .nat__content h2 {
  font-size: var(--at-type-h2-article);
  font-weight: var(--at-type-weight-subheading);
  line-height: 1.3;
}

body.site-body .nat__content h3 {
  font-size: 20px;
  font-weight: var(--at-type-weight-subheading);
  line-height: 1.35;
}

body.site-body .nat__content h4 {
  font-size: 18px;
  font-weight: var(--at-type-weight-subheading);
  line-height: 1.4;
}

/* The same type of closing conversion block must not jump from a 32px H2 on
 * FAQ/Product pages to a 54px H2 on News articles. */
body.site-body :is(
  .ip__final-cta,
  .ip__cta,
  .arc__cta,
  .nat__project,
  .nat__related-head,
  .product-directory__closing,
  .ag40002__closing
) h2 {
  font-size: var(--at-type-h2-display);
  font-weight: var(--at-type-weight-heading);
  line-height: 1.14;
}

/* Shared supporting-card headings. */
body.site-body :is(
  .ip,
  .product-directory,
  .ag40002,
  .at-well,
  .at-evidence,
  .at-compliance,
  .at-quality,
  .at-cases,
  .at-applications,
  .at-resources
) h3 {
  font-size: var(--at-type-h3-section);
  font-weight: var(--at-type-weight-subheading);
}

/* Technical snippets must scroll inside the reading column instead of
 * widening the entire mobile page. */
body.site-body .nat__content pre,
body.site-body .nat__content .wp-block-code {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

body.site-body .nat__content pre > code,
body.site-body .nat__content .wp-block-code > code {
  display: block;
  min-width: max-content;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 767px) {
  :root {
    --at-type-h1-display: clamp(38px, 10vw, 42px);
    --at-type-h1-page: 36px;
    --at-type-h1-article: 30px;
    --at-type-h2-display: clamp(28px, 8vw, 31px);
    --at-type-h2-section: clamp(25px, 7vw, 28px);
    --at-type-h2-authority: clamp(27px, 7.4vw, 29px);
    --at-type-h2-article: 23px;
  }
}