/*
Theme Name: KingTube Child
Template: kingtube
Description: Material You x Liquid Glass refresh for KingTube. Layout untouched, visual layer only.
Version: 5.4.4
*/

/* ==========================================================================
   ACTUAL DOM STRUCTURE OF A SINGLE VIDEO PAGE (verified from templates):

   article.VideoObject
   ├── header.entry-header  →  <h1> title
   ├── div.entry-content
   │   ├── div.video-player-area   ← wraps player, tracking btn,
   │   │      ├── div.video-player     video-infos, description, tags
   │   │      ├── a#tracking-url        (they are SIBLINGS inside here)
   │   │      ├── div.video-infos
   │   │      ├── div.video-description
   │   │      └── div.video-tags
   │   └── div.sidebar-ads
   ├── div.under-video-block   ← "Related videos", a SEPARATE sibling
   └── #comments

   Design decision that follows from this: the whole .video-player-area is
   ONE card (title sits above it, related videos is a second card below).
   The inner sections get dividers, not their own detached card chrome —
   that's what stops the "stuck together / merged" look for good, because
   we stop pretending siblings-in-one-box are independent cards.
   ========================================================================== */

:root{
  --mt-primary: 108 92 231;
  --mt-primary-dark: 86 71 199;
  --mt-secondary: 236 64 122;
  --mt-tertiary: 245 158 11;

  --mt-ease: cubic-bezier(.2,0,0,1);
  --mt-dur-fast: 150ms;
  --mt-dur-base: 200ms;

  --mt-radius-sm: 8px;
  --mt-radius-md: 12px;
  --mt-radius-lg: 18px;
  --mt-radius-pill: 999px;
}

:root, html[data-theme="light"]{
  --mt-base: 240 241 245;
  --mt-surface-1: 255 255 255;
  --mt-surface-2: 248 249 251;
  --mt-on-surface: 23 24 28;
  --mt-on-surface-var: 90 95 105;
  --mt-outline: 0 0 0;
  --mt-outline-a: .10;
  --mt-divider-a: .08;
  --mt-shadow-a: .12;
  color-scheme: light;
}
html[data-theme="dark"]{
  --mt-base: 11 12 15;
  --mt-surface-1: 24 26 31;
  --mt-surface-2: 31 34 40;
  --mt-on-surface: 235 237 240;
  --mt-on-surface-var: 160 166 176;
  --mt-outline: 255 255 255;
  --mt-outline-a: .13;
  --mt-divider-a: .10;
  --mt-shadow-a: .5;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --mt-base: 11 12 15; --mt-surface-1: 24 26 31; --mt-surface-2: 31 34 40;
    --mt-on-surface: 235 237 240; --mt-on-surface-var: 160 166 176;
    --mt-outline: 255 255 255; --mt-outline-a: .13; --mt-divider-a: .10; --mt-shadow-a: .5;
    color-scheme: dark;
  }
}

html{ background: rgb(var(--mt-base)); }
body{
  background: rgb(var(--mt-base)) !important;
  color: rgb(var(--mt-on-surface)) !important;
  transition: background-color var(--mt-dur-base) var(--mt-ease), color var(--mt-dur-base) var(--mt-ease);
}

/* ==========================================================================
   LINK COLOR — scoped to theme chrome + content only. Deliberately NOT a
   blanket `a{}`: the parent theme's own `a{ color: main-color }` (and my
   earlier blanket override) forced the accent onto EVERY link, including
   ones inside client-embedded custom scripts/widgets. Those should keep
   whatever color their own markup sets, so this only touches links in
   areas the theme itself owns.
   ========================================================================== */
.site-header a, .main-navigation a,
.video-description a, .entry-content .desc a,
.widget a, .breadcrumbs-area a, .site-footer a,
.comment-content a, .cat-links a, .tags-links a{
  color: rgb(var(--mt-primary));
}
.site-header a:hover, .video-description a:hover,
.widget a:hover, .comment-content a:hover{
  color: rgb(var(--mt-primary-dark));
}

/* ==========================================================================
   NEUTRALISE THE PARENT'S INLINE ACCENT COLOR (temp-style.php) — but only
   on theme UI, never on arbitrary content links. Each selector below is
   one the parent hard-codes with !important; we reclaim just the specific
   UI pieces (player progress bar, ratings, buttons, chips, focus rings).
   ========================================================================== */
.rating-bar-meter, .vjs-play-progress, .bx-wrapper .bx-controls-direction a{
  background-color: rgb(var(--mt-primary)) !important;
}
#site-navigation > ul > li:hover > a,
#site-navigation > ul > li:focus > a,
#site-navigation > ul > li.current_page_item > a,
#site-navigation > ul > li.current-menu-item > a{
  color: #fff !important;
}
#filters .filters-select, #filters .filters-select:after,
.morelink i, .required{
  color: rgb(var(--mt-primary)) !important;
}
button, .button, input[type="button"], input[type="reset"],
.widget_categories ul li a:hover, .comment-reply-link{
  border-color: rgb(var(--mt-primary)) !important;
  background-color: rgb(var(--mt-primary)) !important;
  color: #fff !important;
}
input:focus, textarea:focus,
.thumb-block:hover .post-thumbnail img, .no-thumb:hover{
  border-color: rgb(var(--mt-primary)) !important;
}
.thumb-block .inner-border:hover::after{ box-shadow: inset 0 0 0 3px rgb(var(--mt-primary)) !important; }

/* ==========================================================================
   GLOBAL SURFACES
   ========================================================================== */
.site-footer, .no-thumb, .comment-respond,
#commentform input[type="text"], #commentform input[type="email"], #commentform textarea,
#filters .filters-options{
  background: rgb(var(--mt-surface-2)) !important;
  color: rgb(var(--mt-on-surface)) !important;
  border-color: rgba(var(--mt-outline), var(--mt-outline-a)) !important;
}
#filters .filters-options span{ border-bottom-color: rgba(var(--mt-outline), var(--mt-divider-a)) !important; }
#filters .filters-options span a{ color: rgb(var(--mt-on-surface)) !important; }
.site-footer .footer-seo, .site-footer .site-info{ color: rgb(var(--mt-on-surface-var)) !important; }

.breadcrumbs-area{
  background: rgb(var(--mt-surface-2)) !important;
  border-bottom: 1px solid rgba(var(--mt-outline), var(--mt-divider-a)) !important;
  padding: 10px 0 !important; height: auto !important;
}
.breadcrumbs-area .row{ display: flex; }
#breadcrumbs{
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  margin: 0 !important; padding: 0 !important; list-style: none;
  font-size: .88em;
}
#breadcrumbs li{ display: inline-flex; align-items: center; color: rgb(var(--mt-on-surface-var)); }
#breadcrumbs li a{
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--mt-radius-pill);
  color: rgb(var(--mt-on-surface-var)) !important;
  background: transparent;
  transition: background-color var(--mt-dur-fast) var(--mt-ease), color var(--mt-dur-fast) var(--mt-ease);
}
#breadcrumbs li a:hover{ background: rgba(var(--mt-primary), .12); color: rgb(var(--mt-primary)) !important; }
#breadcrumbs .bread-current{
  color: rgb(var(--mt-on-surface)) !important; font-weight: 600;
  padding: 4px 10px; border-radius: var(--mt-radius-pill);
  background: rgba(var(--mt-outline), .06);
}
#breadcrumbs li.separator{ color: rgb(var(--mt-on-surface-var)) !important; opacity: .4; padding: 0 2px; }
#breadcrumbs li.separator i{ font-size: .7em; }
@media screen and (max-width: 48em){
  #breadcrumbs{ white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 2px !important; }
  #breadcrumbs li{ flex-shrink: 0; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  /* Heavy frosted glass, per site owner's preference: strong blur + high
     saturation, and a fairly translucent base so the frost is clearly
     visible over scrolling content. Applies at ALL widths.
     translateZ(0) promotes the header to its own compositor layer, which
     is the cheapest realistic mitigation for blur-under-scroll cost. */
  background:
    linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(var(--mt-surface-1), .62) !important;
  -webkit-backdrop-filter: blur(34px) saturate(210%);
  backdrop-filter: blur(34px) saturate(210%);
  border-bottom: 1px solid rgba(var(--mt-outline), var(--mt-divider-a));
  box-shadow: 0 2px 20px rgba(0,0,0,var(--mt-shadow-a));
  position: sticky; top: 0; z-index: 500;
  padding: 5px 0;
  transform: translateZ(0);
}
/* the bright specular top edge that sells the "liquid glass" read */
.site-header::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:.5; pointer-events:none;
}
.site-branding.row{
  display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  /* Parent hardcodes height:135px + display:block at ≤48em — with the
     full-width search row, that fixed height overflowed and left half the
     search bar hanging below the header background. Auto height lets the
     header grow to fit its rows at every width. */
  height: auto !important;
  max-height: none !important;
}
.site-branding.row > .clear{ display: none; }
.site-branding .logo{ margin-right: auto; }
.site-title, .site-title a{ font-weight: 800 !important; letter-spacing: -.01em; }

.site-branding .header-search{ order: 4; flex: 1 1 100%; display: flex; justify-content: center; margin-top: 0; }
.header-search #searchform{ width: 100%; max-width: 520px; }
.header-search #searchform{
  display: flex; align-items: center;
  background: rgb(var(--mt-surface-2)) !important;
  border: 1.5px solid rgba(var(--mt-outline), var(--mt-outline-a));
  border-radius: var(--mt-radius-pill);
  padding: 2px 2px 2px 14px;
}
.header-search #searchform:focus-within{ border-color: rgb(var(--mt-primary)); }
.header-search input#s{
  flex: 1; min-width: 0; border: none !important; background: transparent !important;
  color: rgb(var(--mt-on-surface)) !important; padding: 5px 4px !important; outline: none; font-size: .95em;
}
.header-search input#s::placeholder{ color: rgb(var(--mt-on-surface-var)); }
.header-search #searchsubmit,
.site-branding .header-search input#searchsubmit{
  /* parent absolutely positions this (right:0) with a higher-specificity
     selector, which yanked the magnifier out of the pill — force it back
     into the flex flow at matching specificity */
  position: static !important;
  right: auto !important;
  border-radius: var(--mt-radius-pill) !important; width: 32px !important; height: 32px !important;
  line-height: 1 !important; font-size: 1.05em !important; padding: 0 !important;
  background: rgb(var(--mt-primary)) !important; color: #fff !important; border: none !important; flex-shrink: 0;
}

.main-navigation{ order: 3; }
#site-navigation > ul > li > a{
  color: rgb(var(--mt-on-surface)) !important; font-weight: 600;
  padding: 8px 14px !important; border-radius: var(--mt-radius-pill);
  transition: background-color var(--mt-dur-fast) var(--mt-ease), color var(--mt-dur-fast) var(--mt-ease);
}
#site-navigation > ul > li:hover > a,
#site-navigation > ul > li.current-menu-item > a{ background: rgb(var(--mt-primary)) !important; color: #fff !important; }
#site-navigation ul ul{
  background: rgb(var(--mt-surface-1)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a));
  border-radius: var(--mt-radius-md); overflow: hidden; margin-top: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,var(--mt-shadow-a));
}
#site-navigation ul ul a, #site-navigation ul li.my-area ul a{ background: transparent !important; color: rgb(var(--mt-on-surface)) !important; }
#site-navigation ul ul li:hover{ background: rgba(var(--mt-primary), .12) !important; }
#site-navigation ul ul li:hover > a{ color: rgb(var(--mt-primary)) !important; }

/* The parent re-hardcodes background:#eee on submenu anchors inside SEVERAL
   breakpoints — including the 64–84em DESKTOP range, which the mobile-only
   override missed (that was "menu items becoming white again"). This
   global, ID-weighted rule covers every width and every state. */
#masthead #site-navigation ul a,
#masthead #site-navigation ul ul a,
#masthead #site-navigation ul li.my-area ul a,
#masthead #site-navigation ul a:hover,
#masthead #site-navigation ul a:focus,
#masthead #site-navigation ul a:active{
  background: transparent !important;
}

@media screen and (max-width: 64em){
  /* MOBILE MENU — anchored to the header, full width, solid background.
     Mechanism (from navigation.js): the <ul> gets class .open and jQuery
     slideToggle sets inline display. We position it relative to the header
     (which is the positioned sticky ancestor) so it drops straight below
     the bar, full viewport width, with a guaranteed-opaque background at
     the highest practical specificity so the parent's transparent/#eee
     rules can't win and leave text floating over the page. */
  .site-header{ position: sticky; }
  #site-navigation{ position: static; }

  /* The hamburger row stays in the header; the panel is the <ul>. */
  #masthead #site-navigation > ul{
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 10px !important;
    background: rgb(var(--mt-surface-1)) !important;
    border: none !important;
    border-top: 1px solid rgba(var(--mt-outline), var(--mt-divider-a)) !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 24px 48px rgba(0,0,0,.5) !important;
    z-index: 700 !important;
  }
  /* subtle accent wash sits ON TOP of the solid base (so still opaque) */
  #masthead #site-navigation > ul::before{
    content:""; position:absolute; inset:0 0 auto 0; height:120px;
    background: linear-gradient(180deg, rgba(var(--mt-primary), .10), transparent);
    pointer-events:none; border-radius: inherit;
  }

  /* nested submenus: inline, tinted, never their own floating box */
  #masthead #site-navigation ul ul,
  #masthead #site-navigation ul li.my-area ul{
    position: static !important; width: 100% !important;
    background: rgba(var(--mt-outline), .04) !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* EVERY nav link + state forced transparent bg + themed text, so the
     parent's hardcoded #eee on anchors can never show through. */
  #masthead #site-navigation ul a,
  #masthead #site-navigation ul ul a,
  #masthead #site-navigation ul li.my-area ul a,
  #masthead #site-navigation ul a:hover,
  #masthead #site-navigation ul a:focus{
    background: transparent !important;
    color: rgb(var(--mt-on-surface)) !important;
    position: relative; z-index: 1;
  }
  #masthead #site-navigation ul li{
    width: 100%; float: none !important;
    border-bottom: 1px solid rgba(var(--mt-outline), var(--mt-divider-a)) !important;
  }
  #masthead #site-navigation ul li:last-child{ border-bottom: none !important; }
  #masthead #site-navigation > ul > li > a{
    border-radius: 0 !important; padding: 15px 22px !important;
    font-size: 1.05em; font-weight: 600; display: flex; align-items: center;
  }
  #masthead #site-navigation ul li:hover,
  #masthead #site-navigation ul li:active,
  #masthead #site-navigation > ul > li:hover > a,
  #masthead #site-navigation > ul > li.current-menu-item > a{
    background: rgba(var(--mt-primary), .12) !important;
    color: rgb(var(--mt-primary)) !important;
    box-shadow: inset 4px 0 0 rgb(var(--mt-primary));
  }
  #masthead #site-navigation ul ul li a{ padding-left: 42px !important; font-size: 1em; }

  /* Hamburger: themed chip so the open (X) / closed (bars) state is
     clearly visible on both themes. The parent draws the icon with
     :before/:after bars in hardcoded grey — recolor to the theme and give
     the button a soft chip background. */
  #site-navigation .button-nav{
    background: rgba(var(--mt-primary), .12) !important;
    border-radius: var(--mt-radius-pill) !important;
    width: 44px !important; height: 40px !important;
    top: -4px !important; right: 6px !important;
    transition: background-color var(--mt-dur-fast) var(--mt-ease);
  }
  #site-navigation .button-nav:before{
    background: rgb(var(--mt-primary)) !important;
    right: 12px !important;
  }
  #site-navigation .button-nav:after{
    border-top-color: rgb(var(--mt-primary)) !important;
    border-bottom-color: rgb(var(--mt-primary)) !important;
    right: 12px !important;
  }
  #site-navigation .button-nav.menu-opened{
    background: rgb(var(--mt-primary)) !important;
  }
  #site-navigation .button-nav.menu-opened:before,
  #site-navigation .button-nav.menu-opened:after{
    background: #fff !important;
    border-color: transparent !important;
  }

  /* submenu expand caret the parent injects */
  #masthead #site-navigation .submenu-button{
    position: absolute; right: 0; top: 0; width: 56px; height: 52px; z-index: 2; cursor: pointer;
  }
  #masthead #site-navigation .submenu-button::after{
    content: "\f078"; font-family: fontAwesome; color: rgb(var(--mt-on-surface-var));
    position: absolute; right: 22px; top: 18px; font-size: .8em;
  }
}

/* ==========================================================================
   THEME TOGGLE — REMOVED from the header per request. Light/Dark/Auto is
   set in Appearance → Customize → Color Scheme instead. The JS no longer
   injects a button (see theme-toggle.js), and this hides it if any stale
   markup remains cached.
   ========================================================================== */
.mt-theme-toggle{ display: none !important; }

/* ==========================================================================
   VIDEO GRID CARDS  (home / archives / related)
   ========================================================================== */
.thumb-block{
  box-sizing: border-box !important;
  margin: 0 6px 20px !important;
  padding: 8px !important;
  background: rgb(var(--mt-surface-1)) !important;
  border-radius: var(--mt-radius-md) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a));
  transition: transform var(--mt-dur-base) var(--mt-ease), border-color var(--mt-dur-base) var(--mt-ease);
}
.videos-list{ margin: 0 !important; }
.thumb-block:hover{ transform: translateY(-2px); border-color: rgba(var(--mt-primary), .45); }
.thumb-block .post-thumbnail{
  border-radius: var(--mt-radius-sm) !important; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,calc(var(--mt-shadow-a) * .6));
}
.thumb-block .entry-header{ padding-top: .5em !important; font-weight: 500; }

/* Mobile: bigger cards — tighten the inter-card margin and card padding so
   each thumbnail gets more of the row width (still 2 per row). */
@media only screen and (max-width: 48em){
  .thumb-block{ width: calc(50% - 8px) !important; margin: 0 4px 12px !important; padding: 5px !important; }
}
@media only screen and (min-width: 48.001em) and (max-width: 64em){ .thumb-block{ width: calc(33.3333% - 12px) !important; } }
@media only screen and (min-width: 64.001em) and (max-width: 84em){ .thumb-block{ width: calc(25% - 12px) !important; } }
@media only screen and (min-width: 84.001em){ .thumb-block{ width: calc(20% - 12px) !important; } }
/* related-videos grid uses its own centered flex; give its cards matching
   mobile sizing so they don't inherit odd widths */
@media only screen and (max-width: 48em){
  .under-video-block .thumb-block{ width: calc(50% - 8px) !important; }
}

/* Sidebar / homepage widgets get the card treatment. Footer widgets are
   handled separately below — the parent lays them out in floated % columns
   (48/30/22%) and card padding+border was overflowing those widths and
   breaking the column layout. So we card widgets only in known non-footer
   containers, then reset footer widgets. */
.widget{
  background: rgb(var(--mt-surface-1)) !important; border-radius: var(--mt-radius-md) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)); padding: 16px !important;
  box-sizing: border-box;
}
.widget-title{ font-weight: 700; padding-bottom: .5em; margin-bottom: .75em !important; border-bottom: 2px solid rgb(var(--mt-primary)) !important; }

/* Footer widgets: undo the card treatment and keep the parent's column
   widths intact. box-sizing:border-box ensures any residual padding fits
   inside the % width instead of overflowing it and wrapping the columns. */
.site-footer .widget{
  box-sizing: border-box !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.site-footer .widget-title{
  border-bottom: 1px solid rgba(var(--mt-outline), var(--mt-divider-a)) !important;
  color: rgb(var(--mt-on-surface)) !important;
}

/* ==========================================================================
   BUTTONS / PAGINATION / CHIPS
   ========================================================================== */
.button, button, input[type="submit"], .video-share .button{
  border-radius: var(--mt-radius-pill) !important;
  background: rgb(var(--mt-primary)) !important; border-color: rgb(var(--mt-primary)) !important; color: #fff !important;
  transition: background-color var(--mt-dur-fast) var(--mt-ease), transform var(--mt-dur-fast) var(--mt-ease);
}
.button:hover, button:hover, input[type="submit"]:hover{ background: rgb(var(--mt-primary-dark)) !important; transform: translateY(-1px); }

button.large, .button.large, .under-video-block .show-more-related a.button{
  font-size: 1em !important; padding: .7em 1.8em !important; border-radius: var(--mt-radius-md) !important; display: inline-block !important;
}

.pagination{ display: flex; justify-content: center; }
.pagination ul{ display: flex; flex-wrap: wrap; justify-content: center; padding: 1.5em 8px 0 !important; overflow: visible !important; }
.pagination ul li{ margin: 0 4px 8px !important; }
.pagination ul li a{
  border-radius: var(--mt-radius-pill) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)) !important;
  color: rgb(var(--mt-on-surface)) !important; background: rgb(var(--mt-surface-1)); min-width: 2.4em; text-align: center;
}
.pagination ul li a.current, .pagination ul li a:hover{ background: rgb(var(--mt-primary)) !important; border-color: rgb(var(--mt-primary)) !important; color: #fff !important; }

.video-tags a.label, .cat-links a, .tags-links a, a.tag-cloud-link, .template-actors li a{
  background: rgba(var(--mt-primary), .14) !important; color: rgb(var(--mt-primary-dark)) !important;
  border: none !important; border-radius: var(--mt-radius-pill) !important;
}
html[data-theme="dark"] .video-tags a.label, html[data-theme="dark"] .cat-links a,
html[data-theme="dark"] .tags-links a, html[data-theme="dark"] a.tag-cloud-link,
html[data-theme="dark"] .template-actors li a{ color: rgb(199 191 255) !important; }

.views, .duration, .hd-video{
  display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em;
  border-radius: var(--mt-radius-pill); font-size: .82em; background: rgba(0,0,0,.6); color: #fff !important;
}

/* ==========================================================================
   SINGLE VIDEO PAGE
   Structure-accurate: title card, then ONE card = .video-player-area
   (player + tracking btn + info + description + tags with dividers
   between them), then a clearly separate Related-videos card, then
   comments. Centered 900px column.
   ========================================================================== */
.single-video #primary, article.mt-video-article{
  max-width: 900px; margin: 0 auto !important; float: none !important;
}
.video-player-area.with-sidebar-ads{ float: none !important; width: 100% !important; margin-right: 0 !important; }
.sidebar-ads{ float: none !important; width: 100% !important; max-width: 900px; margin: 20px auto 0 !important; text-align: center; }
/* Scope BOTH of these to single-video pages ONLY. Applied site-wide they
   killed .entry-content's float clearfix — on the homepage/archives the
   floated video grids then collapsed their container, floats escaped, and
   the widget areas after them were overlapped into invisibility (the
   "widgets disappeared" bug). On single pages floats are disabled anyway,
   and the share tray needs the visible overflow. */
.mt-video-article .entry-content:before, .mt-video-article .entry-content:after{ content: none !important; }

/* ==========================================================================
   SINGLE VIDEO PAGE — clean, template-backed structure.
   The child theme now wraps player + download + info in a real
   <div class="mt-media-card"> (see template-parts/content-video-player.php),
   so we no longer fake a card out of separate siblings. Layout:
     title h1        → rounded-top cap of the media card
     .mt-media-card  → the media card body (player + download pill + info)
     .video-description → its own separate card
     .video-tags        → its own separate card
     .under-video-block → related videos, its own separate card
     comments           → its own separate card
   ========================================================================== */

/* Title = rounded top cap. Sits flush on the media card below it. */
article.mt-video-article > .entry-header{ margin: 0 !important; }
article.mt-video-article > .entry-header h1{
  display: block; box-sizing: border-box;
  max-width: 900px; margin: 0 auto !important;
  background: rgb(var(--mt-surface-1)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)) !important;
  border-bottom: none !important;
  border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0 !important;
  font-size: 1.4em; font-weight: 700; text-align: center;
  padding: 18px 24px;
}

/* The media card body. Real wrapper now, so it's just one bordered box. */
.mt-media-card{
  box-sizing: border-box;
  max-width: 900px; margin: 0 auto !important;
  background: rgb(var(--mt-surface-1)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)) !important;
  border-top: none !important;
  border-radius: 0 0 var(--mt-radius-lg) var(--mt-radius-lg) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,calc(var(--mt-shadow-a) * .5));
  padding: 14px !important;
  /* overflow must stay VISIBLE: the Share button's dropdown tray
     (.sharing-buttons, position:absolute, opens downward) lives at the
     bottom edge of this card — overflow:hidden was clipping it entirely. */
  overflow: visible;
  position: relative;
}
/* Share dropdown tray: parent hardcodes background:#fff / border:#eee,
   which glows white in dark mode. Re-theme it to the surface system. */
.sharing-buttons{
  background: rgb(var(--mt-surface-2)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)) !important;
  border-radius: var(--mt-radius-md) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,var(--mt-shadow-a)) !important;
}
/* wrapper divs the theme uses for float layout shouldn't add width limits */
.video-player-area{ background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
.video-player-area.with-sidebar-ads{ float: none !important; width: 100% !important; margin-right: 0 !important; }
.mt-video-article .entry-content{ overflow: visible !important; }

/* player video inside the card */
.mt-media-card .video-player{
  background: none !important; border: none !important; padding: 0 !important; margin: 0 !important;
}
.mt-media-card .responsive-player,
.mt-media-card .video-player > .responsive-player{
  border-radius: var(--mt-radius-md); overflow: hidden; background: #000;
}

/* download pill — contained, centered, with gaps above and below */
.mt-media-card #tracking-url{
  display: flex !important; align-items: center; justify-content: center; gap: .5em;
  width: fit-content !important; max-width: 100%;
  margin: 14px auto !important;
  padding: .85em 1.9em !important;
  background: rgb(var(--mt-primary)) !important;
  color: #fff !important; border: none !important;
  border-radius: var(--mt-radius-pill) !important;
  box-shadow: 0 4px 14px rgba(var(--mt-primary), .38) !important;
  font-size: 1.02em; font-weight: 600; line-height: 1.2;
}
.mt-media-card #tracking-url:hover{ background: rgb(var(--mt-primary-dark)) !important; transform: translateY(-1px); }
#tracking-url i{ font-size: 1.05em; }

/* info row — sits at the bottom of the media card, divider above it */
.mt-media-card .video-infos{
  border-top: 1px solid rgba(var(--mt-outline), var(--mt-divider-a)) !important;
  margin: 0 -14px -14px !important;          /* bleed to the card edges */
  padding: 16px !important;
}

/* Info row internals (views | likes | Like button). The card bottom /
   radius is handled by .mt-media-card now, so this only lays out contents. */
.video-infos{
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 20px !important;
}
.video-infos .video-infos-left, .video-infos .video-infos-right{
  display: flex !important; position: static !important; align-items: center; flex-wrap: wrap;
  justify-content: center; gap: 8px 14px !important; margin: 0 !important; float: none !important; text-align: center;
}
/* views + likes = plain readable text, not colored pill blobs. This is
   what caused the "ugly pills" AND the leftover empty red pill — the empty
   one was the #rating button CONTAINER being painted like a badge. Only
   the actual numbers get a subtle tint now; containers stay transparent. */
.video-views, .likes{
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .95em; font-weight: 600; color: rgb(var(--mt-on-surface-var)) !important;
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  line-height: 1;
}
.video-views span, .likes span.likes_count{ font-weight: 800; color: rgb(var(--mt-on-surface)) !important; font-size: 1.05em; line-height: 1; }
.video-infos .separator{ color: rgba(var(--mt-outline), .25) !important; margin: 0 !important; position: static !important; top: 0 !important; line-height: 1; }
/* If the right group (like button) is empty/hidden, don't let it hold
   layout space and push the views/likes off-center. */
.video-infos .video-infos-right:empty{ display: none !important; }

/* #rating is the Like BUTTON wrapper, never a badge — strip any pill look
   and let its inner <a class="button"> be the actual button. */
#rating{
  display: inline-flex !important; align-items: center;
  background: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-size: 1em !important;
}
#rating span.post-like a.button{
  border-radius: var(--mt-radius-pill) !important; padding: .5em 1.2em !important; font-size: .95em !important;
  box-shadow: none !important; outline: none !important; display: inline-flex; align-items: center; gap: .4em;
}
#rating span.post-like a.button:hover{ box-shadow: 0 4px 12px rgba(var(--mt-primary), .4) !important; }
/* If rating is disabled site-wide the whole #rating is absent; if it's
   present but empty (already-voted state renders empty inner markup),
   collapse it so no ghost box shows. */
#rating:empty{ display: none !important; }
/* Once a visitor has liked, the theme renders the .post-like span EMPTY
   (vote is tracked per IP/cookie, so the button intentionally vanishes —
   that's why the Like button "sometimes isn't there"). Instead of nothing,
   show a muted confirmation so the row doesn't look broken. */
#rating .post-like:empty::before{
  content: "♥ Liked";
  display: inline-flex; align-items: center;
  padding: .45em 1.1em;
  border-radius: var(--mt-radius-pill);
  background: rgba(var(--mt-secondary), .14);
  color: rgb(var(--mt-secondary));
  font-size: .92em; font-weight: 700; line-height: 1;
}

/* Card 2: Description — its OWN card, with the post's own formatting
   preserved. The parent applies text-align:justify and readmore.js wraps
   the content; we only set surface + spacing and DON'T flatten line
   breaks / paragraphs, so post formatting (paragraphs, line breaks, bold,
   lists) shows as authored. */
.video-description{
  background: rgb(var(--mt-surface-1)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)) !important;
  border-radius: var(--mt-radius-lg) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,calc(var(--mt-shadow-a) * .4)) !important;
  padding: 18px 20px !important; margin: 16px 0 0 !important;
  text-align: left !important;
}
.video-description .desc{
  background: none !important; color: rgb(var(--mt-on-surface));
  line-height: 1.65; text-align: left !important;
}
.video-description .desc p{ margin: 0 0 .9em; }
.video-description .desc p:last-child{ margin-bottom: 0; }
.video-description .desc br{ display: block; content: ""; }
.video-description .desc ul, .video-description .desc ol{ margin: 0 0 .9em 1.4em; }
.video-description .desc a{ color: rgb(var(--mt-primary)); text-decoration: underline; }
.video-description .morelink{
  display: inline-flex; align-items: center; gap: .4em; margin-top: .8em;
  padding: .4em 1em !important; border-radius: var(--mt-radius-pill) !important;
  background: rgba(var(--mt-primary), .14) !important; color: rgb(var(--mt-primary)) !important; font-weight: 600; border-color: transparent !important;
}
.video-description .morelink:hover{ background: rgba(var(--mt-primary), .24) !important; }

/* Card 3: Categories / tags — its own card. */
.video-tags{
  background: rgb(var(--mt-surface-1)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)) !important;
  border-radius: var(--mt-radius-lg) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,calc(var(--mt-shadow-a) * .4)) !important;
  padding: 16px 20px !important; margin: 16px 0 0 !important;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

/* Related videos: the SECOND card, unmistakably separate. It's a sibling
   of .entry-content (two levels up from the sections above), so a plain
   top margin here can't collapse against anything inside that card.
   NOTE: this element is BOTH .under-video-block AND .videos-list (same
   div), and it directly contains the <h2>, the thumb-blocks, and the
   "show more" button as siblings. So we must NOT make it a flex row —
   that would pull the heading and button inline with the cards. Instead
   keep it block, and center the thumb-blocks via text-align + inline-block
   fallback, or a dedicated flex only if the cards had a wrapper (they
   don't). We use text-align:center on the container + the cards stay
   as-is, which centers the grid including a partial last row. */
.under-video-block{
  clear: both;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: flex-start;
  background: rgb(var(--mt-surface-1)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a));
  border-radius: var(--mt-radius-lg) !important;
  padding: 20px 12px !important;
  margin: 24px auto 0 !important; max-width: 900px;
}
/* h2 and "show more" span the full row so they don't sit inline with cards */
.under-video-block h2,
.under-video-block .show-more-related{
  flex: 0 0 100% !important; width: 100% !important;
  text-align: center; margin: 0 0 18px !important;
}
.under-video-block h2{ font-weight: 700; }
.under-video-block .show-more-related{ margin: 16px 0 0 !important; }
/* the video cards flow and wrap in the flex row */
.under-video-block .thumb-block{
  float: none !important;
  background: rgb(var(--mt-surface-2)) !important;
}
.under-video-block .clear{ display: none !important; flex-basis: 100%; }

/* Comments: third separate card */
#comments, .comment-respond{
  max-width: 900px; margin: 24px auto 0 !important;
  background: rgb(var(--mt-surface-1)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a));
  border-radius: var(--mt-radius-lg) !important; padding: 20px !important;
}
.comments-title{ margin-top: 0 !important; text-align: center; border-bottom: none !important; }
#commentform textarea, #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"]{
  width: 100%; box-sizing: border-box; background: rgb(var(--mt-surface-2)) !important;
  border: 1px solid rgba(var(--mt-outline), var(--mt-outline-a)) !important; border-radius: var(--mt-radius-sm) !important;
  color: rgb(var(--mt-on-surface)) !important; padding: 10px 12px !important;
}
#commentform textarea:focus, #commentform input:focus{ outline: none; border-color: rgb(var(--mt-primary)) !important; }
#commentform input[type="submit"]{ border-radius: var(--mt-radius-md) !important; padding: .65em 1.6em !important; }

.page-title{ text-align: center; }

/* ==========================================================================
   RELATED VIDEOS SCROLLER — .mt-related-scroller wraps the cards (child
   template override). Desktop: same centered wrapping grid as before.
   Mobile: one horizontal swipe row with snap points; combined with the
   loading="lazy" thumbnails injected in the template, offscreen cards
   don't download their images until the visitor actually scrolls to them.
   ========================================================================== */
.mt-related-scroller{
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

@media screen and (max-width: 64em){
  /* HORIZONTAL layout (Customizer: "Horizontal swipe row") */
  .mt-related-scroller.mt-related-horizontal{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity; /* mandatory felt jerky mid-fling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 10px;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--mt-primary), .5) transparent;
  }
  .mt-related-horizontal::-webkit-scrollbar{ height: 4px; }
  .mt-related-horizontal::-webkit-scrollbar-thumb{
    background: rgba(var(--mt-primary), .5); border-radius: 999px;
  }
  .mt-related-horizontal .thumb-block{
    flex: 0 0 auto;
    width: clamp(190px, 58vw, 300px) !important;
    margin: 0 !important;
    scroll-snap-align: start;
    float: none !important;
  }

  /* VERTICAL layout (Customizer: "Vertical list") — one large card per
     row, stacked; the page itself scrolls (no inner scroll box, which
     always feels janky on phones). Lazy thumbnails still apply, so
     below-the-fold cards don't download images until scrolled to. */
  .mt-related-scroller.mt-related-vertical{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
  }
  .mt-related-vertical .thumb-block{
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto !important;
    float: none !important;
  }
}

/* ==========================================================================
   TARGETED FIXES v5.4.1
   ========================================================================== */

/* 1) Related videos on DESKTOP: big cards, 3 per row.
   Root cause of them staying small: the section sits inside
   article.mt-video-article, which the child capped at 900px — so every
   earlier width trick was still confined to 900px. On desktop the ARTICLE
   cap is lifted (safe: the title, media card, description, tags and
   comments each carry their own 900px max-width, so they stay a centered
   column) and the related section gets a wide 1320px shelf with three
   large cards per row (~410px each). Mobile untouched. */
@media only screen and (min-width: 64.001em){
  .single-video #primary, article.mt-video-article{
    max-width: none !important;
  }
  /* ONE uniform column: every single-post section matches the related
     shelf's 1320px, so nothing reads wider or narrower than its
     neighbours (the lifted article cap had left any section without its
     own max-width spanning full width — the "widest description" issue). */
  article.mt-video-article > .entry-header h1,
  .mt-media-card,
  .video-description,
  .video-tags,
  .sidebar-ads,
  #comments, .comment-respond,
  .under-video-block{
    max-width: 1320px !important;
    width: auto;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .under-video-block{ width: 100% !important; }
  .mt-related-scroller .thumb-block{
    width: calc(33.333% - 12px) !important;
  }
}

/* 2) Submenu ("My Account" dropdown) going white — final, global,
   maximum-specificity kill covering the container, the WP .sub-menu class,
   the expander chevron button, and anchors, at EVERY width. The parent
   re-hardcodes #eee on several of these across different breakpoints. */
#masthead #site-navigation ul ul,
#masthead #site-navigation li ul,
#masthead #site-navigation .sub-menu,
#masthead #site-navigation ul li.my-area ul{
  background: rgb(var(--mt-surface-2)) !important;
}
#masthead #site-navigation ul ul li,
#masthead #site-navigation .sub-menu li{
  background: transparent !important;
}
#masthead #site-navigation ul ul a,
#masthead #site-navigation .sub-menu a,
#masthead #site-navigation ul li.my-area ul a{
  background: transparent !important;
  color: rgb(var(--mt-on-surface)) !important;
}
#masthead #site-navigation .submenu-button{
  background: transparent !important;
}
#masthead #site-navigation .submenu-button::before,
#masthead #site-navigation .submenu-button::after{
  color: rgb(var(--mt-on-surface-var)) !important;
  background: transparent !important;
}

/* 3) Related-video titles: a touch lighter in dark mode for readability. */
html[data-theme="dark"] .under-video-block .thumb-block .entry-header a{
  color: rgb(198 204 214) !important;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .under-video-block .thumb-block .entry-header a{
    color: rgb(198 204 214) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .thumb-block, .button, button, body{ transition: none !important; }
}