/**
 * Libertify UI Fixes — CSS Overrides
 * ====================================
 * Loaded at priority 9999 to override Elementor inline styles.
 * Uses !important sparingly but necessarily — Elementor renders
 * styles inline, so specificity alone won't win.
 *
 * Sections:
 *   1. CSS Custom Properties (design tokens)
 *   2. Button System Standardization
 *   3. Typography Scale
 *   4. Color Consistency
 *   5. Border Radius Tokens
 *   6. CTA Visibility Fixes
 *   7. Navigation Cleanup
 *   8. Misc Fixes
 */

/* =========================================================================
   1. CSS CUSTOM PROPERTIES — Design Tokens
   ========================================================================= */

:root {
    /* Primary brand palette */
    --luf-primary:       #3BD4CA;
    --luf-primary-hover: #229E95;
    --luf-primary-light: rgba(59, 212, 202, 0.1);
    --luf-primary-ring:  rgba(59, 212, 202, 0.35);

    /* Secondary */
    --luf-secondary:       #2563EB;
    --luf-secondary-hover: #1D4ED8;

    /* Dark brand */
    --luf-dark:      #161A26;
    --luf-dark-mid:  #1E2638;
    --luf-dark-soft: #2E3952;

    /* Neutrals */
    --luf-white:      #FFFFFF;
    --luf-black:      #000000;
    --luf-gray-900:   #212121;
    --luf-gray-600:   #6B7280;
    --luf-gray-200:   #F4F4F4;
    --luf-gray-100:   #FAFAFA;
    --luf-gray-border:#E5E7EB;

    /* Typography */
    --luf-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --luf-font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Border Radius Tokens */
    --luf-radius-sm:   8px;
    --luf-radius-md:   12px;
    --luf-radius-lg:   20px;
    --luf-radius-pill:  999px;

    /* Shadows */
    --luf-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
    --luf-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
    --luf-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);
    --luf-shadow-cta: 0 4px 20px rgba(59, 212, 202, 0.35);
}


/* =========================================================================
   2. BUTTON SYSTEM — Unified CTA Styling
   =========================================================================
   Target Elementor button widgets across all pages. Override the inconsistent
   3px/8px/999px radius and grey/white/blue backgrounds.
   ========================================================================= */

/* ---- Primary CTA: "START FREE TRIAL", "Start Free Trial", etc. ---- */
.elementor-button-wrapper .elementor-button,
.elementor-widget-button .elementor-button,
a.elementor-button,
.elementor-button {
    background-color: var(--luf-primary) !important;
    color: var(--luf-white) !important;
    border-color: var(--luf-primary) !important;
    border-radius: var(--luf-radius-pill) !important;
    font-family: var(--luf-font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    padding: 12px 28px !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.elementor-button-wrapper .elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
a.elementor-button:hover,
.elementor-button:hover {
    background-color: var(--luf-primary-hover) !important;
    border-color: var(--luf-primary-hover) !important;
    color: var(--luf-white) !important;
    transform: translateY(-1px);
    box-shadow: var(--luf-shadow-cta) !important;
}

/* Button text/icon color */
.elementor-button .elementor-button-text,
.elementor-button .elementor-button-icon {
    color: var(--luf-white) !important;
}

/* ---- Secondary / Outline buttons (if class present) ---- */
.elementor-button.elementor-button--outline,
.elementor-button[class*="secondary"],
.elementor-widget-button.secondary .elementor-button {
    background-color: transparent !important;
    color: var(--luf-dark) !important;
    border: 2px solid var(--luf-dark) !important;
    border-radius: var(--luf-radius-pill) !important;
}

.elementor-button.elementor-button--outline:hover,
.elementor-button[class*="secondary"]:hover {
    background-color: var(--luf-dark) !important;
    color: var(--luf-white) !important;
}

/* ---- Ghost / tertiary buttons ---- */
.elementor-button[class*="ghost"],
.elementor-button[class*="tertiary"] {
    background-color: var(--luf-primary-light) !important;
    color: var(--luf-primary) !important;
    border: 1px solid rgba(59, 212, 202, 0.25) !important;
    border-radius: var(--luf-radius-pill) !important;
}

.elementor-button[class*="ghost"]:hover,
.elementor-button[class*="tertiary"]:hover {
    background-color: rgba(59, 212, 202, 0.18) !important;
    border-color: rgba(59, 212, 202, 0.4) !important;
}


/* =========================================================================
   3. TYPOGRAPHY SCALE — Consistent Headings & Body
   =========================================================================
   Fix the wild variation: H1 from 16px–40px, H2 from 18px–42px.
   ========================================================================= */

/* H1: Main page title — always the largest */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-heading-title.elementor-size-xxl,
h1.elementor-heading-title {
    font-size: clamp(36px, 5vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    font-family: var(--luf-font-heading) !important;
}

/* H2: Section headers */
.elementor-widget-heading h2.elementor-heading-title,
h2.elementor-heading-title {
    font-size: clamp(28px, 3.5vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    font-family: var(--luf-font-heading) !important;
}

/* H3: Subsection / card headers */
.elementor-widget-heading h3.elementor-heading-title,
h3.elementor-heading-title {
    font-size: clamp(20px, 2.5vw, 28px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    font-family: var(--luf-font-heading) !important;
}

/* H4: Minor headings */
.elementor-widget-heading h4.elementor-heading-title,
h4.elementor-heading-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Body text — standardize to 16px */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-text-editor p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-family: var(--luf-font-body) !important;
}

/* Small / caption text */
.elementor-widget-text-editor small,
.elementor-widget-text-editor .small {
    font-size: 14px !important;
}

/* Section labels / overlines */
.elementor-widget-heading .elementor-heading-title[class*="overline"],
.elementor-heading-title.elementor-size-small {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--luf-primary) !important;
}


/* =========================================================================
   4. COLOR CONSISTENCY — Unified Accent & Link Colors
   =========================================================================
   Replace the 4 different accent colors (#3BD4CA, #2563EB, #3AC6BE, #69727D)
   with a single consistent teal system.
   ========================================================================= */

/* Teal accent: CTAs, highlights, active states */
.elementor-widget a:not(.elementor-button),
.elementor-widget-text-editor a {
    color: var(--luf-primary) !important;
    transition: color 0.2s ease;
}

.elementor-widget a:not(.elementor-button):hover,
.elementor-widget-text-editor a:hover {
    color: var(--luf-primary-hover) !important;
}

/* Icon boxes and feature icons — consistent teal tint */
.elementor-icon-box-icon .elementor-icon {
    color: var(--luf-primary) !important;
}

/* Progress bars, dividers, etc. */
.elementor-widget-progress .elementor-progress-bar {
    background-color: var(--luf-primary) !important;
}

.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--luf-primary) !important;
}


/* =========================================================================
   5. BORDER RADIUS TOKENS — Consistent Corners
   =========================================================================
   Replace the 3px/5px/6px/8px/13px chaos with 4 clear tokens.
   ========================================================================= */

/* Cards and containers */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-column .elementor-widget-wrap,
.elementor-widget .elementor-widget-container {
    /* Don't force radius on all containers — only those with backgrounds */
}

/* Pricing cards and feature cards */
.elementor-widget-price-table .elementor-price-table,
.elementor-widget-call-to-action .elementor-cta,
.elementor-widget-image-box {
    border-radius: var(--luf-radius-md) !important;
    overflow: hidden;
}

/* Image containers */
.elementor-widget-image img {
    border-radius: var(--luf-radius-sm) !important;
}

/* Testimonial cards */
.elementor-widget-testimonial .elementor-testimonial-wrapper {
    border-radius: var(--luf-radius-md) !important;
}

/* Input fields */
.elementor-field-textual,
.elementor-field-type-text input,
.elementor-field-type-email input,
.elementor-field-type-textarea textarea {
    border-radius: var(--luf-radius-sm) !important;
}


/* =========================================================================
   6. CTA VISIBILITY — Fix Homepage White-on-White Button
   =========================================================================
   The hero section CTA should always be visible regardless of background.
   ========================================================================= */

/* Hero section buttons — ensure high contrast */
.elementor-section[data-id] .elementor-element .elementor-button,
.e-con .elementor-button {
    /* Already handled by the global button override above */
    /* This rule exists as a fallback for deeply nested Elementor containers */
    min-height: 44px; /* touch target minimum */
}

/* Ensure nav CTA is always visible */
.elementor-location-header .elementor-button,
header .elementor-button,
.site-header .elementor-button {
    background-color: var(--luf-primary) !important;
    color: var(--luf-white) !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    border-radius: var(--luf-radius-pill) !important;
}


/* =========================================================================
   7. NAVIGATION CLEANUP
   =========================================================================
   Visual fixes for the navigation (DOM cleanup requires JS/PHP).
   ========================================================================= */

/* Sticky nav backdrop blur */
.elementor-location-header,
header.site-header {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Nav link styles */
.elementor-nav-menu--main .elementor-item {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s ease !important;
}

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

/* Dropdown menus */
.elementor-nav-menu--dropdown {
    border-radius: var(--luf-radius-sm) !important;
    box-shadow: var(--luf-shadow-lg) !important;
    border: 1px solid var(--luf-gray-border) !important;
}


/* =========================================================================
   8. PRICING PAGE — Card Enhancements
   =========================================================================
   Make pricing cards more consistent and the "Most Popular" badge stand out.
   ========================================================================= */

/* Pricing table cards */
.elementor-widget-price-table {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.elementor-widget-price-table:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--luf-shadow-lg) !important;
}

/* Pricing CTA buttons — keep them teal */
.elementor-price-table__button .elementor-button {
    background-color: var(--luf-primary) !important;
    border-radius: var(--luf-radius-pill) !important;
    width: 100% !important;
}

/* "Most Popular" badge/ribbon */
.elementor-price-table__ribbon,
.elementor-price-table__ribbon-inner {
    background-color: var(--luf-primary) !important;
}


/* =========================================================================
   9. USE CASE CARDS
   =========================================================================
   Ensure use case cards have consistent styling.
   ========================================================================= */

/* Use case grid cards */
.elementor-widget-image-box .elementor-image-box-content .elementor-image-box-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--luf-dark) !important;
}

.elementor-widget-image-box .elementor-image-box-content .elementor-image-box-description {
    font-size: 14px !important;
    color: var(--luf-gray-600) !important;
    line-height: 1.6 !important;
}


/* =========================================================================
   10. TRUST BADGES & FOOTER
   ========================================================================= */

/* Trust/security badges — consistent styling */
.elementor-widget-icon-list .elementor-icon-list-item {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Footer */
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.elementor-location-footer a {
    color: var(--luf-primary) !important;
}

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


/* =========================================================================
   11. RESPONSIVE ADJUSTMENTS
   ========================================================================= */

@media (max-width: 1024px) {
    .elementor-widget-heading h1.elementor-heading-title,
    h1.elementor-heading-title {
        font-size: 32px !important;
    }

    .elementor-widget-heading h2.elementor-heading-title,
    h2.elementor-heading-title {
        font-size: 26px !important;
    }
}

@media (max-width: 767px) {
    .elementor-widget-heading h1.elementor-heading-title,
    h1.elementor-heading-title {
        font-size: 28px !important;
    }

    .elementor-widget-heading h2.elementor-heading-title,
    h2.elementor-heading-title {
        font-size: 22px !important;
    }

    .elementor-button-wrapper .elementor-button,
    .elementor-button {
        padding: 10px 22px !important;
        font-size: 13px !important;
    }

    /* Ensure touch targets are large enough on mobile */
    .elementor-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}


/* =========================================================================
   12. ANIMATION REFINEMENTS
   =========================================================================
   Smooth transitions for interactive elements.
   ========================================================================= */

.elementor-widget {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Disable Elementor's default hover animations that can feel janky */
.elementor-widget:hover {
    /* Let individual components define their own hover */
}

/* Smooth scroll anchor offset for sticky header */
html {
    scroll-padding-top: 80px;
}