/* ============================================================================
   SIRO Section Header — widget styles
   Loaded only when a Section Header widget is on the page (via get_style_depends).
   Consumes --siro-* tokens from the child theme's tokens.css.
   ============================================================================ */

.siro-section-header {
  /* Use grid so margins between children are predictable, not collapsing */
  display: block;
  max-width: 100%;
}

.siro-section-header--center {
  text-align: center;
  margin-inline: auto;
}

.siro-section-header__eyebrow {
  display: inline-block;
  /* Defaults below are last-resort fallbacks. Editors override via the
     widget's Eyebrow Style controls (which bind to the kit globals). */
  font-family: var(--siro-font-body);
  font-weight: 600;
  font-size: var(--siro-fs-xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--siro-color-accent);
  margin: 0 0 var(--siro-space-3);
}

.siro-section-header__title {
  font-family: var(--siro-font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--siro-text);
  margin: 0 0 var(--siro-space-4);
}

.siro-section-header__title:last-child {
  margin-bottom: 0;
}

.siro-section-header__subtitle {
  font-family: var(--siro-font-body);
  font-weight: 400;
  font-size: var(--siro-fs-md);
  line-height: 1.7;
  color: var(--siro-text-muted);
  margin: 0;
  max-width: 70ch;
}

.siro-section-header--center .siro-section-header__subtitle {
  margin-inline: auto;
}

/* On dark/navy section backgrounds, V3 inverts text colors.
   Authors apply siro-on-dark to a parent element (or use a Section
   background of var(--siro-color-primary) / -primary-dark). */
.siro-on-dark .siro-section-header__title,
[data-siro-bg="navy"] .siro-section-header__title,
[data-siro-bg="navy-dark"] .siro-section-header__title {
  color: var(--siro-text-inverse);
}

.siro-on-dark .siro-section-header__subtitle,
[data-siro-bg="navy"] .siro-section-header__subtitle,
[data-siro-bg="navy-dark"] .siro-section-header__subtitle {
  color: var(--siro-text-inverse-muted);
}

.siro-on-dark .siro-section-header__eyebrow,
[data-siro-bg="navy"] .siro-section-header__eyebrow,
[data-siro-bg="navy-dark"] .siro-section-header__eyebrow {
  color: var(--siro-color-accent);
}