/**
 * TKD Unified Typography System
 * 
 * Comprehensive typography overrides for all TKD components
 * Ensures consistent, professional typography across the entire plugin
 * 
 * NOTE: Fonts are now loaded via performance optimizer for better loading speed
 * Using preload strategy instead of @import for 1,400ms performance gain
 */

/* === TYPOGRAPHY SYSTEM VARIABLES === */
/* 
 * NOTE: Dynamic variables (--tkd-font-family, --tkd-h1-size, etc.) are set via 
 * inline CSS from dashboard settings. DO NOT define them here as it will override 
 * user settings due to CSS cascade order.
 * 
 * Only STATIC helper variables are defined here (font-size scale, weight scale, line-heights)
 */
:root {
    /* Font Sizes - Static 8-step scale for components that don't use dashboard settings */
    --tkd-font-size-xs: 10px;      /* Small labels, badges */
    --tkd-font-size-sm: 12px;      /* Secondary text, captions */
    --tkd-font-size-base: 14px;    /* Body text, default */
    --tkd-font-size-md: 16px;      /* Emphasized body text */
    --tkd-font-size-lg: 18px;      /* Small headings */
    --tkd-font-size-xl: 20px;      /* Medium headings */
    --tkd-font-size-2xl: 24px;     /* Large headings */
    --tkd-font-size-3xl: 32px;     /* Hero headings */
    
    /* Font Weights - Static scale for components */
    --tkd-font-weight-normal: 400;    /* Body text */
    --tkd-font-weight-medium: 500;    /* Emphasized text */
    --tkd-font-weight-semibold: 600; /* Headings */
    --tkd-font-weight-bold: 700;      /* Hero text */
    
    /* Line Heights - Static scale */
    --tkd-leading-tight: 1.2;      /* Headings */
    --tkd-leading-snug: 1.3;       /* Subheadings */
    --tkd-leading-normal: 1.4;     /* Body text */
    --tkd-leading-relaxed: 1.5;     /* Long text */
    --tkd-leading-loose: 1.6;      /* Extended reading */
}

/* === GLOBAL TYPOGRAPHY OVERRIDES === */

/* Base typography for all TKD elements */
.tkd-listing-wrapper,
.tkd-directory-container,
.tkd-container,
.tkd-city-page,
.glass-business-container,
.tkd-modern-niche-container,
.tkd-category-page,
.tkd-city-directory-container {
    font-family: var(--tkd-font-family);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
    /* Base font size and weight - will be overridden by specific elements */
    font-size: var(--tkd-p-size, 16px);
    font-weight: var(--tkd-p-weight, 400);
}

/* Headings hierarchy */
.tkd-listing-wrapper h1,
.tkd-directory-container h1,
.tkd-city-page h1,
.tkd-container h1,
.glass-business-container h1,
.tkd-modern-niche-container h1,
.tkd-category-page h1,
.tkd-city-directory-container h1 {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-h1-size, 32px);
    font-weight: var(--tkd-h1-weight, 700);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

.tkd-listing-wrapper h2,
.tkd-directory-container h2,
.tkd-city-page h2,
.tkd-container h2,
.glass-business-container h2,
.tkd-modern-niche-container h2,
.tkd-category-page h2,
.tkd-city-directory-container h2 {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-h2-size, 24px);
    font-weight: var(--tkd-h2-weight, 600);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

.tkd-listing-wrapper h3,
.tkd-directory-container h3,
.tkd-city-page h3,
.tkd-container h3,
.glass-business-container h3,
.tkd-modern-niche-container h3,
.tkd-category-page h3,
.tkd-city-directory-container h3 {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-h3-size, 20px);
    font-weight: var(--tkd-h3-weight, 600);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

.tkd-listing-wrapper h4,
.tkd-directory-container h4,
.tkd-city-page h4,
.tkd-container h4,
.glass-business-container h4,
.tkd-modern-niche-container h4,
.tkd-category-page h4,
.tkd-city-directory-container h4 {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-h4-size, 18px);
    font-weight: var(--tkd-h4-weight, 600);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

/* Body text */
.tkd-listing-wrapper p,
.tkd-directory-container p,
.tkd-city-page p,
.tkd-container p,
.glass-business-container p,
.tkd-modern-niche-container p,
.tkd-category-page p,
.tkd-city-directory-container p {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-p-size, 16px);
    font-weight: var(--tkd-p-weight, 400);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

/* Business names - unified across all components (use H1 settings) */
.tkd-business-name,
.glass-business-name,
.tkd-hero-title,
.tkd-city-title {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-h1-size, 32px);
    font-weight: var(--tkd-h1-weight, 700);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

/* Business subtitles and descriptions (use paragraph settings) */
.tkd-business-subtitle,
.glass-business-subtitle,
.tkd-hero-subtitle,
.tkd-city-description {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-p-size, 16px);
    font-weight: var(--tkd-p-weight, 400);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

/* Section headers (use H3 settings) */
.tkd-section-header h3,
.glass-section-header h3,
.tkd-section-title {
    font-family: var(--tkd-font-family);
    /* Most templates use <h2 class="tkd-section-title">…</h2> */
    font-size: var(--tkd-h2-size, 24px);
    font-weight: var(--tkd-h2-weight, 600);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

/* Section headers inside cards typically use H3 */
.tkd-section-header h3,
.glass-section-header h3 {
    font-family: var(--tkd-font-family);
    font-size: var(--tkd-h3-size, 20px);
    font-weight: var(--tkd-h3-weight, 600);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

/* H4 elements with special classes - use H4 settings */
.enhanced-section-title,
.tkd-section-label,
.glass-overlay-title,
.glass-review-form h4,
.glass-section-header-h4,
.glass-section-header h4 {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-h4-size, 18px) !important;
    font-weight: var(--tkd-h4-weight, 600) !important;
    font-style: var(--tkd-font-style, normal) !important;
    line-height: var(--tkd-line-height, 1.5) !important;
    letter-spacing: var(--tkd-letter-spacing, 0) !important;
    text-transform: var(--tkd-text-transform, none) !important;
}

/* Sidebar H4 and paragraph elements - use dashboard settings */
.glass-ad-sidebar-left h4,
.glass-ad-sidebar-right h4,
.glass-ad-sidebar-left p,
.glass-ad-sidebar-right p {
    font-family: var(--tkd-font-family) !important;
}

.glass-ad-sidebar-left h4,
.glass-ad-sidebar-right h4 {
    font-size: var(--tkd-h4-size, 18px) !important;
    font-weight: var(--tkd-h4-weight, 600) !important;
    font-style: var(--tkd-font-style, normal) !important;
    line-height: var(--tkd-line-height, 1.5) !important;
    letter-spacing: var(--tkd-letter-spacing, 0) !important;
    text-transform: var(--tkd-text-transform, none) !important;
}

.glass-ad-sidebar-left p,
.glass-ad-sidebar-right p {
    font-size: var(--tkd-p-size, 16px) !important;
    font-weight: var(--tkd-p-weight, 400) !important;
    font-style: var(--tkd-font-style, normal) !important;
    line-height: var(--tkd-line-height, 1.5) !important;
    letter-spacing: var(--tkd-letter-spacing, 0) !important;
    text-transform: var(--tkd-text-transform, none) !important;
}

/* Action buttons */
.tkd-btn,
.glass-action-btn,
.tkd-view-details,
.tkd-mobile-call-btn {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-font-size-sm) !important;
    font-weight: var(--tkd-font-weight-medium) !important;
    line-height: var(--tkd-leading-tight) !important;
}

/* Contact information */
.tkd-business-address,
.tkd-business-phone,
.tkd-detail-item,
.glass-contact-item span,
.glass-contact-item a {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-font-size-sm) !important;
    font-weight: var(--tkd-font-weight-normal) !important;
    line-height: var(--tkd-leading-normal) !important;
}

/* Rating and review text */
.tkd-rating-text,
.tkd-review-count,
.glass-rating-number,
.glass-review-wrapper {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-font-size-sm) !important;
    font-weight: var(--tkd-font-weight-normal) !important;
    line-height: var(--tkd-leading-normal) !important;
}

/* Status badges */
.tkd-status-sponsored,
.tkd-status-verified,
.glass-status-badge {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-font-size-xs) !important;
    font-weight: var(--tkd-font-weight-semibold) !important;
    line-height: var(--tkd-leading-tight) !important;
}

/* Search inputs and form elements */
.tkd-search-input,
.tkd-filter-select,
.tkd-search-field input {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-font-size-base) !important;
    font-weight: var(--tkd-font-weight-normal) !important;
}

/* Breadcrumbs */
.tkd-breadcrumb,
.tkd-breadcrumb a {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-font-size-sm) !important;
    font-weight: var(--tkd-font-weight-medium) !important;
    line-height: var(--tkd-leading-normal) !important;
}

/* Pagination */
.tkd-page-link,
.tkd-pagination-btn {
    font-family: var(--tkd-font-family) !important;
    font-size: var(--tkd-font-size-sm) !important;
    font-weight: var(--tkd-font-weight-medium) !important;
    line-height: var(--tkd-leading-tight) !important;
}

/* === RESPONSIVE TYPOGRAPHY === */

/* Mobile adjustments */
@media (max-width: 768px) {
    .tkd-business-name,
    .glass-business-name {
        font-size: var(--tkd-font-size-md) !important;
    }
    
    .tkd-hero-title,
    .tkd-city-title {
        font-size: var(--tkd-font-size-2xl) !important;
    }
    
    .tkd-hero-subtitle,
    .tkd-city-description {
        font-size: var(--tkd-font-size-sm) !important;
    }
}

@media (max-width: 480px) {
    .tkd-business-name,
    .glass-business-name {
        font-size: var(--tkd-font-size-sm) !important;
    }
    
    .tkd-hero-title,
    .tkd-city-title {
        font-size: var(--tkd-font-size-xl) !important;
    }
}

/* === ACCESSIBILITY IMPROVEMENTS === */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tkd-business-name,
    .glass-business-name,
    .tkd-hero-title,
    .tkd-city-title {
        font-weight: var(--tkd-font-weight-bold) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .tkd-business-name,
    .glass-business-name,
    .tkd-hero-title,
    .tkd-city-title {
        transition: none !important;
    }
}

/* === ADDITIONAL OVERRIDES FOR DASHBOARD SETTINGS === */
/* These rules ensure dashboard typography settings apply to hero headers and section titles */

.tkd-hero-header h1 {
    font-size: var(--tkd-h1-size, 32px);
    font-weight: var(--tkd-h1-weight, 700);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

.tkd-section-title {
    font-size: var(--tkd-h3-size, 20px);
    font-weight: var(--tkd-h3-weight, 600);
    font-style: var(--tkd-font-style, normal);
    line-height: var(--tkd-line-height, 1.5);
    letter-spacing: var(--tkd-letter-spacing, 0);
    text-transform: var(--tkd-text-transform, none);
}

/* === PRINT STYLES === */
@media print {
    .tkd-business-name,
    .glass-business-name,
    .tkd-hero-title,
    .tkd-city-title {
        font-family: 'Times New Roman', serif !important;
        font-weight: bold !important;
        color: black !important;
    }
    
    .tkd-business-subtitle,
    .glass-business-subtitle,
    .tkd-hero-subtitle,
    .tkd-city-description {
        font-family: 'Times New Roman', serif !important;
        color: black !important;
    }
}