/*
Theme Name: Videokings Child Custom Styles
Template: generatepress
Description: Custom styles moved from functions.php and the Customizer.
*/

/*
 * Videokings front-end enhancements
 *
 * Functie:
 * - Bundelt maatwerk CSS die eerder in de Customizer of inline via
 *   functions.php stond.
 * - Tekent play-button overlays voor video cards, playlist-thumbnails en
 *   de desktop hero.
 * - Neutraliseert theme-hover/tap-styling die de video UI verstoort.
 * - Verbergt desktop hero/playlist op smalle schermen; mobiel gebruikt de
 *   grid met inline feed autoplay.
 *
 * Wijzigingen 2026-06-16:
 * - Verwijderd: dode CSS voor de oude mobiele full-screen overlay
 *   (#vk-mobile-overlay), omdat die markup en JS niet meer bestaan.
 * - Commentaar bijgewerkt zodat het huidige mobiele grid/autoplay-gedrag
 *   correct wordt beschreven.
 */

/* Site-wide disclosure file bar directly below the primary menu. */
.vk-filebar {
  position: relative;
  z-index: 20;
  width: 100%;
  box-sizing: border-box;
  color: #dfe3e4;
  background: #080a0b;
  border-top: 1px solid #2f3537;
  border-bottom: 1px solid #2f3537;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vk-filebar__inner {
  display: flex;
  min-height: 34px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 40px;
}

.vk-filebar__route,
.vk-filebar__crumbs,
.vk-filebar__meta {
  display: flex;
  min-width: 0;
  align-items: center;
}

.vk-filebar__route {
  gap: 18px;
}

.vk-filebar__crumbs,
.vk-filebar__meta {
  gap: 10px;
}

.vk-filebar__prefix {
  flex: 0 0 auto;
  color: #fff;
}

.vk-filebar__crumbs a,
.vk-filebar__crumbs span {
  color: inherit;
  text-decoration: none;
}

.vk-filebar__crumbs a:hover,
.vk-filebar__crumbs a:focus-visible {
  color: #5fd9da;
}

.vk-filebar__crumbs a:focus-visible {
  outline: 1px solid #5fd9da;
  outline-offset: 3px;
}

.vk-filebar__separator {
  color: #697173 !important;
}

.vk-filebar__meta {
  flex: 0 0 auto;
  color: #aeb3b4;
}

.vk-filebar__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5fd9da;
}

.vk-filebar__status > span {
  width: 5px;
  height: 5px;
  background: currentColor;
}

@media (max-width: 768px) {
  .vk-filebar__inner {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 7px 20px 8px;
  }

  .vk-filebar__route {
    width: 100%;
    flex-wrap: wrap;
    gap: 5px 12px;
  }

  .vk-filebar__crumbs {
    flex-wrap: wrap;
    gap: 7px;
  }

  .vk-filebar__meta {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
}

/*
 * Desktop optical scale
 *
 * Keep the calm 1920px composition on narrower desktop workspaces (including
 * high-DPI displays that expose roughly 1280 CSS pixels at 100% browser zoom).
 * The shell becomes proportionally narrower while type and controls retain
 * explicit readable minimums. Mobile keeps its existing full-width layout.
 */
@media (min-width: 769px) {
  :root {
    --vk-desktop-shell-width: clamp(720px, 78.125vw, 1500px);
  }

  .inside-header.grid-container,
  .vk-filebar__inner.grid-container,
  #page.grid-container {
    width: var(--vk-desktop-shell-width);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  .inside-header {
    padding-top: clamp(17px, calc(11px + 0.4688vw), 20px);
    padding-bottom: clamp(17px, calc(11px + 0.4688vw), 20px);
  }

  .inside-header .site-logo img {
    width: clamp(60px, calc(-12px + 5.625vw), 96px);
    height: auto;
  }

  .inside-header .main-navigation .main-nav ul li a,
  .inside-header .main-navigation .menu-bar-item > a {
    padding-right: clamp(12px, 1.0417vw, 20px);
    padding-left: clamp(12px, 1.0417vw, 20px);
    font-size: clamp(14px, 0.7813vw, 15px);
    line-height: clamp(44px, 3.125vw, 60px);
  }

  .vk-filebar__inner {
    min-height: clamp(24px, calc(2px + 1.6667vw), 34px);
    gap: clamp(14px, 0.9375vw, 18px);
    padding: clamp(4px, calc(-2px + 0.4688vw), 7px) clamp(24px, 2.0833vw, 40px);
  }

  .vk-filebar__route {
    gap: clamp(14px, 0.9375vw, 18px);
  }
}

/* Compact desktop: match the visual scale of a 67% browser view while keeping
 * the shell geometry and whitespace intact. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .inside-header {
    padding-top: 15.5px;
    padding-bottom: 15.5px;
  }

  .inside-header .main-navigation .main-nav ul li a,
  .inside-header .main-navigation .menu-bar-item > a {
    font-size: 10px;
    line-height: 36px;
  }

  .vk-filebar {
    font-size: 8px;
  }
}

/* Base custom properties for play button overlays */
body.home .site-content a.vk-card,
body.home .site-content a.vk-ytthumb,
body.home .site-content .vk-lite > button {
  position: relative !important;
  isolation: isolate !important;
  --vk-play-bg: rgba(0, 0, 0, 0.86);
  --vk-play-tri: #fff;
  --vk-play-r: 7px;
  --vk-tri-w-ratio: 0.18;
  --vk-tri-h-ratio: 0.38;
}

/* Play button sizes voor verschillende componenten */
body.home .site-content a.vk-card {
  --vk-play-w: clamp(54px, 10%, 78px);
  --vk-play-h: calc(var(--vk-play-w) * 0.7059);
}
body.home .site-content a.vk-ytthumb {
  --vk-play-w: clamp(46px, 9%, 70px);
  --vk-play-h: calc(var(--vk-play-w) * 0.7059);
}
body.home .site-content .vk-lite > button {
  --vk-play-w: clamp(90px, 12%, 104px);
  --vk-play-h: calc(var(--vk-play-w) * 0.7059);
}

@media (min-width: 769px) {
  body.home .site-content a.vk-card,
  body.home .site-content a.vk-ytthumb {
    --vk-play-w: 30px;
    --vk-play-h: 21px;
    --vk-play-r: 5px;
  }

  body.home .site-content .vk-lite > button {
    --vk-play-w: clamp(64px, 3.6458vw, 70px);
    --vk-play-h: calc(var(--vk-play-w) * 0.7);
    --vk-play-r: 7px;
  }
}

@media (min-width: 769px) and (max-width: 1399px), (min-width: 1400px) {
  body.home .site-content #vk-grid {
    gap: 20px !important;
  }
}

/* Donkere rechthoek achter de play-button */
body.home .site-content a.vk-card::after,
body.home .site-content a.vk-ytthumb::after,
body.home .site-content .vk-lite > button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--vk-play-w);
  height: var(--vk-play-h);
  transform: translate(-50%, -50%);
  background: var(--vk-play-bg);
  border-radius: var(--vk-play-r);
  pointer-events: none;
  z-index: 3;
  will-change: transform;
  box-shadow: none !important;
}

/* Standaard achtergrondbeelden uitzetten zodat onze overlay zichtbaar is */
body.home .site-content a.vk-card,
body.home .site-content a.vk-ytthumb {
  background-image: none !important;
}
body.home .site-content a.vk-card::before,
body.home .site-content a.vk-card::after,
body.home .site-content a.vk-ytthumb::before,
body.home .site-content a.vk-ytthumb::after,
body.home .site-content .vk-lite > button::before,
body.home .site-content .vk-lite > button::after {
  background-image: none !important;
}

/* Witte driehoek (play-icoon) */
body.home .site-content a.vk-card::before,
body.home .site-content a.vk-ytthumb::before,
body.home .site-content .vk-lite > button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vk-play-w) * var(--vk-tri-w-ratio));
  height: calc(var(--vk-play-h) * var(--vk-tri-h-ratio));
  background: var(--vk-play-tri);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  transform: translate(-44%, -50%);
  pointer-events: none;
  z-index: 4;
  will-change: transform;
}

/* Hover-kleur (alleen op devices met hover) */
@media (hover: hover) {
  body.home .site-content a.vk-card:hover::before,
  body.home .site-content a.vk-ytthumb:hover::before,
  body.home .site-content .vk-lite > button:hover::before {
    background: #00ffff;
  }
}

/* Overlay-icons verbergen zodra video is afgespeeld */
body.home .site-content a.vk-card.vk-played::before,
body.home .site-content a.vk-card.vk-played::after,
body.home .site-content a.vk-ytthumb.vk-played::before,
body.home .site-content a.vk-ytthumb.vk-played::after {
  display: none !important;
}

/* Ongewenste hovers/donkere blokken weghalen */
body.home .site-content .vk-playbtn,
body.home .site-content .vk-playbtn:hover,
body.home .site-content .vk-playbtn:focus,
body.home .site-content .vk-playbtn:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Thema-hover overlays neutraliseren */
body.home .site-content a.vk-card:hover,
body.home .site-content a.vk-ytthumb:hover {
  background-color: transparent !important;
}

/* Donkere tap-highlight op mobiel weghalen */
body.home .site-content .vk-playbtn,
body.home .site-content a.vk-card,
body.home .site-content a.vk-ytthumb {
  -webkit-tap-highlight-color: transparent;
}

/* Hero + playlist verbergen op smalle schermen:
 * op mobiel draait het om de grid met inline feed autoplay. */
@media (max-width: 768px) {
  .vk-lite,
  .vk-ytwrap {
    display: none;
  }
}

/* Desktop: playlist netjes aansluiten op hero.
 * We laten de hoogte verder bepalen door de plugin-CSS, zodat
 * de containerhoogte niet meer springt bij het laden van items. */
@media (min-width: 1024px) {
  .vk-ytwrap {
    gap: 0;
  }
}

/* Legal pages are intentionally lightweight and use the site's native type. */
.vk-legal-page {
  max-width: 760px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.65;
}

.vk-legal-page .vk-legal-updated {
  margin-bottom: 28px;
  color: #686868;
  font-size: 14px;
}

.vk-legal-page h2 {
  margin-top: 1.6em;
  margin-bottom: 0.55em;
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.25;
}

.vk-legal-page a {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .vk-legal-page {
    font-size: 17px;
    line-height: 1.6;
  }
}