/* MOBILE: framed submenu panel – zabrání splývání s pozadím stránky */
.nav .menu-item a:hover {
  font-weight: 300 !important;
}

@media (max-width: 768px) {
  #menu-main-menu-1 {
    min-height: 0 !important;
  }

  /* Default purple accent */
  .mobile_nav .nav > li > ul.sub-menu {
    box-shadow: inset 4px 0 0 0, /* purple */ 0 8px 24px rgba(0, 0, 0, 0.12); /* shadow card */
  }

  /* Vizuální řádkování a separátory uvnitř (navazuje na tvůj kód) */
  .mobile_nav .nav > li > ul.sub-menu > li > a {
    padding: 10px 8px;
  }

  .mobile_nav .nav > li > ul.sub-menu > li + li {
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
  }

  /* Aktivní odkaz v submenu – ponechán tvůj styl, jen lepší čitelnost */
  .mobile_nav .nav .sub-menu .current-menu-item > a,
  .mobile_nav .nav .sub-menu .current_page_item > a {
    background: rgba(var(--primary-rgb), 0.10);
    color: #000;
  }

  /* Všechny oranžové varianty přesměrujeme na primární barvu */
  .bg-orange .mobile_nav .nav .sub-menu .current-menu-item > a,
  .bg-orange .mobile_nav .nav .sub-menu .current_page_item > a {
    background: rgba(var(--primary-rgb), 0.10);
    color: #000;
  }
}

/* ===============================
   Submenu položky
   =============================== */
.nav .sub-menu li > a {
  font-weight: 400;
  transition: color 0.2s ease;
}

/* Aktivní položka v submenu */
.nav .sub-menu .current-menu-item > a,
.nav .sub-menu .current_page_item > a {
  font-weight: 700;
  color: #fff;
}

.nav .sub-menu .current-menu-item,
.nav .sub-menu .current_page_item {
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
}

@media screen and (min-width: 768px) {
  .sub-menu, .sub-menu a {
    min-width: 230px !important;
  }
}

/* ===============================
   Hlavní položky s aktivním potomkem
   =============================== */
.nav > li.current-menu-ancestor > a,
.nav > li.current-menu-parent > a,
.nav > li.current_page_parent > a,
.nav > li.current_page_ancestor > a {
  font-weight: 700;
  color: #fff;
  border-top: 4px solid #fff;
}

/* ===============================
   Submenu blok jako celek
   =============================== */
.nav .sub-menu {
  position: relative;
}

/* Zvýraznění aktivního submenu bloku */
.nav > li.current-menu-ancestor > ul.sub-menu,
.nav > li.current-menu-parent > ul.sub-menu,
.nav > li.current_page_parent > ul.sub-menu,
.nav > li.current_page_ancestor > ul.sub-menu {
  background-color: rgba(255, 255, 255, 0.05); /* jemný highlight */
}

@supports selector(:has(*)) {
  .nav > li:has(> ul.sub-menu a[aria-current="page"]) > a {
    font-weight: 700;
    color: #fff;
    border-top: 4px solid #fff; /* přesně tvůj design */
  }
}

/* Hero readability - change strong color */
section.purple-bottom-wave p {
  color: var(--purple);
}

main section:nth-child(1).border-purple p {
  color: var(--purple);
}

section.orange-bottom-wave p {
  color: var(--blue);
}

main section:nth-child(1).border-blue p {
  color: var(--blue);
}

/* ==========================================
   Brand variable overrides of Tailwind color utilities
   – tyto přepisy napojují pevné Tailwind barvy na ACF proměnné
   – funguje bez buildu, okamžitě po uložení v adminu
   ========================================== */

/* Primary (dříve Accent/Orange) */
.bg-orange { background-color: var(--primary) !important; }
.text-orange { color: var(--primary) !important; }
.border-orange { border-color: var(--primary) !important; }
.bg-light-orange { background-color: rgba(var(--primary-rgb), 0.10) !important; }
/* Hover variants → sjednocené na doplňkovou (purple) */
.hover\:bg-orange:hover { background-color: var(--purple) !important; }
.hover\:text-orange:hover { color: white !important; }
.carousel-section .hover\:text-orange:hover { color: white !important; }
.hover\:border-orange:hover { border-color: var(--purple) !important; }

/* Purple (doplňková) */
.bg-purple { background-color: var(--purple) !important; }
.text-purple { color: var(--purple) !important; }
.border-purple { border-color: var(--purple) !important; }
.bg-light-purple { background-color: rgba(var(--purple-rgb), 0.10) !important; }
/* Hover variants → sjednocené na doplňkovou (požadavek: všechny hover stavy = purple) */
hover\:bg-purple:hover { background-color: var(--purple) !important; }
.hover\:text-purple:hover { color: white !important; }
.carousel-section .hover\:text-purple:hover { color: white !important; }
.hover\:border-purple:hover { border-color: var(--purple) !important; }

.carousel-section .hover\:text-white:hover { color: white !important; }


/* Blue (sekundární) */
.bg-blue { background-color: var(--blue) !important; }
.text-blue { color: var(--blue) !important; }
.border-blue { border-color: var(--blue) !important; }
.bg-light-blue { background-color: rgba(var(--blue-rgb), 0.10) !important; }
/* Hover variants → sjednocené na doplňkovou (purple) */
.hover\:bg-blue:hover { background-color: var(--purple) !important; }
.hover\:text-blue:hover { color: white !important; }
.hover\:border-blue:hover { border-color: var(--purple) !important; }

/* Shadows mapped to brand variables (best-effort; may differ from Tailwind shadows) */
.shadow-orange { box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.25), 0 2px 8px rgba(var(--primary-rgb), 0.15) !important; }
.shadow-purple { box-shadow: 0 12px 24px rgba(var(--purple-rgb), 0.25), 0 2px 8px rgba(var(--purple-rgb), 0.15) !important; }

/* ==========================================
   Overrides for Tailwind arbitrary variants used v menu a textech
   – vychází ze safelistu v tailwind.config.js
   – cíleně přepínáme barvy potomků (a, p, li, td) na CSS proměnné
   ========================================== */

/* Textové potomky (anchor, paragraph, list-item) */
.\[\&_a\]\:text-orange a { color: var(--primary) !important; }
.\[\&_a\]\:text-purple a { color: var(--purple) !important; }
.\[\&_a\]\:text-blue a { color: var(--blue) !important; }

.\[\&_p\]\:text-orange p { color: var(--primary) !important; }
.\[\&_p\]\:text-purple p { color: var(--purple) !important; }
.\[\&_p\]\:text-blue p { color: var(--blue) !important; }

.\[\&_li\]\:text-orange li { color: var(--primary) !important; }
.\[\&_li\]\:text-purple li { color: var(--purple) !important; }
.\[\&_li\]\:text-blue li { color: var(--blue) !important; }

/* Tabulky – okraje a texty */
.\[\&_td\]\:border-orange td { border-color: var(--primary) !important; }
.\[\&_td\]\:border-purple td { border-color: var(--purple) !important; }
.\[\&_td\]\:text-blue td { color: var(--blue) !important; }
.\[\&_td\]\:text-purple td { color: var(--purple) !important; }

/* Navigace – bg pro položky a subpoložky */
.\[\&_.nav\>li\>a\]\:bg-orange .nav>li>a { background-color: var(--primary) !important; }
.\[\&_.nav\>li\>a\]\:bg-purple .nav>li>a { background-color: var(--purple) !important; }

.\[\&_\.nav\>li\>ul\>li\:nth-child\(odd\)\]\:bg-odd-orange .nav>li>ul>li:nth-child(odd) {background-color: rgba(var(--primary-rgb), 0.75) !important;}

.\[\&_.nav\>li\>ul\>li\:nth-child\(odd\)\]\:bg-odd-orange .nav>li>ul>li:nth-child(odd) { background-color: rgba(var(--primary-rgb), 0.75) !important; }
.\[\&_.nav\>li\>ul\>li\:nth-child\(even\)\]\:bg-orange .nav>li>ul>li:nth-child(even) { background-color: var(--primary) !important; }

.\[\&_.nav\>li\>ul\>li\:nth-child\(odd\)\]\:bg-odd-purple .nav>li>ul>li:nth-child(odd) { background-color: rgba(var(--purple-rgb), 0.75) !important; }
.\[\&_.nav\>li\>ul\>li\:nth-child\(even\)\]\:bg-purple .nav>li>ul>li:nth-child(even) { background-color: var(--purple) !important; }

/* Blue (sekundární) varianta pro submenu odd/even */
.\[\&_.nav\>li\>ul\>li\:nth-child\(odd\)\]\:bg-odd-blue .nav>li>ul>li:nth-child(odd) { background-color: rgba(var(--blue-rgb), 0.75) !important; }
.\[\&_.nav\>li\>ul\>li\:nth-child\(even\)\]\:bg-blue .nav>li>ul>li:nth-child(even) { background-color: var(--blue) !important; }

/* Aktivní položky v nav – simulace "current" tříd z Tailwindu */
.\[\&_.current-menu-item\>a\]\:bg-odd-orange .current-menu-item>a { background-color: rgba(var(--primary-rgb), 0.20) !important; }
.\[\&_.current-menu-item\>a\]\:bg-odd-purple .current-menu-item>a { background-color: rgba(var(--purple-rgb), 0.20) !important; }

/* Šipky slideru (Term: [&_.slick-arrow:before]:text-*) */
.\[\&_.slick-arrow\:before\]\:text-orange .slick-arrow:before { color: var(--primary) !important; }
.\[\&_.slick-arrow\:before\]\:text-purple .slick-arrow:before { color: var(--purple) !important; }

/* Globální hover pravidla – sjednocení na doplňkovou (purple) barvu (bez nutnosti měnit šablony) */
a:hover { color: var(--purple); }
.nav > li > a:hover { background-color: var(--purple) !important; }
.nav .sub-menu a:hover { color: #fff; background-color: var(--purple) !important; }

/* Header hover text must be white (desktop + mobile) */
header.banner .nav > li > a:hover,
.banner .nav > li > a:hover,
.nav-primary .nav > li > a:hover,
.mobile_nav .nav > li > a:hover {
  color: #fff !important;
}

/* ======================================================
   Další globální hover stavy – vše směrovat na primární
   ====================================================== */

/* Buttons (včetně Gutenberg) */
button:hover,
.button:hover,
.btn:hover,
[type="button"]:hover,
[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
}

/* Breadcrumbs, pagination, tabs */
.breadcrumbs a:hover { color: var(--purple) !important; }
.pagination a:hover,
.page-numbers:hover,
.nav-links a:hover { color: var(--purple) !important; border-color: var(--purple) !important; }
.tabs .tab:hover,
.tab-nav a:hover { color: var(--purple) !important; border-color: var(--purple) !important; }

/* Accordion titles/headers */
.accordion .accordion-title:hover,
.accordion .accordion-header:hover { color: var(--purple) !important; }

/* Cards/tiles */
.card:hover,
.tile:hover { border-color: var(--purple) !important; box-shadow: 0 10px 20px rgba(var(--purple-rgb), 0.15) !important; }

/* Carousel arrows/dots */
.slick-dots li button:hover:before,
.slick-dots li:hover button:before { color: var(--purple) !important; }

/* Ikony/SVG na hover */
a:hover .icon,
a:hover svg,
a:hover svg path,
.icon:hover,
.icon:hover path,
.icon:hover circle,
.icon:hover rect {
  color: var(--purple) !important;
  fill: var(--purple) !important;
  stroke: var(--purple) !important;
}

/* Group hover varianty – sjednocení na primární */
.group:hover .group-hover\:bg-orange,
.group:hover .group-hover\:bg-purple,
.group:hover .group-hover\:bg-blue { background-color: var(--purple) !important; }
.group:hover .group-hover\:text-orange,
.group:hover .group-hover\:text-purple,
.group:hover .group-hover\:text-blue { color: var(--purple) !important; }
.group:hover .group-hover\:border-orange,
.group:hover .group-hover\:border-purple,
.group:hover .group-hover\:border-blue { border-color: var(--purple) !important; }

/* Arbitrary varianty s :hover potomky (nejčastější) */
.\[\&_a\]\:hover\:text-orange a:hover,
.\[\&_a\]\:hover\:text-purple a:hover,
.\[\&_a\]\:hover\:text-blue a:hover { color: var(--purple) !important; }

/* Override size of icons */
.icon-circle {
  max-width: 150px;
  margin: 0 auto;
  padding: 1rem;
}

.icon-circle img {
  max-width: 80%;
  height: auto;
}

.icons-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .icons-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .icons-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Separator height fix */
.infographic.orange-top-wave, .infographic.blue-top-wave, .infographic.purple-top-wave {
  padding-top: clamp(40px, 12vw, 300px) !important;
  padding-bottom: clamp(40px, 12vw, 300px) !important;
  margin-top: clamp(40px, 6vw, 300px) !important;
}

.infographic.orange-top-wave .infographic-text, .infographic.blue-top-wave .infographic-text, .infographic.purple-top-wave .infographic-text, .infographic-references {
  max-width: 65%;
  display: block;
  margin-left: 0;
}

.infographic-text:has(.infographic-download) {
  max-width: 100% !important;
}

.infographic.orange-top-wave .infographic-text *, .infographic.blue-top-wave .infographic-text *, .infographic.purple-top-wave .infographic-text * {
  font-size: 0.75rem !important;
}

.infographic.bg-light-purple:has(+ .bg-light-purple) .infographic-text > *, .infographic.bg-light-grey:has(+ .bg-light-grey) .infographic-text > *, .bg-light-purple.purple-top-wave:has(+ .bg-light-purple) * {
  color: var(--purple) !important;
}

.infographic.bg-light-orange:has(+ .bg-light-orange) .infographic-text > * {
  color: var(--blue) !important;
}


/* Fix static position for slider arrows */
.scroll_through {
  --media-h: clamp(180px, 38vw, 360px);
  position: relative;
  padding-inline: 56px;
}

.scroll_through .slick-slide > img:first-child {
  display: block;
  max-width: 100%;
  height: var(--media-h);
  object-fit: contain;
}

.scroll_through .text {
  position: relative;
  z-index: 1;
}

.scroll_through .slick-arrow {
  position: absolute !important;
  top: calc(var(--media-h) / 2);
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0;
}

@media screen and (max-width: 768px) {
  .scroll_through .slick-arrow {
    background: rgba(0, 0, 0, 0.10);
  }
}

.scroll_through .slick-arrow:before {
  font-size: 22px;
  color: #fff;
  opacity: 1;
}

.scroll_through .slick-prev {
  left: 20px;
}

.scroll_through .slick-next {
  right: 20px;
}

@media (min-width: 1024px) {
  .scroll_through {
    padding-inline: 72px;
  }

  .scroll_through .slick-prev {
    left: 24px;
  }

  .scroll_through .slick-next {
    right: 24px;
  }
}

.slick-dots {
  position: relative !important;
  bottom: 0 !important;
}

/* Slider heading visible separtor */
@media (max-width: 1023px) {
  .slick-slide {
    flex-direction: column !important;
  }

  .slick-slide h3 {
    font-size: 1.125rem;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  }

  .slick-slide div.hidden {
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  .slick-slide img {
    margin: 0 auto;
  }

  .slick-slide .text,
  .slick-slide p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .slick-slide .grow {
    padding: 1.25rem;
  }
}

/* Hero headline fix */
@media screen and (min-width: 1024px) and (max-width: 1920px) {
  .hero-wrapper {
    width: 50% !important;
  }

  .hero-wrapper .hero-text {
    max-width: 50%;
  }
}

@media screen and (min-width: 1536px) {
  .hero-wrapper .hero-text {
    max-width: 75%;
  }
}

/* Hero tablet height fix */
@media (min-width: 768px) {
  .md\:min-h-\[547px\] {
    min-height: 450px !important;
  }
}

@media (min-width: 1536px) {
  .\32xl\:min-h-\[660px\] {
    min-height: 600px !important;
  }
}

/* ===========================
   HERO – finální layout
   =========================== */

.hero {
  position: relative;
  overflow: visible;
  min-height: clamp(380px, 52vw, 700px);
}

.hero.border-orange .hero-wrapper * {
  color: var(--blue) !important;
}

.hero .container {
  position: relative;
}

.hero .hero-image-not_mask {
  top: 0 !important;
}

/* --- Mobil (<768px): stacked --- */
@media (max-width: 767px) {
  .hero {
    min-height: unset;
    padding-bottom: 0 !important;
  }

  .hero .hero-wrapper,
  .hero .hero-image-not_mask {
    max-width: 100%;
  }

  .hero .hero-image-not_mask {
    position: static !important;
    width: min(84%, 460px) !important;
    margin: 16px auto 0;
    pointer-events: none;
    transform: none !important;
  }
}

/* --- Tablet (768–1024px): text a obrázek = 50/50 ve flow --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero {
    min-height: 560px;
    padding-bottom: 10vw !important; /* rezerva nad spodní vlnou */
  }

  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* stejná šířka */
    align-items: end;
    gap: 2rem;
  }

  .hero .hero-wrapper,
  .hero .hero-image-not_mask {
    max-width: 100%;
  }

  .hero .hero-image-not_mask {
    position: relative !important; /* zpět do toku */
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    pointer-events: none;
    justify-self: end;
    align-self: end;
  }

  .hero .hero-image-not_mask img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- Desktop (≥1024px): ukotvený packshot, text ~ 50 % --- */
@media (min-width: 1024px) {
  .hero.purple-bottom-wave,
  .hero.blue-bottom-wave,
  .hero.orange-bottom-wave {
    padding-bottom: clamp(120px, 22vw, 360px) !important; /* bezpečná zóna pro vlnu */
  }

  .hero .hero-wrapper {
    max-width: 50%;
    width: 50%;
    padding-right: clamp(24px, 4vw, 80px);
  }

  .hero .hero-image-not_mask {
    position: absolute !important;
    inset-block-end: 0 !important; /* bottom: 0 */
    right: clamp(8%, 10vw, 15%) !important; /* kotevní bod vpravo */
    width: 50% !important; /* stejná šířka jako text */
    max-width: none;
    z-index: 1;
    pointer-events: none;
  }

  .hero .hero-image-not_mask img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- 2xl (1536–1919px): větší a trochu víc doprava --- */
@media (min-width: 1536px) and (max-width: 1919px) {
  .hero .hero-image-not_mask {
    right: 14% !important;
    /* width: clamp(680px, 38vw, 980px) !important; */
  }
}

/* --- 2K+ (≥1920px): VY̌CENTROVAT OBRÁZEK V JEHO WRAPPERU --- */
@media (min-width: 1920px) {
  /* přepneme container na 2 sloupce 50/50, obrázek jde zpět do toku */
  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* text 1/2, obrázek 1/2 */
    align-items: end;
    gap: 2rem;
  }

  .hero .hero-wrapper {
    max-width: 100%;
    width: 100%;
  }

  .hero .hero-image-not_mask img {
    /* width: clamp(820px, 40vw, 1200px); */ /* velký packshot */
    max-width: 100%;
    height: auto;
    display: block;
  }
}

.hero-mobile.to-light-purple, .hero-mobile.to-light-grey {
  color: var(--purple) !important;
}

.hero-mobile.to-light-orange {
  color: var(--blue) !important;
}

.\[\&_p\]\:text-grey p, .slick-slide .text-grey {
  color: rgba(105, 105, 105, 1) !important;
}

.bg-light-purple .carousel-references *, .bg-light-purple .infographic-references * {
  color: var(--purple) !important;
  font-size: 90% !important;
}

.bg-light-orange .carousel-references *, .bg-light-orange .infographic-references * {
  color: var(--blue) !important;
  font-size: 90% !important;
}

.carousel-section.bg-light-orange .text-grey {
  color: var(--blue) !important;
}

.carousel-section.bg-white .text-grey {
  color: var(--purple) !important;
}

.carousel-section.carousel-section-orange .text-grey {
  color: var(--blue) !important;
}

@media screen and (max-width: 1024px) {
  .hero-image-mask {
    display: none !important;
  }

  .hero {
    border: none !important;
    box-shadow: none !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .hero > .absolute.bottom-0.w-full.md\:hidden {
    display: block !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .hero.mask:after {
    top: unset !important;
    bottom: -220px !important;
  }

  .hero-image-mask {
    position: relative !important;
    top: -0 !important;
    height: 300px !important;
  }

  .hero-wrapper {
    width: 100% !important;
  }

  .hero-text {
    max-width: 100% !important;
  }
}

.infographic-download {
  text-align: center;
}

body:has(.bg-purple) .text-section p, .icon-row-purple .\[\&_p\]\:text-grey *, body:has(.bg-purple) .efficacy-references * {
  color: var(--purple) !important;
}

body:has(.bg-orange) .text-section p, .icon-row-blue *, body:has(.bg-orange) .efficacy-references * {
  color: var(--blue) !important;
}

.orange-top-wave .infographic-references, .blue-top-wave .infographic-references, .purple-top-wave .infographic-references {
  max-width: 60% !important;
}

.infographic-purple .infographic-references * {
  color: var(--purple) !important;
}

.infographic-blue .infographic-references *, .infographic-orange .infographic-references * {
  color: var(--blue) !important;
}

.carousel-section a:hover {
  color: white !important;
}

.activeSlide {
  color: white !important;
}

.activeSlide.bg-white {
  color: var(--purple) !important;
}

.\[\&_tr\:nth-child\(odd\)\]\:bg-orange-table tr:nth-child(odd) {
  background-color: color-mix(
    in srgb,
    var(--blue) 20%,
    transparent
) !important;
}

.carousel svg {
  color: var(--blue) !important;
}

.infographic-references {
z-index: 100;
}