/**
 * Custom Fonts & Emoji Support
 * This file handles emoji rendering and custom font installation
 */

/* ==================== EMOJI FONTS ==================== */

/**
 * Google Noto Color Emoji - Open-source emoji font with full Unicode support
 * This fixes black box emoji rendering issues
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

/**
 * Global emoji font stack
 * Priority order:
 * 1. Noto Color Emoji (cross-platform consistency)
 * 2. Apple Color Emoji (iOS/macOS native)
 * 3. Segoe UI Emoji (Windows native)
 * 4. Twemoji Mozilla (Firefox fallback)
 */
@font-face {
  font-family: 'emoji-stack';
  src: local('Noto Color Emoji'),
       local('Apple Color Emoji'),
       local('Segoe UI Emoji'),
       local('Noto Color Emoji'),
       local('Twemoji Mozilla');
}

/* Apply emoji fonts globally */
body,
html,
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-brands) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif,
               "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji" !important;
}

/* Force color emoji rendering in modern browsers */
@supports (font-variant-emoji: emoji) {
  body {
    font-variant-emoji: emoji;
  }
}

/* Specific emoji rendering for content areas */
.emoji,
.message-content,
.post-content,
.caption,
textarea,
input[type="text"],
.card-body,
.modal-body,
p:not(.fa):not(.fas):not(.far):not(.fab),
span:not(.fa):not(.fas):not(.far):not(.fab),
div:not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif,
               "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji" !important;
}

/* ==================== CUSTOM FONTS ==================== */

/**
 * Custom Font Template
 * 
 * To add your own fonts:
 * 1. Upload font files to static/fonts/ directory
 * 2. Uncomment and customize the @font-face below
 * 3. Update the font-family in the CSS rules
 * 
 * Example font formats:
 * - .woff2 (best compression, modern browsers)
 * - .woff (fallback for older browsers)
 * - .ttf (universal fallback)
 */

/*
@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/CustomFont.woff2') format('woff2'),
       url('/static/fonts/CustomFont.woff') format('woff'),
       url('/static/fonts/CustomFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/

/* Apply custom font to headings (example) */
/*
h1, h2, h3, h4, h5, h6 {
  font-family: 'CustomFont', sans-serif, "Noto Color Emoji" !important;
}
*/

/* ==================== GOOGLE FONTS ==================== */

/**
 * Google Fonts Integration
 * 
 * To use Google Fonts:
 * 1. Browse fonts at https://fonts.google.com
 * 2. Copy the @import or <link> code
 * 3. Add @import below or link in base.html
 * 
 * Popular choices:
 * - Inter (modern UI)
 * - Roboto (clean, readable)
 * - Poppins (bold, modern)
 * - Montserrat (professional)
 */

/* Example: Inter font
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
               sans-serif, "Noto Color Emoji", "Apple Color Emoji" !important;
}
*/

/* ==================== FONT AWESOME EMOJI ALTERNATIVES ==================== */

/**
 * If you prefer icon fonts over emoji:
 * Font Awesome is already loaded in base.html
 * Use: <i class="fas fa-smile"></i>
 */

/* ==================== EMOJI RENDERING FIXES ==================== */

/* Prevent emoji from being rendered as monochrome text */
.emoji-text,
.user-message,
.ai-response,
.content-preview {
  font-variant-emoji: emoji;
  text-rendering: optimizeLegibility;
}

/* Fix for Firefox emoji rendering issues */
@-moz-document url-prefix() {
  body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif,
                 "Noto Color Emoji" !important;
  }
}

/* Ensure emojis don't break layout */
.emoji {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* ==================== VIDEO OVERLAY TEXT FONTS ==================== */

/**
 * For video overlay rendering (FFmpeg)
 * FFmpeg supports: TTF, OTF fonts
 * Upload custom fonts to static/fonts/ and reference in video_overlay.py
 */

/* Default video overlay font recommendation */
/*
@font-face {
  font-family: 'VideoOverlayFont';
  src: url('/static/fonts/VideoOverlayFont.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
*/