/* Production-Ready Animated Underlines for Section Titles */

/* 1. Title Container - Centers the title and provides spacing */
.title-container {
  text-align: center;
  padding-top: var(--space-l, 2rem);
  margin-bottom: var(--space-l, 2rem);
}

/* 2. Base title styling - maintains existing appearance */
.section-title, .page-title, .hero__title {
  position: relative;
  margin-bottom: 1.5rem;
  /* Remove display: inline-block - will be handled by wrapper */
}

/* 3. Title Wrapper - Controls underline width and positioning */
.title-wrapper {
  display: inline-block;
  position: relative;
  padding-bottom: 8px; /* Space for underline */
}

/* 9. Keyframe for smooth draw animation */
@keyframes drawLine {
  from { transform: scaleX(0) !important; }
  to   { transform: scaleX(1) !important; }
}

/* 4. Real underline element - transform-based for iOS/Safari reliability */
.title-underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary-red, #E53935);
  /* Use clip-path for reveal; no transform so JS animations aren’t blocked */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  backface-visibility: hidden;
}

/* Trigger draw animation on real element */
.title-underline.animate {
  /* Optional CSS-only animation fallback if class is applied */
  animation: underlineClipReveal 0.6s ease-out 0.2s forwards;
}

@keyframes underlineClipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* 5. Reduced motion accessibility - instant appearance */
@media (prefers-reduced-motion: reduce) {
  .title-underline {
  transform: scaleX(1) !important; /* Show immediately */
  animation: none !important;
  }
}

/* 6. High contrast mode support */
@media (forced-colors: active) {
  .title-underline {
    background-color: Highlight;
  }
}

/* 7. Print styles - ensure underlines appear in print */
@media print {
  .title-underline {
    transform: scaleX(1) !important;
    background-color: #000 !important;
  }
}

/* Fallback utility to force show underline when JS animation fails */
.title-underline.force-visible {
  transform: scaleX(1) !important;
}