/*
Theme Name: Modern Everbrew
Theme URI: https://everbrew.com.br
Author: Everbrew Team
Author URI: https://everbrew.com.br
Description: A modular WordPress theme with GSAP animations, Lenis smooth scroll, Elementor Pro Theme Builder support, and WooCommerce integration. Architecture inspired by Hello Elementor.
Version: 2.1.3
Requires at least: 6.4
Tested up to: 6.9
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: modern-everbrew
Tags: custom-colors, custom-logo, custom-menu, editor-style, featured-images, wide-blocks, woocommerce, elementor, gsap, animations

Modern Everbrew v2.1.3 - Modular theme architecture with enhanced features.
Built with GSAP 3.13, Lenis smooth scroll, and full Elementor Pro compatibility.
Cache busting system with intelligent versioning (file/hash/static strategies).
*/

/* ==========================================================================
CSS Variables - Sincronizadas com Elementor Site Kit
========================================================================== */

:root {
    /* ===== System Colors (Elementor Global) ===== */
    --e-global-color-primary: #99C33F;
    --e-global-color-secondary: #7CA622;
    --e-global-color-text: #1A171B;
    --e-global-color-accent: #5C8309;

    /* ===== Custom Colors (Elementor Palette) ===== */
    --e-global-color-transparent: transparent;
    --e-global-color-white: #FFFFFF;
    --e-global-color-black: #000000;
    --e-global-color-green-light-1: #BAE267;
    --e-global-color-green-light-2: #D5F397;
    --e-global-color-purple-dark-1: #18101A;
    --e-global-color-purple-dark-2: #150A19;
    --e-global-color-purple-light-1: #443C47;
    --e-global-color-purple-light-2: #665A69;
    --e-global-color-red: #A02E2E;
    --e-global-color-blue: #1978AF;
    --e-global-color-orange: #F29003;
    --e-global-color-gray-1: #F5F5F5;
    --e-global-color-gray-2: #C2C2C2;
    --e-global-color-gray-3: #9D9D9D;

    /* ===== Semantic Aliases ===== */
    --color-primary: var(--e-global-color-primary);
    --color-secondary: var(--e-global-color-secondary);
    --color-text: var(--e-global-color-text);
    --color-accent: var(--e-global-color-accent);
    --color-background: var(--e-global-color-white);
    --color-background-dark: var(--e-global-color-purple-dark-1);
    --color-success: var(--e-global-color-secondary);
    --color-error: var(--e-global-color-red);
    --color-warning: var(--e-global-color-orange);
    --color-info: var(--e-global-color-blue);

    /* ===== Typography - Use Elementor's Global Fonts ===== */
    /* Fonts are loaded by Elementor Site Kit (ID: 24074) */
    --font-primary: var(--e-global-typography-primary-font-family, 'Poppins', sans-serif);
    --font-text: var(--e-global-typography-text-font-family, 'Montserrat', sans-serif);
    --font-secondary: var(--e-global-typography-secondary-font-family, inherit);

    /* ===== Typography Settings ===== */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ===== Spacing ===== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* ===== Border Radius (Elementor Settings) ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 25px;
    --radius-full: 9999px;

    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* ===== Transitions ===== */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* ===== Layout ===== */
    --content-width: 1200px;
    --wide-width: 1400px;
    --full-width: 100%;

    /* ===== Breakpoints ===== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1025px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ===== Theme Mode Variables (Light Mode Default) ===== */
    /* Surface colors */
    --theme-background: var(--e-global-color-white, #FFFFFF);
    --theme-background-alt: var(--e-global-color-gray-1, #F5F5F5);
    --theme-surface: var(--e-global-color-white, #FFFFFF);
    --theme-surface-alt: var(--e-global-color-gray-1, #F5F5F5);

    /* Text colors */
    --theme-text-primary: var(--e-global-color-text, #1A171B);
    --theme-text-secondary: var(--e-global-color-purple-light-2, #665A69);
    --theme-text-muted: var(--e-global-color-gray-3, #9D9D9D);
    --theme-text-inverse: var(--e-global-color-white, #FFFFFF);

    /* Brand colors - mantém os mesmos em ambos os modos */
    --theme-primary: var(--e-global-color-primary, #99C33F);
    --theme-primary-hover: var(--e-global-color-secondary, #7CA622);
    --theme-secondary: var(--e-global-color-secondary, #7CA622);
    --theme-accent: var(--e-global-color-accent, #5C8309);

    /* Border & dividers */
    --theme-border: var(--e-global-color-gray-2, #C2C2C2);
    --theme-border-light: var(--e-global-color-gray-1, #F5F5F5);
    --theme-divider: rgba(26, 23, 27, 0.1);

    /* Shadows - light mode */
    --theme-shadow-color: rgba(0, 0, 0, 0.08);
    --theme-shadow-sm: 0 1px 2px var(--theme-shadow-color);
    --theme-shadow-md: 0 4px 6px var(--theme-shadow-color);
    --theme-shadow-lg: 0 10px 20px var(--theme-shadow-color);

    /* Overlays */
    --theme-overlay: rgba(26, 23, 27, 0.5);
    --theme-overlay-light: rgba(26, 23, 27, 0.1);

    /* Color scheme indicator */
    color-scheme: light dark;
}

/* ==========================================================================
   Dark Mode Variables
   Applied when body has data-theme="dark" or class="dark-mode"
   ========================================================================== */

body[data-theme="dark"],
body.dark-mode {
    /* Surface colors - dark backgrounds */
    --theme-background: var(--e-global-color-purple-dark-1, #18101A);
    --theme-background-alt: var(--e-global-color-purple-dark-2, #150A19);
    --theme-surface: var(--e-global-color-purple-dark-1, #18101A);
    --theme-surface-alt: var(--e-global-color-purple-light-1, #443C47);

    /* Text colors - inverted for dark mode */
    --theme-text-primary: var(--e-global-color-white, #FFFFFF);
    --theme-text-secondary: var(--e-global-color-gray-2, #C2C2C2);
    --theme-text-muted: var(--e-global-color-gray-3, #9D9D9D);
    --theme-text-inverse: var(--e-global-color-text, #1A171B);

    /* Border & dividers - lighter in dark mode */
    --theme-border: var(--e-global-color-purple-light-1, #443C47);
    --theme-border-light: var(--e-global-color-purple-light-2, #665A69);
    --theme-divider: rgba(255, 255, 255, 0.1);

    /* Shadows - stronger in dark mode */
    --theme-shadow-color: rgba(0, 0, 0, 0.3);
    --theme-shadow-sm: 0 1px 3px var(--theme-shadow-color);
    --theme-shadow-md: 0 4px 12px var(--theme-shadow-color);
    --theme-shadow-lg: 0 10px 30px var(--theme-shadow-color);

    /* Overlays - lighter overlay on dark backgrounds */
    --theme-overlay: rgba(255, 255, 255, 0.1);
    --theme-overlay-light: rgba(255, 255, 255, 0.05);

    /* Update semantic colors to use theme variables */
    --color-background: var(--theme-background);
    --color-text: var(--theme-text-primary);

    /* Color scheme */
    color-scheme: dark;
}

/* ==========================================================================
Base Styles
========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Lenis Smooth Scroll */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: var(--theme-text-primary);
    background-color: var(--theme-background);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--color-primary);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--theme-text-primary);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: 1.5rem;
    color: var(--color-secondary);
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-text);
    font-weight: var(--font-weight-semibold);
    transition: color var(--transition-normal);
}

a:hover,
a:focus {
    color: var(--color-accent);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--e-global-color-purple-dark-1);
    background-color: var(--e-global-color-green-light-2);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
}

button:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    color: var(--color-white);
    background-color: var(--color-accent);
}

/* Alt Button */
.button--alt,
.wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--color-primary);
    background-color: transparent;
    border: 2px solid var(--color-primary);
}

.button--alt:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
}

/* ==========================================================================
   Forms (Elementor Style)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-md);
    font-family: var(--font-text);
    font-size: 1rem;
    color: var(--theme-text-primary);
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-text);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.container--wide {
    max-width: var(--wide-width);
}

.container--full {
    max-width: var(--full-width);
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   GSAP Animation Utilities
   ========================================================================== */

/* Elementos que serão animados */
[data-gsap],
[data-gsap-from],
[data-gsap-to],
[data-gsap-scroll] {
    will-change: transform, opacity;
}

/* Estado inicial para fade animations */
.gsap-fade {
    opacity: 0;
}

.gsap-fade-up {
    opacity: 0;
    transform: translateY(50px);
}

.gsap-fade-down {
    opacity: 0;
    transform: translateY(-50px);
}

.gsap-fade-left {
    opacity: 0;
    transform: translateX(-50px);
}

.gsap-fade-right {
    opacity: 0;
    transform: translateX(50px);
}

.gsap-scale {
    opacity: 0;
    transform: scale(0.8);
}

/* Split text animations */
.gsap-split-chars .char,
.gsap-split-words .word,
.gsap-split-lines .line {
    display: inline-block;
}

/* ==========================================================================
   WooCommerce Base Overrides
   ========================================================================== */

.woocommerce-message,
.woocommerce-info {
    background: linear-gradient(135deg, var(--e-global-color-green-light-2), var(--e-global-color-green-light-1));
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--color-secondary);
}

.woocommerce-error {
    background: linear-gradient(135deg, var(--e-global-color-purple-light-2), var(--e-global-color-red));
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-white);
}

/* Price styling */
.woocommerce .price,
.woocommerce-Price-amount {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary);
}

.woocommerce del .woocommerce-Price-amount {
    color: var(--e-global-color-gray-3);
    font-weight: var(--font-weight-regular);
}

.woocommerce ins .woocommerce-Price-amount {
    color: var(--color-secondary);
}

/* Sale badge */
.woocommerce span.onsale {
    background-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* ==========================================================================
   Elementor Compatibility
   ========================================================================== */

/* Elementor locations support */
.elementor-location-header,
.elementor-location-footer {
    width: 100%;
}

/* Elementor Pro Theme Builder integration */
body.elementor-template-full-width .site-content,
body.elementor-template-canvas .site-content {
    max-width: 100%;
    padding: 0;
}

/* Elementor widgets inherit theme colors without !important */
.elementor-widget-heading .elementor-heading-title {
    color: inherit;
}

.elementor-widget-text-editor {
    color: var(--theme-text-primary);
}

/* Elementor sections adapt to theme */
.elementor-section.elementor-section-boxed > .elementor-container {
    background-color: transparent;
}

/* Elementor columns respect theme background */
.elementor-column-wrap,
.elementor-widget-wrap {
    background-color: transparent;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-white);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

/* ==========================================================================
   Dark Mode Specificity Rules
   Prevent Elementor inline styles from overriding theme colors
   Using higher specificity without !important
   ========================================================================== */

/* Text elements in dark mode */
body[data-theme="dark"] p,
body[data-theme="dark"] span:not([class*="elementor"]),
body[data-theme="dark"] div:not([class*="elementor"]) {
    color: var(--theme-text-primary);
}

/* Links in dark mode */
body[data-theme="dark"] a:not(.elementor-button):not([class*="elementor-"]) {
    color: var(--theme-primary);
}

body[data-theme="dark"] a:not(.elementor-button):not([class*="elementor-"]):hover {
    color: var(--theme-primary-hover);
}

/* Headings in dark mode (except Elementor managed) */
body[data-theme="dark"] h1:not(.elementor-heading-title),
body[data-theme="dark"] h2:not(.elementor-heading-title),
body[data-theme="dark"] h3:not(.elementor-heading-title),
body[data-theme="dark"] h4:not(.elementor-heading-title),
body[data-theme="dark"] h5:not(.elementor-heading-title),
body[data-theme="dark"] h6:not(.elementor-heading-title) {
    color: var(--theme-text-primary);
}

/* Forms in dark mode */
body[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
    color: var(--theme-text-primary);
    background-color: var(--theme-surface-alt);
    border-color: var(--theme-border);
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: var(--theme-text-muted);
}

/* Cards and containers in dark mode (non-Elementor) */
body[data-theme="dark"] .card:not([class*="elementor"]),
body[data-theme="dark"] .box:not([class*="elementor"]),
body[data-theme="dark"] article:not([class*="elementor"]) {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 2cm;
    }
}