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

/* new-homepage.css declares Satoshi-Variable from /build/assets, which is not deployed. That broken
   300-900 face would still win the match under its own name, so the static files get a separate family */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html,
.font-sans {
    font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
}

/* 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;
}

/* Contact fields keep focus:border-white/30, the same as unfocused; focus:border-white is not in new-homepage.css */
main input[type="text"]:focus-visible,
main input[type="tel"]:focus-visible,
main input[type="email"]:focus-visible,
main textarea:focus-visible {
    border-bottom-color: #ffffff !important;
}

/* Hover images open with clip-path instead of height, so the crop stays put and no layout runs per frame */
.hover-reveal {
    height: 500px;
    clip-path: inset(calc(50% - 40px) 0 round 0.5rem);
    transition: clip-path 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease-out;
}

.hover-reveal--service {
    height: 270px;
}

@media (min-width: 640px) {
    .hover-reveal--service {
        height: 450px;
    }
}

@media (min-width: 1024px) {
    .hover-reveal--service {
        height: 500px;
    }
}

.group:hover .hover-reveal {
    clip-path: inset(0 round 0.5rem);
}

/* iOS keeps :hover after tapping a link, which leaves the image over the service list on return */
@media (hover: none) {
    .hover-reveal {
        display: none;
    }
}

/* Even with crossFade both slide texts sit at ~50% mid-transition; the old text leaves first,
   the new one arrives as the 750ms image fade ends */
.mySwiper .hero-slide-text {
    transition: opacity 300ms ease-out 450ms;
}

.mySwiper .swiper-slide:not(.swiper-slide-active) .hero-slide-text {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .mySwiper .hero-slide-text {
        transition: none;
    }

    .repeat span {
        animation: none !important;
    }

    .hover-reveal {
        transition: none;
    }

    html {
        scroll-behavior: auto !important;
    }
}
/* Arrows stay visible: with a hover-only arrow the grey links read as labels, not actions */
.action-link svg,
.action-button svg {
    color: currentColor;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
}

.action-button.group:hover svg {
    color: currentColor;
}

.action-button .bg-white.h-px {
    display: none;
}

/* The slide text sits mid-image, where the stock gradient was lightest */
.mySwiper .hero-overlay {
    background-image: linear-gradient(to bottom, rgb(0 29 34 / 0.25), rgb(0 29 34 / 0.55) 45%, rgb(0 29 34));
}

/* The team spans 40-83% of the photo width: below sm all six only fit in a low block aimed at the group,
   with the marquee in the sky above their heads. bg-fixed goes because iOS ignores it and crops differently. */
@media (max-width: 639px) {
    .team-photo {
        height: 440px;
        /* The inline 3840px desktop photo is ~880 KB; 1800px is still 2x for this block */
        background-image: url('../img/home/images/Group-mobile.webp') !important;
        background-attachment: scroll;
        background-position: 72% 50%;
        align-items: flex-start;
        padding-top: 32px;
    }
}

/* On a phone the marquee showed four letters at a time against a light sky, so there the line stands still */
.team-photo-title {
    display: none;
}

@media (max-width: 639px) {
    .team-photo-title {
        display: block;
        position: relative;
        padding: 0 20px;
        color: #fff;
        font-size: 34px;
        line-height: 1.1;
        font-weight: 700;
        text-transform: uppercase;
        text-shadow: 0 2px 12px rgb(0 29 34 / 0.45);
    }

    .team-photo-marquee {
        display: none;
    }

    /* Phones get the square cut of the intro; a tall box cropped the 16:9 version to its middle 28% */
    .intro-video {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}