/* ==========================================================================
   Color scheme toggle: Default / Inverted (Nov 2026 homepage update)

   Blocks get `.is-inverted` when their "Color scheme" field is set to
   Inverted (functions/color-scheme.php). Everything below is scoped to
   `.is-inverted`, so Default blocks render exactly as before.

   Colors are the theme tokens from scss/parts/_variables.scss:
     #F0FFEE  $ColorBgLightGreen
     #164234  $ColorPrimaryGreenMedium
     #69C04B  $ColorPrimaryGreenLight
     #072B18  $ColorPrimaryGreenDark
   ========================================================================== */

/* Dark logo copy in the header: hidden unless an inverted hero is on the page */
header .navbar-brand .navbar-brand-dark {
    display: none;
}

/* Logo row (both schemes): logos are laid out at 197px. Caps 2x (394px)
   uploads to that size so they render sharp on retina, not double size. */
.block_LOG001 .swiper-slide img {
    max-width: 197px;
    height: auto;
}

/* --------------------------------------------------------------------------
   HR001 hero: spacing fix (both schemes)
   The description had no bottom margin, so the CTAs sat right under it.
   Scoped to .mb-24 (the staging template); templates using .mb-40 already
   have their own spacing and are left alone.
   -------------------------------------------------------------------------- */
.block_HR001 .block-caption .text-paragraph-20.mb-24 {
    margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   HR001 hero: inverted
   -------------------------------------------------------------------------- */
.block_HR001.is-inverted {
    background-color: #F0FFEE;
}

/* Corner gradient: same shape as the default, in mint instead of green */
.block_HR001.is-inverted::before {
    background: linear-gradient(344deg, rgba(240, 255, 238, 1) 0%, rgba(240, 255, 238, 0.7) 58%, rgba(240, 255, 238, 0) 100%);
}

/* Pattern texture: Figma uses the tile at 50% brightness, 40% opacity */
.block_HR001.is-inverted.bg-pattern::after {
    opacity: 0.4;
    filter: brightness(0.5);
}

/* Fade to white at the bottom of the hero (Figma: 380px, white from 68%).
   .block-bg is 115% of the hero on desktop, so 13.04% from its bottom is
   the hero's bottom edge; below 1200px it is 100%, so 0. */
.block_HR001.is-inverted .block-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13.0435%;
    height: 380px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 40%, #fff 68%, #fff 100%);
}

@media (max-width: 1199px) {
    .block_HR001.is-inverted .block-bg::after {
        bottom: 0;
    }
}

/* Lottie heroes keep .block-bg at 100% of the hero, so the fade sits at 0 */
.block_HR001.is-inverted.block-lottie .block-bg::after {
    bottom: 0;
}

.block_HR001.is-inverted .heading.color-white,
.block_HR001.is-inverted .text-paragraph-20.color-white {
    color: #164234;
}

/* Headline shimmer: green on dark text instead of green on white */
.block_HR001.is-inverted .heading .gradient-animation-light {
    background: #164234;
    background: radial-gradient(circle, #164234 14%, #69C04B 57%, #164234 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
}

.block_HR001.is-inverted .btn.btn-link {
    color: #072B18;
}

.block_HR001.is-inverted .btn.btn-link:hover,
.block_HR001.is-inverted .btn.btn-link:focus,
.block_HR001.is-inverted .btn.btn-link:active {
    color: #072B18;
    border-color: #69C04B;
}

/* --------------------------------------------------------------------------
   Header over an inverted hero: white bar, dark logo and menu.
   Skipped while the mobile menu is open (that overlay stays dark).
   -------------------------------------------------------------------------- */
body:has(.block_HR001.is-inverted):not(.showmenu) header.rightrev-navbar,
body:has(.block_HR001.is-inverted):not(.showmenu) header.rightrev-navbar.fixed {
    background-color: rgba(255, 255, 255, 0.95);
}

body:has(.block_HR001.is-inverted):not(.showmenu) header .navbar-brand img {
    display: none;
}

body:has(.block_HR001.is-inverted):not(.showmenu) header .navbar-brand img.navbar-brand-dark {
    display: inline-block;
}

body:has(.block_HR001.is-inverted):not(.showmenu) header .icon-hamburger rect {
    fill: #164234;
}

@media (min-width: 1200px) {
    body:has(.block_HR001.is-inverted) header .menu > .menu-item > .nav-link {
        color: #164234;
    }

    body:has(.block_HR001.is-inverted) header .menu > .menu-item > .nav-link:hover,
    body:has(.block_HR001.is-inverted) header .menu > .menu-item > .nav-link:focus,
    body:has(.block_HR001.is-inverted) header .menu > .menu-item > .nav-link.active {
        color: #69C04B;
    }

    body:has(.block_HR001.is-inverted) header .btn.btn-outline {
        color: #164234;
    }

    body:has(.block_HR001.is-inverted) header .btn.btn-outline:hover,
    body:has(.block_HR001.is-inverted) header .btn.btn-outline:focus {
        color: #072B18;
    }
}

/* ==========================================================================
   Logos (LOG001) + stats (AB005): inverted
   On load: dark #164234. When the page scrolls into the stats section,
   js/home-template-motion.js adds `rr-fade-light` to <body> and both fade
   to white (Figma: "Static – STAGING v2 Option B" -> "after fade 1").

   Colors run through registered custom properties so the backgrounds, the
   logo-row edge fades and the gradient headings all animate together.
   ========================================================================== */
@property --rr-bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #164234;
}

@property --rr-ink {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
}

@property --rr-grad-a {
    syntax: "<color>";
    inherits: true;
    initial-value: #FAFFFF;
}

@property --rr-grad-b {
    syntax: "<color>";
    inherits: true;
    initial-value: #206E00;
}

.block_LOG001.is-inverted,
.block_AB005.is-inverted {
    --rr-bg: #164234;
    --rr-ink: #ffffff;
    --rr-grad-a: #FAFFFF;
    --rr-grad-b: #206E00;
    background-color: var(--rr-bg);
    transition: --rr-bg 600ms ease, --rr-ink 600ms ease, --rr-grad-a 600ms ease, --rr-grad-b 600ms ease;
}

body.rr-fade-light .block_LOG001.is-inverted,
body.rr-fade-light .block_AB005.is-inverted {
    --rr-bg: #ffffff;
    --rr-ink: #164234;
    --rr-grad-a: #154234;
    --rr-grad-b: #93E36D;
}

/* LOG001 */
.block_LOG001.is-inverted .block-title .heading {
    color: var(--rr-ink);
}

.block_LOG001.is-inverted .swiper::before {
    background: linear-gradient(90deg, var(--rr-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.block_LOG001.is-inverted .swiper::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--rr-bg) 100%);
}

.block_LOG001.is-inverted .swiper-slide img {
    transition: filter 600ms ease;
}

/* Light logos -> dark green (same filter the theme already uses on scroll) */
body.rr-fade-light .block_LOG001.is-inverted .swiper-slide img {
    filter: invert(80%) sepia(44%) saturate(537%) hue-rotate(110deg) brightness(95%) contrast(96%);
}

/* AB005 */
/* Still gradients, no shimmer. Stop positions are Figma's, converted from
   its gradient coordinates to px along an 81deg line in the element's box
   (stop = Figma stop + 0.1564 * (line-height - text top) + left bearing). */
.block_AB005.is-inverted .block-heading .heading {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    animation: none;
    background: linear-gradient(81deg, var(--rr-grad-a) 292.6px, var(--rr-grad-b) 909.4px, var(--rr-grad-a) 1217.8px);
    background-size: auto;
    -webkit-background-clip: text;
    background-clip: text;
}

.block_AB005.is-inverted .card-list .card-title {
    animation: none;
    background: linear-gradient(81deg, #154234 80.9px, #93E36D 214.6px, #154234 281.5px);
    background-size: auto;
    -webkit-background-clip: text;
    background-clip: text;
}

.block_AB005.is-inverted .block-heading .text-paragraph-18 {
    color: var(--rr-ink);
}

/* ==========================================================================
   Carousel (AB002): inverted. Stays dark (no scroll change).
   ========================================================================== */
.block_AB002.is-inverted {
    background-color: #164234;
}

.block_AB002.is-inverted .block-heading .heading {
    background: linear-gradient(81deg, #FAFFFF 33%, #206E00 57%, #FAFFFF 69%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
}

.block_AB002.is-inverted .block-heading p {
    color: #ffffff;
}

/* Open card is the same green as the section, so outline it */
.block_AB002.is-inverted .accord .accord-item.accord-expand {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Inverted spacing, matched 1:1 to Figma (Static – STAGING v2 Option B, 1440)
   ========================================================================== */

/* LOG001: section 279px tall; "$44B" text 50px from the top; logo row
   (swiper incl. edge fades) 136px from the top. */
@media (min-width: 992px) {
    .block_LOG001.is-inverted {
        padding-top: 48px !important;
        padding-bottom: 56px !important;
    }

    .block_LOG001.is-inverted .block-title {
        margin-bottom: 66px !important;
    }
}

/* AB005: title sits 103px from the section top, 52px above the card. */
@media (min-width: 992px) {
    .block_AB005.is-inverted {
        padding-top: 71px !important;
    }

    .block_AB005.is-inverted .block-heading {
        margin-bottom: 65px !important;
    }
}

/* AB005 pattern: Figma uses the 48px tile at 40% with no darkening, so it
   reads as a light texture on the dark green. */
.block_AB005.is-inverted::after {
    opacity: 0.4;
    filter: none;
}

/* Below 992px there is no Figma frame: keep the "$44B" line off the top edge */
@media (max-width: 991px) {
    .block_LOG001.is-inverted {
        padding-top: 40px !important;
    }
}