/* ──────────────────────────────────────────────────────────────────────
   Vodlix landing pages — shared nav controls: COLOUR MODE

   The currency switcher's styles live in `lp-currency.css`, which no page
   references yet — see that file's header.

   Why this file exists and is NOT in vodlix-2026.css: the design system is
   a vendored copy of vodlix-site-statamic/docs/ds and must never diverge
   (CLAUDE.md). This control is landing-page chrome, not a DS component,
   so it lives beside the system instead of inside it.

   Everything is built from DS tokens, so the control follows light/dark and
   the nav's hero/bar flip without a single hardcoded colour.

   Served at https://landing.vodlix.com/shared/lp/lp-controls.css
   ────────────────────────────────────────────────────────────────────── */

/* Shared shell — deliberately the same glass language, height and radius as
   `.d-nav__burger`, so the actions cluster reads as one row of controls.
   40px, not the DS burger's 38px: 40 is the floor for a thumb target. */
.lp-ctl {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; height: 40px; min-width: 40px; padding: 0; margin: 0;
  border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--menu-ink);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  transition: background .15s ease, border-color .15s ease;
}
.lp-ctl:hover { background: var(--btn-soft); }
.lp-ctl:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Off the hero the bar is a plain surface, so the frosted pill wash the DS
   uses on the bar applies here too. */
.pg .d-nav[data-look="bar"] .lp-ctl { background: var(--pill-bg); border-color: var(--pill-line); }
.pg .d-nav[data-look="bar"] .lp-ctl:hover { background: var(--btn-soft); }

/* ── Colour-mode toggle ───────────────────────────────────────────────
   A real control, not the DS's `<div data-mode-toggle>` review scaffolding
   (banned — docs/ds/USING-IT-HERE.md). It writes data-mode on <html>,
   persists to localStorage and defaults to prefers-color-scheme. */
.lp-mode { width: 40px; flex: 0 0 auto; }
.lp-mode svg { display: block; width: 17px; height: 17px; }
/* Show the mode you would switch TO — moon while light, sun while dark.
   Keyed off [data-mode-btn], not `.lp-mode`, so the bar button and the sheet
   row (`.lp-sheetctl`) swap together instead of the sheet showing both. */
[data-mode-btn] .lp-mode__sun { display: none; }
:root[data-mode="dark"] [data-mode-btn] .lp-mode__sun { display: block; }
:root[data-mode="dark"] [data-mode-btn] .lp-mode__moon { display: none; }

/* ── Mobile sheet rows ────────────────────────────────────────────────
   The bottom sheet is where a phone user expects secondary controls, so
   the toggle is repeated there. Styled off `.d-nav__sheetlang`. */
.lp-sheetctl {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 46px; margin-top: 8px; padding: 12px 14px;
  border: 0; border-top: 1px solid var(--line); border-radius: 12px;
  background: none; color: var(--ink); font: inherit; font-size: 14px;
  cursor: pointer; text-align: left;
}
.lp-sheetctl + .lp-sheetctl { margin-top: 0; }
.lp-sheetctl span { flex: 1; }
.lp-sheetctl b { font-weight: 600; color: var(--accent-ink); }
.lp-sheetctl svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--icon-muted); }

/* ── Feature-annotated demo player ─────────────────────────────────────────
   The "A Very Powerful HTML5 Player" section mounts the real Vodlix player
   (player.vodlix.com/vodlix-player.js) on the <video> inside .player-stage.
   The player promotes that parent to its root, stamping .vdx-player /
   .vdx-fluid + overflow:hidden onto .player-stage. But the feature callouts
   (.ann) are children of .player-stage positioned just OUTSIDE it
   (left/right: calc(100% + 12px)) — so overflow:hidden CLIPS them, and every
   tag (Logo, Skip Intro, Chapters, …) vanished the moment the player loaded.
   That is why the tags showed on vodlix.com/landing/* (player failed to load,
   no clip) but not on landing.vodlix.com (player loaded, clip applied).

   The player root carries no border-radius, so it needs no clipping of its
   own here — let it overflow so the callouts render. They only display at
   >=1180px, inside the 460px side gutter .player-stage already reserves, so
   this adds no horizontal page overflow. !important overrides the player's
   own .vdx-fluid/.vdx-player rule, which is injected at runtime after this
   sheet. */
.player-stage.vdx-player,
.player-stage.vdx-fluid { overflow: visible !important; }