/*
Theme Name: Playground
Theme URI: https://playground.julienfdev.com/
Author: Julien Louis
Author URI: https://playground.julienfdev.com/
Description: A professional starter theme designed specifically for Elementor builders with Open Sans typography.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: playground
Tags: elementor, professional, clean, grid-layout, accessibility-ready, custom-menu, anti-spam, translation-ready

Playground - Your Creative Sandbox for Elementor
*/

:root {
    --primary-color: #60a5fa;
    --secondary-color: #6366f1;
    --accent-color: #6366f1;
    --text-color: #1a1a1a;
    --bg-color: #ffffff;
    --font-main: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --focus-outline: 2px solid var(--primary-color);
}

/**
 * CSS RESET / NORMALIZE
 */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; padding: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/**
 * BASE TYPOGRAPHY
 */
body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color);
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 { 
    font-weight: 700; 
    line-height: 1.2; 
    margin-top: 1.5em; 
    margin-bottom: 0.5em; 
    color: var(--primary-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}

a:hover {
    color: var(--secondary-color);
}

a:focus {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

/**
 * ELEMENTOR COMPATIBILITY
 */
.elementor-page .container { max-width: none; width: 100%; }

/**
 * RESPONSIVE GRID SYSTEM
 */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.col { flex: 1; padding-left: 15px; padding-right: 15px; min-width: 280px; }

/**
 * UTILITY CLASSES
 */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.p-2 { padding: 2rem; }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/**
 * ANTI-SPAM
 */
.hp-field {
    display: none !important;
    visibility: hidden !important;
}

/**
 * ACCESSIBILITY
 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    left: -9999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 999999;
}

.skip-link:focus {
    background-color: #fff;
    border: 2px solid var(--primary-color);
    clip: auto !important;
    clip-path: none;
    color: var(--primary-color);
    display: block;
    font-size: 1rem;
    font-weight: bold;
    height: auto;
    left: 1rem;
    padding: 1rem;
    text-decoration: none;
    top: 1rem;
    width: auto;
}

/**
 * REDUCED MOTION
 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/**
 * PRINT STYLES
 */
@media print {
    .no-print, nav, footer, #comments { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a:after { content: " (" attr(href) ")"; }
}