:root {
  --purple: rgba(135, 24, 157, 1);
  --blue: rgba(0, 47, 108, 1);
}

/* MOBILE: framed submenu panel – zabrání splývání s pozadím stránky */
@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(135, 24, 157, 0.10);
    color: #000;
  }

  .bg-orange .mobile_nav .nav .sub-menu .current-menu-item > a,
  .bg-orange .mobile_nav .nav .sub-menu .current_page_item > a {
    background: rgba(244, 168, 99, 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;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
}

/* ===============================
   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);
}

/* 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;
  }
}

@media screen and (min-width: 1024px) {
  .hero {
    background-image: none !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;
}