/**
 * Campaign Engine V6 - UI Enhancements
 * 
 * Centralized enhancement styles that work with ANY brandpack.
 * All enhancements use --brand-* variables defined by brandpacks.
 * 
 * @version 6.2.2
 * @since 6.2.1
 * 
 * BRANDPACK REQUIREMENTS:
 * Brandpacks only need to define these CSS variables:
 * --brand-primary, --brand-secondary, --brand-accent,
 * --brand-surface, --brand-text, --brand-muted
 */

/* =========================================================================
   DEFAULT BRAND VARIABLES (Fallbacks)
   These are overridden by brandpack :root definitions
   ========================================================================= */

:root {
    /* Default fallbacks if brandpack doesn't define */
    --brand-primary: #4F46E5;
    --brand-secondary: #1a1a1a;
    --brand-accent: #7C3AED;
    --brand-surface: #f5f5f5;
    --brand-text: #1a1a1a;
    --brand-muted: #666666;
    --brand-bg: #ffffff;
    
    /* Derived colors (auto-calculated from brand colors) */
    --brand-primary-rgb: 79, 70, 229;
    --brand-glow: rgba(var(--brand-primary-rgb), 0.35);
    --brand-focus: rgba(var(--brand-primary-rgb), 0.25);
}

/* =========================================================================
   GRADIENT BUTTON STYLES
   Usage: Add class "ce-btn-gradient" to any button
   ========================================================================= */

.ce-btn-gradient,
.wp-block-button.ce-btn-gradient .wp-block-button__link {
    background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-accent), var(--brand-primary));
    background-size: 200% 200%;
    color: var(--brand-text);
    border: none;
    transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ce-btn-gradient:hover,
.wp-block-button.ce-btn-gradient .wp-block-button__link:hover {
    background-position: 100% 100%;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Gradient button - Light variant (for dark backgrounds) */
.ce-btn-gradient-light,
.wp-block-button.ce-btn-gradient-light .wp-block-button__link {
    background-image: linear-gradient(135deg, #fff, #f0f0f0, #fff);
    background-size: 200% 200%;
    color: var(--brand-secondary);
    transition: background-position 0.4s ease, transform 0.2s ease;
}

.ce-btn-gradient-light:hover,
.wp-block-button.ce-btn-gradient-light .wp-block-button__link:hover {
    background-position: 100% 100%;
    transform: translateY(-2px);
}

/* =========================================================================
   CARD HOVER EFFECTS
   ========================================================================= */

.ce-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

/* Subtle hover - less dramatic */
.ce-card-hover-subtle {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-card-hover-subtle:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Glow hover - brand-colored glow */
.ce-card-hover-glow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-card-hover-glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px var(--brand-glow, rgba(79, 70, 229, 0.35));
}

/* =========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================= */

.ce-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ce-reveal.ce-visible {
    opacity: 1;
    transform: translateY(0);
}

.ce-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ce-reveal-left.ce-visible {
    opacity: 1;
    transform: translateX(0);
}

.ce-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ce-reveal-right.ce-visible {
    opacity: 1;
    transform: translateX(0);
}

.ce-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ce-reveal-scale.ce-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
[data-ce-stagger] > .ce-reveal:nth-child(1) { transition-delay: 0ms; }
[data-ce-stagger] > .ce-reveal:nth-child(2) { transition-delay: 100ms; }
[data-ce-stagger] > .ce-reveal:nth-child(3) { transition-delay: 200ms; }
[data-ce-stagger] > .ce-reveal:nth-child(4) { transition-delay: 300ms; }
[data-ce-stagger] > .ce-reveal:nth-child(5) { transition-delay: 400ms; }
[data-ce-stagger] > .ce-reveal:nth-child(6) { transition-delay: 500ms; }

/* =========================================================================
   DARK FORM STYLING
   ========================================================================= */

.ce-form-dark {
    background: var(--brand-secondary);
    border-radius: 12px;
}

.ce-form-dark input,
.ce-form-dark textarea,
.ce-form-dark select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 14px 16px;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ce-form-dark input::placeholder,
.ce-form-dark textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.ce-form-dark input:focus,
.ce-form-dark textarea:focus,
.ce-form-dark select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    outline: none;
}

.ce-form-dark button[type="submit"],
.ce-form-dark input[type="submit"] {
    background: var(--brand-primary);
    color: var(--brand-text);
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ce-form-dark button[type="submit"]:hover,
.ce-form-dark input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* =========================================================================
   TIMELINE STYLING
   ========================================================================= */

.ce-timeline {
    position: relative;
    padding-left: 40px;
}

.ce-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-accent));
    border-radius: 3px;
}

.ce-timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.ce-timeline-number {
    position: absolute;
    left: -40px;
    top: 0;
    width: 32px;
    height: 32px;
    background: var(--brand-primary);
    color: var(--brand-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px var(--brand-glow, rgba(79, 70, 229, 0.35));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-timeline-content {
    background: var(--brand-surface);
    padding: 20px 24px;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-timeline-item:hover .ce-timeline-number {
    transform: scale(1.15);
}

.ce-timeline-item:hover .ce-timeline-content {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* =========================================================================
   LINK STYLES
   ========================================================================= */

.ce-link-underline a {
    position: relative;
    text-decoration: none;
    color: var(--brand-accent);
}

.ce-link-underline a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-primary);
    transition: width 0.3s ease;
}

.ce-link-underline a:hover::after {
    width: 100%;
}

/* Arrow link with animation */
.ce-link-arrow a::after {
    content: ' →';
    transition: transform 0.2s ease;
    display: inline-block;
}

.ce-link-arrow a:hover::after {
    transform: translateX(4px);
}

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

/* Text shadow for readability on images */
.ce-text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Glassmorphism effect */
.ce-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient text */
.ce-gradient-text {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================================================
   AUTOMATIC GLOBAL ENHANCEMENTS
   These apply to ALL brandpacks automatically - no classes needed
   ========================================================================= */

/* --- Smooth Scrolling (site-wide) --- */
html {
    scroll-behavior: smooth;
}

/* --- Button Enhancements --- */
.wp-block-button__link {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* --- Form Input Focus Glow (brand-colored) --- */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-focus, rgba(79, 70, 229, 0.25));
}

/* --- Focus States for Accessibility --- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* --- Image Smooth Loading --- */
.wp-block-image img {
    transition: opacity 0.3s ease;
}

/* --- Link Transitions --- */
.wp-block-paragraph a,
.wp-block-list a {
    transition: color 0.2s ease;
}

/* --- Testimonial Card Auto-Hover --- */
.ce-testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* --- Feature Card Auto-Hover --- */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--brand-primary);
}

/* --- Product Card Image Zoom --- */
.product-card {
    overflow: hidden;
}

.product-card img {
    transition: transform 0.4s ease;
}

.product-card:hover img {
    transform: scale(1.05);
}

/* --- Gallery Image Zoom --- */
.ce-gallery-item {
    overflow: hidden;
    border-radius: 8px;
}

.ce-gallery-item img {
    transition: transform 0.4s ease;
}

.ce-gallery-item:hover img {
    transform: scale(1.08);
}

/* --- FAQ/Details Hover Highlight --- */
.wp-block-details {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-details:hover {
    background-color: var(--brand-surface);
}

.wp-block-details:hover summary {
    color: var(--brand-primary);
}

/* --- Blockquote Styling --- */
blockquote,
.wp-block-quote {
    position: relative;
    padding-left: 24px;
    border-left: 4px solid var(--brand-primary);
    font-style: italic;
}

blockquote::before,
.wp-block-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: -5px;
    font-size: 4rem;
    color: var(--brand-primary);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

/* --- Trust Badge Hover --- */
.ce-trust-badges img,
.trust-badges img {
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(30%);
}

.ce-trust-badges img:hover,
.trust-badges img:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

/* --- Stats/Counter Section Enhancement --- */
[class*="stats"] .wp-block-column,
[class*="counter"] .wp-block-column {
    transition: transform 0.3s ease;
}

[class*="stats"] .wp-block-column:hover,
[class*="counter"] .wp-block-column:hover {
    transform: scale(1.05);
}

/* --- Table Row Hover --- */
.wp-block-table tr {
    transition: background-color 0.2s ease;
}

.wp-block-table tbody tr:hover {
    background-color: var(--brand-surface);
}

/* --- List Markers --- */
.wp-block-list li::marker {
    color: var(--brand-primary);
}

/* --- Separator Enhancement --- */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 80px;
    transition: width 0.3s ease;
}

/* --- Cover Block Text Enhancement --- */
.wp-block-cover__inner-container {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* --- Pricing Card Glow on Hover --- */
.wp-block-group[class*="has-brand-primary-border-color"]:hover {
    box-shadow: 0 0 20px var(--brand-glow, rgba(79, 70, 229, 0.35));
}

/* --- Lead Card Enhancement --- */
.ce-lead-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-lead-card:hover {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.18);
}

/* --- Back to Top Button (injected by JS) --- */
.ce-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--brand-secondary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ce-back-to-top.ce-visible {
    opacity: 1;
    visibility: visible;
}

.ce-back-to-top:hover {
    background: var(--brand-primary);
    color: var(--brand-text);
    transform: translateY(-3px);
}

.ce-back-to-top::before {
    content: '↑';
    font-size: 1.5rem;
    font-weight: bold;
}

/* =========================================================================
   DARK SECTION ENHANCEMENTS
   Auto-styling for sections with brand-secondary background
   ========================================================================= */

.has-brand-secondary-background-color {
    --local-text: #ffffff;
    --local-muted: rgba(255, 255, 255, 0.7);
}

.has-brand-secondary-background-color h1,
.has-brand-secondary-background-color h2,
.has-brand-secondary-background-color h3,
.has-brand-secondary-background-color h4,
.has-brand-secondary-background-color p {
    color: var(--local-text, #ffffff);
}

.has-brand-secondary-background-color .wp-block-button__link {
    background: var(--brand-primary);
    color: var(--brand-text);
}

.has-brand-secondary-background-color .wp-block-button__link:hover {
    box-shadow: 0 4px 20px var(--brand-glow, rgba(79, 70, 229, 0.5));
}

/* Stats on dark background - highlight numbers */
.has-brand-secondary-background-color [class*="stats"] p[style*="font-size:3"],
.has-brand-secondary-background-color [class*="stats"] p[style*="font-size: 3"] {
    color: var(--brand-primary);
}

/* =========================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
    .ce-reveal,
    .ce-reveal-left,
    .ce-reveal-right,
    .ce-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .wp-block-button__link {
        box-shadow: none !important;
    }
    
    .ce-back-to-top {
        display: none !important;
    }
}

/* =========================================================================
   REDUCED MOTION SUPPORT
   Respects user preference for reduced animations
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .ce-reveal,
    .ce-reveal-left,
    .ce-reveal-right,
    .ce-reveal-scale {
        opacity: 1;
        transform: none;
    }
}