/* Shared mobile + UX fixes for all pages.
   Loaded as the LAST stylesheet on every page so it wins cascade ties
   against the per-page inline <style> blocks. Keep every cross-page
   fix here instead of editing 27 inline copies. */

/* ---------- All viewports ---------- */

/* Footer links: meet the 24px minimum tap height (WCAG 2.5.8). */
.footer-links a,
.footer-bottom a {
    display: inline-block;
    padding: 0.4rem 0;
}

/* Cookie notice: tappable controls. */
#cookie-notice a {
    display: inline-block;
    padding: 0.4rem 0.15rem;
}

#cn-dismiss {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
}

/* Chat launcher steps above the cookie notice instead of overlapping it.
   cookie-consent.js toggles this class on <body>. */
body.has-cookie-notice .chatbot-widget {
    bottom: 92px;
}

/* Experience marquee: uniform white silhouettes instead of a mix of
   dark-variant and full-color logos that fight the dark tiles. */
.experience-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.72;
    max-height: 44px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.2s;
}

.experience-logo:hover img {
    opacity: 1;
}

/* Product demo video (neural-sentient.html, reusable). */
.demo-video {
    max-width: 1000px;
    margin: 0 auto;
}

.demo-video video {
    width: 100%;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
}

/* Caption under the Industry Experience marquee (index.html). */
.experience-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: -0.9rem 0 1.5rem;
    max-width: 62ch;
}

/* Hamburger morphs into an X while the drawer is open
   (toggleMobileMenu() toggles .open on it). */
.hamburger.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Desktop ---------- */

@media (min-width: 769px) {

    /* Home: tighten the hero band so the product cards crest into the
       first viewport instead of a full screen of empty dark. */
    body.home .hero {
        min-height: 0;
        padding-top: 9rem;
        padding-bottom: 3.5rem;
    }

    /* Product pages: the three product links are drawer-only items;
       without this they render inline and crowd the top bar into
       wrapping (and duplicate the current product name). */
    .nav-item.mobile-only {
        display: none;
    }

    .nav-logo,
    .nav-links a,
    .nav-brand-product {
        white-space: nowrap;
    }

    .nav-links {
        flex-wrap: nowrap;
    }
}

/* ---------- Phone / small tablet ---------- */

@media (max-width: 768px) {

    /* Header: brand stays on one line so the bar keeps a single-row
       height and heroes sized against it stop clipping. */
    .nav-logo {
        font-size: 1rem;
        gap: 0.5rem;
        white-space: nowrap;
        min-width: 0;
    }

    .logo-img {
        height: 30px;
    }

    /* Product pages (.nav-brand wrapper) hide the brand words and show
       only the product name; keep that pattern intact. */
    .nav-brand .nav-logo {
        font-size: 0;
        gap: 0;
    }

    .nav-brand .logo-img {
        height: 36px;
    }

    .nav-container {
        padding: 0.9rem 1.25rem;
    }

    /* Hero clears the fixed header with margin to spare. */
    .hero {
        padding-top: 6.5rem;
    }

    /* Hero CTAs: full-width stack, labels never wrap. */
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .hero-cta .btn {
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    /* Copy rhythm: airy between sections, not inside paragraphs. */
    .hero-subtitle,
    .section-subtitle,
    .section-header p,
    .page-subtitle {
        line-height: 1.6;
    }

    /* Resource page titles: 3rem "Documentation" clips at 390px. */
    .page-title {
        font-size: 2.25rem;
    }

    /* Multi-line hero headings read as one unit, not stacked bands. */
    .hero-title,
    .page-title {
        line-height: 1.15;
    }

    /* Product resources strip: a single swipeable line under the
       header instead of a full screen of stacked links. */
    .product-quick-links {
        margin-top: 58px;
        padding: 0.65rem 0;
    }

    .product-quick-links .container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .quick-links-label {
        font-size: 0.68rem;
    }

    .quick-links-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.9rem;
        padding: 0.15rem 0 0.35rem;
        scrollbar-width: none;
    }

    .quick-links-nav::-webkit-scrollbar {
        display: none;
    }

    .quick-link,
    .quick-link-cta {
        white-space: nowrap;
        flex: none;
    }

    .quick-link-separator {
        display: none;
    }

    /* Wide console screenshots: swipe to read at legible scale
       instead of shrinking to a blur. Tagged in markup because CSS
       cannot see aspect ratio. */
    .showcase-media:has(> img.wide-shot),
    .ns-hero-media:has(> img.wide-shot) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    img.wide-shot {
        width: 900px;
        max-width: none;
    }
}
