/* =========================================================
   KOMIKSAN STEP 05
   Levý strom kategorií: žlutá plocha až k levému okraji obrazovky
   Soubor: komiksan-step05-left-category-tree-full-left-yellow.css
   FTP: /upload/komiksan-step05-left-category-tree-full-left-yellow.css
   WEB: /user/documents/upload/komiksan-step05-left-category-tree-full-left-yellow.css

   Pozn.: Platí pouze pro desktop/tablet od 768px.
   Mobil necháváme beze změny.
   ========================================================= */

@media (min-width: 768px) {
  :root {
    --ks-step05-yellow: #FFD600;
  }

  /* Levý kategoriový strom musí zůstat žlutý */
  .sidebar,
  .sidebar-inner,
  .sidebar .box,
  .sidebar .box-categories,
  .sidebar .categories,
  .sidebar .category-menu,
  .sidebar .menu,
  .sidebar ul,
  .sidebar li {
    background: var(--ks-step05-yellow) !important;
    background-color: var(--ks-step05-yellow) !important;
  }

  /* Dovolíme žlutému rozšíření vykreslit se mimo vnitřní container */
  .content-wrapper,
  .content,
  .content-inner,
  .columns,
  .columns-inner,
  .overall-wrapper,
  .main-wrapper {
    overflow: visible !important;
  }

  /* Hlavní řešení: žlutá plocha se protáhne doleva až mimo container */
  .sidebar {
    position: relative !important;
    z-index: 1 !important;
    background: var(--ks-step05-yellow) !important;
    background-color: var(--ks-step05-yellow) !important;
    box-shadow: -100vw 0 0 100vw var(--ks-step05-yellow) !important;
    clip-path: inset(0 0 0 -100vw);
  }

  /* Záloha pro části layoutu, kde box-shadow nestačí */
  .sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 100vw;
    background: var(--ks-step05-yellow);
    pointer-events: none;
    z-index: -1;
  }
}