/**
 * Afslanking.be — Elementor Custom CSS
 * Extends and overrides Elementor's default widget styles to match brand design.
 */

/* ============================================================
   ELEMENTOR BASE RESETS
   ============================================================ */

/* Remove default section padding */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1400px;
}

/* Ensure Elementor respects our typography */
.elementor-widget-heading .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.15;
}

.elementor-widget-text-editor {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.75;
}

/* ============================================================
   ELEMENTOR BUTTON WIDGET
   ============================================================ */
.elementor-widget-button .elementor-button {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 6px;
    transition: all 0.35s ease;
}

.elementor-widget-button .elementor-button:hover {
    transform: translateY(-2px);
}

/* Gold Button variant — add CSS class 'btn-gold-el' to button widget */
.btn-gold-el .elementor-button {
    background: #C9A84C !important;
    color: #131709 !important;
    border-color: #C9A84C !important;
    box-shadow: 0 4px 16px rgba(201,168,76,0.4);
}
.btn-gold-el .elementor-button:hover {
    background: #E8C96B !important;
    border-color: #E8C96B !important;
    box-shadow: 0 8px 24px rgba(201,168,76,0.5);
}

/* Dark Outline variant */
.btn-outline-el .elementor-button {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.7) !important;
    color: #FFFFFF !important;
}
.btn-outline-el .elementor-button:hover {
    background: #FFFFFF !important;
    color: #131709 !important;
}

/* ============================================================
   ELEMENTOR IMAGE WIDGET
   ============================================================ */
.elementor-widget-image img {
    border-radius: 0;
    transition: transform 0.6s ease;
}

/* Rounded images — add class 'img-rounded' */
.img-rounded .elementor-widget-image img {
    border-radius: 20px;
}

/* Gold border image */
.img-gold-border .elementor-widget-image img {
    border: 2px solid rgba(201,168,76,0.4);
}

/* ============================================================
   ELEMENTOR HEADING WIDGET
   ============================================================ */

/* Gold heading accent */
.heading-gold .elementor-heading-title {
    color: #C9A84C !important;
}

/* Eyebrow text style */
.eyebrow-el .elementor-heading-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #C9A84C !important;
}

/* Large hero heading */
.hero-heading .elementor-heading-title {
    font-size: clamp(2.8rem, 4.5vw, 5rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
}

/* ============================================================
   ELEMENTOR SECTION/CONTAINER BACKGROUNDS
   ============================================================ */

/* Dark sections */
.bg-dark { background-color: #131709 !important; }
.bg-dark-2 { background-color: #1A1E0A !important; }
.bg-dark-3 { background-color: #22280F !important; }
.bg-dark-green { background-color: #1C2810 !important; }
.bg-cream { background-color: #F5F0E8 !important; }
.bg-gold { background-color: #C9A84C !important; }

/* ============================================================
   ELEMENTOR FORM WIDGET
   ============================================================ */
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    padding: 14px 18px !important;
    transition: border-color 0.2s ease !important;
}

.elementor-form .elementor-field-group input::placeholder,
.elementor-form .elementor-field-group textarea::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
    outline: none !important;
    border-color: #C9A84C !important;
    background: rgba(201,168,76,0.05) !important;
}

/* Form submit button */
.elementor-form .elementor-button[type="submit"] {
    background: #C9A84C !important;
    color: #131709 !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 6px !important;
    padding: 15px 32px !important;
    transition: all 0.35s ease !important;
    box-shadow: 0 4px 16px rgba(201,168,76,0.4) !important;
}

.elementor-form .elementor-button[type="submit"]:hover {
    background: #E8C96B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(201,168,76,0.5) !important;
}

/* Light form variant — add class 'form-light' to Elementor form */
.form-light .elementor-field-group input,
.form-light .elementor-field-group textarea {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #131709 !important;
}

/* ============================================================
   ELEMENTOR ICON BOX WIDGET
   ============================================================ */
.elementor-widget-icon-box .elementor-icon {
    color: #C9A84C !important;
}

.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================================
   ELEMENTOR ACCORDION WIDGET (FAQ)
   ============================================================ */
.elementor-widget-accordion .elementor-accordion-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(201,168,76,0.12) !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
}

.elementor-widget-accordion .elementor-tab-title {
    padding: 18px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    font-size: 0.9rem !important;
    border: none !important;
    background: transparent !important;
}

.elementor-widget-accordion .elementor-tab-title.elementor-active {
    color: #C9A84C !important;
}

.elementor-widget-accordion .elementor-tab-content {
    padding: 0 24px 18px !important;
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.6) !important;
    line-height: 1.75 !important;
    border-top: 1px solid rgba(201,168,76,0.1) !important;
}

/* ============================================================
   ELEMENTOR DIVIDER
   ============================================================ */
.elementor-widget-divider .elementor-divider-separator {
    border-top-color: rgba(201,168,76,0.3) !important;
}

/* ============================================================
   ELEMENTOR TESTIMONIAL / REVIEW
   ============================================================ */
.elementor-widget-testimonial .elementor-testimonial-content {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.75;
}

.elementor-widget-testimonial .elementor-testimonial-name {
    color: #FFFFFF;
    font-weight: 700;
}

/* ============================================================
   CUSTOM HTML WIDGET HELPERS
   ============================================================ */

/* Recipe card hover animation */
.recipe-card-widget {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.recipe-card-widget:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

/* Bookmark button in saved state */
.recipe-bookmark.saved {
    color: #C9A84C !important;
}

/* Nutrition stats box animations */
.nutrition-stats-box .nutrition-item {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease forwards;
}
.nutrition-stats-box .nutrition-item:nth-child(1) { animation-delay: 0.1s; }
.nutrition-stats-box .nutrition-item:nth-child(2) { animation-delay: 0.2s; }
.nutrition-stats-box .nutrition-item:nth-child(3) { animation-delay: 0.3s; }
.nutrition-stats-box .nutrition-item:nth-child(4) { animation-delay: 0.4s; }

/* ============================================================
   MOBILE MENU TOGGLE ANIMATION
   ============================================================ */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   FORM MESSAGE FEEDBACK
   ============================================================ */
.form-message {
    font-size: 0.85rem;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 6px;
}

/* ============================================================
   ELEMENTOR PRO HEADER/FOOTER OVERRIDES
   ============================================================ */

/* When using Elementor Pro Header Builder, make sure it's full width */
.e-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(19,23,9,0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(201,168,76,0.15) !important;
}

/* Page content push down to account for fixed header */
.e-header + * {
    padding-top: 74px;
}

/* ============================================================
   ELEMENTOR POPUP FORMS
   ============================================================ */
.elementor-popup-modal .elementor-popup-modal-bg {
    background: rgba(13,17,5,0.85);
    backdrop-filter: blur(8px);
}

.elementor-popup-modal .dialog-widget-content {
    background: var(--color-dark-2, #1A1E0A);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 20px;
}

/* ============================================================
   GLOBAL DATA-ANIMATE STATES
   ============================================================ */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   WORDPRESS ADMIN BAR OFFSET
   ============================================================ */
.admin-bar .elementor-location-header,
.admin-bar #site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    .admin-bar .elementor-location-header,
    .admin-bar #site-header {
        top: 46px !important;
    }
}