/* /assets/css/video.css — minimal + stable */

:root{
  --brand:#0a7a2f;
  --offset-desktop:120px; /* navbar + subheader */
  --offset-mobile:64px;   /* sticky controls height on phones */
}

/* Keep page height stable and anchors below header */
html{
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
  scroll-padding-top: var(--offset-desktop);
}
@media (max-width:767.98px){
  html{ scroll-padding-top: var(--offset-mobile); }
}

/* Hide home banner on video pages */
body.video-page .hero-banner{ display:none; }

/* Controls */
.controls{
  display:flex; gap:.5rem; align-items:center; min-height:44px; margin:.5rem 0;
}
.controls .btn{
  background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700;
  border-width:2px; border-radius:10px; padding:.45rem .8rem; text-decoration:none;
}
#video-prev.disabled,#video-next.disabled,#video-random.disabled{
  pointer-events:none; opacity:.5;
}

/* Reserve the area above player so height never hops */
.above-player{ min-height:88px; }

/* Player stays 16:9 and never shifts */
.player{ aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.player iframe{ width:100%; height:100%; border:0; }

/* Optional: sticky controls on phones */
@media (max-width:767.98px){
  .controls{
    position:sticky; top:0; z-index:30; background:#fff;
    padding:.5rem .75rem; margin:0 -12px 8px; border-bottom:1px solid #eee;
  }
}
/* Details block polish */
.video-details { background:#fff; border:1px solid #eee; border-radius:12px; padding:12px 14px; }
.video-details a { text-decoration: none; }
.video-details a:hover { text-decoration: underline; }

.collection-card{ background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; }
.collection-title{ font-weight:700; margin-bottom:.5rem; }
.collection-menu{ display:flex; flex-direction:column; gap:.5rem; }
.collection-link{
  display:block; padding:.6rem .8rem; border-radius:10px;
  background:var(--brand); color:#fff; font-weight:700; text-decoration:none;
}
.collection-link:hover{ filter:brightness(1.06); }
.share-row{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin:.75rem 0 0;
}
.share-row .btn{ border-radius:10px; font-weight:700; }
.share-row .toast-mini{
  margin-left:.25rem; font-size:.85rem; opacity:.85;
}
/* Title + share row (desktop) */
.title-share .btn {
  border-color: #0a7a2f;
  color: #0a7a2f;
  background: #fff;
  font-weight: 700;
}
.title-share .btn:hover {
  background: #0a7a2f;
  color: #fff;
}
.title-share .btn.btn-warning:hover { filter: brightness(1.05); }
.title-share .btn-outline-success{
  background:#0a7a2f; border-color:#0a7a2f; color:#fff;
}
.title-share .btn-outline-success:hover{ filter:brightness(1.06); }

.site-footer{background:#0a7a2f;color:#fff;padding:18px 0 22px;border-top:4px solid #bcae7a}
.site-footer a{color:#fff;text-decoration:none}
.footer-menu{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.site-footer .copyright{margin:0;text-align:center;opacity:.9}
/* No reserved height so there’s no big blank space if the ad doesn’t load */
.adwrap, .adwrap--desc { min-height: 0 !important; }
/* no fixed height; tiny default spacing only when visible */
.adwrap--desc{min-height:0;margin:0;padding:0}
.adwrap--hidden{display:none !important;}

/* Make nav links bold (won’t change height) */
.main-nav .nav-link {
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;            /* keep a stable line height */
}

/* Ensure navbar has a stable height across loads */
.main-nav { min-height: 56px; }

/* Fix logo box size so layout doesn’t shift while it loads */
.main-nav .navbar-brand img {
  width: 144px;   /* must match HTML width */
  height: 36px;   /* must match HTML height */
  display: block; /* removes inline-img descender gap */
}

/* Optional polish: space between logo and toggler on mobile */
@media (max-width: 991.98px){
  .navbar-brand { padding: .25rem 0; }
  
}
.navbar-brand img{ width: clamp(160px, 45vw, 220px); height: 50px; }


/* /assets/css/video.css v1 — video-page specific */

:root{
  --brand-green:#0a7a2f;
  --offset-desktop:120px;  /* navbar + subheader + breathing room */
  --offset-mobile:64px;    /* sticky controls height on phones */
}

/* Keep scrollbar width constant across pages */
html{ overflow-y:scroll; scrollbar-gutter:stable both-edges; }

/* Hide home banner on video pages to avoid jump */
body.video-page .hero-banner{ display:none; }

/* NAV CONTROLS */
.controls{
  display:flex; gap:.5rem; align-items:center; margin:.5rem 0; min-height:44px;
}
.controls .btn,
.controls a:not(.btn){
  background:var(--brand-green); border:2px solid var(--brand-green);
  color:#fff; font-weight:800; border-radius:10px; padding:.45rem .8rem; text-decoration:none;
}
.controls .btn:hover,
.controls a:not(.btn):hover{ filter:brightness(1.06); }
#video-prev.disabled,#video-next.disabled,#video-random.disabled{ pointer-events:none; opacity:.5; }

/* Reserve stable space above player */
.above-player{ min-height:88px; }

/* Anchor offset so #player never hides behind the header */
html{ scroll-padding-top:var(--offset-desktop); }
#player{ scroll-margin-top:var(--offset-desktop); }
@media (max-width:767.98px){
  html{ scroll-padding-top:var(--offset-mobile); }
  #player{ scroll-margin-top:var(--offset-mobile); }
}

/* PLAYER */
.player{ aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.player iframe{ width:100%; height:100%; border:0; display:block; }

/* COLLECTIONS CARD (left) */
.collection-card{ background:#fffbea; border:1px solid #eadf9c; border-radius:14px; padding:14px; }
.collection-title{ font-weight:700; margin-bottom:.5rem; }
.collection-menu{ display:flex; flex-direction:column; gap:.6rem; }
.collection-link{
  display:block; padding:.70rem .9rem; border-radius:12px;
  background:var(--brand-green); color:#fff; text-decoration:none; font-weight:700;
}
.collection-link:hover{ filter:brightness(1.05); }

/* TITLE + SHARE ROW (under player) */
.video-meta{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.video-meta .title{ font-weight:800; margin:0; }
.video-meta .share a{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:.5rem; text-decoration:none;
  background:#f7f7f7; border:1px solid #e5e5e5; font-weight:700;
}
.video-meta .share a:hover{ background:#f0f0f0; }

/* ===== Footer (video pages) ===== */
.site-footer{
  background:#0a7a2f;      /* green bar */
  color:#fff;
  padding:18px 0 22px;
  border-top:4px solid #bcae7a; /* optional thin accent */
}
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-menu{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:20px 28px; list-style:none; margin:0 0 10px; padding:0;
}
.site-footer .copyright{ margin:0; text-align:center; font-size:.95rem; opacity:.9; }
@media (max-width:576px){
  .footer-menu{ gap:14px 18px; }
  .site-footer .copyright{ font-size:.9rem; }
}
/* ---------- Video page polish ---------- */
.title-share .btn { font-weight: 700; }
.title-share .btn-sm { padding: .4rem .65rem; border-width: 2px; border-radius: .6rem; }
.share-group { gap: .4rem; display: inline-flex; align-items: center; }

/* Slight visual depth for the player (no layout shift) */
.player { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.08); }

/* Mini “copied” toast used by the Copy button */
.toast-mini{
  margin-left:.5rem; font-size:.85rem; font-weight:700; padding:.2rem .5rem;
  border-radius:.5rem; background:#e8f6ee; border:2px solid #198754; color:#0f5132;
}

/* Make tooltip text a touch bolder (Bootstrap tooltips) */
.tooltip .tooltip-inner{ font-weight:700; }

/* Keep spacing tight right under the share row */
.title-share + .row{ margin-top: .5rem; }

.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.yt-lite{all:unset;display:block;position:relative;width:100%;height:100%;cursor:pointer}
.yt-lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:.6rem 1rem;border-radius:999px;background:rgba(255,255,255,.85);font-weight:700}
.player--live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ==== Ads (reserve space to prevent CLS) ==== */
#ad-desc { min-height: 300px; }
#ad-desc .adsbygoogle { display: block; min-height: 300px; width: 100%; }

/* Keep the space but hide until Google fills it */
.adwrap--hidden { visibility: hidden; }

/* (optional) generic rule if you add more ad slots later */
.adwrap { min-height: 300px; }
/* Player box with 16:9 fallback for older mobiles */
.player{position:relative;background:#000;border-radius:12px;overflow:hidden}
.player::before{content:"";display:block;padding-top:56.25%} /* 16:9 fallback */
.player > *{position:absolute;inset:0}

@supports (aspect-ratio: 16/9){
  .player{aspect-ratio:16/9}
  .player::before{display:none}
}

/* Lite poster as a background (no <img> to fight with) */
.yt-lite{display:block;width:100%;height:100%;cursor:pointer;border:0;
  background:#000 center/cover no-repeat}

/* Play chip */
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:.6rem 1rem;border-radius:999px;background:rgba(255,255,255,.9);font-weight:700}

/* Live iframe fills the box */
.player--live iframe{width:100%;height:100%;border:0}
/* Player with solid 16:9 on all phones */
.player{position:relative;background:#000;border-radius:12px;overflow:hidden}
.player::before{content:"";display:block;padding-top:56.25%} /* 16:9 fallback */
.player > *{position:absolute;inset:0}
@supports(aspect-ratio:16/9){ .player{aspect-ratio:16/9} .player::before{display:none} }

/* Lite poster: NO background image; rely on <img> */
.player .yt-lite{
  display:block;width:100%;height:100%;cursor:pointer;border:0;
  background:#000 !important;                 /* no poster background */
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center !important;
}

/* Poster image fills the box */
.player .yt-lite img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block
}

/* Play chip */
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:.6rem 1rem;border-radius:999px;background:rgba(255,255,255,.9);font-weight:700}

/* Live iframe */
.player--live iframe{width:100%;height:100%;border:0}

/* 16:9 iframe that fills the box on all devices */
.player{position:relative;background:#000;border-radius:12px;overflow:hidden}
.player::before{content:"";display:block;padding-top:56.25%} /* 16:9 fallback */
.player > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@supports (aspect-ratio:16/9){ .player{aspect-ratio:16/9} .player::before{display:none} }

/* Ad slot: prevent CLS */
#ad-desc{min-height:300px}
#ad-desc .adsbygoogle{display:block;min-height:300px;width:100%}
.adwrap--hidden{visibility:hidden}
<style>
/* Reserve space for the player before the iframe loads */
.player{position:relative;background:#000;border-radius:12px;overflow:hidden}
.player::before{content:"";display:block;padding-top:56.25%} /* 16:9 fallback */
.player > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@supports (aspect-ratio:16/9){ .player{aspect-ratio:16/9} .player::before{display:none} }

/* Keep the toolbar above the player from changing height */
.above-player{min-height:48px}              /* matches a single-line control row */
.controls{min-height:48px}
.controls .btn{min-width:84px}              /* button width doesn’t change when enabled/disabled */

/* Make in-page scroll targets land below the sticky header */
:root{--header-h:72px}                      /* default; JS below will measure real height */
#player{scroll-margin-top:calc(var(--header-h) + 8px)}
</style>
/* === Yellow skin (use on video + collections pages) === */
.skin-yellow{ --page-bg:#ffffcc; --brand-green:#0a8c4a; --chip-border:#e8e3a3; }
.skin-yellow, .skin-yellow html, .skin-yellow body{ background:var(--page-bg) !important; }

/* kill cards/boxes on this skin */
.skin-yellow main,
.skin-yellow .video-wrap,
.skin-yellow .container,
.skin-yellow .content,
.skin-yellow section,
.skin-yellow .card,
.skin-yellow .panel,
.skin-yellow .box { background:transparent !important; box-shadow:none !important; }

/* hide footer on these pages */
.skin-yellow footer, .skin-yellow .site-footer { display:none !important; }

/* chips + meta sit on yellow */
.skin-yellow .chip{ background:var(--page-bg) !important; border:1px solid var(--chip-border) !important; }
.skin-yellow .video-meta{ background:transparent !important; }

/* buttons (match your green look) */
.skin-yellow .btn{
  background:var(--brand-green) !important; color:#fff !important;
  border:1px solid rgba(0,0,0,.1) !important; font-weight:600;
}
.skin-yellow .btn[aria-disabled=true]{ opacity:.45; pointer-events:none; }

/* player stays black/rounded */
.skin-yellow .player{ border-radius:12px; overflow:hidden; }

/* hide empty content blocks so no large blanks */
.skin-yellow #description:empty,
.skin-yellow #ad-desc:empty { display:none; }
/* === Mangolink Yellow Skin (apply via body.skin-yellow) === */
:root { --mlk-yellow: #ffffcc; --mlk-green: #0a8c4a; }

body.skin-yellow,
body.skin-yellow html { background: var(--mlk-yellow) !important; }

/* make all common wrappers transparent on yellow pages */
body.skin-yellow main,
body.skin-yellow .video-wrap,
body.skin-yellow .container,
body.skin-yellow .container-fluid,
body.skin-yellow .content,
body.skin-yellow .page,
body.skin-yellow .row,
body.skin-yellow .card,
body.skin-yellow .panel,
body.skin-yellow .box { background: transparent !important; box-shadow: none !important; }

/* keep footer hidden on these pages */
body.skin-yellow footer, body.skin-yellow .site-footer { display: none !important; }

/* UI bits */
body.skin-yellow .chip { background: var(--mlk-yellow) !important; border: 1px solid #e8e3a3 !important; }
body.skin-yellow .btn  { background: var(--mlk-green) !important; color:#fff !important; border:1px solid rgba(0,0,0,.1) !important; }
body.skin-yellow .btn[aria-disabled=true]{ opacity:.45; pointer-events:none; }

/* player keeps rounded black */
body.skin-yellow .player { border-radius: 12px; overflow: hidden; }

/* hide empty blocks */
body.skin-yellow #description:empty,
body.skin-yellow #ad-desc:empty { display:none; }
/* ——— Mangolink Yellow ——— */
:root{ --mlk-yellow:#ffffcc; --mlk-green:#0a8c4a; }

/* force the page background */
html.skin-yellow,
body.skin-yellow{
  background:#ffffcc !important;
  background-color:#ffffcc !important;
  background-image:none !important;  /* nuke gradients/images */
}

/* body inherits from html; clear wrappers/cards */
html.skin-yellow body,
html.skin-yellow main,
html.skin-yellow .container,
html.skin-yellow .container-fluid,
html.skin-yellow .content,
html.skin-yellow .page,
html.skin-yellow .row,
html.skin-yellow .card,
html.skin-yellow .panel,
html.skin-yellow .box,
html.skin-yellow .video-wrap{
  background:transparent !important;
  box-shadow:none !important;
}

/* footer hidden on yellow pages */
html.skin-yellow footer,
html.skin-yellow .site-footer{ display:none !important; }

/* UI bits (optional) */
html.skin-yellow .btn{ background:var(--mlk-green) !important; color:#fff !important; }
html.skin-yellow .btn[aria-disabled=true]{ opacity:.45; pointer-events:none; }
html.skin-yellow .chip{ background:var(--mlk-yellow) !important; border:1px solid #e8e3a3 !important; }
html.skin-yellow .player{ border-radius:12px; overflow:hidden; }
/* Hide footer ONLY on yellow video pages */
body.video-page.skin-yellow footer,
body.video-page.skin-yellow .site-footer{
  display:none !important;
}

/* Show + match footer on yellow collections pages */
body.collections-page.skin-yellow footer,
body.collections-page.skin-yellow .site-footer{
  display:block !important;
  background:#ffffcc !important;
  border-top:1px solid #e8e3a3;
  box-shadow:none !important;
}
#video-breadcrumbs{ margin:8px 0 10px; clear:both; }
#video-breadcrumbs .chip{
  display:inline-block; padding:.18rem .55rem; border-radius:999px;
  background:#ffffcc; border:1px solid #e8e3a3; text-decoration:none; color:#333;
}
#video-breadcrumbs .chip[aria-current=page]{ opacity:.85; pointer-events:none; }
#video-breadcrumbs a{ text-decoration:none; }
/* Title + share row */
.title-bar{ margin-top: 4px; }

/* Share buttons – use the same green */
.skin-yellow .share-group .btn{
  background: var(--mlk-green) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  font-weight: 600;
}
.skin-yellow .share-group .btn.btn-outline{
  background: transparent !important;
  color: var(--mlk-green) !important;
  border: 2px solid var(--mlk-green) !important;
}

/* Mobile: stack under title */
@media (max-width: 576px){
  .title-bar{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .share-group .btn{ margin-right: 6px; }
}
/* Overlay prev/next on the video (top-left / top-right) */
.player{ position:relative; }
.player .edge-nav{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; justify-content:space-between; gap:12px;
  z-index:5; pointer-events:none;            /* allow clicks to pass through */
}
.player .edge-nav .btn{
  pointer-events:auto;                        /* buttons stay clickable */
  background:var(--mlk-green) !important;
  color:#fff !important;
  border:1px solid rgba(0,0,0,.1) !important;
  font-weight:600; opacity:.92;
}
.player .edge-nav .btn[aria-disabled=true]{ opacity:.45; pointer-events:none; }

/* Title bar sits below the player */
.title-bar{ margin:10px 0 12px; }
.skin-yellow .share-group .btn{
  background:var(--mlk-green) !important; color:#fff !important; border:1px solid rgba(0,0,0,.1) !important;
}
.skin-yellow .share-group .btn.btn-outline{
  background:transparent !important; color:var(--mlk-green) !important; border:2px solid var(--mlk-green) !important;
}
@media (max-width:576px){
  .title-bar{ flex-direction:column; align-items:flex-start; gap:8px; }
}
/* === Fix overlay nav sizing (no tall green bars) === */
.player{ position:relative; }

.player .edge-nav{
  position:absolute;
  top:8px; left:8px; right:8px;      /* no bottom -> auto height */
  height:auto !important;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;            /* prevent children from stretching */
  background:transparent !important;
  z-index:1000;
  pointer-events:none;               /* clicks pass through container */
}

.player .edge-nav .btn{
  pointer-events:auto;               /* keep buttons clickable */
  display:inline-block !important;   /* don't fill column */
  width:auto !important;             /* size to text */
  align-self:flex-start !important;  /* pin to top */
  background:var(--mlk-green) !important;
  color:#fff !important;
  border:1px solid rgba(0,0,0,.1) !important;
  font-weight:600;
  opacity:.92;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.player .edge-nav .btn[aria-disabled=true]{
  opacity:.45; pointer-events:none;
}
/* --- Edge nav: avoid YouTube overlay at the top --- */
.player{ position:relative; }

.player .edge-nav{
  position:absolute;
  left:12px; right:12px;
  top:12px;                        /* mobile: close to top */
  display:flex; justify-content:space-between; gap:12px;
  align-items:flex-start;
  z-index:1000; pointer-events:none;
  height:auto !important; background:transparent !important;
}

@media (min-width: 576px){
  .player .edge-nav{ top:48px; }   /* desktop/tablet: sit below YT title bar */
}

.player .edge-nav .btn{
  pointer-events:auto;
  display:inline-block !important; width:auto !important; align-self:flex-start !important;
  background:var(--mlk-green) !important; color:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important; font-weight:600;
  padding:.45rem .7rem; line-height:1;
  opacity:.95; box-shadow:0 2px 6px rgba(0,0,0,.25);
  border-radius:10px;
}
.player .edge-nav .btn[aria-disabled=true]{ opacity:.45; pointer-events:none; }

/* Nudge overlay nav UP (closer to the top edge) */
.player .edge-nav { top: 6px !important; }  /* try 6px; use 0 if you want it flush */

/* --- Put Prev/Next flush to the top corners of the video --- */
.player{ position:relative; padding-top:0 !important; }
.player iframe{ display:block; }                 /* remove default inline gap */

.player .edge-nav{
  position:absolute; top:0 !important;          /* <= up to the very top */
  left:8px; right:8px;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; z-index:1000; pointer-events:none; height:auto !important;
}
.player .edge-nav .btn{
  pointer-events:auto; display:inline-block !important; width:auto !important;
  margin-top:6px;                                 /* small visual offset from edge */
  background:var(--mlk-green) !important; color:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important; font-weight:600;
  opacity:.95; box-shadow:0 2px 6px rgba(0,0,0,.25); border-radius:10px;
}
.player .edge-nav .btn[aria-disabled=true]{ opacity:.45; pointer-events:none; }

/* --- Tighter vertical rhythm under the video --- */
#player.player{ margin-bottom:8px !important; }  /* was .mb-2 from Bootstrap */
.title-bar{ margin:6px 0 10px !important; }      /* title + share bar */
#video-details{ margin-top:0 !important; }       /* collections/description row */
.collection-card{ margin-top:0 !important; }
/* Spacing under breadcrumbs */
#video-breadcrumbs{ margin:8px 0 6px !important; }

/* Buttons BAR above the video (outside the iframe) */
.edge-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin:0 2px 6px;   /* small bottom gap above video */
}
.skin-yellow .edge-bar .btn{
  background:var(--mlk-green) !important; color:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important; font-weight:600;
}
.skin-yellow .edge-bar .btn[aria-disabled=true]{ opacity:.45; pointer-events:none; }

/* Video frame styling (keeps your rounded, anti-jump) */
.player{ position:relative; border-radius:12px; overflow:hidden; background:#000; }
.player::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 fallback */
.player > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@supports (aspect-ratio:16/9){ .player{ aspect-ratio:16/9 } .player::before{ display:none } }
/* === Breadcrumbs polish (video + collections) === */
.skin-yellow .breadcrumbs{ 
  margin: 8px 0 10px !important;
  color: rgba(0,0,0,.38);          /* dims the separators (the dots) */
}

.skin-yellow .breadcrumbs .chip{
  background: #fffbd1;             /* slightly warmer than #ffffcc */
  border: 1px solid #e8e3a3;
  border-radius: 999px;
  padding: .24rem .6rem;
  font-weight: 600;
  color: #2a2a2a;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

.skin-yellow .breadcrumbs .chip:hover{
  background: #fff7b0;
  text-decoration: none;
}

.skin-yellow .breadcrumbs .chip[aria-current=page]{
  background: #fff39c;             /* current page a touch stronger */
  border-color: #e3d277;
  cursor: default;
}

/* Video breadcrumb styling (higher specificity) */
#video-breadcrumbs{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.95rem;color:#5a695f;margin:.5rem 0 1rem;
}
#video-breadcrumbs a{
  color:inherit;text-decoration:none;border-bottom:1px dotted transparent;
}
#video-breadcrumbs a:hover,#video-breadcrumbs a:focus{
  border-bottom-color:currentColor;text-decoration:none;
}
#video-breadcrumbs .sep{opacity:.5}
#video-breadcrumbs .current{font-weight:600;color:#304237}

/* Hide any other breadcrumb bars on video pages */
.breadcrumbs:not(#video-breadcrumbs){display:none}
<style id="mlk-nojump">
/* Page background */
body.video-page{ background:#fffccc; } /* #ffffcc */

/* Hard stop for iframe CLS */
.player{position:relative;background:#000;border-radius:12px;overflow:hidden}
.player::before{content:"";display:block;padding-top:56.25%} /* reserve 16:9 */
.player > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@supports (aspect-ratio:16/9){
  .player{aspect-ratio:16/9}
  .player::before{display:none}
}

/* Stop scroll anchoring around the controls/player */
body.video-page, .above-player, #player{ overflow-anchor:none }

/* Keep the controls row from changing height as fonts/bootstrap settle */
.above-player{ min-height:52px }
.controls .btn{ line-height:1.25 } /* stabilise button height */
</style>

<script>
/* Stop the browser from “restoring” a previous scroll position (common cause of a single jump on load) */
try{ if('scrollRestoration' in history){ history.scrollRestoration = 'manual'; } }catch(e){}
</script>

.controls a.is-disabled{opacity:.55;pointer-events:none;cursor:default}

/* video.css */
.controls a[aria-disabled="true"]{ opacity:.55; pointer-events:none; cursor:default; }