/*
Theme Name: The Mighty22 by 22MEDIA
Theme URI: https://22media.sk
Description: A Hello Elementor child téma egyedi beállításokkal és funkciókkal. Tartalmaz testreszabott shortcode-okat, dinamikus CSS és JS betöltést, valamint teljesítményoptimalizálásokat.
Author: 22MEDIA & Akoggy33
Author URI: https://22media.sk
Template: hello-elementor
Version: 3.2.0
Text Domain: the-mighty22
Domain Path: /languages
*/

/* ========================================
   MODERN CSS FEATURES - WordPress 2025 Trends
   ======================================== */

:root {
    /* CSS Custom Properties for theming */
    --primary-color: #0073aa;
    --secondary-color: #005177;
    --text-color: light-dark(#333, #fff);
    --background-color: light-dark(#fff, #1a1a1a);
    --border-color: light-dark(#ddd, #444);
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
}

/* Font Performance Optimization */
* {
    font-display: swap; /* Core Web Vitals optimization for all fonts */
}

/* Container Queries Support */
@container (min-width: 768px) {
    .responsive-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }
}

/* Modern CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--background-color);
    font-display: swap; /* Performance optimization */
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #fff;
        --background-color: #1a1a1a;
        --border-color: #444;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}