/* Strevo v5 corrective layer: keep original CSS, only fix imported WP differences. */
html, body { margin: 0; }
body { overflow-x: hidden; }

/* WordPress 7 global styles sometimes add margins/padding that the old theme did not expect. */
#content, #content_main, main { box-sizing: border-box; }

/* Imported classic content should keep the original visual hierarchy. */
.page-content article > h1:first-child,
.page-content .entry-content > h1:first-child {
  margin-top: 0;
}

/* Original page template used content + right-side Toolset text area. */
body.page #content.strevo-page-with-side {
  display: block;
}
body.page #content.strevo-page-with-side #content_main {
  box-sizing: border-box;
}
body.page #content_side,
body.page .side-images {
  box-sizing: border-box;
  word-break: normal;
  overflow-wrap: break-word;
}
body.page #content_side p:first-child,
body.page .side-images p:first-child { margin-top: 0; }
body.page #content_side p:last-child,
body.page .side-images p:last-child { margin-bottom: 0; }

/* Do not let fallback page lists leak into the visual menu. */
.menu .page_item { list-style: none; }

@media (max-width: 900px) {
  body.page #content_side,
  body.page .side-images {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 2rem;
  }
}


/* v6 homepage tuning: reduce the empty gap after the left menu and give the centre poster more space. */
@media (min-width: 1180px) {
  body.home main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home #content {
    width: auto !important;
    max-width: none !important;
    margin-left: 300px !important;
    margin-right: 60px !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body.home #content_main {
    display: grid !important;
    grid-template-columns: minmax(700px, 1fr) 430px !important;
    column-gap: 42px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body.home .this-year {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .news {
    grid-column: 2 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    max-width: 430px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .this-year img {
    display: block !important;
    width: min(56vw, 900px) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.home .news-box {
    box-sizing: border-box !important;
  }
}

@media (min-width: 1180px) and (max-width: 1500px) {
  body.home #content {
    margin-left: 250px !important;
    margin-right: 40px !important;
  }
  body.home #content_main {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    column-gap: 32px !important;
  }
}

@media (max-width: 1179px) {
  /* The legacy tablet layout kept .news at 40%, producing a very narrow
     centred column. Use the same full-width, single-column layout on phones
     and tablets and let the fixed frame provide the outer gutter. */
  body.home main {
    padding-top: clamp(120px, 14vw, 165px) !important;
  }

  body.home #content {
    width: 100% !important;
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  body.home #content_main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .news,
  body.home .this-year {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  body.home .this-year img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.home .news-box,
  body.home .news-box-link {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.home .news-box-link {
    display: block !important;
  }

  body.home .news-box p {
    width: auto !important;
    max-width: none !important;
  }

  body.home .news-box h3,
  body.home .news-box p,
  body.home .news-box a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Tablets use the compact navigation too; otherwise the fixed desktop menu
     competes with the newly widened homepage content. */
  body.home .menu {
    display: none;
    width: 100%;
    min-height: 100vh;
    background: #fff;
  }

  body.home .menu.menu-open,
  body.home.menu-open .menu {
    display: block !important;
  }

  body.home #menutoggle {
    display: block !important;
  }
}

/* Keep the yearly visual beside the news on tablets. The one-column layout
   only becomes necessary on phone-sized viewports. */
@media (min-width: 701px) and (max-width: 1179px) {
  body.home #content_main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 40%) !important;
    column-gap: 28px !important;
    align-items: start !important;
  }

  body.home .this-year {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
  }

  body.home .news {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

@media (max-width: 700px) {
  body.home .this-year {
    margin-top: 48px !important;
  }
}

/* v6 Slovak frame logo: replace the old Czech SVG words with Slovak text. */
.frame--sk-logo .logo-link {
  color: #000 !important;
  text-decoration: none !important;
}

.frame--sk-logo .logo-text {
  position: fixed !important;
  z-index: 1000 !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 .28em !important;
  background: #fff !important;
  color: #000 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  line-height: .95 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

.frame--sk-logo .logo-part--mas.logo-text {
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-51%) !important;
  font-size: 31px !important;
}

.frame--sk-logo .logo-part--umelecke.logo-text {
  top: 50% !important;
  right: -47px !important;
  transform: translateY(-50%) rotate(90deg) !important;
  font-size: 25px !important;
  letter-spacing: .08em !important;
}

.frame--sk-logo .logo-part--strevo.logo-text {
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 31px !important;
  letter-spacing: .03em !important;
  padding-left: .45em !important;
  padding-right: .45em !important;
}

.frame--sk-logo .logo-part--question-mark.logo-text {
  top: 48% !important;
  left: 0 !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  font-size: 31px !important;
  padding-left: .18em !important;
  padding-right: .18em !important;
}

/* Admin bar dropdown can cover the menu while logged in; the public view is unaffected. */

/* v7 fine tuning: make Slovak frame labels closer to the original thinner SVG feel. */
.frame--sk-logo .logo-text {
  z-index: 2147483000 !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  background: #fff !important;
  color: #000 !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.frame--sk-logo .logo-part--mas.logo-text {
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-51%) !important;
  font-size: 27px !important;
  padding: 0 .34em !important;
}

.frame--sk-logo .logo-part--umelecke.logo-text {
  top: 50% !important;
  right: -39px !important;
  transform: translateY(-50%) rotate(90deg) !important;
  font-size: 22px !important;
  letter-spacing: .07em !important;
  padding: 0 .32em !important;
}

.frame--sk-logo .logo-part--strevo.logo-text {
  bottom: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 27px !important;
  letter-spacing: .015em !important;
  padding: 0 .48em !important;
}

.frame--sk-logo .logo-part--question-mark.logo-text {
  top: 48% !important;
  left: 4px !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  padding: 0 .2em !important;
}

/* Make sure the top MÁŠ label cannot be hidden by the frame hiders or WP admin styles. */
.frame--sk-logo .logo-link--mas,
.frame--sk-logo .logo-part--mas.logo-text {
  visibility: visible !important;
  opacity: 1 !important;
  display: inline-block !important;
}

/* v7: wider text column for long article-like pages such as /mlada-tvorba/. */
@media (min-width: 1180px) {
  body.page #content.strevo-page-no-side,
  body.page #content.strevo-page-slug-mlada-tvorba {
    width: auto !important;
    max-width: none !important;
    margin-left: 300px !important;
    margin-right: 120px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body.page #content.strevo-page-no-side #content_main,
  body.page #content.strevo-page-slug-mlada-tvorba #content_main {
    width: 100% !important;
    max-width: 1120px !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }

  body.page #content.strevo-page-no-side .page-content,
  body.page #content.strevo-page-no-side article,
  body.page #content.strevo-page-no-side .entry-content,
  body.page #content.strevo-page-slug-mlada-tvorba .page-content,
  body.page #content.strevo-page-slug-mlada-tvorba article,
  body.page #content.strevo-page-slug-mlada-tvorba .entry-content {
    width: 100% !important;
    max-width: none !important;
  }

  body.page #content.strevo-page-slug-mlada-tvorba p,
  body.page #content.strevo-page-slug-mlada-tvorba ul,
  body.page #content.strevo-page-slug-mlada-tvorba ol,
  body.page #content.strevo-page-slug-mlada-tvorba h1,
  body.page #content.strevo-page-slug-mlada-tvorba h2,
  body.page #content.strevo-page-slug-mlada-tvorba h3 {
    max-width: 100% !important;
  }

  body.page #content.strevo-page-slug-mlada-tvorba img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (min-width: 1180px) and (max-width: 1500px) {
  body.page #content.strevo-page-no-side,
  body.page #content.strevo-page-slug-mlada-tvorba {
    margin-left: 250px !important;
    margin-right: 80px !important;
  }
  body.page #content.strevo-page-no-side #content_main,
  body.page #content.strevo-page-slug-mlada-tvorba #content_main {
    max-width: 980px !important;
  }
}


/* v8 fixes requested after live test.
   1) Keep original top MÁŠ as SVG image, not recreated text.
   2) Override old original rule #content p { max-width:450px; width:100%; }
      on long normal pages so text can extend to the right. */

/* The top MÁŠ is now an image again. Do not apply text-logo styling to it. */
.frame--sk-logo .logo-link--mas img.logo-part--mas {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  z-index: 2147483000 !important;
}

/* Keep the remaining Slovak frame text lighter than v6/v7. */
.frame--sk-logo .logo-text {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
}
.frame--sk-logo .logo-part--umelecke.logo-text,
.frame--sk-logo .logo-part--strevo.logo-text,
.frame--sk-logo .logo-part--question-mark.logo-text {
  font-weight: 500 !important;
}

/* Stronger override for the original theme rule: #content p { max-width: 450px; width:100%; } */
@media (min-width: 1180px) {
  body.page #content.strevo-page-no-side p,
  body.page #content.strevo-page-no-side li,
  body.page #content.strevo-page-no-side blockquote,
  body.page #content.strevo-page-no-side h1,
  body.page #content.strevo-page-no-side h2,
  body.page #content.strevo-page-no-side h3,
  body.page #content.strevo-page-slug-mlada-tvorba p,
  body.page #content.strevo-page-slug-mlada-tvorba li,
  body.page #content.strevo-page-slug-mlada-tvorba blockquote,
  body.page #content.strevo-page-slug-mlada-tvorba h1,
  body.page #content.strevo-page-slug-mlada-tvorba h2,
  body.page #content.strevo-page-slug-mlada-tvorba h3 {
    max-width: none !important;
    width: auto !important;
  }

  body.page #content.strevo-page-no-side .entry-content > *,
  body.page #content.strevo-page-slug-mlada-tvorba .entry-content > * {
    max-width: 1120px !important;
  }

  body.page #content.strevo-page-no-side .entry-content > figure,
  body.page #content.strevo-page-no-side .entry-content > .wp-block-image,
  body.page #content.strevo-page-slug-mlada-tvorba .entry-content > figure,
  body.page #content.strevo-page-slug-mlada-tvorba .entry-content > .wp-block-image {
    max-width: 1120px !important;
  }
}

@media (min-width: 1180px) and (max-width: 1500px) {
  body.page #content.strevo-page-no-side .entry-content > *,
  body.page #content.strevo-page-slug-mlada-tvorba .entry-content > * {
    max-width: 980px !important;
  }
}

/* v11: Fotogaléria fix.
   WordPress gallery shortcode can fall back to vertical block/figure layout.
   Force gallery thumbnails into responsive rows, scoped to the Fotogaléria page
   and also safe for translated English gallery page. */
body.page #content.strevo-page-slug-fotogalerie,
body.page #content.strevo-page-slug-photo-gallery {
  width: auto !important;
  max-width: none !important;
}

@media (min-width: 1180px) {
  body.page #content.strevo-page-slug-fotogalerie,
  body.page #content.strevo-page-slug-photo-gallery {
    margin-left: 300px !important;
    margin-right: 90px !important;
  }

  body.page #content.strevo-page-slug-fotogalerie #content_main,
  body.page #content.strevo-page-slug-photo-gallery #content_main {
    width: 100% !important;
    max-width: 1120px !important;
    float: none !important;
  }
}

body.page #content.strevo-page-slug-fotogalerie .gallery,
body.page #content.strevo-page-slug-photo-gallery .gallery,
body.page #content .gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 18px 0 42px 0 !important;
  clear: both !important;
}

body.page #content .gallery br,
body.page #content .gallery .clear {
  display: none !important;
  clear: none !important;
}

body.page #content .gallery-item,
body.page #content .gallery dl.gallery-item,
body.page #content .gallery figure.gallery-item {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: calc(25% - 11px) !important;
  max-width: calc(25% - 11px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.page #content .gallery-columns-1 .gallery-item { width: 100% !important; max-width: 100% !important; }
body.page #content .gallery-columns-2 .gallery-item { width: calc(50% - 7px) !important; max-width: calc(50% - 7px) !important; }
body.page #content .gallery-columns-3 .gallery-item { width: calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
body.page #content .gallery-columns-4 .gallery-item,
body.page #content .gallery-columns-5 .gallery-item,
body.page #content .gallery-columns-6 .gallery-item,
body.page #content .gallery-columns-7 .gallery-item,
body.page #content .gallery-columns-8 .gallery-item,
body.page #content .gallery-columns-9 .gallery-item {
  width: calc(25% - 11px) !important;
  max-width: calc(25% - 11px) !important;
}

body.page #content .gallery-icon,
body.page #content .gallery-icon a,
body.page #content .gallery-item a {
  display: block !important;
  width: 100% !important;
}

body.page #content .gallery img,
body.page #content .gallery-item img,
body.page #content .gallery-icon img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

body.page #content .gallery-caption,
body.page #content .wp-caption-text {
  max-width: 100% !important;
  width: 100% !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-top: 6px !important;
}

@media (max-width: 900px) {
  body.page #content .gallery-item,
  body.page #content .gallery dl.gallery-item,
  body.page #content .gallery figure.gallery-item,
  body.page #content .gallery-columns-3 .gallery-item,
  body.page #content .gallery-columns-4 .gallery-item,
  body.page #content .gallery-columns-5 .gallery-item,
  body.page #content .gallery-columns-6 .gallery-item,
  body.page #content .gallery-columns-7 .gallery-item,
  body.page #content .gallery-columns-8 .gallery-item,
  body.page #content .gallery-columns-9 .gallery-item {
    width: calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
  }
}

@media (max-width: 520px) {
  body.page #content .gallery {
    gap: 10px !important;
  }
  body.page #content .gallery-item,
  body.page #content .gallery dl.gallery-item,
  body.page #content .gallery figure.gallery-item,
  body.page #content .gallery-columns-2 .gallery-item,
  body.page #content .gallery-columns-3 .gallery-item,
  body.page #content .gallery-columns-4 .gallery-item,
  body.page #content .gallery-columns-5 .gallery-item,
  body.page #content .gallery-columns-6 .gallery-item,
  body.page #content .gallery-columns-7 .gallery-item,
  body.page #content .gallery-columns-8 .gallery-item,
  body.page #content .gallery-columns-9 .gallery-item {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* v13: right-side UMELECKÉ label shifted slightly left so it is visually centered in the frame gap. */
.frame--sk-logo .logo-link--umelecke {
  position: fixed !important;
  top: 50% !important;
  right: 18px !important;
  width: 0 !important;
  height: 0 !important;
  z-index: 2147483000 !important;
  overflow: visible !important;
}

.frame--sk-logo .logo-link--umelecke .logo-part--umelecke.logo-text {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 27px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  padding: 0 .48em !important;
  background: #fff !important;
  color: #000 !important;
  white-space: nowrap !important;
}


/* v14: restore the original two-column page layout.
   The legacy Toolset field wpcf-side-images belongs to the right column,
   not below the normal page content. */
@media (min-width: 1100px) {
  body.page #content.strevo-page-with-side {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) !important;
    column-gap: 60px !important;
    align-items: start !important;
    width: auto !important;
    max-width: 980px !important;
    margin-left: 300px !important;
    margin-right: 80px !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body.page #content.strevo-page-with-side #content_main {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  body.page #content.strevo-page-with-side #content_side,
  body.page #content.strevo-page-with-side .side-images {
    grid-column: 2 !important;
    align-self: start !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
  }
}

@media (min-width: 1100px) and (max-width: 1499px) {
  body.page #content.strevo-page-with-side {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 285px) !important;
    column-gap: 40px !important;
    max-width: none !important;
    margin-left: 250px !important;
    margin-right: 50px !important;
  }
}

@media (max-width: 1099px) {
  body.page #content.strevo-page-with-side {
    display: block !important;
  }

  body.page #content.strevo-page-with-side #content_side,
  body.page #content.strevo-page-with-side .side-images {
    float: none !important;
    clear: both !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 2rem !important;
  }
}

/* v15: highlight the active hardcoded menu item. */
li.current-menu-item > a {
  color: #ffe001 !important;
}

/* v1.0.16: homepage news AJAX loading state */
.news-load-more.is-loading,
.news-load-more:disabled {
  cursor: wait;
  opacity: .65;
}


/* v17: show the changing SK/EN item in the bottom menu as a flag. */
.language-switch-link > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px;
}

.language-switch-link .language-flag {
  display: inline-block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}

/* v18: keep the relevant left-menu submenu expanded after page navigation. */
.menu .menu-item-has-children.submenu-open > .sub-menu,
.menu .menu-item-has-children.current-menu-item > .sub-menu,
.menu .menu-item-has-children.current_page_item > .sub-menu,
.menu .menu-item-has-children.current-menu-parent > .sub-menu,
.menu .menu-item-has-children.current-menu-ancestor > .sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* v19: wrap long submenu labels inside the fixed left navigation column. */
@media (min-width: 901px) {
  .menu #main_menu .sub-menu,
  .menu #main_menu .sub-menu > li {
    box-sizing: border-box !important;
    max-width: 235px !important;
  }

  .menu #main_menu .sub-menu > li > a {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 220px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
  }
}

/* v21: offset expanded submenus from the parent item, without gaps between submenu rows. */
@media (min-width: 901px) {
  .menu #main_menu .sub-menu {
    margin: 10px 0 0 0 !important;
    padding: 0 0 0 22px !important;
    list-style: none !important;
  }

  .menu #main_menu .sub-menu > li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }


  .menu #main_menu .sub-menu > li::before {
    content: "" !important;
    flex: 0 0 6px !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: .4em !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  .menu #main_menu .sub-menu > li > a {
    flex: 0 1 auto !important;
    margin: 0 !important;
    line-height: 1.15 !important;
  }
}