/* Homepage-specific overrides to ensure new design works correctly */

/* Font fallback to system fonts since Satoshi-Variable font files are missing */
body,
html,
.font-sans,
* {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/* Ensure Alpine.js elements work properly */
[x-cloak] {
    display: none !important;
}

/* Mobile menu specific styles */
.mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 29, 34, 0.9) !important;
    z-index: 9999 !important;
}

.mobile-menu-content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: rgb(0, 29, 34) !important;
    z-index: 10000 !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu-content.open {
    transform: translateX(0) !important;
}

/* Hero section specific styles */
.hero-slider {
    position: relative !important;
    overflow: hidden !important;
}

.hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1 !important;
}

.swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button hover effects */
.button:hover .hover-text {
    width: 100% !important;
    filter: drop-shadow(0 0 23px var(--animation-color)) !important;
}

/* Ensure proper font loading */
@font-face {
    font-family: 'Figtree';
    src: url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
    font-display: swap;
}

/* Navigation fixes */
.main-nav a {
    color: white !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.main-nav a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure proper stacking */
.header-navigation {
    z-index: 1000 !important;
}

/* Override any conflicting margin/padding from theme */
.homepage-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* Video background fixes */
.video-background video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Responsive image fixes */
.homepage-image {
    max-width: 100% !important;
    height: auto !important;
}

/* Scroll behavior */
html {
    scroll-behavior: smooth !important;
}

/* Fix for any existing layout issues */
.new-homepage-container {
    position: relative !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Contact form styling if needed */
.contact-form input,
.contact-form textarea {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure buttons work correctly */
.cta-button {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.cta-button:hover {
    transform: translateY(-2px) !important;
}

/* Fix any layout issues with existing theme */
#layout-main {
    margin: 0 !important;
    padding: 0 !important;
}

.homepage-override {
    margin: 0 !important;
    padding: 0 !important;
}