/**
 * Elementor Custom CSS Overrides
 * Ensures Elementor elements match the Safari Worth noir theme
 *
 * @package SafariWorth
 */

/* ============================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================ */

/* Force dark background on Elementor sections */
.elementor-section {
    --e-global-color-primary: #C8A55C;
    --e-global-color-secondary: #B8956A;
    --e-global-color-text: #F5F0E8;
    --e-global-color-accent: #C17F59;
}

/* Default section styling */
.elementor-section:not(.elementor-section-full_width) > .elementor-container {
    max-width: 1400px;
}

/* Dark background for sections by default */
.elementor-page .elementor-section {
    background-color: var(--noir-900, #0A0A0A);
}

/* ============================================
   TYPOGRAPHY OVERRIDES
   ============================================ */

/* Headings */
.elementor-widget-heading .elementor-heading-title {
    font-family: 'Cormorant', serif;
    color: var(--cream-100, #F5F0E8);
    letter-spacing: -0.02em;
}

.elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 400;
    line-height: 0.95;
}

.elementor-widget-heading .elementor-heading-title.elementor-size-xl {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
}

/* Text */
.elementor-widget-text-editor {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-300, #A89B8C);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ============================================
   BUTTON OVERRIDES
   ============================================ */

/* Primary buttons */
.elementor-button {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    border-radius: 0;
    padding: 1rem 2.5rem;
    transition: all 0.4s cubic-bezier(0.25, 0, 0, 1);
    position: relative;
    overflow: hidden;
}

.elementor-button-wrapper .elementor-button {
    background: linear-gradient(135deg, var(--gold-400, #C8A55C), var(--gold-500, #B8956A));
    color: var(--noir-900, #0A0A0A);
    border: none;
}

.elementor-button-wrapper .elementor-button:hover {
    background: linear-gradient(135deg, var(--gold-500, #B8956A), var(--terracotta, #C17F59));
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(200, 165, 92, 0.3);
}

/* Outline button style - use class .sw-btn-outline on Elementor button */
.sw-btn-outline .elementor-button {
    background: transparent;
    border: 1px solid var(--cream-300, #A89B8C);
    color: var(--cream-100, #F5F0E8);
}

.sw-btn-outline .elementor-button:hover {
    border-color: var(--gold-400, #C8A55C);
    color: var(--gold-400, #C8A55C);
    background: transparent;
    box-shadow: none;
}

/* ============================================
   IMAGE & GALLERY OVERRIDES
   ============================================ */

.elementor-widget-image img {
    border-radius: 0;
}

.elementor-image-gallery .gallery-item {
    overflow: hidden;
}

.elementor-image-gallery .gallery-item img {
    transition: transform 0.6s cubic-bezier(0.25, 0, 0, 1);
}

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

/* ============================================
   ICON & ICON BOX OVERRIDES
   ============================================ */

.elementor-widget-icon-box .elementor-icon {
    color: var(--gold-400, #C8A55C);
}

.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-100, #F5F0E8);
    font-weight: 500;
}

.elementor-widget-icon-box .elementor-icon-box-description {
    color: var(--cream-300, #A89B8C);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}

/* ============================================
   FORM OVERRIDES
   ============================================ */

.elementor-field-group .elementor-field {
    background: var(--noir-800, #1A1A1A);
    border: 1px solid var(--noir-700, #2A2A2A);
    color: var(--cream-100, #F5F0E8);
    font-family: 'DM Sans', sans-serif;
    padding: 0.875rem 1.25rem;
    border-radius: 0;
    transition: border-color 0.3s ease;
}

.elementor-field-group .elementor-field:focus {
    border-color: var(--gold-400, #C8A55C);
    outline: none;
    box-shadow: 0 0 0 1px var(--gold-400, #C8A55C);
}

.elementor-field-group .elementor-field::placeholder {
    color: var(--cream-300, #A89B8C);
    opacity: 0.5;
}

.elementor-field-group label {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-200, #E8E0D4);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   COUNTER / STATS OVERRIDES
   ============================================ */

.elementor-widget-counter .elementor-counter-number-wrapper {
    font-family: 'Cormorant', serif;
    color: var(--gold-400, #C8A55C);
    font-weight: 400;
}

.elementor-widget-counter .elementor-counter-title {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-300, #A89B8C);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
}

/* ============================================
   TESTIMONIALS OVERRIDES
   ============================================ */

.elementor-widget-testimonial .elementor-testimonial-content {
    font-family: 'Cormorant', serif;
    color: var(--cream-100, #F5F0E8);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.6;
}

.elementor-widget-testimonial .elementor-testimonial-name {
    font-family: 'DM Sans', sans-serif;
    color: var(--gold-400, #C8A55C);
    font-weight: 500;
}

.elementor-widget-testimonial .elementor-testimonial-job {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-300, #A89B8C);
}

/* ============================================
   TABS / ACCORDION OVERRIDES
   ============================================ */

.elementor-widget-tabs .elementor-tab-title {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-300, #A89B8C);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
}

.elementor-widget-tabs .elementor-tab-title.elementor-active {
    color: var(--gold-400, #C8A55C);
    border-color: var(--gold-400, #C8A55C);
}

.elementor-widget-tabs .elementor-tab-content {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-300, #A89B8C);
    font-weight: 300;
    background: var(--noir-850, #111111);
    border-color: var(--noir-700, #2A2A2A);
}

.elementor-widget-accordion .elementor-accordion-item {
    border-color: var(--noir-700, #2A2A2A);
}

.elementor-widget-accordion .elementor-tab-title {
    font-family: 'DM Sans', sans-serif;
    color: var(--cream-100, #F5F0E8);
    background: var(--noir-850, #111111);
}

.elementor-widget-accordion .elementor-tab-title.elementor-active {
    color: var(--gold-400, #C8A55C);
}

.elementor-widget-accordion .elementor-tab-content {
    background: var(--noir-800, #1A1A1A);
    color: var(--cream-300, #A89B8C);
    border-color: var(--noir-700, #2A2A2A);
}

/* ============================================
   DIVIDER OVERRIDES
   ============================================ */

.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--noir-700, #2A2A2A);
}

/* Gold divider - add class .sw-divider-gold */
.sw-divider-gold .elementor-divider-separator {
    border-color: var(--gold-400, #C8A55C);
}

/* ============================================
   COLUMN / SECTION UTILITY CLASSES
   ============================================ */

/* Noir background variants */
.sw-bg-noir-900 {
    background-color: var(--noir-900, #0A0A0A) !important;
}

.sw-bg-noir-850 {
    background-color: var(--noir-850, #111111) !important;
}

.sw-bg-noir-800 {
    background-color: var(--noir-800, #1A1A1A) !important;
}

.sw-bg-noir-700 {
    background-color: var(--noir-700, #2A2A2A) !important;
}

/* Gold gradient background */
.sw-bg-gold-gradient {
    background: linear-gradient(135deg, var(--gold-400, #C8A55C), var(--gold-500, #B8956A)) !important;
}

/* Text color utilities */
.sw-text-gold {
    color: var(--gold-400, #C8A55C) !important;
}

.sw-text-cream {
    color: var(--cream-100, #F5F0E8) !important;
}

.sw-text-muted {
    color: var(--cream-300, #A89B8C) !important;
}

/* ============================================
   LABEL / TAG STYLE
   ============================================ */

/* Use on any text widget with class .sw-label */
.sw-label,
.sw-label .elementor-widget-container {
    font-family: 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gold-400, #C8A55C);
}

/* Section number - use class .sw-section-number */
.sw-section-number,
.sw-section-number .elementor-heading-title {
    font-family: 'Cormorant', serif;
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 300;
    line-height: 1;
    color: var(--noir-700, #2A2A2A);
    -webkit-text-stroke: 1px var(--noir-700, #2A2A2A);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1024px) {
    .elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
        font-size: clamp(2.5rem, 6vw, 5rem);
    }
}

@media (max-width: 768px) {
    .elementor-button {
        padding: 0.875rem 2rem;
    }

    .elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .elementor-widget-heading .elementor-heading-title.elementor-size-xl {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
}