/**
 * Hero manual alignment controls.
 *
 * Edit this file when the bike, floor or background needs visual tuning.
 * Positive X values move right. Negative X values move left.
 * Positive Y values move down. Negative Y values move up.
 *
 * Important:
 * --hero-ground-line is the distance from the bottom of the hero.
 * Bigger value = bike moves up. Smaller value = bike moves down.
 *
 * Fast variables:
 * --hero-bike-nudge-x / --hero-bike-nudge-y: moves only the bike.
 * --hero-floor-nudge-x / --hero-floor-nudge-y: moves only the floor.
 * --hero-mobile-content-x / --hero-mobile-content-y: moves mobile text/buttons.
 * --hero-desktop-copy-x / --hero-desktop-copy-y: moves desktop text/buttons.
 * --hero-features-x / --hero-features-y: moves Autonomia/Carregamento/etc.
 * --hero-features-display: flex shows the feature items, none hides them.
 */

.hero.sw-hero {
    --hero-bg-position: center center;
    --hero-bg-size: cover;
    --hero-bg-top: 0px;
    --hero-bg-extra-height: 0px;

    --hero-floor-width: max(100vw, 1360px);
    --hero-floor-bottom: 0px;
    --hero-floor-height: auto;
    --hero-floor-nudge-x: 0px;
    --hero-floor-nudge-y: 0px;
    --hero-floor-object-position: center bottom;
    --hero-mobile-floor-nudge-x: 0px;
    --hero-mobile-floor-nudge-y: 0px;

    --hero-bike-left: clamp(-120px, -4vw, -28px);
    --hero-bike-width: clamp(620px, 51vw, 980px);
    --hero-ground-line: max(106px, 7.84vw);
    --hero-bike-base-x: 0px;
    --hero-bike-nudge-x: 0px;
    --hero-bike-nudge-y: 0px;
    --hero-bike-img-bottom-trim: 7.55%;

    --hero-desktop-copy-x: 0px;
    --hero-desktop-copy-y: 0px;

    --hero-mobile-content-max: 540px;
    --hero-mobile-content-top: clamp(660px, 62svh, 760px);
    --hero-mobile-content-x: 0px;
    --hero-mobile-content-y: 0px;
    --hero-mobile-text-align: left;

    --hero-features-display: flex;
    --hero-features-x: 0px;
    --hero-features-y: 0px;
    --hero-features-scale: 1;
    --hero-features-margin-top: 3rem;
    --hero-features-padding-top: 1.5rem;
    --hero-features-opacity: 1;
    --hero-features-gap-x: 1rem;
    --hero-feature-card-gap: 0.75rem;
    --hero-feature-icon-size: 34px;
    --hero-feature-title-size: 0.95rem;
    --hero-feature-text-size: 0.8rem;
}

.hero .hero-bg {
    top: var(--hero-bg-top) !important;
    height: calc(100% + var(--hero-bg-extra-height)) !important;
    background-position: var(--hero-bg-position) !important;
    background-size: var(--hero-bg-size) !important;
}

.hero-floor {
    bottom: var(--hero-floor-bottom) !important;
    width: var(--hero-floor-width) !important;
    height: var(--hero-floor-height) !important;
    transform: translate(calc(-50% + var(--hero-floor-nudge-x)), var(--hero-floor-nudge-y)) !important;
}

.hero-floor-img {
    object-position: var(--hero-floor-object-position) !important;
}

.hero-floor-img--mobile {
    transform: translate(calc(-50% + var(--hero-mobile-floor-nudge-x)), var(--hero-mobile-floor-nudge-y)) !important;
}

.hero-bike {
    left: var(--hero-bike-left) !important;
    bottom: var(--hero-ground-line) !important;
    width: var(--hero-bike-width) !important;
    transform: translate(calc(var(--hero-bike-base-x) + var(--hero-bike-nudge-x)), var(--hero-bike-nudge-y)) !important;
}

.hero-bike-img {
    transform: translateY(var(--hero-bike-img-bottom-trim)) !important;
}

.hero-copy--desktop {
    transform: translate(var(--hero-desktop-copy-x), var(--hero-desktop-copy-y)) !important;
}

.hero .sw-hero-features-row {
    display: var(--hero-features-display) !important;
    margin-top: var(--hero-features-margin-top) !important;
    padding-top: var(--hero-features-padding-top) !important;
    opacity: var(--hero-features-opacity) !important;
    transform: translate(var(--hero-features-x), var(--hero-features-y)) scale(var(--hero-features-scale)) !important;
    transform-origin: center top !important;
}

.hero .sw-hero-features {
    --bs-gutter-x: var(--hero-features-gap-x) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

.hero .sw-hero-features > [class*="col-"] {
    flex: 1 1 0px !important;
    width: 25% !important;
    max-width: 25% !important;
}

.hero .sw-feature-card {
    gap: var(--hero-feature-card-gap) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.hero .sw-feature-icon-box {
    width: var(--hero-feature-icon-size) !important;
    height: var(--hero-feature-icon-size) !important;
}

.hero .sw-feature-icon-box svg {
    width: var(--hero-feature-icon-size) !important;
    height: var(--hero-feature-icon-size) !important;
}

.hero .sw-feature-card h6 {
    font-size: var(--hero-feature-title-size) !important;
}

.hero .sw-feature-card p {
    font-size: var(--hero-feature-text-size) !important;
}

@media (max-width: 991.98px) {
    .hero.sw-hero {
        --hero-bg-position: center top;

        --hero-floor-width: 100vw;
        --hero-floor-height: clamp(420px, 62svh, 700px);
        --hero-features-display: ;

        --hero-bike-left: 50%;
        --hero-bike-width: clamp(520px, 75vw, 700px);
        --hero-ground-line: clamp(350px, 44svh, 520px);
        --hero-bike-base-x: -50%;

        --hero-mobile-content-max: 540px;
        --hero-mobile-content-top: clamp(660px, 62svh, 760px);
        --hero-mobile-text-align: left;
    }

    .hero .hero-bg {
        background-image: var(--sw-hero-bg-url-mobile) !important;
    }

    .hero .sw-hero-mobile-content {
        max-width: var(--hero-mobile-content-max) !important;
        padding-top: var(--hero-mobile-content-top) !important;
        text-align: var(--hero-mobile-text-align) !important;
        transform: translate(var(--hero-mobile-content-x), var(--hero-mobile-content-y)) !important;
    }
}

@media (min-width: 1400px) {
    .hero.sw-hero {
        --hero-bike-left: clamp(-110px, -2.8vw, -40px);
        --hero-bike-width: clamp(760px, 50vw, 1020px);
    }
}

@media (min-width: 1800px) {
    .hero.sw-hero {
        --hero-bike-left: clamp(-90px, -2vw, -34px);
        --hero-bike-width: clamp(900px, 49vw, 1080px);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero.sw-hero {
        --hero-bike-left: clamp(-96px, -5vw, -42px);
        --hero-bike-width: clamp(560px, 50vw, 700px);
        --hero-features-gap-x: 0.45rem;
        --hero-feature-card-gap: 0.38rem;
        --hero-feature-icon-size: 28px;
        --hero-feature-title-size: 0.78rem;
        --hero-feature-text-size: 0.68rem;
    }
}

@media (min-width: 992px) and (max-height: 760px) {
    .hero.sw-hero {
        --hero-bike-width: clamp(500px, 38vw, 650px);
        --hero-features-display: ;
    }
}

@media (min-width: 992px) and (max-height: 620px) {
    .sw-hero-logo-box {
        display: none;
    }

    .hero.sw-hero {
        /* Useful for 1280x500 and other very short desktop screens. */
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-y: 0px;
    }
}

@media (max-width: 575.98px) {
    .hero.sw-hero {
        --hero-bike-width: clamp(430px, 123vw, 540px);
        --hero-ground-line: clamp(320px, 96vw, 430px);
        --hero-mobile-content-max: 390px;
        --hero-mobile-content-top: clamp(540px, 63svh, 610px);
    }
}

@media (max-width: 380px) {
    .hero.sw-hero {
        --hero-bike-width: clamp(400px, 116vw, 460px);
        --hero-mobile-content-top: clamp(495px, 61svh, 540px);
    }
}

@media (max-width: 360px) and (max-height: 700px) {
    .hero.sw-hero {
        --hero-bike-width: clamp(230px, 72vw, 260px);
        --hero-ground-line: max(306px, 94vw);
        --hero-mobile-content-top: clamp(330px, 58svh, 372px);
    }
}

@media (max-width: 991.98px) and (orientation: landscape),
(max-width: 991.98px) and (max-height: 500px) {
    .hero.sw-hero {
        --hero-bg-position: center center;

        --hero-floor-width: max(118vw, 1100px);
        --hero-floor-height: auto;

        --hero-bike-left: 73%;
        --hero-bike-width: clamp(280px, 38vw, 380px);
        --hero-ground-line: clamp(34px, 9svh, 54px);
        --hero-bike-base-x: -50%;

        --hero-mobile-content-max: min(50vw, 410px);
        --hero-mobile-content-top: clamp(96px, 27svh, 124px);
        --hero-mobile-text-align: center;
    }

    .hero-floor-img--desktop {
        display: block !important;
    }

    .hero-floor-img--mobile {
        display: none !important;
    }
}

/* Manual width ranges.
 * Change only the values inside the range you are testing.
 * These blocks use only min-width / max-width so they are easier to reason about.
 */

/* 2560px+ / ultrawide: 2560, 3440 */
@media (min-width: 2560px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 246px;
        --hero-bike-nudge-y: 160px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 125px;
        --hero-features-y: -40px;
    }
}

/* 1920px-2559px: 1920 */
@media (min-width: 1920px) and (max-width: 2559.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 1728px-1919px: Macbook Pro */
@media (min-width: 1728px) and (max-width: 1919.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 1600px-1727px: 1600 */
@media (min-width: 1600px) and (max-width: 1727.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 1536px-1599px: 1536 */
@media (min-width: 1536px) and (max-width: 1599.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 140px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 1440px-1535px: 1440 */
@media (min-width: 1440px) and (max-width: 1535.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 105px;
        --hero-bike-nudge-y: 30px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 30px;
        --hero-features-y: -20px;
    }
}

/* 1366px-1439px: 1366 */
@media (min-width: 1366px) and (max-width: 1439.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 1280px-1365px: 1280 */
@media (min-width: 1280px) and (max-width: 1365.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 170px;
        --hero-bike-nudge-y: 40px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: -58px;
        --hero-desktop-copy-y: -4px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 1200px-1279px */
@media (min-width: 1200px) and (max-width: 1279.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 1024px-1199px: iPad landscape / small desktop */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 60px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 992px-1023px */
@media (min-width: 992px) and (max-width: 1023.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-desktop-copy-x: 0px;
        --hero-desktop-copy-y: 0px;
        --hero-features-x: 0px;
        --hero-features-y: 0px;
    }
}

/* 820px-991px: tablet portrait / mobile landscape wide */
@media (min-width: 820px) and (max-width: 991.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: 0px;
    }
}

/* 768px-819px: iPad portrait */
@media (min-width: 768px) and (max-width: 819.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: 0px;
    }
}

/* 576px-767px: mobile landscape */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center center;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: 0px;
    }
}

/* 430px-575px: mobile grande */
@media (min-width: 430px) and (max-width: 575.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: 0px;
    }
}

/* 414px-429px */
@media (min-width: 414px) and (max-width: 429.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: -1px;
        --hero-bike-nudge-y: -54px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: -80px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: -120px;
    }
}

/* 393px-413px */
@media (min-width: 393px) and (max-width: 413.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: 0px;
    }
}

/* 390px-392px */
@media (min-width: 390px) and (max-width: 392.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: -6px;
        --hero-bike-nudge-y: -70px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: -100px;
    }
}

/* 375px-389px */
@media (min-width: 375px) and (max-width: 389.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: -70px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: -110px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: -110px;
    }
}

/* 360px-374px */
@media (min-width: 360px) and (max-width: 374.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: -2px;
        --hero-bike-nudge-y: -30px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: -50px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: -60px;
    }
}

/* 320px-359px: mobile pequeno */
@media (min-width: 320px) and (max-width: 359.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: -80px;
        --hero-bike-nudge-y: 30px;
        --hero-floor-nudge-x: -30px;
        --hero-floor-nudge-y: 60px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 60px;
        --hero-mobile-content-y: 0px;
    }
}

/* Abaixo de 320px */
@media (max-width: 319.98px) {
    .hero.sw-hero {
        --hero-bike-nudge-x: 0px;
        --hero-bike-nudge-y: 0px;
        --hero-floor-nudge-x: 0px;
        --hero-floor-nudge-y: 0px;
        --hero-bg-position: center top;
        --hero-mobile-content-x: 0px;
        --hero-mobile-content-y: 0px;
    }
}

/* ==========================================================================
   Gentle Float / Idle Animation for the Hero Motorcycle
   ========================================================================== */
@keyframes heroBikeFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(0.3deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.hero-bike-motion {
    animation: heroBikeFloat 4.5s ease-in-out infinite;
}

/* ==========================================================================
   Forced Dark Theme overrides for Hero Section & Transparent Header
   ========================================================================== */
.hero.sw-hero {
    --sw-bg: #030E01 !important;
    --sw-surface: #071A04 !important;
    --sw-surface-soft: #0C2608 !important;
    --sw-border: rgba(164, 255, 154, 0.18) !important;
    --sw-text: #F9FFF9 !important;
    --sw-text-muted: rgba(249, 255, 249, 0.72) !important;
    --sw-text-soft: rgba(249, 255, 249, 0.56) !important;
    --sw-focus: #A4FF9A !important;
    --sw-hero-bg-url-mobile: url('../img/bg-mobile.png') !important;
    --sw-hero-overlay: radial-gradient(circle at 20% 52%, rgba(79, 196, 66, 0.2) 0%, rgba(79, 196, 66, 0) 34%),
                       linear-gradient(90deg, rgba(3, 14, 1, 0.32) 0%, rgba(3, 14, 1, 0.08) 45%, rgba(3, 14, 1, 0.56) 100%),
                       linear-gradient(180deg, rgba(3, 14, 1, 0.16) 0%, rgba(3, 14, 1, 0.04) 48%, rgba(3, 14, 1, 0.82) 100%) !important;
    --sw-hero-overlay-mobile: linear-gradient(180deg, rgba(3, 14, 1, 0.02) 0%, rgba(3, 14, 1, 0) 48%, rgba(3, 14, 1, 0.28) 100%) !important;
}

/* Ensure mobile backgrounds are kept as dark version */
@media (max-width: 991.98px) {
    html:not([data-theme="dark"]) .hero-ground-glow,
    html:not([data-theme="dark"]) .sw-scooter-floor-glow {
        display: block !important; /* Keep mobile glows */
    }
}

/* Ensure text colors within the hero are always white/light text */
.hero.sw-hero .text-white,
.hero.sw-hero h1,
.hero.sw-hero h6 {
    color: #F9FFF9 !important;
}
.hero.sw-hero .text-sw-text-muted {
    color: rgba(249, 255, 249, 0.72) !important;
}
.hero.sw-hero .text-sw-text-soft {
    color: rgba(249, 255, 249, 0.56) !important;
}

/* ==========================================================================
   Forced Dark Theme overrides for the entire Header (sw-header)
   ========================================================================== */
html .sw-header {
    --sw-border: rgba(164, 255, 154, 0.18) !important;
}

/* Scrolled state forced dark */
html .sw-header.scrolled,
html:not([data-theme="dark"]) .sw-header.scrolled,
html[data-theme="dark"] .sw-header.scrolled {
    background-color: rgba(3, 14, 1, 0.85) !important;
    border-bottom: 1px solid rgba(164, 255, 154, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Nav Link colors forced dark */
html .sw-header .nav-link,
html body .sw-header .nav-link,
html:not([data-theme="dark"]) body .sw-header .nav-link,
html:not([data-theme="dark"]) body:not(.page-home) .sw-header .nav-link,
html:not([data-theme="dark"]) body:not(.page-home2) .sw-header .nav-link,
html:not([data-theme="dark"]) .sw-header.scrolled .nav-link,
html[data-theme="dark"] .sw-header.scrolled .nav-link,
html:not([data-theme="dark"]) .sw-header .navbar-collapse .nav-link,
html[data-theme="dark"] .sw-header .navbar-collapse .nav-link {
    color: rgba(249, 255, 249, 0.72) !important;
}

html .sw-header .nav-link:hover,
html .sw-header .nav-link.active,
html body .sw-header .nav-link:hover,
html body .sw-header .nav-link.active,
html:not([data-theme="dark"]) body .sw-header .nav-link:hover,
html:not([data-theme="dark"]) body .sw-header .nav-link.active,
html:not([data-theme="dark"]) body:not(.page-home) .sw-header .nav-link:hover,
html:not([data-theme="dark"]) body:not(.page-home) .sw-header .nav-link.active,
html:not([data-theme="dark"]) .sw-header.scrolled .nav-link:hover,
html:not([data-theme="dark"]) .sw-header.scrolled .nav-link.active,
html:not([data-theme="dark"]) .sw-header .navbar-collapse .nav-link:hover,
html:not([data-theme="dark"]) .sw-header .navbar-collapse .nav-link.active {
    color: var(--sw-green) !important;
}

/* Language selector forced dark */
html .sw-header #langSelector,
html body .sw-header #langSelector,
html:not([data-theme="dark"]) .sw-header .text-white,
html:not([data-theme="dark"]) .sw-header #langSelector,
html:not([data-theme="dark"]) .sw-header:not(.scrolled) #langSelector,
html:not([data-theme="dark"]) .sw-header.scrolled #langSelector,
html[data-theme="dark"] .sw-header.scrolled #langSelector {
    background-color: rgba(3, 14, 1, 0.3) !important;
    border: 1px solid rgba(164, 255, 154, 0.25) !important;
    color: rgba(249, 255, 249, 0.9) !important;
    box-shadow: none !important;
}

html .sw-header #langSelector:hover,
html body .sw-header #langSelector:hover,
html:not([data-theme="dark"]) .sw-header #langSelector:hover,
html:not([data-theme="dark"]) .sw-header.scrolled #langSelector:hover,
html[data-theme="dark"] .sw-header.scrolled #langSelector:hover {
    background-color: rgba(164, 255, 154, 0.15) !important;
    border-color: var(--sw-green) !important;
    color: var(--sw-green) !important;
}

/* Mobile Toggler Icon & Menu forced dark */
@media (max-width: 991.98px) {
    html .sw-header .navbar-toggler-icon,
    html:not([data-theme="dark"]) .navbar-toggler-icon,
    html[data-theme="dark"] .navbar-toggler-icon {
        filter: none !important;
    }
    html .sw-header .navbar-collapse,
    html:not([data-theme="dark"]) .sw-header .navbar-collapse,
    html[data-theme="dark"] .sw-header .navbar-collapse {
        background-color: rgba(3, 14, 1, 0.95) !important;
        border-color: rgba(164, 255, 154, 0.18) !important;
    }
    html .sw-header .navbar-collapse .nav-link,
    html:not([data-theme="dark"]) .sw-header .navbar-collapse .nav-link,
    html[data-theme="dark"] .sw-header .navbar-collapse .nav-link {
        color: rgba(249, 255, 249, 0.72) !important;
    }
    html .sw-header .navbar-collapse .nav-link.active,
    html .sw-header .navbar-collapse .nav-link:hover,
    html:not([data-theme="dark"]) .sw-header .navbar-collapse .nav-link.active,
    html:not([data-theme="dark"]) .sw-header .navbar-collapse .nav-link:hover,
    html[data-theme="dark"] .sw-header .navbar-collapse .nav-link.active,
    html[data-theme="dark"] .sw-header .navbar-collapse .nav-link:hover {
        color: var(--sw-green) !important;
    }

    /* Mobile Language Selector forced dark */
    html .sw-header .sw-lang-dropdown button,
    html:not([data-theme="dark"]) .sw-lang-dropdown button,
    html[data-theme="dark"] .sw-lang-dropdown button {
        background-color: rgba(3, 14, 1, 0.4) !important;
        color: rgba(249, 255, 249, 0.9) !important;
    }

    /* Mobile Theme Toggle forced dark style */
    html .sw-header .sw-theme-toggle-track,
    html:not([data-theme="dark"]) .sw-theme-toggle-track,
    html[data-theme="dark"] .sw-theme-toggle-track {
        background: rgba(3, 14, 1, 0.4) !important;
    }
    html .sw-header .sw-toggle-icon--sun,
    html:not([data-theme="dark"]) .sw-toggle-icon--sun,
    html[data-theme="dark"] .sw-toggle-icon--sun {
        color: rgba(249, 255, 249, 0.72) !important;
    }
    html .sw-header .sw-toggle-icon--moon,
    html:not([data-theme="dark"]) .sw-toggle-icon--moon,
    html[data-theme="dark"] .sw-toggle-icon--moon {
        color: var(--sw-green) !important;
        filter: drop-shadow(0 0 4px rgba(79, 196, 66, 0.4)) !important;
    }
}

/* ==========================================================================
   Color Inversion for the Electric vs Combustion Comparison Section (sw-calculator)
   ========================================================================== */

/* 1. When theme is light: make calculator look DARK */
html:not([data-theme="dark"]) .sw-calculator {
    --sw-calc-bg: linear-gradient(180deg, rgba(3, 14, 1, 1) 0%, rgba(5, 17, 3, 1) 50%, rgba(3, 14, 1, 1) 100%) !important;
    --sw-bg: #030E01 !important;
    --sw-surface: #071A04 !important;
    --sw-surface-soft: #0C2608 !important;
    --sw-border: rgba(164, 255, 154, 0.18) !important;
    --sw-text: #F9FFF9 !important;
    --sw-text-muted: rgba(249, 255, 249, 0.72) !important;
    --sw-text-soft: rgba(249, 255, 249, 0.56) !important;
    --sw-white: #F9FFF9 !important;
    --sw-white-const: #F9FFF9 !important;
}
html:not([data-theme="dark"]) .sw-calculator .text-white,
html:not([data-theme="dark"]) .sw-calculator h2,
html:not([data-theme="dark"]) .sw-calculator h6 {
    color: #F9FFF9 !important;
}
html:not([data-theme="dark"]) .sw-calculator .text-sw-text-muted {
    color: rgba(249, 255, 249, 0.72) !important;
}
html:not([data-theme="dark"]) .sw-calculator .text-sw-text-soft {
    color: rgba(249, 255, 249, 0.56) !important;
}
html:not([data-theme="dark"]) .sw-calculator .sw-chart-bar {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(164, 255, 154, 0.06) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
}
html:not([data-theme="dark"]) .sw-calculator .legend-dot--savings {
    background: var(--sw-green-light) !important;
    box-shadow: 0 0 8px rgba(79, 196, 66, 0.5) !important;
}
html:not([data-theme="dark"]) .sw-calculator .js-calc-annual-val,
html:not([data-theme="dark"]) .sw-calculator .js-calc-monthly-val {
    color: var(--sw-green-light) !important;
}
html:not([data-theme="dark"]) .sw-calculator .sw-range::-webkit-slider-thumb {
    background: var(--sw-green-light) !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 0 12px rgba(79, 196, 66, 0.6) !important;
}
html:not([data-theme="dark"]) .sw-calculator .sw-range::-moz-range-thumb {
    background: var(--sw-green-light) !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 0 12px rgba(79, 196, 66, 0.6) !important;
}
html:not([data-theme="dark"]) .sw-calculator select.sw-select {
    color: #F9FFF9 !important;
    background-color: #0C2608 !important;
    border-color: rgba(164, 255, 154, 0.18) !important;
}

/* 2. When theme is dark: make calculator look LIGHT */
html[data-theme="dark"] .sw-calculator {
    --sw-calc-bg: #F4F8F4 !important;
    --sw-bg: #F4F8F4 !important;
    --sw-surface: #FFFFFF !important;
    --sw-surface-soft: #E5EFE4 !important;
    --sw-border: rgba(79, 196, 66, 0.14) !important;
    --sw-text: #041E02 !important;
    --sw-text-muted: rgba(4, 30, 2, 0.76) !important;
    --sw-text-soft: rgba(4, 30, 2, 0.58) !important;
    --sw-white: #041E02 !important;
    --sw-white-const: #041E02 !important;
}
html[data-theme="dark"] .sw-calculator .text-white,
html[data-theme="dark"] .sw-calculator h2,
html[data-theme="dark"] .sw-calculator h6 {
    color: #041E02 !important;
}
html[data-theme="dark"] .sw-calculator .text-sw-text-muted {
    color: rgba(4, 30, 2, 0.76) !important;
}
html[data-theme="dark"] .sw-calculator .text-sw-text-soft {
    color: rgba(4, 30, 2, 0.58) !important;
}
html[data-theme="dark"] .sw-calculator .sw-chart-bar {
    background: rgba(4, 30, 2, 0.02) !important;
    border: 1px solid rgba(79, 196, 66, 0.12) !important;
    box-shadow: inset 0 2px 8px rgba(4, 30, 2, 0.06) !important;
}
html[data-theme="dark"] .sw-calculator .legend-dot--savings {
    background: var(--sw-green) !important;
    box-shadow: 0 0 8px rgba(79, 196, 66, 0.3) !important;
}
html[data-theme="dark"] .sw-calculator .js-calc-annual-val,
html[data-theme="dark"] .sw-calculator .js-calc-monthly-val {
    color: #12570A !important;
}
html[data-theme="dark"] .sw-calculator .sw-range::-webkit-slider-thumb {
    background: var(--sw-green) !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 0 10px rgba(79, 196, 66, 0.4) !important;
}
html[data-theme="dark"] .sw-calculator .sw-range::-moz-range-thumb {
    background: var(--sw-green) !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 0 10px rgba(79, 196, 66, 0.4) !important;
}
html[data-theme="dark"] .sw-calculator select.sw-select {
    color: #041E02 !important;
    background-color: #E5EFE4 !important;
    border-color: rgba(79, 196, 66, 0.14) !important;
}

/* ==========================================================================
   Color Inversion for the Smart Community Section (sw-community-section)
   ========================================================================== */

/* 1. When theme is light: make community section look DARK */
html:not([data-theme="dark"]) .sw-community-section {
    background-color: #051203 !important;
    --sw-bg: #030E01 !important;
    --sw-surface: #071A04 !important;
    --sw-surface-soft: #0C2608 !important;
    --sw-border: rgba(164, 255, 154, 0.18) !important;
    --sw-text: #F9FFF9 !important;
    --sw-text-muted: rgba(249, 255, 249, 0.72) !important;
    --sw-text-soft: rgba(249, 255, 249, 0.56) !important;
    --sw-white: #F9FFF9 !important;
    --sw-white-const: #F9FFF9 !important;
    --sw-black-const: #030E01 !important;
}
html:not([data-theme="dark"]) .sw-community-section .sw-community-card {
    background-color: rgba(3, 14, 1, 0.35) !important;
    border-color: rgba(164, 255, 154, 0.08) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
}
html:not([data-theme="dark"]) .sw-community-section .sw-comm-quote {
    color: rgba(249, 255, 249, 0.85) !important;
}
html:not([data-theme="dark"]) .sw-community-section .sw-comm-tag {
    color: #F9FFF9 !important;
}
html:not([data-theme="dark"]) .sw-community-section h2.text-white {
    color: #F9FFF9 !important;
}
html:not([data-theme="dark"]) .sw-community-section .text-sw-text-muted {
    color: rgba(249, 255, 249, 0.72) !important;
}

/* 2. When theme is dark: make community section look LIGHT */
html[data-theme="dark"] .sw-community-section {
    background-color: #F4F8F3 !important;
    --sw-bg: #F4F8F4 !important;
    --sw-surface: #FFFFFF !important;
    --sw-surface-soft: #E5EFE4 !important;
    --sw-border: rgba(79, 196, 66, 0.14) !important;
    --sw-text: #041E02 !important;
    --sw-text-muted: rgba(4, 30, 2, 0.76) !important;
    --sw-text-soft: rgba(4, 30, 2, 0.58) !important;
    --sw-white: #041E02 !important;
    --sw-white-const: #041E02 !important;
    --sw-black-const: #F9FFF9 !important;
}
html[data-theme="dark"] .sw-community-section .sw-community-card {
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(79, 196, 66, 0.12) !important;
    box-shadow: 0 16px 40px rgba(79, 196, 66, 0.02) !important;
}
html[data-theme="dark"] .sw-community-section .sw-comm-quote {
    color: rgba(3, 14, 1, 0.85) !important;
}
html[data-theme="dark"] .sw-community-section .sw-comm-tag {
    color: #030E01 !important;
}
html[data-theme="dark"] .sw-community-section h2.text-white {
    color: #041E02 !important;
}
html[data-theme="dark"] .sw-community-section .text-sw-text-muted {
    color: rgba(4, 30, 2, 0.76) !important;
}

/* Hide standard video play button overlay on iOS Safari */
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}
video::-webkit-media-controls {
    display: none !important;
}