/**
 * Theme Base CSS
 *
 * Utility styles, scrollbar customization, animations,
 * and component base classes for the starter-landing theme.
 *
 * @package starter-landing
 */

/* Icon system — consistent sizing for starter_icon() */
.starter-icon {
    display: block;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}
.starter-icon--sm {
    width: 1.125rem;
    height: 1.125rem;
}
.starter-icon--md {
    width: 1.25rem;
    height: 1.25rem;
}
.starter-icon--lg {
    width: 1.5rem;
    height: 1.5rem;
}
.starter-icon--xl {
    width: 2rem;
    height: 2rem;
}

/* Scroll carousel — card width from data-visible (supports decimals e.g. 2.5 for peek) */
.starter-carousel-track {
    --carousel-visible: 1;
    --carousel-gap: 0px;
}

.starter-carousel-track > .starter-carousel-item,
.starter-carousel-track > [data-carousel-item] {
    flex: 0 0 calc(
        (100% - var(--carousel-gap) * (var(--carousel-visible) - 1)) / var(--carousel-visible)
    );
    min-width: 0;
}

/* Hero — dark overlay + light text (overrides global heading color) */
.starter-hero .starter-hero-content h1,
.starter-hero .starter-hero-content p {
    color: #fff;
}
.starter-hero .starter-hero-content p {
    color: rgb(255 255 255 / 0.8);
}

/* Hero — 50/50 split with matching diagonal clip on both panels */
.starter-hero {
    --hero-diag-top: 54%;
    --hero-diag-bottom: 46%;
    --hero-diag-bar: 14px;
}

.starter-hero-slide__media-bg {
    position: absolute;
    inset: 0;
}

@media (min-width: 1024px) {
    .starter-hero-slide__content,
    .starter-hero-slide__media,
    .starter-hero-slide__diagonal {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .starter-hero-slide__content {
        clip-path: polygon(
            0 0,
            var(--hero-diag-top) 0,
            var(--hero-diag-bottom) 100%,
            0 100%
        );
        z-index: 10;
    }

    .starter-hero-slide__media {
        clip-path: polygon(
            var(--hero-diag-top) 0,
            100% 0,
            100% 100%,
            var(--hero-diag-bottom) 100%
        );
        z-index: 5;
    }

    /* Cover only the visible right area (not full hero width) so the photo isn't over-zoomed */
    .starter-hero .starter-hero-slide__media-bg {
        inset: auto;
        left: 42%;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .starter-hero-slide__diagonal {
        background-color: hsl(var(--primary));
        clip-path: polygon(
            calc(var(--hero-diag-top) - var(--hero-diag-bar) / 2) 0,
            calc(var(--hero-diag-top) + var(--hero-diag-bar) / 2) 0,
            calc(var(--hero-diag-bottom) + var(--hero-diag-bar) / 2) 100%,
            calc(var(--hero-diag-bottom) - var(--hero-diag-bar) / 2) 100%
        );
        z-index: 20;
        pointer-events: none;
    }
}

/* Hide native scrollbar on carousel tracks */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom scrollbar for main page */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.6);
}

/* Transition utilities for lightbox image */
#lightbox-img {
    transition: opacity 0.15s ease-in-out;
}

/* WhatsApp FAB animation */
@keyframes fab-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}
.whatsapp-fab {
    animation: fab-pulse 2s ease-in-out infinite;
}

/* Section fade-in animation (optional, applied via JS Intersection Observer) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out both;
}

/* Scale utility for group-hover */
.scale-98 { transform: scale(0.98); }
.scale-102 { transform: scale(1.02); }
.scale-103 { transform: scale(1.03); }

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

/* Rotas section — map background + text-side fade (desktop) */
.rotas-map-bg {
    z-index: 0;
}
.rotas-map-img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(1.05);
    transform-origin: left center;
    height: 92%;
    width: auto;
    max-width: 68%;
    object-fit: contain;
    object-position: left center;
    opacity: 0.95;
}

@media (min-width: 1280px) {
    .rotas-map-img {
        max-width: 62%;
        height: 94%;
        transform: translateY(-50%) scale(1.04);
    }
}