/**
 * Project semantic heading defaults.
 *
 * Keep these rules in Mercury's base cascade layer: SDC-scoped styles and
 * Tailwind utility classes remain available as deliberate display variants.
 */
@layer base {
  :root {
    --site-heading-h1-size: clamp(2.25rem, calc(1.5833rem + 3.3333vw), 3.5rem);
    --site-heading-h2-size: clamp(1.875rem, calc(1.6667rem + 1.0417vw), 2.5rem);
    --site-heading-h3-size: clamp(1.5rem, calc(1.4167rem + 0.4167vw), 1.75rem);
    --site-heading-h4-size: clamp(1.25rem, calc(1.1667rem + 0.4167vw), 1.5rem);
    --site-heading-h5-size: clamp(1.125rem, calc(1.0833rem + 0.2083vw), 1.25rem);
    --site-heading-h6-size: clamp(1rem, calc(0.9583rem + 0.2083vw), 1.125rem);

    --site-heading-h1-weight: 300;
    --site-heading-h2-weight: 300;
    --site-heading-h3-weight: 400;
    --site-heading-h4-weight: 500;
    --site-heading-h5-weight: 500;
    --site-heading-h6-weight: 600;

    --site-heading-h1-line-height: 1.15;
    --site-heading-h2-line-height: 1.2;
    --site-heading-h3-line-height: 1.25;
    --site-heading-h4-line-height: 1.3;
    --site-heading-h5-line-height: 1.35;
    --site-heading-h6-line-height: 1.4;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--primary);
    font-family: var(--font-sans);
  }

  h1 {
    margin-block: 0 1rem;
    font-size: var(--site-heading-h1-size);
    font-weight: var(--site-heading-h1-weight);
    line-height: var(--site-heading-h1-line-height);
  }

  h2 {
    margin-block: 2rem 0.75rem;
    font-size: var(--site-heading-h2-size);
    font-weight: var(--site-heading-h2-weight);
    line-height: var(--site-heading-h2-line-height);
  }

  h3 {
    margin-block: 1.5rem 0.625rem;
    font-size: var(--site-heading-h3-size);
    font-weight: var(--site-heading-h3-weight);
    line-height: var(--site-heading-h3-line-height);
  }

  h4 {
    margin-block: 1.25rem 0.5rem;
    font-size: var(--site-heading-h4-size);
    font-weight: var(--site-heading-h4-weight);
    line-height: var(--site-heading-h4-line-height);
  }

  h5 {
    margin-block: 1rem 0.5rem;
    font-size: var(--site-heading-h5-size);
    font-weight: var(--site-heading-h5-weight);
    line-height: var(--site-heading-h5-line-height);
  }

  h6 {
    margin-block: 0.75rem 0.375rem;
    font-size: var(--site-heading-h6-size);
    font-weight: var(--site-heading-h6-weight);
    line-height: var(--site-heading-h6-line-height);
  }
}

/* Mercury's standard page title adds responsive size utility classes.
 * Constrain this rule to the title slot in Mercury's page shell so display
 * variants elsewhere continue to use their explicit utility classes. */
@layer utilities {
  .layout-container > header[role="banner"] > .container h1 {
    margin-block: 1.5rem 0.375rem;
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: var(--site-heading-h1-size);
    font-weight: var(--site-heading-h1-weight);
    letter-spacing: normal;
    line-height: var(--site-heading-h1-line-height);
  }
}