/*
 * Base CSS lifted from the-mighty22 v3.3.1 style.css.
 * The child stylesheet is not shipped with the plugin, so these rules are
 * enqueued from ThemeSetup instead. Do not edit without checking the theme.
 *
 * ONE deliberate change, to the body rule, and it exists to render what the
 * THEME rendered (checked on olajshopszervizek.hu, 2026-09-18):
 *
 *   The theme's style.css printed BEFORE Hello Elementor's reset.css, whose
 *   body{background-color:#fff;color:#333;font-family:…;line-height:1.5} came
 *   later and won every property the two rules share. So the theme's body rule
 *   never showed on a Hello site — including its dark-mode background.
 *
 *   This file is enqueued from a plugin and prints AFTER reset.css, so the same
 *   rule WON: every visitor whose device was in dark mode got a #1a1a1a page
 *   with white text on sites designed light. That is the "dark background where
 *   there should be none".
 *
 *   The fix: :where(body) has zero specificity, so any theme or Elementor Kit
 *   body rule wins regardless of load order — as reset.css always did — and the
 *   rule no longer sets background-color or color at all, so no theme without a
 *   body background can be turned dark by it either. The custom properties and
 *   their dark-mode values stay: site CSS that reads var(--background-color)
 *   saw them under the theme and still does.
 */

/* ========================================
   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;
}

/* :where() and no colours — see the header. */
:where(body) {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    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;
    }
}