/*
Theme Name: Atai Construction Child
Template: hello-elementor
Description: ADA & WCAG 2.1 AA compliant child theme for Atai Construction
Version: 1.0.0
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */
:root {
    --atai-primary: #2A1A40;
    --atai-primary-rgb: 42, 26, 64;
    --atai-accent: #C9A84C;
    --atai-accent-rgb: 201, 168, 76;
    --atai-dark: #1A1A2E;
    --atai-white: #FFFFFF;
    --atai-light-bg: #F8F6F3;
    --atai-text: #4B5563;
    --atai-text-light: #6B7280;
    --atai-heading: #2A1A40;
    --atai-border: #E5E7EB;
    --atai-font-primary: 'Poppins', sans-serif;
    --atai-transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --atai-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --atai-shadow-hover: 0 12px 40px rgba(42, 26, 64, 0.15);
}

/* ==========================================================================
   BASE TYPOGRAPHY
   Contrast ratios verified for WCAG 2.1 AA (4.5:1 normal, 3:1 large text)
   ========================================================================== */
body {
    font-family: var(--atai-font-primary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--atai-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--atai-font-primary);
    color: var(--atai-heading);
    font-weight: 700;
    line-height: 1.25;
}

a { color: var(--atai-primary); text-decoration: underline; transition: color var(--atai-transition); }
a:hover { color: var(--atai-accent); }

/* ==========================================================================
   ELEMENTOR OVERRIDES
   ========================================================================== */
.elementor-section.elementor-section-full_width { padding-left: 0; padding-right: 0; }

/* Buttons */
.elementor-button {
    font-family: var(--atai-font-primary) !important;
    transition: all var(--atai-transition) !important;
    border-radius: 0 !important;
}
.elementor-button:hover { transform: translateY(-2px); box-shadow: var(--atai-shadow-hover); }

/* Headings */
.elementor-heading-title { font-family: var(--atai-font-primary) !important; }

/* Icon boxes */
.elementor-icon-box-wrapper { transition: transform var(--atai-transition); }
.elementor-icon-box-wrapper:hover { transform: translateY(-5px); }

/* Counter */
.elementor-counter-number-wrapper { font-family: var(--atai-font-primary) !important; }

/* ==========================================================================
   ANIMATIONS (respect prefers-reduced-motion)
   ========================================================================== */
@keyframes atai-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes atai-fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.atai-animate { animation-fill-mode: both; animation-duration: 0.8s; }
.atai-animate.fade-up { animation-name: atai-fadeInUp; }
.atai-animate.fade-left { animation-name: atai-fadeInLeft; }

@media (prefers-reduced-motion: reduce) {
    .atai-animate,
    .elementor-invisible { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .atai-topbar { display: none; }
}

@media (max-width: 768px) {
    .elementor-section .elementor-container { flex-direction: column !important; }
    .atai-hero-section h1 { font-size: 32px !important; }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    .atai-topbar, .atai-main-header, .atai-footer-main, .atai-footer-bottom,
    .elementor-button, .atai-project-filters { display: none !important; }
    body { color: #000; font-size: 12pt; }
    a { text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; }
}