/* ============================================================
   TYPOGRAPHY — typography.css
   Base heading/paragraph scale. Depends on variables.css.
   Page-specific type overrides belong in that page's own CSS
   file, not here.
   ============================================================ */

h1, .po-h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h2, .po-h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h3, .po-h3 { font-size: var(--font-size-xl);  font-weight: var(--font-weight-semibold); }
h4, .po-h4 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-semibold); }
h5, .po-h5 { font-size: var(--font-size-md);  font-weight: var(--font-weight-medium); }
p           { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
small       { font-size: var(--font-size-sm); }

/* Color is intentionally excluded from Elementor-rendered content above: Elementor Text Editor
   widgets set their color on the widget wrapper and rely on inheritance down to the <p>/<h*> tag.
   An explicit tag-selector color rule (even at zero extra specificity) always beats an inherited
   value, so a blanket `p{color:...}` here silently overrode every widget's own color choice
   sitewide. Elementor's own Theme Style Typography (Site Settings) already governs default
   heading/paragraph color for non-widget-overridden content, so this scoped rule only needs to
   cover truly native (non-Elementor) markup. */
h1:not(.elementor-widget *), .po-h1:not(.elementor-widget *),
h2:not(.elementor-widget *), .po-h2:not(.elementor-widget *),
h3:not(.elementor-widget *), .po-h3:not(.elementor-widget *),
h4:not(.elementor-widget *), .po-h4:not(.elementor-widget *),
h5:not(.elementor-widget *), .po-h5:not(.elementor-widget *) { color: var(--color-dark); }
p:not(.elementor-widget *) { color: var(--color-text); }

body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
}

/* Mobile type scale — reduce headings on mobile (breakpoint per MASTER-IMPLEMENTATION-STANDARDS.md 3.3) */
@media (max-width: 768px) {
  h1, .po-h1 { font-size: var(--font-size-2xl); }
  h2, .po-h2 { font-size: var(--font-size-xl); }
}