/**
 * Heading Component Styles
 *
 * Semantic heading element with configurable levels, variants, and styling.
 * Provides consistent typography across hero sections, page sections, and cards.
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

/* ============================================
   BASE HEADING STYLES
   ============================================ */

.hub-heading {
  /* Typography */
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  
  /* Spacing */
  margin: 0;
  
  /* Color */
  color: var(--color-gray-900);
  
  /* Layout */
  display: block;
}


/* ============================================
   VARIANTS - Context-based sizing
   ============================================ */

/* Hero Variant - Large, dramatic headings for hero sections */
.hub-heading--hero {
  font-size: clamp(var(--font-size-4xl), 6vw, var(--font-size-6xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* Section Variant - Main section headings */
.hub-heading--section {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
}

/* Subsection Variant - Secondary section headings */
.hub-heading--subsection {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
}

/* Card Variant - Smaller headings for cards and components */
.hub-heading--card {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}


/* ============================================
   COLOR MODIFIERS
   ============================================ */

.hub-heading--inherit {
  color: inherit;
}

.hub-heading--primary {
  color: var(--color-primary);
}

.hub-heading--secondary {
  color: var(--color-primary-dark);
}

.hub-heading--dark {
  color: var(--color-gray-900);
}

.hub-heading--light {
  color: var(--color-gray-600);
}

.hub-heading--white {
  color: var(--color-white);
}

.hub-heading--muted {
  color: var(--color-gray-500);
}


/* ============================================
   ALIGNMENT MODIFIERS
   ============================================ */

.hub-heading--left {
  text-align: left;
}

.hub-heading--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hub-heading--right {
  text-align: right;
}


/* ============================================
   MAX-WIDTH MODIFIER
   ============================================ */

.hub-heading--max-width {
  /* Max-width is set inline via style attribute */
  /* This ensures the heading doesn't become too wide */
}

/* Center-aligned headings with max-width */
.hub-heading--center.hub-heading--max-width {
  margin-left: auto;
  margin-right: auto;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Hero - Reduce size on mobile */
  .hub-heading--hero {
    font-size: clamp(var(--font-size-2xl), 8vw, var(--font-size-4xl));
  }
  
  /* Section - Smaller on mobile */
  .hub-heading--section {
    font-size: var(--font-size-4xl);
  }
  
  /* Subsection - Slightly smaller */
  .hub-heading--subsection {
    font-size: var(--font-size-3xl);
  }
  
  /* Card - Keep readable size */
  .hub-heading--card {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  /* Hero - Further reduction for very small screens */
  .hub-heading--hero {
    font-size: clamp(var(--font-size-2xl), 10vw, var(--font-size-3xl));
  }
  
  /* Section */
  .hub-heading--section {
    font-size: var(--font-size-3xl);
  }
  
  /* Subsection */
  .hub-heading--subsection {
    font-size: var(--font-size-2xl);
  }
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Color Contrast Compliance (WCAG 2.1 AA)
 * - dark, primary, secondary: Pass on white/light backgrounds (> 4.5:1)
 * - white: Pass on primary/dark backgrounds (> 4.5:1)
 * - light, muted: Use only on dark backgrounds for sufficient contrast
 */

/* Improve readability for long headings */
.hub-heading--hero.hub-heading--max-width,
.hub-heading--section.hub-heading--max-width,
.hub-heading--subsection.hub-heading--max-width {
  word-wrap: break-word;
  overflow-wrap: break-word;
}