/* ════════════════════════════════════════════════════════════════════════════════════════════════
   sid-video.css — VID-1 PRODUCTION (2026-09-29) of the ONE shared video player for www.sportindenmark.dk,
   built from the VID-0 prototype Micki approved on 2026-09-29 (+ Q1 touch-teaser Pause, Q3 radius 20px).
   Served from uploads/sid/sid-video.css (repo: main-site-global/sid-video.css), enqueued by mu-plugin
   main-site-mu/sid-video.php next to sid-global.css (the sid-tour.php pattern). Everything is class-scoped
   under .sv / .sv-lb, so any number of instances can share a page. Values come from the design tokens
   (wordpress-widgets/design-tokens.css) with a literal fallback equal to the token value, plus the
   video-glass values copied from the live heroes (.vw-pill / .vw-hint / .vw-lightbox).
   Specificity: every rule that styles a <button>, <a>, <img>, <p> or <video> is scoped by TWO classes
   (0,2,0), so Elementor's kit/global rules (.elementor-kit-N button, .elementor img = 0,1,1) never win.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.sv, .sv *, .sv-lb, .sv-lb *{ box-sizing:border-box; }

.sv, .sv-lb{
    /* video glass — VID-3c (Micki 2026-10-01, "Kun C1 alle steder", variant C1 of the VID-3b prototype): a DARKER tint so the
       white glyph/text reads on light covers too (was the .vw-pill white .16 / hover .28). Same blur 14 + saturate 1.4.
       Used by every glass element of the player: .sv-btn (play/pause/retry, volume, language, replay pill), .sv-tl, .sv-msg. */
    --sv-glass: rgba(20,32,27,.35);
    --sv-glass-hover: rgba(20,32,27,.5);
    --sv-glass-line: rgba(255,255,255,.28);    /* the solid green CTA pill's border only — unchanged */
    --sv-blur: blur(14px) saturate(140%);
    /* VID-3c: a 1px translucent WHITE ring on every glass element — no green outline anywhere on the player's glass
       (was a 1.5px brand-green accent outline, Micki 2026-09-29) */
    --sv-ring: rgba(255,255,255,.5);
    --sv-outline: 1px solid var(--sv-ring);
    --sv-radius: var(--sid-r-card, 20px);      /* Q3 (Micki 2026-09-29): the canon card radius, inline AND large view */
    --sv-inset: 12px;                          /* ONE inset for all chrome: top bar, CTA, message */
    --sv-btn: 44px;                            /* touch-target floor for new work (SPEC §4.4) */
    --sv-cta-h: 35px;                          /* CTA pill height (.vw-hint metrics) */
    --sv-safe-top: 0%;                         /* burned-in subtitles: the CTA's top never goes above this */
    --sv-ar: 1 / 1; --sv-arn: 1;               /* aspect ratio (CSS) + its number (w/h) for sizing maths */
    --sv-maxh: 80vh;                           /* inline: a tall 9:16 box never grows past this */
}
.sv{
    position:relative; width:100%; margin:0;
    font-family:var(--sid-font, 'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
    color:#fff;
}
.sv[data-format="16:9"], .sv-lb[data-format="16:9"]{ --sv-ar:16 / 9; --sv-arn:1.7778; }
.sv[data-format="9:16"], .sv-lb[data-format="9:16"]{ --sv-ar:9 / 16; --sv-arn:.5625; }

/* the inline box follows the video's format — no bars, ever */
.sv-box{
    position:relative; width:min(100%, calc(var(--sv-maxh) * var(--sv-arn))); margin-inline:auto;
    aspect-ratio:var(--sv-ar); border-radius:var(--sv-radius); overflow:hidden; isolation:isolate;
    background:var(--sid-hero-fallback, linear-gradient(115deg, #1d3557, #2f5d3a));   /* media missing → brand fallback, never black */
}
/* placeholder cover: what the small box shows while the player is away in the large view.
   Scoped twice (.sv-box .sv-ph = 0,2,0 → beats Elementor's .elementor img{height:auto} 0,1,1) */
.sv-box .sv-ph, .sv-player .sv-cover{
    position:absolute; inset:0; width:100%; height:100%; max-width:none; margin:0; border:0; border-radius:0;
    object-fit:cover; display:block;
}

/* ── the player: moves between the inline box and the large view as ONE element ── */
.sv-player{
    position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:inherit;
    container-type:inline-size;               /* captions, timeline and CTA adapt to the PLAYER, not the window */
    font-family:var(--sid-font, 'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
    color:#fff;
}
.sv-player .sv-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:transparent; }
.sv-player .sv-cover{ z-index:1; pointer-events:none; transition:filter var(--sid-t-standard, .2s), transform var(--sid-t-standard, .2s); }
.sv-player:not([data-state="cover"]):not([data-state="error"]):not([data-state="ended"]) .sv-cover{ display:none; }
/* ended: the cover returns blurred + dimmed behind the replay control (HOME-VID F — white end frames can't hide it).
   A filter on the image itself, not an overlay element (W-9). */
.sv-player[data-state="ended"] .sv-cover{ filter:blur(14px) brightness(.55); transform:scale(1.1); }
/* error: the cover, dimmed a little so the message reads, never a black box */
.sv-player[data-state="error"] .sv-cover{ filter:brightness(.7); }

/* the whole picture is the "start watching" target for mouse + touch. It is aria-hidden and out of the tab
   order: the top-right play button is the keyboard + screen-reader path to the very same action. */
.sv-player .sv-surface{
    position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; padding:0;
    border:0; border-radius:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.sv-player[data-state="ended"] .sv-surface, .sv-player[data-state="error"] .sv-surface{ display:none; }

/* ── captions: custom renderer (native tracks are parsed, mode "hidden"; we draw the active cue) ──
   Sits ABOVE the CTA zone always (reserved even before the CTA pops), so a cue never collides with it. */
.sv-player .sv-caps{
    position:absolute; left:6%; right:6%; z-index:2; pointer-events:none; text-align:center;
    bottom:calc(var(--sv-inset) + var(--sv-cta-h) + var(--sv-inset));
    font-size:clamp(.8125rem, 1.6cqi + .55rem, 1.3rem); font-weight:500; line-height:1.45;
}
.sv-player.no-cta .sv-caps{ bottom:max(var(--sv-inset), 7%); }
.sv-player .sv-cue{
    background:rgba(0,0,0,.72); color:#fff; padding:.12em .5em; border-radius:4px;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.sv-player[data-state="cover"] .sv-caps, .sv-player[data-state="ended"] .sv-caps, .sv-player[data-state="error"] .sv-caps,
.sv-player.has-msg .sv-caps{ display:none; }                 /* a stopped video with a message: the message owns the bottom */

/* ── glass pill MESSAGE (cover label · "Click here to watch the rest" · error text) = .vw-hint ── */
.sv-player .sv-msg{
    position:absolute; left:50%; z-index:4; transform:translateX(-50%); pointer-events:none;
    bottom:var(--sv-inset); width:max-content; max-width:calc(100% - 2 * var(--sv-inset));
    margin:0; padding:6px 14px; border-radius:var(--sid-r-pill, 100px);
    border:var(--sv-outline); background:var(--sv-glass); color:#fff;          /* VID-3c: the glass ring (was --sv-glass-line .28) */
    -webkit-backdrop-filter:var(--sv-blur); backdrop-filter:var(--sv-blur);
    font-size:var(--sid-fs-3, .8125rem); font-weight:600; line-height:1.55; text-align:center; text-wrap:balance;
    opacity:0; visibility:hidden; transition:opacity var(--sid-t-standard, .2s), visibility 0s linear var(--sid-t-standard, .2s);
}
.sv-player.has-msg .sv-msg{ opacity:1; visibility:visible; transition:opacity var(--sid-t-standard, .2s); }
/* with a CTA on screen the message stacks right above it (8px) */
.sv-player.cta-on .sv-msg{ bottom:calc(100% - min(max(calc(100% - var(--sv-cta-h) - var(--sv-inset)), var(--sv-safe-top)), calc(100% - var(--sv-cta-h) - 3px)) + var(--sid-sp-2, 8px)); }
.sv-player .sv-msg-title{ display:block; text-transform:uppercase; letter-spacing:.5px; }

/* ── green CTA pill (always visible once shown — never auto-hidden with the controls) ── */
.sv-player .sv-cta{
    position:absolute; left:50%; z-index:5; transform:translate(-50%, 6px);
    top:min(max(calc(100% - var(--sv-cta-h) - var(--sv-inset)), var(--sv-safe-top)), calc(100% - var(--sv-cta-h) - 3px));   /* under burned-in subs, but always ≥ 3px inside */
    height:var(--sv-cta-h); max-width:calc(100% - 2 * var(--sv-inset));
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden;
    padding:0 14px; border-radius:var(--sid-r-pill, 100px);
    border:1px solid var(--sv-glass-line);
    background:var(--sid-btn-primary-bg, #3a7a1c); color:#fff; text-decoration:none;
    font-family:inherit; font-size:var(--sid-fs-3, .8125rem); font-weight:600; line-height:1;
    box-shadow:var(--sid-shadow-pop, 0 10px 30px rgba(0,0,0,.16));
    opacity:0; visibility:hidden;
    transition:opacity var(--sid-t-standard, .2s), transform var(--sid-t-standard, .2s), background var(--sid-t-micro, .15s), visibility 0s linear var(--sid-t-standard, .2s);
}
.sv-player.cta-on .sv-cta{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity var(--sid-t-standard, .2s), transform var(--sid-t-standard, .2s), background var(--sid-t-micro, .15s); }
.sv-player .sv-cta[hidden]{ display:none; }
.sv-player .sv-cta:hover{ background:var(--sid-btn-primary-bg-hover, #2f6316); color:#fff; }
.sv-player .sv-cta:active{ transform:translate(-50%, 0) scale(.98); }
.sv-player .sv-cta-text{ overflow:hidden; text-overflow:ellipsis; }
.sv-player .sv-cta svg{ width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@container (max-width: 239px){ .sv-player{ --sv-cta-h:28px; } .sv-player .sv-cta{ padding:0 12px; } .sv-player .sv-cta svg{ display:none; } }

/* ── the ONE glass button (44px, dark glass tint, blur, 1px translucent white ring — VID-3c, icon centred) ── */
.sv-player .sv-btn{
    position:relative; flex:0 0 auto; width:var(--sv-btn); height:var(--sv-btn); margin:0; padding:0;
    display:inline-grid; place-items:center; border-radius:var(--sid-r-circle, 50%);
    border:var(--sv-outline); background:var(--sv-glass); color:#fff; cursor:pointer;
    -webkit-backdrop-filter:var(--sv-blur); backdrop-filter:var(--sv-blur);
    font:inherit; line-height:0; -webkit-tap-highlight-color:transparent;
    transition:background var(--sid-t-micro, .15s), transform var(--sid-t-micro, .15s), opacity var(--sid-t-standard, .2s);
}
.sv-player .sv-btn:hover{ background:var(--sv-glass-hover); }
.sv-player .sv-btn:active{ transform:scale(.96); }
.sv-player .sv-btn svg.sv-ic{ width:19px; height:19px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sv-player .sv-btn .sv-ic-play{ transform:translateX(1px); }          /* optical centre of the triangle */
.sv-player .sv-btn .sv-flag{ width:24px; height:16px; border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.sv-player .sv-btn .sv-code{ font-size:var(--sid-fs-2, .78rem); font-weight:700; line-height:1; text-transform:uppercase; }

/* keyboard focus ONLY (mouse/touch never draw a ring) — white, because the green token vanishes on video */
.sv :focus, .sv-lb :focus{ outline:none; }
/* VID-1b (audit P2-1): the site's Customizer "Additional CSS" carries `:focus-visible{outline:2.5px solid #166534 !important}`
   (Design Audit F1a, 2026-07-13) — an !important at (0,1,0) that beat this rule on live and put the dark-green ring on video.
   So the player's own ring is !important too, and it wins on specificity (0,3,0) — scoped to the player's controls only. */
.sv .sv-btn:focus-visible, .sv .sv-cta:focus-visible, .sv .sv-tl:focus-visible, .sv-lb .sv-btn:focus-visible,
.sv-lb .sv-cta:focus-visible, .sv-lb .sv-tl:focus-visible{ outline:3px solid #fff !important; outline-offset:2px !important; }
.sv .sv-transcript:focus-visible{ outline:var(--sid-focus-outline, 2.5px solid #166534); outline-offset:2px; border-radius:4px; }

/* ── top control bar: [timeline ……] [language] [volume] [play/pause] — everything the viewer operates
   lives up here; the bottom belongs to the story (subtitles, burned-in text, the CTA). ── */
.sv-player .sv-bar{
    position:absolute; top:var(--sv-inset); left:var(--sv-inset); right:var(--sv-inset); z-index:6;
    display:flex; align-items:center; justify-content:flex-end; gap:var(--sid-sp-2, 8px); pointer-events:none;
    opacity:0; transform:translateY(-4px);
    transition:opacity var(--sid-t-standard, .2s), transform var(--sid-t-standard, .2s);
}
.sv-player .sv-bar > *{ pointer-events:auto; }
.sv-player.is-chrome .sv-bar{ opacity:1; transform:none; }
.sv-player:not(.is-chrome) .sv-bar > *{ pointer-events:none; }
/* Q1 (Micki 2026-09-29): touch + muted teaser → the Pause button stays on screen while the rest of the bar hides */
.sv-player.pin-pp:not(.is-chrome) .sv-bar{ opacity:1; transform:none; }
.sv-player.pin-pp:not(.is-chrome) .sv-bar > :not(.sv-pp){ opacity:0; pointer-events:none; }
.sv-player.pin-pp:not(.is-chrome) .sv-bar > .sv-pp{ pointer-events:auto; }
.sv-player[data-state="ended"] .sv-bar{ display:none; }
.sv-player[data-state="cover"] .sv-vol, .sv-player[data-state="error"] .sv-vol,
.sv-player[data-state="error"] .sv-lang{ display:none; }
.sv-player .sv-lang[hidden], .sv-player .sv-tl[hidden]{ display:none; }

/* thin glass timeline / scrubber — only once the visitor is watching (never on the cover or the teaser) */
.sv-player .sv-tl{
    flex:1 1 auto; min-width:0; max-width:560px; height:var(--sv-btn); margin-right:auto;
    display:flex; align-items:center; gap:10px; padding:0 14px 0 16px;
    border-radius:var(--sid-r-pill, 100px); border:var(--sv-outline); background:var(--sv-glass);
    -webkit-backdrop-filter:var(--sv-blur); backdrop-filter:var(--sv-blur);
    cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none;
}
.sv-player:not(.is-watching) .sv-tl{ display:none; }
.sv-player .sv-time{ flex:0 0 auto; font-size:var(--sid-fs-2, .78rem); font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
.sv-player .sv-time-dur{ opacity:.8; }
.sv-player .sv-track{ position:relative; flex:1 1 auto; height:4px; border-radius:4px; background:rgba(255,255,255,.3); }
.sv-player .sv-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:#fff; }
.sv-player .sv-thumb{
    position:absolute; top:50%; left:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
    background:#fff; box-shadow:0 0 0 1.5px var(--sv-ring); transition:transform var(--sid-t-micro, .15s);   /* VID-3c: was accent green */
}
.sv-player .sv-tl:hover .sv-thumb, .sv-player .sv-tl.is-drag .sv-thumb{ transform:scale(1.25); }
/* narrow players: drop the duration, then the whole timeline (the three buttons always fit) */
@container (max-width: 419px){ .sv-player .sv-time-dur, .sv-player .sv-time-sep{ display:none; } }
@container (max-width: 299px){ .sv-player .sv-tl{ display:none !important; } }

/* loading: the play button's icon turns into a ring (static with reduced motion) */
.sv-player .sv-pp svg.sv-spin{ display:none; }
.sv-player.is-loading .sv-pp svg.sv-ic:not(.sv-spin){ display:none; }
.sv-player.is-loading .sv-pp svg.sv-spin{ display:block; animation:sv-spin .9s linear infinite; }
@keyframes sv-spin{ to{ transform:rotate(360deg); } }

/* replay: CENTRE, the same glass button family (a pill with a label, so it reads without the icon) */
.sv-player .sv-replay{
    position:absolute; top:50%; left:50%; z-index:5; transform:translate(-50%,-50%);
    width:auto; padding:0 18px 0 14px; gap:8px; display:none; grid-auto-flow:column; border-radius:var(--sid-r-pill, 100px);
    font-size:var(--sid-fs-3, .8125rem); font-weight:600; line-height:1;
}
.sv-player .sv-replay:active{ transform:translate(-50%,-50%) scale(.96); }
.sv-player[data-state="ended"] .sv-replay{ display:inline-grid; }

/* transcript link (optional) — below the box, text link in the page's own colour */
.sv .sv-transcript{
    display:inline-flex; align-items:center; gap:var(--sid-sp-1, 4px); margin-top:var(--sid-sp-2, 8px);
    font-size:var(--sid-fs-3, .8125rem); font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:3px;
}
.sv .sv-transcript svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── LARGE VIEW (desktop only) — moved to <body>. The frame IS the video; the dialog's own chrome (close)
   sits in the gutter outside it, so it never covers the player's control bar. ── */
.sv-lb{
    position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
    padding:24px 68px; font-family:var(--sid-font, 'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
}
.sv-lb.is-open{ display:flex; }
.sv-lb .sv-lb-backdrop{ position:absolute; inset:0; background:rgba(20,24,28,.28); -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%); }
.sv-lb .sv-lb-inner{
    --sv-lbmax: 1040px;
    position:relative; z-index:1; aspect-ratio:var(--sv-ar);
    width:min(var(--sv-lbmax), calc(100vw - 136px), calc(84vh * var(--sv-arn)));
}
.sv-lb[data-format="16:9"] .sv-lb-inner{ --sv-lbmax: 1280px; }
.sv-lb .sv-lb-slot{ position:absolute; inset:0; border-radius:var(--sv-radius); overflow:hidden; background:#000; box-shadow:var(--sid-shadow-modal, 0 18px 50px rgba(0,0,0,.22)); }
.sv-lb .sv-close{
    position:absolute; top:0; right:-56px; width:44px; height:44px; margin:0; padding:0;
    display:grid; place-items:center; border:0; border-radius:50%; background:#fff; color:var(--sid-ink, #213631);
    box-shadow:0 4px 18px rgba(0,0,0,.4); cursor:pointer; transition:background var(--sid-t-micro, .15s);
}
.sv-lb .sv-close:hover{ background:var(--sid-gray-100, #f3f4f6); }
.sv-lb .sv-close:focus-visible{ outline:3px solid var(--sid-ink, #213631) !important; outline-offset:2px !important; }   /* VID-1b: see the focus note above */
.sv-lb .sv-close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; }

@media (prefers-reduced-motion: reduce){
    .sv *, .sv-lb *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
    .sv-player.is-loading .sv-pp svg.sv-spin{ animation:none; }
}