/**
 * QRMenuyu.az - Global CSS Optimization
 * Version: 2.0
 * Date: 2026-01-29
 * 
 * Purpose: Fix CSS conflicts, remove duplicates, eliminate !important
 * Load Order: AFTER Bootstrap, BEFORE page-specific CSS
 */

/* ============================================
   1. RESET & BOX MODEL (Consolidate duplicates)
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    border: 0 solid #d2d6dc;
}

/* ============================================
   2. FONT RENDERING (Performance)
   ============================================ */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   3. TYPOGRAPHY HIERARCHY (No !important)
   ============================================ */

/* Primary Font Stack */
html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #525f7f;
    background-color: #f4f7f6;
    margin: 0;
}

/* Blog Pages - Inter Font (proper cascade) */
.blog-page,
.blog-page body,
.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page h4,
.blog-page p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Tutorial Pages - Lexend Deca (proper cascade) */
.tutorial-page,
.tutorial-page body,
.tutorial-page h1,
.tutorial-page h2,
.tutorial-page p {
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   4. TABLE NORMALIZATION
   ============================================ */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #525f7f;
    background-color: transparent;
}

th {
    font-weight: 700;
    text-align: left;
}

/* ============================================
   5. CSS VARIABLES (Consolidated)
   ============================================ */

:root {
    /* Brand Colors */
    --primary-color: #5e72e4;
    --secondary-color: #f4f5f7;
    --success-color: #2dce89;
    --info-color: #11cdef;
    --warning-color: #fb6340;
    --danger-color: #f5365c;
    
    /* Grayscale */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #8898aa;
    --gray-700: #525f7f;
    --gray-800: #32325d;
    --gray-900: #212529;
    
    /* Typography */
    --font-primary: 'Nunito', sans-serif;
    --font-blog: 'Inter', sans-serif;
    --font-tutorial: 'Lexend Deca', sans-serif;
    --font-mono: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    
    /* Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* ============================================
   6. UTILITY CLASSES (Performance)
   ============================================ */

/* Font utilities (replace inline !important) */
.font-inter { font-family: var(--font-blog); }
.font-lexend { font-family: var(--font-tutorial); }
.font-nunito { font-family: var(--font-primary); }

/* Background colors */
.bg-primary { background-color: var(--primary-color); }
.bg-light-gray { background-color: #f4f7f6; }
.bg-white { background-color: var(--white); }

/* Text colors (no !important needed) */
.text-white { color: var(--white); }
.text-dark { color: var(--gray-900); }
.text-muted { color: var(--gray-600); }

/* ============================================
   7. REMOVE UNUSED FONTS
   ============================================ */

/* 
 * Removed fonts:
 * - Open Sans (replaced by Nunito)
 * - Roboto (only kept for specific use if needed)
 * 
 * Active fonts:
 * - Nunito (primary)
 * - Inter (blog)
 * - Lexend Deca (tutorial)
 */

/* ============================================
   8. PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU Acceleration for smooth animations */
.transform-gpu {
    transform: translateZ(0);
    will-change: transform;
}

/* Reduce paint operations */
img,
video {
    max-width: 100%;
    height: auto;
}

/* Prevent layout shift */
img[width][height] {
    height: auto;
}

/* ============================================
   9. ACCESSIBILITY
   ============================================ */

/* Focus visible (keyboard navigation) */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
}

.skip-to-content:focus {
    top: 0;
}

/* ============================================
   10. PRINT STYLES
   ============================================ */

@media print {
    *,
    *::before,
    *::after {
        background: transparent;
        color: #000;
        box-shadow: none;
        text-shadow: none;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
    }
    
    img {
        page-break-inside: avoid;
        max-width: 100%;
    }
    
    h2,
    h3,
    p {
        orphans: 3;
        widows: 3;
    }
    
    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ============================================
   11. DARK MODE SUPPORT (Future)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* 
     * Add dark mode styles here when ready
     * Currently disabled to maintain consistency
     */
}

/* ============================================
   12. RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 767px) {
    /* Mobile optimizations */
    body {
        font-size: 0.9rem;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet optimizations */
}

@media (min-width: 992px) {
    /* Desktop optimizations */
    body {
        font-size: 1rem;
    }
}