/* Base styles */
* {
    border-color: #E2E8F0;
}

/* Prevent horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Smooth scroll offset for fixed header */
html {
    scroll-padding-top: 5.5rem;
}

/* Ensure animation elements stay visible after animating */
[data-animate].animated {
    opacity: 1 !important;
}

/* ==========================================
   Header & Mobile Menu
   ========================================== */

#main-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#mobile-menu.open {
    transform: translateX(0);
}

#mobile-menu-overlay.open {
    opacity: 1;
}

/* ==========================================
   Responsive Layout
   ========================================== */

/* All sections must not overflow */
section {
    overflow-x: hidden;
}

/* Carousel responsive behavior */
@media (max-width: 767px) {
    #carousel-track > div {
        min-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #carousel-track > div {
        min-width: 50%;
    }
}

@media (min-width: 1024px) {
    #carousel-track > div {
        min-width: 33.333%;
    }
}

/* Mobile typography */
@media (max-width: 480px) {
    h1 { line-height: 1.15 !important; }
    h2 { line-height: 1.2 !important; }
}

/* Better touch targets on mobile */
@media (max-width: 1279px) {
    #mobile-menu nav a {
        min-height: 48px;
    }
}

/* Team carousel arrows — stay inside on mobile */
@media (max-width: 767px) {
    #team-prev {
        left: 0.5rem !important;
    }
    #team-next {
        right: 0.5rem !important;
    }
}

/* About floating badge — stay inside on mobile */
@media (max-width: 639px) {
    #about .absolute.-right-2,
    #about .absolute.-right-6,
    #about [class*="-right-"] {
        right: 0.5rem !important;
    }
}

/* ==========================================
   Components
   ========================================== */

/* Active carousel dot */
.carousel-dot.active {
    width: 2rem;
}

/* Team carousel slides */
#team-track > div {
    min-width: 100%;
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* Selection color matching brand */
::selection {
    background-color: rgba(0, 114, 198, 0.15);
    color: #1A2332;
}