/**
 * Responsive Typography Enhancement
 * Ensures clamp values from theme settings work properly
 */

/* Make sure the clamp values are properly applied to headings */
h1, .h1 {
  font-size: var(--ti-h1-font-size) !important;
}

h2, .h2 {
  font-size: var(--ti-h2-font-size) !important;
}

h3, .h3 {
  font-size: var(--ti-h3-font-size) !important;
}

h4, .h4 {
  font-size: var(--ti-h4-font-size) !important;
}

h5, .h5 {
  font-size: var(--ti-h5-font-size) !important;
}

h6, .h6 {
  font-size: var(--ti-h6-font-size) !important;
}

/* Apply to common heading classes in components */
.mega-menu-title,
.category-cards-title,
.resources-title,
.events-hero-details .title,
.event-card-details .title,
.post-title {
  font-size: var(--ti-h3-font-size) !important;
}

/* Make sure all component headings respect responsive sizes */
@media (max-width: 768px) {
  /* Always respect the mobile min value from variables */
  h1, .h1 { font-size: var(--ti-h1-font-size) !important; }
  h2, .h2 { font-size: var(--ti-h2-font-size) !important; }
  h3, .h3 { font-size: var(--ti-h3-font-size) !important; }
  h4, .h4 { font-size: var(--ti-h4-font-size) !important; }
}

/* Allow theme's CSS clamp to control font sizes */
:root[data-responsive-typography="true"] h1 {
  font-size: var(--ti-h1-font-size);
}

:root[data-responsive-typography="true"] h2 {
  font-size: var(--ti-h2-font-size) ;
}

:root[data-responsive-typography="true"] h3 {
  font-size: var(--ti-h3-font-size) ;
}

:root[data-responsive-typography="true"] h4 {
  font-size: var(--ti-h4-font-size) ;
}

:root[data-responsive-typography="true"] h5 {
  font-size: var(--ti-h5-font-size) ;
}

:root[data-responsive-typography="true"] h6 {
  font-size: var(--ti-h6-font-size) ;
}

/* On large screens clamp will naturally reach the max; no hard overrides needed */