/* Template CSS - Minimal Override
 * Only basic CSS variables, no style overrides
 */

:root {
    /* Basic CSS Variables - No overrides */
    --font-primary: "Lato", sans-serif;
    --font-secondary: "Open Sans", sans-serif;
}

/* Hero Text White Override */
.intro-creative h1,
.intro-creative .text-decorated,
.intro-creative p,
.intro-creative .hero-subtitle,
.intro-creative .swiper-slide-content h1,
.intro-creative .swiper-slide-content p {
    color: #ffffff !important;
}

/* Hero CTA Button Special - White Background with Green Text */
.intro-creative .btn-hero-cta {
    background: #ffffff !important;
    color: #002b14 !important;
    border: 2px solid #ffffff !important;
}

.intro-creative .btn-hero-cta:hover {
    background: #002b14 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

/* Hero Buttons White Border (other buttons) */
.intro-creative .btn:not(.btn-hero-cta),
.intro-creative .btn-primary:not(.btn-hero-cta) {
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    background: transparent !important;
}

.intro-creative .btn:not(.btn-hero-cta):hover,
.intro-creative .btn-primary:not(.btn-hero-cta):hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

/* Lucide Icons Styling */
.blurb-icon svg,
.contact-icon svg,
.swiper-button-next svg,
.swiper-button-prev svg,
.navbar-switch svg,
.navbar-switch-menu svg {
    display: block;
}

/* Legal Service Icons - Brand Colors */
.legal-icon {
    color: #014923; /* Verde legal de la marca */
}

.legal-icon svg {
    color: inherit;
}

/* Header Icons */
.navbar-switch svg,
.navbar-switch-menu svg {
    color: #ffffff;
}

/* Hero Icons - White for visibility */
.intro-creative .blurb-icon svg {
    color: #ffffff;
}

/* Hero Slider Controls */
.swiper-button-next svg,
.swiper-button-prev svg {
    color: #ffffff;
}

/* Hero Slider Controls Hover */
.swiper-button-next:hover svg,
.swiper-button-prev:hover svg {
    color: #002b14;
}

/* Contact Icons - Brand Green */
.contact-icon svg {
    color: white;
}

/* Awards Icons - White for dark background */
.bg-900 .blurb-icon svg {
    color: #ffffff;
}

/* Practice Areas Section - Ensure proper styling */
.section-creative-list {
    position: relative;
}

.section-creative-list .link-arrow:hover {
    color: #014923; /* Verde legal de la marca al hover */
}

/* About Quote Section - White Text */
.section-creative-quote .quote-text {
    color: #ffffff !important;
}

/* About Quote Image - Bottom Center Position */
.section-creative-quote .layout-media.bg-image {
    background-position: bottom center !important;
}

/* Modern Navigation Dropdown Override - Fix gold/yellow hover colors */
.rd-navbar-fullwidth .navbar-navigation-dropdown-link:hover {
    color: #014923 !important; /* Brand green instead of template gold */
}

/* Override template dropdown background from dark green to white */
.rd-navbar-fullwidth .navbar-navigation-dropdown {
    background: #ffffff !important;
}

/* Fix dropdown link default color */
.rd-navbar-fullwidth .navbar-navigation-dropdown-link {
    color: #374151 !important;
}

/* Global button margin */
.btn-primary {
    margin-top: 1.375rem;
}

/* Modern Button Hover Effects with Gradients */

/* Primary Button - Enhanced gradient hover */
.btn-primary,
.btn {
    background: linear-gradient(135deg, #014923 0%, #002B14 100%) !important;
    border: 2px solid #014923 !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: perspective(1px) translateZ(0);
}

.btn-primary::before,
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 50%, #2E7D32 100%) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    opacity: 0;
}

.btn-primary:hover,
.btn:hover {
    color: #ffffff !important;
    border-color: #66BB6A !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(1, 73, 35, 0.4), 0 6px 12px rgba(1, 73, 35, 0.3) !important;
}

.btn-primary:hover::before,
.btn:hover::before {
    left: 0;
    opacity: 1;
    transform: scale(1) !important;
}

/* Outline Button - Mantener estilo original, solo mejorar hover */
.btn-outline {
    background: transparent !important;
    border: 2px solid #014923 !important;
    color: #014923 !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #014923 0%, #2E7D32 50%, #66BB6A 100%) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    opacity: 0;
}

.btn-outline:hover {
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(1, 73, 35, 0.3), 0 6px 12px rgba(102, 187, 106, 0.2) !important;
    border-color: #66BB6A !important;
}

.btn-outline:hover::before {
    left: 0;
    opacity: 1;
}

/* Additional Modern Button Effects */
.btn-primary:active,
.btn:active,
.btn-outline:active {
    transform: translateY(-1px) !important;
    transition: all 0.1s ease-in-out !important;
}

/* Focus states for accessibility */
.btn-primary:focus,
.btn:focus,
.btn-outline:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(1, 73, 35, 0.3) !important;
}

/* Button with icon enhancements */
.btn i,
.btn-primary i,
.btn-outline i {
    transition: transform 0.3s ease !important;
}

.btn:hover i,
.btn-primary:hover i,
.btn-outline:hover i {
    transform: translateX(3px) !important;
}

/* Special hover effect for CTA sections */
.cta-section .btn-primary,
.cta-section .btn-outline {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Pulse animation for primary buttons */
@keyframes button-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(1, 73, 35, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(1, 73, 35, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(1, 73, 35, 0);
    }
}

.btn-primary.btn-pulse,
.btn.btn-pulse {
    animation: button-pulse 2s infinite;
}

/* Outline White Button - Para fondos oscuros */
.btn-outline-white {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-outline-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 1) 100%) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    opacity: 0;
}

.btn-outline-white:hover {
    color: #014923 !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2), 0 6px 12px rgba(255, 255, 255, 0.1) !important;
    text-shadow: none !important;
}

.btn-outline-white:hover::before {
    left: 0;
    opacity: 1;
}

/* Focus state for accessibility */
.btn-outline-white:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4) !important;
}

/* Active state */
.btn-outline-white:active {
    transform: translateY(-1px) !important;
    transition: all 0.1s ease-in-out !important;
}

/* Icon animation for white outline buttons */
.btn-outline-white i {
    transition: transform 0.3s ease !important;
}

.btn-outline-white:hover i {
    transform: translateX(3px) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn-primary:hover,
    .btn:hover,
    .btn-outline:hover,
    .btn-outline-white:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(1, 73, 35, 0.3) !important;
    }
    
    .btn-outline-white:hover {
        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2) !important;
    }
}