/**
 * Font Loading Styles
 * Handles the appearance of content during font loading transitions
 */

/* Initially, the page is in a loading state for fonts */
html.fonts-loading {
  /* Slight opacity change to make font swap less jarring */
  opacity: 0.98;
  transition: opacity 0.2s;
}

/* When fonts are loaded, we can apply additional optimizations */
html.fonts-loaded {
  /* Font loading is complete, and proper fonts are applied */
  opacity: 1;
  transition: opacity 0.2s;
}

/* When fonts fail to load, still transition back to full opacity */
html.fonts-failed {
  opacity: 1;
  transition: opacity 0.2s;
}

/* 
 * IMPORTANT: Initially we don't apply custom fonts at all
 * They will only be applied when the .fonts-loaded class is present
 * This prevents FOUT (Flash of Unstyled Text) if we can apply the class early
 */

/* Heading styles - initially system fonts */
.font-heading {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: font-family 0.1s;
}

/* Body text styles - initially system fonts */
.font-sans {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: font-family 0.1s;
}

/* Only apply custom fonts when .fonts-loaded class is present */
html.fonts-loaded .font-heading {
  font-family: 'Literata', serif;
}

html.fonts-loaded .font-sans {
  font-family: 'Rubik', sans-serif;
}

/* Prevent layout shifts during font loading by slightly adjusting size metrics */
html:not(.fonts-loaded) .font-heading {
  letter-spacing: -0.01em; /* Subtle adjustment to match metrics */
}

html:not(.fonts-loaded) .font-sans {
  letter-spacing: -0.01em; /* Subtle adjustment to match metrics */
}

/* Utility class that can be used to hide content until fonts are loaded */
.hide-until-fonts-loaded {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

html.fonts-loaded .hide-until-fonts-loaded {
  opacity: 1;
}

/* Specific source classes for more granular styling if needed */
html.fonts-google .font-heading,
html.fonts-self-hosted .font-heading {
  /* Same styles for now, but can be differentiated if needed */
  font-family: 'Literata', serif;
}

html.fonts-google .font-sans,
html.fonts-self-hosted .font-sans {
  /* Same styles for now, but can be differentiated if needed */
  font-family: 'Rubik', sans-serif;
}