/* Behaviour states for the static sales_v4 rebuild.
   These rules are unlayered, so they win over the Tailwind utilities in sales.css
   for the same element (state classes have higher specificity than single utilities). */

/* Layout variables. The compiled theme ships responsive defaults that the React
   build overwrote at runtime; here they are pinned to the values the live site
   actually uses (no promo banner is rendered on these pages). */
:root {
    --banner-height: 0px;
    --navbar-height: 64px;
}
@media (max-width: 640px) {
    :root {
        --banner-height: 0px;
        --navbar-height: 80px;
    }
}

/* Default colour for the nav links. 80% white stays readable on the black nav
   while keeping the dimmed "inactive" look; the links keep their own
   hover:text-white / data-[active=true]:text-white/100 utilities for the
   full-white hover and active states. */
.sales-nav {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
}

/* Desktop "Solutions" dropdown */
.nav-dropdown {
    max-height: 0;
}
.nav-dropdown.is-open {
    max-height: 16rem;
}

/* The React build left the nav flush with the top edge on phones */
@media (max-width: 767px) {
    .sales-nav {
        padding-top: 0;
    }
}

/* Mobile menu panel. It stays in the DOM while closed, so it is also made
   invisible: an aria-hidden container must not hold focusable links. */
.nav-mobile-menu {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.nav-mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Mobile "Solutions" submenu */
.nav-mobile-submenu {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}
.nav-mobile-submenu.is-open {
    max-height: 10rem;
    opacity: 1;
    visibility: visible;
}

/* Feature accordion used on the VOD and Software Houses solution pages.
   Collapsed state and the progress bars only apply on desktop: the React build
   pins this block and steps through the features on desktop only, and shows
   every description expanded on mobile. */
.feature-section > div[aria-hidden] {
    transition: height 0.25s ease;
}
.feature-section > div:last-child > div {
    transform-origin: 0% 50%;
}
@media (min-width: 768px) {
    .feature-section > div[aria-hidden='true'] {
        height: 0;
        overflow: hidden;
    }
    .feature-section > div:last-child > div {
        transform: scale(0, 1);
    }
}

/* Scroll reveal (classes are added by sales.js, never present without JS) */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Pinned scroll sections.
   The React build pinned these with GSAP ScrollTrigger.
   - home hero + card stack: pinned from 600px into the section for 1600px of
     scroll, so the card stack animates while the hero stays put.
   - solution pages: the whole block is pinned for 3 steps x 0.9 viewport heights.
   The scroll distance has to live on a sibling element inside the wrapping
   element: a sticky element's margin box cannot exceed its containing block, so
   neither a bottom margin nor padding on the wrapper gives it room to travel. */
.home-pin {
    position: relative;
}
.pin-room {
    height: 1600px;
}
#pin {
    position: sticky;
    top: -600px;
}
/* The home card stack is resized while it animates (see sales.js). Scroll
   anchoring would otherwise fight that change by shifting the scroll position
   underneath the reader, so it is disabled for these pages. */
html {
    overflow-anchor: none;
}
@media (min-width: 768px) {
    .stepped-pin-room {
        height: 270svh;
    }
    .stepped-pin {
        position: sticky;
        top: 0;
    }

    /* Home hero composition. These are the settled values the React build applied
       through GSAP, baked in as static CSS so the page renders identically without JS. */
    #pin > div > div > div[class*='max-w-screen-xl'] {
        width: 80%;
        transform: translate(200px, 0);
    }
    #pin > div > div > div[class*='max-w-screen-xl'] > div:nth-child(1) {
        transform: translate(384px, 0);
    }
    #pin > div > div > div[class*='max-w-screen-xl'] > div:nth-child(3) {
        margin-left: -100px;
        transform: translate(-412px, 0);
    }
}

/* Home hero composition on phones. The hero is a row of [bracket] [video]
   [bracket]; the brackets are a fixed 23px and 37px and the video was sized at
   86vw, so the row added up to ~383px on a 375px screen and pushed the whole
   page sideways. Size the video against the row instead, so the three pieces
   always fill exactly the width of the screen. */
@media (max-width: 767px) {
    #pin .video-clip-mask {
        max-width: calc(100% - 60px);
    }
}

/* Horizontally scrollable quote carousel (case studies page) */
.quote-carousel {
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}
.quote-carousel-item {
    width: 85%;
}
@media (min-width: 768px) {
    .quote-carousel-item {
        width: 350px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Accessibility: the brand violet (#9e8ef1) fails the WCAG AA contrast ratio on
   white. This darker variant keeps the same hue while reaching ~6.7:1. */
.text-tertiary-strong {
    color: #5b3fd6;
}

/* Accessibility: footer text links were only ~18px tall, below the 24px minimum
   touch target. Give them a minimum height without changing the font size. */
footer a.hover\:underline {
    display: inline-block;
    min-height: 24px;
}