/*
 * Fluent Themes structural design system.
 * Owns typography roles, section/prose rhythm and family-level hero density.
 * Brand color is supplied by brand-foundation.css plus the selected profile.
 */

:root {
  --ft-type-display-h1: clamp(3.2rem, 7vw, 5.9rem);
  --ft-type-page-h1: clamp(2.7rem, 5.4vw, 4.5rem);
  --ft-type-article-h1: clamp(2.3rem, 4.6vw, 3.7rem);
  --ft-type-section-h2: clamp(1.9rem, 3.5vw, 2.85rem);
  --ft-type-prose-h2: clamp(1.7rem, 2.8vw, 2.2rem);
  --ft-type-h3: clamp(1.25rem, 2vw, 1.55rem);
  --ft-type-prose-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --ft-type-h4: clamp(1.05rem, 1.35vw, 1.2rem);

  --ft-section-space-y: clamp(3.75rem, 6.2vw, 5.75rem);
  --ft-section-space-y-compact: clamp(2.4rem, 4.5vw, 3.5rem);
  --ft-prose-h2-space-before: clamp(2.8rem, 5vw, 4rem);
  --ft-prose-h3-space-before: clamp(1.9rem, 3vw, 2.6rem);
  --ft-prose-flow: 1.15rem;
}

/* Typography roles ------------------------------------------------------- */
body.ft-theme-modern h1,
body.ft-theme-modern h2,
body.ft-theme-modern h3,
body.ft-theme-modern h4 {
  text-wrap: balance;
}

body.ft-theme-modern h1 {
  font-size: var(--ft-type-page-h1);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.04em;
  max-width: 20ch;
}

body.ft-theme-modern h2 {
  font-size: var(--ft-type-section-h2);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.026em;
  max-width: 24ch;
}

body.ft-theme-modern h3 {
  font-size: var(--ft-type-h3);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.018em;
}

body.ft-theme-modern h4 {
  font-size: var(--ft-type-h4);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
}

body.ft-theme-modern.ft-layout-product .ft-page-hero h1 {
  font-size: var(--ft-type-display-h1);
  line-height: .98;
  letter-spacing: -.05em;
  max-width: 14ch;
}

body.ft-theme-modern.ft-layout-hub .ft-page-hero h1,
body.ft-theme-modern.ft-layout-knowledgebase .ft-page-hero h1,
body.ft-theme-modern.ft-layout-company .ft-page-hero h1 {
  font-size: var(--ft-type-page-h1);
  max-width: 20ch;
}

body.ft-theme-modern.ft-layout-article .ft-page-hero h1 {
  font-size: var(--ft-type-article-h1);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 24ch;
}

body.ft-theme-modern .ft-card h2,
body.ft-theme-modern .ft-card h3,
body.ft-theme-modern .ft-cta-band h2,
body.ft-theme-modern .ft-disclosure h2,
body.ft-theme-modern .ft-disclosure h3,
body.ft-theme-modern .ft-site-footer h2 {
  max-width: none;
}

body.ft-theme-modern .ft-card h3 {
  font-size: clamp(1.15rem, 1.65vw, 1.38rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.018em;
}

/* Section rhythm --------------------------------------------------------- */
body.ft-theme-modern .ft-section {
  padding-block: var(--ft-section-space-y);
}

body.ft-theme-modern .ft-section--compact {
  padding-block: var(--ft-section-space-y-compact);
}

/* The section owns outer spacing. The prose shell must not add another
   section-sized padding layer. */
body.ft-theme-modern .ft-content-shell {
  padding-block: 0;
}

body.ft-theme-modern.ft-layout-company .ft-content-shell {
  width: min(100%, 58rem);
  margin-inline: auto;
}

/* Family-aware hero density --------------------------------------------- */
body.ft-theme-modern .ft-page-hero--reading,
body.ft-theme-modern .ft-page-hero--article {
  padding-block: clamp(4.25rem, 7vw, 6.25rem) clamp(2.75rem, 5vw, 4rem);
}

body.ft-theme-modern .ft-page-hero--marketing {
  padding-block: clamp(6.5rem, 11vw, 9.5rem) clamp(4.75rem, 8vw, 7rem);
}

/* Reading heroes are content surfaces, not dark marketing banners. Brand
   profiles may refine these colors after this structural layer loads. */
body.ft-theme-modern .ft-page-hero--reading,
body.ft-theme-modern .ft-page-hero--article {
  background: var(--ft-color-surface-soft);
  color: var(--ft-color-text);
}

body.ft-theme-modern .ft-page-hero--reading::after,
body.ft-theme-modern .ft-page-hero--article::after {
  opacity: 0;
}

body.ft-theme-modern .ft-page-hero--reading h1,
body.ft-theme-modern .ft-page-hero--reading h2,
body.ft-theme-modern .ft-page-hero--reading h3,
body.ft-theme-modern .ft-page-hero--article h1,
body.ft-theme-modern .ft-page-hero--article h2,
body.ft-theme-modern .ft-page-hero--article h3 {
  color: var(--ft-color-text);
}

body.ft-theme-modern .ft-page-hero--reading p,
body.ft-theme-modern .ft-page-hero--reading .ft-reading-measure,
body.ft-theme-modern .ft-page-hero--article p,
body.ft-theme-modern .ft-page-hero--article .ft-reading-measure {
  color: var(--ft-color-muted);
}

body.ft-theme-modern .ft-page-hero--reading .ft-chip,
body.ft-theme-modern .ft-page-hero--article .ft-chip {
  background: var(--ft-color-surface);
  border-color: var(--ft-color-border);
  color: var(--ft-color-primary-hover);
}

/* Prose rhythm ----------------------------------------------------------- */
body.ft-theme-modern .ft-prose {
  font-size: clamp(1rem, .35vw + .94rem, 1.075rem);
  line-height: 1.72;
}

body.ft-theme-modern .ft-prose p,
body.ft-theme-modern .ft-prose ul,
body.ft-theme-modern .ft-prose ol,
body.ft-theme-modern .ft-prose dl {
  margin-block: 0 var(--ft-prose-flow);
}

body.ft-theme-modern .ft-prose li + li {
  margin-top: .35rem;
}

body.ft-theme-modern .ft-prose h2 {
  margin-block: var(--ft-prose-h2-space-before) .9rem;
  max-width: none;
  font-size: var(--ft-type-prose-h2);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.022em;
}

body.ft-theme-modern .ft-prose h3 {
  margin-block: var(--ft-prose-h3-space-before) .7rem;
  max-width: none;
  font-size: var(--ft-type-prose-h3);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.015em;
}

body.ft-theme-modern .ft-prose h4 {
  margin-block: 1.6rem .55rem;
  max-width: none;
}

body.ft-theme-modern .ft-prose > h2:first-child,
body.ft-theme-modern .ft-prose > h3:first-child,
body.ft-theme-modern .ft-prose > h4:first-child {
  margin-top: 0;
}

body.ft-theme-modern .ft-prose h2 + h3 {
  margin-top: 1.45rem;
}

body.ft-theme-modern .ft-prose figure,
body.ft-theme-modern .ft-prose table,
body.ft-theme-modern .ft-prose blockquote,
body.ft-theme-modern .ft-prose pre {
  margin-block: 1.75rem 2rem;
}

body.ft-theme-modern .ft-prose > :last-child {
  margin-bottom: 0;
}

/* Article shell ---------------------------------------------------------- */
body.ft-theme-modern .ft-article-layout {
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

body.ft-theme-modern .ft-article-body {
  padding: clamp(1.35rem, 3vw, 2.15rem);
}

body.ft-theme-modern .ft-article-toc__summary {
  font-weight: 700;
}

/* Utility/status pages --------------------------------------------------- */
body.ft-theme-modern.ft-page-slug-thank-you-for-your-comment .ft-content-shell,
body.ft-theme-modern.ft-page-slug-login .ft-content-shell,
body.ft-theme-modern.ft-page-slug-registration .ft-content-shell {
  width: min(100%, 42rem);
  margin-inline: auto;
}

body.ft-theme-modern.ft-page-slug-thank-you-for-your-comment .ft-content-shell {
  text-align: center;
}

/* Footer headings are utility labels, not page-level H2s. */
body.ft-theme-modern .ft-site-footer h2 {
  font-size: .98rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .01em;
  margin-bottom: var(--ft-space-3);
}

@media (max-width: 64rem) {
  body.ft-theme-modern .ft-page-hero--marketing {
    padding-block: 5rem 4.25rem;
  }
}

@media (max-width: 48rem) {
  :root {
    --ft-section-space-y: 3rem;
    --ft-section-space-y-compact: 2.25rem;
    --ft-prose-h2-space-before: 2.55rem;
    --ft-prose-h3-space-before: 1.8rem;
  }

  body.ft-theme-modern h1,
  body.ft-theme-modern .ft-page-hero h1 {
    font-size: clamp(2.25rem, 10vw, 3.25rem);
    line-height: 1.04;
    max-width: none;
  }

  body.ft-theme-modern.ft-layout-product .ft-page-hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.75rem);
    line-height: 1;
  }

  body.ft-theme-modern.ft-layout-article .ft-page-hero h1 {
    font-size: clamp(2.15rem, 9vw, 2.95rem);
    line-height: 1.06;
  }

  body.ft-theme-modern h2 {
    max-width: none;
  }

  body.ft-theme-modern .ft-page-hero--reading,
  body.ft-theme-modern .ft-page-hero--article {
    padding-block: 3.5rem 2.6rem;
  }

  body.ft-theme-modern .ft-page-hero--marketing {
    padding-block: 4.25rem 3.75rem;
  }

  body.ft-theme-modern .ft-content-shell,
  body.ft-theme-modern .ft-article-body {
    font-size: 1rem;
  }

  body.ft-theme-modern .ft-article-body {
    padding: 1.15rem;
  }
}