/**
 * Elementor Overrides
 * 
 * Custom styles to ensure Elementor widgets match the Sininen Talo design system
 * 
 * @package Sininen_Talo
 */

/* ==========================================================================
   Global Elementor Styles
   ========================================================================== */

/* Ensure Elementor uses our font families */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-heading);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: var(--font-body);
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.elementor-button {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all var(--transition-normal);
}

/* Primary button style */
.elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.elementor-button.elementor-button-primary:hover,
.elementor-widget-button .elementor-button:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* Outline button style */
.elementor-button.elementor-button-outline {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.elementor-button.elementor-button-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

.elementor-section {
    --e-global-color-primary: var(--color-primary);
    --e-global-color-secondary: var(--color-secondary);
    --e-global-color-accent: var(--color-accent);
    --e-global-color-text: var(--color-foreground);
}

/* Full-width sections */
.elementor-section.elementor-section-full_width {
    padding-left: 0;
    padding-right: 0;
}

/* Section with champagne background */
.elementor-section.bg-champagne {
    background-color: var(--color-champagne);
}

/* Section with primary background */
.elementor-section.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

.elementor-section.bg-primary .elementor-heading-title,
.elementor-section.bg-primary h1,
.elementor-section.bg-primary h2,
.elementor-section.bg-primary h3 {
    color: var(--color-primary-foreground);
}

/* ==========================================================================
   Navigation Menu Widget
   ========================================================================== */

.elementor-nav-menu .elementor-item {
    font-family: var(--font-body);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: rgba(43, 43, 43, 0.7);
    transition: color var(--transition-normal);
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
    color: var(--color-primary);
}

/* Mobile menu */
.elementor-nav-menu--dropdown .elementor-item {
    padding: 0.75rem 1.5rem;
}

/* ==========================================================================
   Image and Gallery Styles
   ========================================================================== */

.elementor-widget-image img {
    border-radius: var(--radius);
}

/* Image hover effect */
.elementor-widget-image.hover-scale .elementor-image {
    overflow: hidden;
}

.elementor-widget-image.hover-scale img {
    transition: transform var(--transition-slow);
}

.elementor-widget-image.hover-scale:hover img {
    transform: scale(1.05);
}

/* Gallery */
.elementor-widget-gallery .elementor-gallery-item {
    border-radius: var(--radius);
    overflow: hidden;
}

.elementor-widget-gallery .elementor-gallery-item__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.elementor-form .elementor-field-group {
    margin-bottom: 1.5rem;
}

.elementor-form .elementor-field {
    font-family: var(--font-body);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.elementor-form .elementor-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(115, 82, 45, 0.1);
}

.elementor-form .elementor-field-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
    margin-bottom: 0.5rem;
}

.elementor-form .elementor-button {
    font-family: var(--font-body);
    font-weight: 500;
}

/* ==========================================================================
   Icon Box and Icon List
   ========================================================================== */

.elementor-widget-icon-box .elementor-icon {
    color: var(--color-primary);
}

.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: var(--font-heading);
}

.elementor-widget-icon-list .elementor-icon-list-icon {
    color: var(--color-primary);
}

/* ==========================================================================
   Testimonial and Quote Styles
   ========================================================================== */

.elementor-widget-testimonial .elementor-testimonial-content {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--color-primary);
}

.elementor-widget-testimonial .elementor-testimonial-name {
    font-family: var(--font-body);
    font-weight: 600;
}

/* ==========================================================================
   Card Styles for Elementor
   ========================================================================== */

.elementor-widget-image-box {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.elementor-widget-image-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.elementor-widget-image-box .elementor-image-box-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
}

/* ==========================================================================
   Cover/Hero Section Styles
   ========================================================================== */

.elementor-section[data-settings*="background_overlay"] {
    position: relative;
}

/* Hero text on dark backgrounds */
.elementor-section.hero-section .elementor-heading-title {
    color: white;
}

.elementor-section.hero-section .elementor-widget-text-editor {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Animation Classes
   ========================================================================== */

.elementor-invisible {
    visibility: hidden;
}

/* Custom entrance animations */
@keyframes sininen-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-sininen-fade-in-up {
    animation: sininen-fade-in-up 0.8s ease-out forwards;
}

/* ==========================================================================
   Footer Styles in Elementor
   ========================================================================== */

.elementor-location-footer {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

.elementor-location-footer .elementor-heading-title {
    color: var(--color-primary-foreground);
}

.elementor-location-footer a {
    color: rgba(247, 245, 242, 0.8);
    transition: color var(--transition-normal);
}

.elementor-location-footer a:hover {
    color: var(--color-primary-foreground);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
    .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
    
    .elementor-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}