/* ==========================================================================
   Texium Solutions — Section Heading widget
   Consumes design tokens from theme.css only. The eyebrow reuses the
   shared .texium-eyebrow class from theme.css — no separate styling
   declared here.
   ========================================================================== */

.texium-section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.texium-section-heading .texium-eyebrow {
  margin-bottom: var(--texium-space-sm);
}

/* Heading */

.texium-section-heading__heading {
  margin: 0 0 var(--texium-space-sm);
  font-family: var(--texium-font-heading);
  font-weight: var(--texium-weight-bold);
  line-height: var(--texium-leading-heading);
  letter-spacing: var(--texium-tracking-tight);
  font-size: var(--texium-font-size-h2);
  color: #000;
}

:root[data-theme='dark'] .texium-section-heading__heading {
  color: var(--texium-heading);
}

/* Highlight: gradient variant reuses the same dark-to-light Texium
   gradient technique as the Hero widget. Solid variant is a plain color
   swap for cases where a full gradient would be too busy inline with
   surrounding content (cards, feature lists, etc.). */

.texium-section-heading__highlight--gradient {
  background: linear-gradient(
    100deg,
    var(--texium-primary-dark),
    var(--texium-x-blue) 35%,
    var(--texium-x-cyan) 65%,
    var(--texium-x-bright)
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: texium-section-heading-gradient-flow 5s ease-in-out infinite;
}

.texium-section-heading--gradient-premium .texium-section-heading__highlight--gradient {
  background: linear-gradient(
    100deg,
    var(--texium-primary-dark),
    var(--texium-primary-light) 40%,
    var(--texium-x-cyan) 70%,
    var(--texium-x-bright)
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.texium-section-heading--gradient-custom .texium-section-heading__highlight--gradient {
  background: linear-gradient(
    100deg,
    var(--texium-primary-dark),
    var(--texium-heading-gradient-from, var(--texium-x-blue)) 40%,
    var(--texium-heading-gradient-to, var(--texium-x-cyan)) 70%,
    var(--texium-x-bright)
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes texium-section-heading-gradient-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .texium-section-heading__highlight--gradient {
    animation: none;
  }
}

.texium-section-heading__highlight--color {
  color: var(--texium-accent);
}

/* Subtext */

.texium-section-heading__subtext {
  margin: 0;
  max-width: 60ch;
  font-size: var(--texium-font-size-lg);
  line-height: var(--texium-leading-body);
  color: var(--texium-text-muted);
}