/**
 * 3D Globe Background Styling
 * Wireframe globe animation container
 */

/* Header logo adjustments */
header.site-global-header .logo-image {
    width: 150px;
    max-width: 150px;
    height: 65px;
    max-height: 70px;
}

header.site-global-header {
    padding-top: 0;
    padding-bottom: 0;
}

header.site-global-header .container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Globe Canvas Container */
.globe-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* Above body background but below content */
    overflow: hidden;
}

/* Canvas Element */
#globe-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Ensure specific content elements are above globe (z-index: 1) */
body .site-global-header,
body header,
body nav,
body main,
body main > *,
body footer {
    position: relative;
    z-index: 100; /* Above globe background (1) */
}

/* Make sections transparent or semi-transparent to show globe */
body main section {
    background: transparent;
    backdrop-filter: none;
}

/* Exception: Hero section keeps its original background (slideshow) */
body main section#home {
    background: transparent;
    backdrop-filter: none;
}

/* Exception: YouTube section with transparent background */
body main section#youtube {
    position: relative;
    background: transparent;
    backdrop-filter: none;
}

/* YouTube section - no overlay, always transparent */
main section#youtube > * {
    position: relative;
    z-index: 1;
}

/* Section headings style consistency */
body main section h2,
body main section .section-title {
    font-size: 3.75rem; /* text-6xl */
    font-weight: 400; /* font-normal */
    margin-bottom: 2rem; /* mb-8 */
}

@media (min-width: 768px) {
    body main section h2,
    body main section .section-title {
        font-size: 4.5rem; /* md:text-7xl */
    }
}

/* Wave divider removed */

/* Ensure blog section has no top margin */
body main section#blog {
    margin-top: 0;
    padding-top: 5rem;
    position: relative;
    z-index: 1;
}

/* Exception: Services section with transparent background */
body main section#services {
    background: transparent;
    backdrop-filter: none;
}

/* Exception: Contact section keeps its original gradient background */
body main section#contact {
    background: linear-gradient(135deg, rgb(239 246 255) 0%, rgb(255 255 255) 50%, rgb(255 251 235) 100%);
    backdrop-filter: none;
}

/* Individual cards/containers can have semi-transparent backgrounds */
/* Exclude youtube, services, and blog sections from this rule */
body main section:not(#youtube):not(#services):not(#blog) .bg-white,
body main section:not(#youtube):not(#services):not(#blog) .bg-gray-50 {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
}

/* Override: Blog section cards must have solid white background (higher specificity) */
html body main section#blog .bg-white,
html body main section#blog .blog-card.bg-white {
    background: rgb(255, 255, 255);
    backdrop-filter: none;
}

/* Optional: Add subtle gradient overlay */
/* Removed vignette effect */

/* Responsive adjustments */
@media (max-width: 768px) {
    .globe-background {
        opacity: 0.7; /* Reduce opacity on mobile for better readability */
    }
}

/* Dark mode support (if needed) */
/* Removed dark mode vignette effect */

/* Performance optimization */
.globe-background canvas {
    will-change: transform;
    transform: translateZ(0);
}