/**
 * File: assets/css/home-styles.css
 * Description: Styles that load only on the homepage/front page
 * Version: 1.1.0
 * Last Modified: 2025-11-12
 *
 * This file loads on:
 * - Front page (is_front_page())
 * - Blog home page (is_home())
 *
 * Use this file for homepage hero sections, featured content areas,
 * homepage-specific layouts, call-to-action sections, and other
 * elements unique to your site's front page.
 */

/* ===========================================
 * Table of Contents:
 * ===========================================
 * 1. Hero Section & Performance
 *    - System Font Classes (CLS Prevention)
 */

/* ===========================================
 * 1. Hero Section & Performance
 * =========================================== */

/**
 * Homepage System Font Classes - CLS Prevention
 *
 * Prevents Cumulative Layout Shift by using native OS fonts for above-the-fold elements.
 * Targets homepage hero headings (H1/H2) and CTA buttons that load in viewport.
 *
 * Single unified class: .homepage-system-font
 * Font weights: H1 (700 bold), H2 (600 semibold), Buttons (500 medium)
 *
 * What We Override: font-family + font-weight ONLY
 * What Elementor Handles: font-size (responsive), spacing, colors, padding
 *
 * USAGE INSTRUCTIONS:
 *
 * 1. Elementor Widget Setup:
 *    - Select Heading or Button widget → Advanced tab → CSS Classes
 *    - Add class: homepage-system-font
 *    - Style tab → Typography:
 *      • Font Family: Set to "Default" (removes web font loading)
 *      • Font Weight: Leave as-is (CSS overrides for consistency)
 *
 * 2. Perfmatters Configuration:
 *    - Perfmatters → Optimization → Remove Unused CSS
 *    - Add exclusion: .homepage-system-font
 *    - Ensures CSS loads immediately on homepage for instant rendering
 *
 * 3. Verify CLS Prevention:
 *    - Open homepage in DevTools → Network tab → Filter "font"
 *    - Should see ZERO web font requests for hero section
 *    - PageSpeed Insights → Check CLS score improvement
 *    - Lighthouse → Verify Largest Contentful Paint timing
 *
 * Font stack: -apple-system (macOS/iOS) → system-ui → Segoe UI (Windows) → fallbacks
 *
 * @since 1.1.0
 */

/* H1 headings - bold system fonts for hero titles */
.homepage-system-font h1,
.homepage-system-font .elementor-heading-title[class*="elementor-size-"] {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* H2 headings - semibold system fonts for subheadings */
.homepage-system-font h2 {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Buttons - medium weight system fonts for CTAs */
.homepage-system-font .elementor-button,
.homepage-system-font .elementor-button-text {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}