/* 
==============================================
FONT FIX FINAL - CLEAN SOLUTION
==============================================
Mục đích: Loại bỏ conflicts và standardize fonts
Priority: Load sau tất cả CSS khác
*/

/* ===================================== */
/* CSS VARIABLES CLEAN - NO CONFLICTS    */
/* ===================================== */
:root {
    /* Standardized Font System */
    --font-hero-title: 'Libre Baskerville', 'Times New Roman', Georgia, serif;
    --font-primary: 'Libre Baskerville', 'Times New Roman', Georgia, serif;
    --font-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Standardized Font Weights */
    --font-weight-hero: 700;
    --font-weight-heading: 600;
    --font-weight-body: 400;
    --font-weight-bold: 600;
}

/* ===================================== */
/* HERO TITLE - FINAL STANDARDIZED      */
/* ===================================== */

/* Primary hero title selectors - Highest specificity */
.hero-section .hero-content .hero-title,
.hero-container .hero-content .hero-title,
h1.hero-title {
    font-family: var(--font-hero-title) !important;
    font-weight: var(--font-weight-hero) !important;
    font-size: clamp(3rem, 8vw, 5.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
}

/* Hero title variations */
.hero-title-main,
.hero-title-accent {
    font-family: var(--font-hero-title) !important;
    font-weight: var(--font-weight-hero) !important;
    letter-spacing: -0.01em !important;
}

/* Ensure no conflicts from other CSS */
.hero-title,
.hero-title * {
    font-family: var(--font-hero-title) !important;
}

/* ===================================== */
/* STANDARDIZE ALL HEADINGS             */
/* ===================================== */

/* All headings use consistent font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-heading) !important;
}

/* Section titles */
.section-title {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-hero) !important;
}

/* ===================================== */
/* BODY TEXT STANDARDIZATION            */
/* ===================================== */

body {
    font-family: var(--font-secondary) !important;
    font-weight: var(--font-weight-body) !important;
}

/* ===================================== */
/* REMOVE FONT CONFLICTS                */
/* ===================================== */

/* Override any conflicting font declarations */
.hero-section * {
    font-family: inherit;
}

/* Specific overrides for common conflicts */
.hero-content,
.hero-text {
    font-family: inherit;
}

/* ===================================== */
/* FONT LOADING OPTIMIZATION            */
/* ===================================== */

/* Ensure fonts load properly */
@font-face {
    font-family: 'Libre Baskerville';
    font-display: swap;
    font-style: normal;
    font-weight: 400 700;
}

@font-face {
    font-family: 'Montserrat';
    font-display: swap;
    font-style: normal;
    font-weight: 300 800;
}

/* ===================================== */
/* VIETNAMESE CHARACTER SUPPORT         */
/* ===================================== */

/* Ensure Vietnamese characters render properly */
.hero-title,
.hero-title-main,
.hero-title-accent {
    font-feature-settings: "liga" 1, "kern" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================== */
/* RESPONSIVE FONT ADJUSTMENTS          */
/* ===================================== */

/* Mobile font adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(2.5rem, 7vw, 4rem) !important;
        line-height: 1.2 !important;
    }
}

/* Tablet font adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-title {
        font-size: clamp(3rem, 6vw, 4.5rem) !important;
    }
}

/* Desktop font adjustments */
@media (min-width: 1025px) {
    .hero-title {
        font-size: clamp(3.5rem, 5vw, 5.5rem) !important;
    }
}

/* ===================================== */
/* FALLBACK FONTS                       */
/* ===================================== */

/* If Libre Baskerville fails to load */
@supports not (font-family: 'Libre Baskerville') {
    .hero-title,
    .hero-title-main,
    .hero-title-accent,
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Times New Roman', Georgia, serif !important;
    }
}

/* If Google Fonts completely fail */
@supports not (font-family: 'Montserrat') {
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    }
}

/* ===================================== */
/* PERFORMANCE OPTIMIZATIONS            */
/* ===================================== */

/* Reduce layout shifts */
.hero-title {
    contain: layout style;
}

/* Optimize text rendering */
.hero-section {
    text-rendering: optimizeSpeed;
}

.hero-title {
    text-rendering: optimizeLegibility;
}

/* ===================================== */
/* DEBUG UTILITIES (Remove in production) */
/* ===================================== */

/* Uncomment below to debug font issues */
/*
.hero-title {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.hero-title::before {
    content: "Font: " attr(style) !important;
    display: block !important;
    font-size: 12px !important;
    color: red !important;
    background: white !important;
    padding: 2px !important;
}
*/