/* ------------------------------------------------------------------ *
 * Veylcast — the rules the inherited layer does not cover:
 *   1. the dark theme
 *   2. the theme toggle
 *   3. a handful of structural fixes
 * Everything else comes from _astro/*.css.
 * ------------------------------------------------------------------ */

/* ================================================== 1. the dark theme *
 * The inherited design is driven entirely by --theme-* tokens, and those
 * resolve to a --palette-grey-* ramp. Flipping the ramp flips the page.
 * Only the few places that hardcode white need their own override, and
 * they are all listed further down.                                    */

:root[data-theme="dark"] {
    color-scheme: dark;

    --palette-grey-0: #101116;
    --palette-grey-10: #16181f;
    --palette-grey-15: #191c24;
    --palette-grey-20: #1b1e27;
    --palette-grey-50: #22252f;
    --palette-grey-100: #2a2e3a;
    --palette-grey-200: #3a3f4d;
    --palette-grey-300: #8b90a0;
    --palette-grey-400: #4a5060;
    --palette-grey-600: #aab1cc26;
    --palette-grey-800: #9ba1b2;
    --palette-grey-900: #c8ccd8;
    --palette-grey-1000: #e7eaf2;
    --palette-grey-1100: #f2f4f8;
    --palette-grey-1200: #f2f3f7;

    --palette-grey-1000-12: #2a2b30;
    --palette-grey-50-20: #d8dae0;

    --palette-grey-0-rgb: 16, 17, 22;
    --palette-grey-50-rgb: 34, 37, 47;
    --palette-grey-400-rgb: 170, 180, 205;
    --palette-grey-600-rgb: 170, 177, 204;
    --palette-grey-1000-rgb: 231, 234, 242;
    --palette-grey-1200-rgb: 242, 243, 247;

    --theme-outline-inverse-outline-variant: #2122260f;
    --theme-outline-outline-variant: #e6eaf014;
    --theme-text-link-states-disabled: #767a86;
}

body {
    color: var(--theme-surface-on-surface);
}

:root[data-theme="dark"] body {
    background: var(--theme-surface-surface);
}

/* --- the places that hardcode white ------------------------------- */

:root[data-theme="dark"] .header[data-astro-cid-nen7h5rs] {
    background: #101116d9;
}

:root[data-theme="dark"] .header[data-astro-cid-nen7h5rs].scrolled,
:root[data-theme="dark"] .header[data-astro-cid-nen7h5rs].opaque,
:root[data-theme="dark"] .header[data-astro-cid-nen7h5rs].menu-open,
:root[data-theme="dark"] .header[data-astro-cid-nen7h5rs].dropdown-open,
:root[data-theme="dark"] .mobile-menu[data-astro-cid-nen7h5rs] {
    background: #101116;
}

:root[data-theme="dark"] .logo-link[data-astro-cid-nen7h5rs] {
    color: var(--theme-surface-on-surface) !important;
}

:root[data-theme="dark"] .logo-context-menu[data-astro-cid-nen7h5rs] {
    background: #191c24;
    border-color: #ffffff1f;
    box-shadow: 0 16px 40px #00000066, 0 3px 10px #00000033;
}

:root[data-theme="dark"] .custom-cursor[data-astro-cid-4xhi77lm] .cursor-content[data-astro-cid-4xhi77lm],
:root[data-theme="dark"] .custom-cursor[data-astro-cid-paliblhy] .cursor-content[data-astro-cid-paliblhy] {
    background: #1e222b;
    color: #f2f3f7;
}

/* The audience pill has a hardcoded translucent-white background, so it is
   a light chip in both themes. Its text has to be ink in both themes too —
   left to inherit, it turned white-on-white in dark mode. */
.try-solution-label[data-astro-cid-t24vh7ys] {
    color: #14151a;
}

/* The closing slab is a dark panel in both themes. Left alone it inverts
   with the rest of the page — its background is --theme-surface-on-surface
   — and turns into a white block. Pin it, and give it an edge so it still
   reads as a panel against a dark page. */
:root[data-theme="dark"] .download-section-backdrop[data-astro-cid-vwyjoj4m] {
    background: #16181f;
    border: 1px solid #2c313d;
}

:root[data-theme="dark"] .download-section-content[data-astro-cid-vwyjoj4m] .header[data-astro-cid-vwyjoj4m] {
    color: #f2f3f7;
}

:root[data-theme="dark"] .download-section-container .button-primary-inverse {
    background: #f2f3f7;
    color: #101116;
}

:root[data-theme="dark"] .download-section-container .button-secondary-inverse {
    color: #f2f3f7;
    background: #ffffff14;
    border-color: #ffffff29;
}

/* The pipeline panel and the use-case slides are dark artwork in both
   themes — on a dark page they need an edge to sit against. */
:root[data-theme="dark"] .landing-video[data-astro-cid-4xhi77lm],
:root[data-theme="dark"] .slide-image-wrapper[data-astro-cid-gk6ge62r] {
    border: 1px solid #2c313d;
}

/* The footer wordmark follows the text colour rather than a fixed ink. */
.footer-wordmark[data-astro-cid-ipindhfc] {
    color: var(--theme-surface-on-surface);
}

/* ================================================ 2. the theme toggle */

.theme-toggle {
    justify-content: center;
    align-items: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
}

.theme-toggle .symbol {
    font-size: 20px;
    line-height: 1;
}

/* Show the mode you would switch *to*: a moon in daylight, a sun at night. */
.theme-toggle .icon-to-light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-to-dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-to-light {
    display: inline-block;
}

.mobile-menu .theme-toggle {
    width: auto;
    min-width: 0;
    gap: 10px;
    padding: 0 20px;
    height: 44px;
}

/* =========================================== 3. structural leftovers  */

/* The nav is anchors only now. Header.astro's script still expects these
   two nodes to exist — it calls .classList on them unconditionally — so
   they stay in the DOM and are hidden here instead of being deleted. */
.dropdown[data-astro-cid-nen7h5rs],
.dropdown-overlay[data-astro-cid-nen7h5rs] {
    display: none !important;
}

/* The pipeline panel is a link now, not a <video>. */
.video-wrapper[data-astro-cid-4xhi77lm] {
    display: block;
    color: inherit;
    text-decoration: none;
}

.video-wrapper[data-astro-cid-4xhi77lm]:hover,
.video-wrapper[data-astro-cid-4xhi77lm]:focus-visible {
    text-decoration: none;
}

img.landing-video[data-astro-cid-4xhi77lm] {
    display: block;
}

/* The gate cards are read, not clicked — they are <div>s, so the hover
   lift the inherited stylesheet gives .list-item is not wanted. */
.list-item[data-astro-cid-m5y766cv] {
    cursor: default;
}

/* The studio credit sits where the platform logo used to. */
.vc-studio {
    letter-spacing: .02em;
    font-size: .95rem;
    font-weight: 400;
}

.vc-studio strong {
    font-weight: 600;
    letter-spacing: .06em;
}

/* Material Symbols has no ROND axis; drop it so the icons keep their
   intended weight instead of falling back to the default instance. */
.symbol,
.link-icon,
.dropdown-icon,
.bouncer {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
}

/* Illustrations are SVG rather than photography — keep them from being
   dragged out of the page as files. */
.feature-image,
.list-image,
.landing-video {
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------------------------------------------------------------------------
   Hero live demo — an iframe onto veylcast_dashboard/demo.php, which serves a real
   encrypted stream to visitors with no account. Sized here rather than in the
   frame so the page controls the layout and the frame only draws the player.
   --------------------------------------------------------------------------- */
.vc-demo {
    width: 100%;
    max-width: 1040px;
    margin: clamp(40px, 6vw, 88px) auto 0;
    padding: 0 var(--page-margin, 24px);
}

.vc-demo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--theme-text-subtle, #6E7385);
}
.vc-demo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0FB981;
    box-shadow: 0 0 0 0 rgba(15, 185, 129, .6);
    animation: vc-demo-pulse 2s infinite;
    flex: none;
}
@keyframes vc-demo-pulse {
    70%  { box-shadow: 0 0 0 8px rgba(15, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 185, 129, 0); }
}

.vc-demo-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #05070a;
    border: 1px solid rgba(20, 21, 26, .10);
    box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .vc-demo-frame {
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.vc-demo-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


@media (max-width: 720px) {
    .vc-demo { margin-top: 36px; }
    .vc-demo-frame { border-radius: 12px; }
}

/* The hero is a non-wrapping flex row (.welcome-section + .vc-demo). Left
   alone it keeps both side by side all the way down to a phone, where the
   demo collapses to a ~150px sliver. Desktop sizing is left to the inherited
   flex (auto basis plus the max-width above) — giving it an explicit basis
   here made it shrink to 416px. Only the wrap below is ours. */
@media (max-width: 1024px) {
    .welcome-wrapper { flex-wrap: wrap; }
    .welcome-wrapper > .welcome-section,
    .welcome-wrapper > .vc-demo {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    .vc-demo { margin-left: 0; margin-right: 0; }
}

/* The hero centres its content inside a 100vh box, and the header is fixed on
   top of it. On desktop the block is short enough that centring clears the
   header; once .vc-demo stacked underneath on mobile the block grew and the
   logo slid up behind the header. Pad the box so the centred content starts
   below the header, and let it grow past 100vh rather than overlap. */
@media (max-width: 1024px) {
    .welcome-wrapper {
        padding-top: 104px;
        padding-bottom: 48px;
    }
}

@media (max-width: 720px) {
    /* Two-line kicker: keep the dot on the first line instead of floating to
       the vertical middle of the wrapped block. */
    .vc-demo-head { align-items: flex-start; line-height: 1.5; }
    .vc-demo-dot  { margin-top: 5px; }
}