/*
Theme Name: Mesto - Marketplace Builder
Theme URI: https://mesto.rodnoyart.ru
Author: Rodnoy Art
Author URI: https://rodnoyart.ru
Description: WordPress тема для конструктора маркетплейсов, адаптированная для работы с Elementor. Основана на дизайне mesto.rodnoyart.ru — современный лендинг с градиентами, анимациями и модульной архитектурой.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
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: mesto-wp
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready
*/

/* ========================================
   BASE RESET & TYPOGRAPHY
   ======================================== */

:root {
    /* Primary palette */
    --mesto-purple: #7c3aed;
    --mesto-purple-dark: #6d28d9;
    --mesto-purple-light: #a78bfa;
    --mesto-cyan: #06b6d4;
    --mesto-cyan-light: #22d3ee;

    /* Slate palette */
    --mesto-slate-50: #f8fafc;
    --mesto-slate-100: #f1f5f9;
    --mesto-slate-200: #e2e8f0;
    --mesto-slate-300: #cbd5e1;
    --mesto-slate-400: #94a3b8;
    --mesto-slate-500: #64748b;
    --mesto-slate-600: #475569;
    --mesto-slate-700: #334155;
    --mesto-slate-800: #1e293b;
    --mesto-slate-900: #0f172a;
    --mesto-slate-950: #020617;

    /* Semantic */
    --mesto-bg: #ffffff;
    --mesto-text: #0f172a;
    --mesto-text-muted: #64748b;

    /* Spacing */
    --container-max: 1280px;
    --section-py: 96px;
    --section-px: 24px;

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

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    --shadow-purple: 0 10px 15px -3px rgba(124,58,237,.3);
}

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

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mesto-text);
    background: var(--mesto-bg);
    line-height: 1.6;
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

/* ========================================
   LAYOUT
   ======================================== */

.mesto-container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-px);
    padding-right: var(--section-px);
}

@media (min-width: 640px) {
    .mesto-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1024px) {
    .mesto-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-gradient {
    background: linear-gradient(135deg, var(--mesto-purple), var(--mesto-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-purple-cyan {
    background: linear-gradient(135deg, var(--mesto-purple), var(--mesto-cyan));
}

.bg-gradient-dark {
    background: linear-gradient(to bottom, var(--mesto-slate-900), var(--mesto-slate-950));
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   ANIMATIONS
   ======================================== */

.mesto-animate {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mesto-animate.animate-fade-up {
    transform: translateY(20px);
}

.mesto-animate.animate-fade-left {
    transform: translateX(-20px);
}

.mesto-animate.animate-fade-right {
    transform: translateX(20px);
}

.mesto-animate.animated {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* Spin animation for loading */
@keyframes mesto-spin {
    to { transform: rotate(360deg); }
}

.mesto-spinner {
    animation: mesto-spin 1s linear infinite;
}

/* Pulse animation */
@keyframes mesto-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.mesto-pulse {
    animation: mesto-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========================================
   ELEMENTOR COMPATIBILITY
   ======================================== */

/* Ensure Elementor sections inherit theme styles */
.elementor-section.mesto-section {
    overflow: hidden;
}

/* Fix Elementor widget widths */
.elementor-widget.mesto-widget {
    width: 100%;
}

/* Elementor dark section background override */
.elementor-section.mesto-dark-section .elementor-container {
    color: #fff;
}