/* S3 Hosting Fix - Resolve gray overlay and section visibility issues */

/* CRITICAL FIX: Force all animated elements to be visible immediately */
[data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Override animation CSS that makes content invisible */
[data-animate="fade-up"],
[data-animate="fade-down"],
[data-animate="fade-left"],
[data-animate="fade-right"],
[data-animate="scale"] {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
}

/* Force body overflow to be visible (in case lightbox JS fails) */
body {
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Ensure lightbox is properly hidden by default */
.lightbox {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Only show lightbox when explicitly opened */
.lightbox[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
}

/* Ensure all main sections are visible and not covered by overlays */
.hero,
.gallery,
.about,
.appointments,
.contact {
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove any potential pseudo-element overlays */
.hero::before,
.hero::after,
.gallery::before,
.gallery::after,
.about::before,
.about::after,
.appointments::before,
.appointments::after,
.contact::before,
.contact::after {
    display: none !important;
}

/* Ensure main content is visible */
main {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* Fix for any potential backdrop issues */
.lightbox__backdrop {
    display: none !important;
}

.lightbox[aria-hidden="false"] .lightbox__backdrop {
    display: block !important;
}

/* Ensure sections have proper backgrounds */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                url('../images/originals/hero/hero-desktop.jpg') center/cover no-repeat !important;
}

.gallery {
    background-color: var(--color-background) !important;
}

.about {
    background-color: var(--color-background-alt) !important;
}

.appointments {
    background-color: #f8f9fa !important;
}

.contact {
    background-color: var(--color-background-alt) !important;
}

/* Force remove any global overlays that might be applied */
*::before,
*::after {
    background: none !important;
}

/* Specific fix for potential overlay elements */
[class*="overlay"],
[class*="backdrop"],
[id*="overlay"],
[id*="backdrop"] {
    display: none !important;
}

/* Only show lightbox overlay when lightbox is open */
.lightbox[aria-hidden="false"] [class*="overlay"],
.lightbox[aria-hidden="false"] [class*="backdrop"],
.lightbox[aria-hidden="false"] .lightbox__backdrop {
    display: block !important;
}

/* Ensure all text content is visible */
.hero *,
.gallery *,
.about *,
.appointments *,
.contact * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for any potential transform issues */
.hero,
.gallery,
.about,
.appointments,
.contact {
    transform: none !important;
}

/* Ensure proper stacking context */
.container {
    position: relative !important;
    z-index: 2 !important;
}

/* Fix for mobile viewport issues on S3 */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    .hero,
    .gallery,
    .about,
    .appointments,
    .contact {
        min-height: auto !important;
        height: auto !important;
    }
}

/* Emergency reset for any stuck modal states */
.modal-open {
    overflow: auto !important;
}

/* Ensure footer is visible */
footer {
    position: relative !important;
    z-index: 1 !important;
    background-color: var(--color-background-alt) !important;
    opacity: 1 !important;
    visibility: visible !important;
}