/* Custom CSS for Bmiah Solicitors */

/* Scroll reveal animations */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fallback: Show content if JavaScript doesn't load */
.no-js [data-reveal] {
    opacity: 1;
    transform: none;
}

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

[data-reveal].reveal-fade {
    transform: none;
}

[data-reveal].reveal-slide {
    transform: translateX(-30px);
}

[data-reveal].reveal-scale {
    transform: scale(0.9);
}

/* Header scroll effects */
header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Mobile menu */
[data-mobile-menu] {
    transform: translateX(100%);
}

[data-mobile-menu].open {
    transform: translateX(0);
}

body.menu-open {
    overflow: hidden;
}

/* Modal styles */
[data-modal] {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

[data-modal].open {
    opacity: 1;
    visibility: visible;
}

body.modal-open {
    overflow: hidden;
}

/* Toast notifications */
.toast {
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateX(0);
}

/* Carousel */
[data-carousel-slide] {
    display: none;
}

[data-carousel-slide].active {
    display: block;
}

[data-carousel-indicator].active {
    background-color: #059669;
}

/* Accordion */
[data-accordion-panel] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

[data-accordion-panel].open {
    max-height: 500px;
}

/* Floating contact bar */
[data-floating-contact].visible {
    transform: translateY(0);
}

/* Back to top button */
[data-back-to-top].visible {
    transform: scale(1);
    opacity: 1;
}

/* Section animations - removed problematic rule that was hiding all sections */

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

/* Cookie banner */
[data-cookie-banner].hidden {
    transform: translateY(100%);
}

/* Form validation */
.field-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

input.error,
textarea.error,
select.error {
    border-color: #dc2626;
    ring-color: #dc2626;
}

/* Print styles */
@media print {
    header,
    footer,
    [data-floating-contact],
    [data-back-to-top],
    [data-cookie-banner] {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .print-checklist {
        page-break-inside: avoid;
    }
}

/* Dark mode support */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --text-primary: #f8fafc;
    --border-primary: #334155;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .toast-container {
        left: 1rem;
        right: 1rem;
    }
    
    [data-floating-contact] {
        bottom: 1rem;
        left: 1rem;
    }
    
    [data-back-to-top] {
        bottom: 1rem;
        right: 1rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

/* Hover effects */
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #059669;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #047857;
}

/* Hero Carousel Styles */
.hero-slide {
    opacity: 0;
    z-index: 1;
    transition: opacity 1s ease-in-out;
    display: block;
}

/* JS adds inline opacity/z-index. Ensure initial state is visible for first paint */
.hero-carousel .hero-slide:first-child {
    opacity: 1 !important;
    z-index: 10 !important;
    display: block !important;
}

.carousel-dot {
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-dot:hover {
    transform: scale(1.2);
}

.carousel-prev,
.carousel-next {
    transition: all 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Floating Animations */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-medium {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
}

@keyframes float-fast {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

.animate-float-medium {
    animation: float-medium 4s ease-in-out infinite;
}

.animate-float-fast {
    animation: float-fast 3s ease-in-out infinite;
}

/* Practice Area Button Interactions */
.practice-area-btn {
    transition: all 0.3s ease;
}

.practice-area-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.practice-area-btn.active {
    background-color: rgb(160 128 114);
    border-color: rgb(160 128 114);
    color: white;
}

/* Timeline Animations */
.timeline-step {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.timeline-step.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Counter Animation */
.counter-animate {
    transition: all 0.5s ease;
}

.counter-animate.animate {
    transform: scale(1.1);
    color: rgb(160 128 114);
}