/* Offline Font Fallbacks - Emergency Backup System */

/* 
 * This file provides robust fallbacks when Google Fonts fail completely
 * Uses system fonts that closely match the original font metrics
 */

@media (prefers-reduced-data: reduce) {
  /* For users on limited data plans */
  * {
    font-family: system-ui, -apple-system, sans-serif !important;
  }
}

/* Emergency font stack when all external fonts fail */
.fonts-offline,
.no-network {
  /* Inter fallback */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

.fonts-offline .pm__title-section,
.fonts-offline .pm__link-button-inner,
.fonts-offline .lightbox-counter,
.no-network .pm__title-section,
.no-network .pm__link-button-inner,
.no-network .lightbox-counter {
  /* JetBrains Mono fallback */
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", "Consolas", "Courier New", monospace;
}

/* Icon font fallbacks */
.fonts-offline .material-symbols-rounded::before,
.fonts-offline .material-symbols-outlined::before,
.no-network .material-symbols-rounded::before,
.no-network .material-symbols-outlined::before {
  content: "⚫"; /* Generic symbol */
  font-family: sans-serif;
}

/* Specific icon mappings for critical UI elements */
.fonts-offline .material-symbols-rounded[data-icon="close"]::before,
.no-network .material-symbols-rounded[data-icon="close"]::before {
  content: "✕";
}

.fonts-offline .material-symbols-rounded[data-icon="arrow_back"]::before,
.no-network .material-symbols-rounded[data-icon="arrow_back"]::before {
  content: "←";
}

.fonts-offline .material-symbols-rounded[data-icon="arrow_forward"]::before,
.no-network .material-symbols-rounded[data-icon="arrow_forward"]::before {
  content: "→";
}

.fonts-offline .material-symbols-rounded[data-icon="play_arrow"]::before,
.no-network .material-symbols-rounded[data-icon="play_arrow"]::before {
  content: "▶";
}

.fonts-offline .material-symbols-rounded[data-icon="chevron_left"]::before,
.no-network .material-symbols-rounded[data-icon="chevron_left"]::before {
  content: "‹";
}

.fonts-offline .material-symbols-rounded[data-icon="chevron_right"]::before,
.no-network .material-symbols-rounded[data-icon="chevron_right"]::before {
  content: "›";
}

/* System font metrics matching */
.system-font-inter {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.011em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.system-font-mono {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Consolas", monospace;
  letter-spacing: 0em;
  font-variant-ligatures: none;
}

/* Graceful degradation for text shadows and effects */
.fonts-offline .pm__title-section,
.no-network .pm__title-section {
  text-shadow: none;
  color: #ffffff !important;
}

/* Ensure readability without custom fonts */
.fonts-offline .pm__text,
.fonts-offline .pm__text-alt,
.no-network .pm__text,
.no-network .pm__text-alt {
  font-size: 34px; /* Slightly smaller to compensate for system font differences */
  line-height: 1.3;
}

/* Loading state indicators */
.font-status-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  z-index: 10000;
  display: none;
}

.fonts-offline .font-status-indicator,
.no-network .font-status-indicator {
  display: block;
}

.fonts-offline .font-status-indicator::after {
  content: " (Offline Mode)";
}

.no-network .font-status-indicator::after {
  content: " (No Network)";
}

/* Performance optimizations for system fonts */
.system-fonts-only * {
  font-synthesis: none;
  font-display: block;
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
  .font-status-indicator {
    background: rgba(200, 50, 50, 0.9);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fonts-offline *,
  .no-network * {
    transition: none !important;
    animation: none !important;
  }
}