@font-face {
    font-family: "Grato Grotesk";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Grato-Grotesk-Regular.woff2") format("woff2"),
         url("../fonts/Grato-Grotesk-Regular.woff") format("woff");
}
@font-face {
    font-family: "Grato Grotesk";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Grato-Grotesk-Bold.woff2") format("woff2"),
         url("../fonts/Grato-Grotesk-Bold.woff") format("woff");
}
@font-face {
    font-family: "Baste B";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/BasteB-Medium.woff2") format("woff2"),
         url("../fonts/BasteB-Medium.woff") format("woff");
}

/* Grato Grotesk: povinna OpenType funkcia "Legible, double-storey a" (ss06) z manualu */
body,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
h1, h2, h3, h4, h5, h6 {
    font-feature-settings: "ss06" 1;
}

/* =========================================================================
   Kulturak 21 -- panel "hlavicka s logom" (identita)
   ========================================================================= */
:root {
    --k21-black:  #000000;
    --k21-gray:   #E6E1DC;
    --k21-red:    #C84155;
    --k21-blue:   #7D8CB9;
    --k21-green:  #8CB496;
    --k21-yellow: #E9B446;
    --k21-border: 20px;
}

.k21-panel {
    --k21-accent: var(--k21-black);
    --k21-content: var(--k21-yellow);
    background: var(--k21-accent);
    padding: var(--k21-border);
    box-sizing: border-box;
}
.k21-accent-black  { --k21-accent: var(--k21-black); }
.k21-accent-gray   { --k21-accent: var(--k21-gray); }
.k21-accent-red    { --k21-accent: var(--k21-red); }
.k21-accent-blue   { --k21-accent: var(--k21-blue); }
.k21-accent-green  { --k21-accent: var(--k21-green); }
.k21-accent-yellow { --k21-accent: var(--k21-yellow); }

.k21-panel__inner {
    background: var(--k21-content);
    box-sizing: border-box;
    padding: calc(var(--k21-border) * 1.4) calc(var(--k21-border) * 1.6);
    min-height: 100%;
}
.k21-content-black  { --k21-content: var(--k21-black); }
.k21-content-gray   { --k21-content: var(--k21-gray); }
.k21-content-red    { --k21-content: var(--k21-red); }
.k21-content-blue   { --k21-content: var(--k21-blue); }
.k21-content-green  { --k21-content: var(--k21-green); }
.k21-content-yellow { --k21-content: var(--k21-yellow); }

.k21-panel__inner--round {
    border-radius: var(--k21-border);
}
.k21-panel__inner--cut {
    clip-path: polygon(
        var(--k21-border) 0,
        calc(100% - var(--k21-border)) 0,
        100% var(--k21-border),
        100% calc(100% - var(--k21-border)),
        calc(100% - var(--k21-border)) 100%,
        var(--k21-border) 100%,
        0 calc(100% - var(--k21-border)),
        0 var(--k21-border)
    );
}

.k21-panel__header {
    margin: 0 0 calc(var(--k21-border) * 0.8);
}
.k21-panel__title {
    font-family: "Baste B", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--k21-accent);
    margin: 0 0 4px;
    line-height: 1;
    font-size: clamp(24px, 4vw, 48px);
    letter-spacing: .01em;
}
.k21-panel__subtitle {
    font-family: "Grato Grotesk", sans-serif;
    font-weight: 700;
    font-feature-settings: "ss06" 1;
    color: var(--k21-accent);
    margin: 0;
    font-size: clamp(13px, 1.4vw, 17px);
}
.k21-panel__body {
    color: var(--k21-black);
    font-family: "Grato Grotesk", sans-serif;
    font-feature-settings: "ss06" 1;
}
.k21-panel__body img { max-width: 100%; display: block; }

/* =========================================================================
   OPRAVA: vyrovnanie výšky v mriežke (grid match-height) + logo/nadpis
   cez celú šírku podľa manuálu ("logo tečie cez celý formát výstupu")
   ========================================================================= */
.k21-panel {
  display: flex;
  flex-direction: column;
}
.k21-panel__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
}
.k21-panel__header {
  padding: 0;
  margin: 0 0 calc(var(--k21-border) * 0.8);
}
.k21-panel__title {
  padding: 0;
}
.k21-panel__subtitle {
  padding: 0 calc(var(--k21-border) * 1.6);
}
.k21-panel__body {
  flex: 1 1 auto;
  padding: 0 calc(var(--k21-border) * 1.6) calc(var(--k21-border) * 1.4);
}

/* =========================================================================
   OPRAVA v2 — presne poda referencie grafika (3 karty vedľa seba):
   - rez/zaoblenie LEN na dolných dvoch rohoch (horné vždy ostré, kvôli logu)
   - nadpis/logo má bežné odsadenie (nie na hranu)
   - vnútorný box vždy vyplncelú vku rámu (iadna čierna medzera dole)
   ========================================================================= */

.k21-panel {
  height: 100%;
  box-sizing: border-box;
}

/* nadpis/logo — bežné odsadenie ako zvyšok obsahu, NIE na hranu */
.k21-panel__header {
    margin: calc(var(--k21-border) - 3px) var(--k21-border) calc(var(--k21-border) * 0.6) var(--k21-border);
}
.k21-panel__title {
  padding: 0;
}

/* istota, že vnútorný box vždy vyplní celú výšku rámu, žiadna čierna medzera */
.k21-panel__inner {
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
    padding-top: 0;
}

/* logo v hlavičke panelu — súbory logo-*.png v /images/kulturak21/logo/
   (mimo child theme, cesta podľa zadania klienta), farba loga sa mení
   podľa --accent (farba vonkajšieho rámu), rovnaký princíp ako referenčný
   kulturak21-panel/css/k21-panel.css bod 3) */
.k21-panel__logo {
  display: block;
  width: 100%;
  aspect-ratio: 2113 / 489;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
  background-image: url("/images/kulturak21/logo/logo-black.png");
}
.k21-accent-black  .k21-panel__logo { background-image: url("/images/kulturak21/logo/logo-black.png"); }
.k21-accent-gray   .k21-panel__logo { background-image: url("/images/kulturak21/logo/logo-gray.png"); }
.k21-accent-red    .k21-panel__logo { background-image: url("/images/kulturak21/logo/logo-red.png"); }
.k21-accent-blue   .k21-panel__logo { background-image: url("/images/kulturak21/logo/logo-blue.png"); }
.k21-accent-green  .k21-panel__logo { background-image: url("/images/kulturak21/logo/logo-green.png"); }
.k21-accent-yellow .k21-panel__logo { background-image: url("/images/kulturak21/logo/logo-yellow.png"); }
.k21-accent-white  .k21-panel__logo { background-image: url("/images/kulturak21/logo/logo-white.png"); }

/* =========================================================================
   Kulturák 21 — hlavné menu podľa Figmy   (15. 9. 2026, v2)
   -------------------------------------------------------------------------
   Geometria je odmeraná z návrhu (artboard 1440):
     medzera medzi textami položiek   40 px  -> padding 20 px, žiadny gap
     rámček okolo textu               137 x 40 px pri texte 97 px
     výška čierneho pásu              ~74 px
     polomer rohov                     6 px

   Rámček nie je na samotnom odkaze, ale na jeho ::after — odkaz má výšku
   celého pásu kvôli klikacej ploche, rámček má len 40 px a je vycentrovaný.

   POZOR: téma dáva položkám flex: 1 1 auto, čím ich rozťahuje na rovnakú
   šírku. Preto flex: 0 0 auto — šírka potom vychádza z dĺžky textu.
   ========================================================================= */

:root {
    --k21-nav-radius:   6px;
    --k21-nav-padding: 20px;   /* -> 40 px medzi textami */
    --k21-nav-frame-h: 40px;   /* výška rámčeka */
    --k21-nav-height:  74px;   /* výška čierneho pásu */
}

/* čierny pás — ak farbu nastavíš v Customizeri, tento blok zmaž */
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--k21-black, #000);
}

/* položky podľa dĺžky textu, celé menu vycentrované */
.tm-header .uk-navbar-nav { gap: 0; }
.tm-header .uk-navbar-nav > li { flex: 0 0 auto; }
.tm-header .uk-navbar-left > .uk-navbar-nav { justify-content: center; width: 100%; }

.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a {
    position: relative;
    min-height: var(--k21-nav-height);
    padding: 0 var(--k21-nav-padding);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
}

/* rámček — priehľadný v základe, aby sa pri hoveri nič neposunulo */
.tm-header .uk-navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: var(--k21-nav-frame-h);
    border: 1px solid transparent;
    border-radius: var(--k21-nav-radius);
    transition: border-color .15s ease;
    pointer-events: none;
}

.tm-header .uk-navbar-nav > li > a:hover::after,
.tm-header .uk-navbar-nav > li > a[aria-expanded="true"]::after {
    border-color: rgba(255, 255, 255, .55);
}

.tm-header .uk-navbar-nav > li.uk-active > a::after {
    border-color: #fff;
}

/* téma dáva aktívnej položke modré pozadie — tento selektor ho prebije */
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a:hover {
    background-color: transparent;
    color: #fff;
}

.tm-header .uk-navbar-nav > li > a:focus-visible {
    outline: 2px solid var(--k21-yellow, #E9B446);
    outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
    .tm-header .uk-navbar-nav > li > a::after { transition: none; }
}

/* mobilné menu (off-canvas) — rovnaký princíp, rámček na odkaze */
.uk-offcanvas-bar .uk-nav > li > a {
    border: 1px solid transparent;
    border-radius: var(--k21-nav-radius);
    padding-left: var(--k21-nav-padding);
    padding-right: var(--k21-nav-padding);
    transition: border-color .15s ease;
}
.uk-offcanvas-bar .uk-nav > li:hover > a     { border-color: rgba(255, 255, 255, .55); }
.uk-offcanvas-bar .uk-nav > li.uk-active > a { border-color: #fff; }


/* =========================================================================
   Kulturák 21 — sociálne ikony podľa Figmy   (15. 9. 2026)
   -------------------------------------------------------------------------
   Odmerané z návrhu (uzol "Group 40", artboard 1440):
     dlaždica            56 x 40 px, čierna, biely symbol
     medzera medzi nimi  9 px
     polomer rohov       6 px  (rovnako ako položky menu)

   POUŽITIE: v YOOtheme Builderi daj elementu Social CSS triedu k21-social.
   Bez nej sa štýl nikde neprejaví — zámerne, aby neprefarbil ostatné ikony.
   ========================================================================= */

.k21-social {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* ak je element vykreslený ako uk-grid, mriezka rieši rozostup okrajmi */
.k21-social.uk-grid { margin-left: -9px; gap: 0; }
.k21-social.uk-grid > * { padding-left: 9px; }

.k21-social a,
.k21-social .uk-icon-link,
.k21-social .uk-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 40px;
    border-radius: 6px;
    background-color: var(--k21-black, #000);
    color: #fff;
    transition: background-color .15s ease, color .15s ease;
}

.k21-social a:hover,
.k21-social a:focus,
.k21-social .uk-icon-button:hover {
    background-color: var(--k21-yellow, #E9B446);
    color: var(--k21-black, #000);
}

.k21-social a:focus-visible {
    outline: 2px solid var(--k21-black, #000);
    outline-offset: 2px;
}

.k21-social svg {
    width: 20px;
    height: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .k21-social a { transition: none; }
}


/* -------------------------------------------------------------------------
   Sociálne ikony v hlavičke — skutočný výstup YOOthemu
   (Layout → Header → Social Icons, pozícia Header End)

   YOOtheme ich vykreslí ako <ul class="uk-grid uk-flex-inline ..."> a triedu
   sa im nastaviť nedá — preto sa mieria cez tvar značkovania, nie cez
   k21-social. Rozostup robí uk-grid-small (15 px), prepisujeme na 9 px.
   ------------------------------------------------------------------------- */

.tm-header ul.uk-flex-inline { margin-left: -9px; }
.tm-header ul.uk-flex-inline > li { padding-left: 9px; }

.tm-header ul.uk-flex-inline > li > a.uk-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 40px;
    border-radius: 6px;
    background-color: var(--k21-black, #000);
    color: #fff;
    transition: background-color .15s ease, color .15s ease;
}

.tm-header ul.uk-flex-inline > li > a.uk-icon-link:hover,
.tm-header ul.uk-flex-inline > li > a.uk-icon-link:focus {
    background-color: var(--k21-yellow, #E9B446);
    color: var(--k21-black, #000);
}

.tm-header ul.uk-flex-inline > li > a.uk-icon-link:focus-visible {
    outline: 2px solid var(--k21-black, #000);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tm-header ul.uk-flex-inline > li > a.uk-icon-link { transition: none; }
}


/* =========================================================================
   Kulturák 21 — dočistenie menu + mobilná hlavička   (15. 9. 2026, v3)
   -------------------------------------------------------------------------
   1) 3 px medzera medzi rámčekmi položiek menu. Rámček je na ::after,
      zúžený o 1,5 px z každej strany — padding 20 px, a teda medzera
      40 px medzi textami podľa Figmy, zostáva nedotknutá.

   2) Modré pozostatky demo štýlu Oakville. Téma ich kreslí štyrmi
      pravidlami, ktoré v2 nezrušila:
        .uk-navbar-container                          border-bottom 1px #00407E
        .uk-navbar-left / -right / -center            border-left  1px #00407E
                                                      + box-shadow inset 1px biela
        .uk-navbar-item, .uk-navbar-toggle            border-right 1px #00407E
        ...container:not(...) .uk-navbar-nav > li > a box-shadow inset 1px biela

      POZOR na špecificitu: pravidlá témy majú v selektore
      `:not(.uk-navbar-transparent)`, čo ich dvíha na 0,3,0. Kratší selektor
      (`.tm-header .uk-navbar-toggle`) ich neprebije — preto je tu všade
      celý tvar. Keď to niekto skráti, modré čiary sa vrátia.

   3) Mobilná hlavička je v <header class="tm-header-mobile">, čo je MIMO
      .tm-header — pravidlá z v2 ju preto nikdy nechytili a ostal jej modrý
      gradient z demo štýlu.

   4) Mobilné menu je YOOtheme dropbar #tm-dialog-mobile, nie off-canvas
      (pravidlo pre .uk-offcanvas-bar z v2 je mŕtve, pokojne ho zmaž).
      Podľa Figmy 13:357: čierny panel, biele položky, vycentrované,
      rozostup 30 px. Návrh nekreslí ani rámčeky, ani stavy — aktívna
      položka je preto plne biela a ostatné na 70 %, hover žltý ako inde.
      Šípka rozbaľovania má od témy `margin-left: auto`, ktorá text tlačila
      doľava; prepisuje sa na 0,5 em, aby ostala hneď za textom.
   ========================================================================= */

/* --- 1) medzera medzi rámčekmi položiek --------------------------------- */

.tm-header .uk-navbar-nav > li > a::after {
    left: 3px;
    right: 3px;
}

/* --- 2) modré pozostatky v hlavnom menu --------------------------------- */

.tm-header .uk-navbar-container,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) {
    border: 0;
}

.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-item,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-toggle,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-left,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-right,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-center {
    border: 0;
    box-shadow: none;
}

/* --- 3) mobilná hlavička ------------------------------------------------ */

.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--k21-black, #000);
    border: 0;
}

.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-item,
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-toggle,
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-toggle[aria-expanded="true"],
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-left,
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-right,
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-center {
    border: 0;
    box-shadow: none;
    background-color: transparent;
    color: #fff;
}

.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-toggle:hover,
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-toggle[aria-expanded="true"] {
    color: var(--k21-yellow, #E9B446);
}


/* --- 3b) mobilná hlavička — oprava po pridaní Mobile_social (7.10.2026) ---
   Mobile_Logo (#module-123) duplikoval pôvodné theme logo v .uk-navbar-left;
   spolu s novým Mobile_social (#module-124) sa .uk-navbar-left zalamovalo na
   3 riadky (logo + duplicitné logo + ikony) a hamburger sa stisol do úzkeho
   pásu. Riešenie: skryť duplicitné logo, zmenšiť pôvodné logo a ikony tak,
   aby sa vetko zmestilo do jedného riadku bez zalamovania. ----------- */

.tm-header-mobile #module-123 { display: none; }

.tm-header-mobile .uk-navbar-left {
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: 8px;
}

.tm-header-mobile .uk-navbar-left > a.uk-logo {
    flex-shrink: 0;
}

.tm-header-mobile .uk-navbar-left > a.uk-logo img {
    max-width: 140px;
    height: auto;
}

.tm-header-mobile #module-124 .el-link {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.tm-header-mobile #module-124 .el-link:hover,
.tm-header-mobile #module-124 .el-link:focus {
    background-color: var(--k21-yellow, #E9B446) !important;
    color: #000000 !important;
}

.tm-header-mobile #module-124 .el-link svg {
    width: 15px;
    height: 15px;
}

.tm-header-mobile #module-124 .el-item {
    padding-left: 5px !important;
}

.tm-header-mobile nav.uk-navbar {
    align-items: center !important;
}

.tm-header-mobile .uk-navbar-container {
    height: auto;
}

/* --- 4) mobilné menu (dropbar) ------------------------------------------ */

#tm-dialog-mobile,
#tm-dialog-mobile::before {
    background: var(--k21-black, #000);
}

#tm-dialog-mobile .uk-nav > li > a {
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    border: 0;
    padding: 3px var(--k21-nav-padding, 20px);
    transition: color .15s ease;
    text-transform: uppercase;
}

#tm-dialog-mobile .uk-nav > li > a > [uk-nav-parent-icon] {
    margin-left: .5em;
}

#tm-dialog-mobile .uk-nav > li.uk-active > a {
    color: #fff;
}

#tm-dialog-mobile .uk-nav > li > a:hover,
#tm-dialog-mobile .uk-nav > li > a[aria-expanded="true"] {
    color: var(--k21-yellow, #E9B446);
}

#tm-dialog-mobile .uk-nav-sub a {
    color: rgba(255, 255, 255, .7);
    text-align: center;
    text-transform: uppercase;
}

#tm-dialog-mobile .uk-nav-sub a:hover {
    color: var(--k21-yellow, #E9B446);
}

#tm-dialog-mobile .uk-hr {
    border-top-color: rgba(255, 255, 255, .2);
}

@media (prefers-reduced-motion: reduce) {
    #tm-dialog-mobile .uk-nav > li > a { transition: none; }
}

/* v5 — šípky lightboxu (Slideshow_export, Veľká spoločenská sála / Prenájmy)
   Pridané 24. 9. 2026. Lightbox panel (.uk-lightbox-panel) je UIkit
   pripájaný priamo do <body>, mimo #page#N — Builder element-scoped CSS
   pole (Advanced → CSS) ho preto nedokáže zasiahnuť (YOOtheme automaticky
   predpony CELÝ obsah poľa selektorom #page#N, nielen .el-* triedy).
   Musí ísť do globálneho custom.css. Vizuálne kopíruje .el-slidenav
   (54×40, #e6e1dc / hover #e9b446, rovnaké SVG šípky ako .k21-ev-months__arrow),
   len bez position/margin prepisu — lightbox má vlastné absolútne
   umiestnenie šípok pri okrajoch, to sa nemení. */
.uk-lightbox-panel .uk-slidenav-previous,
.uk-lightbox-panel .uk-slidenav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 40px;
  padding: 0;
  background-color: #e6e1dc;
  border-radius: 6px;
  border: 0px;
  color: #000000;
  transition: background-color 0.2s ease-in-out;
}
.uk-lightbox-panel .uk-slidenav-previous:hover,
.uk-lightbox-panel .uk-slidenav-previous:focus,
.uk-lightbox-panel .uk-slidenav-next:hover,
.uk-lightbox-panel .uk-slidenav-next:focus {
  background-color: #e9b446;
}
.uk-lightbox-panel .uk-slidenav-previous svg,
.uk-lightbox-panel .uk-slidenav-next svg {
  display: none;
}
.uk-lightbox-panel .uk-slidenav-previous::before,
.uk-lightbox-panel .uk-slidenav-next::before {
  content: "";
  display: block;
  width: 24px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.uk-lightbox-panel .uk-slidenav-previous::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 39'><path d='M55 19.5 H6 M22 3 L5 19.5 L22 36' fill='none' stroke='black' stroke-width='3'/></svg>");
}
.uk-lightbox-panel .uk-slidenav-next::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 39'><path d='M1 19.5 H50 M34 3 L51 19.5 L34 36' fill='none' stroke='black' stroke-width='3'/></svg>");
}


/* =========================================================================
   Kulturak 21 -- socialne ikony podla Figmy, technika W-19 (2026-10-08)
   -------------------------------------------------------------------------
   Namiesto UIkit standardnych ikon (span uk-icon -> vlozene <svg>) sa
   pouziva JEDNA spojena maska (dlazdica + "vyrezany" symbol, fill-rule
   evenodd) cez CSS mask-image na ::before pseudo-elemente. Farbu dlazdice
   dava background-color pseudo-elementu; symbol je priehladna diera, cez
   ktoru je vidno skutocne pozadie za ikonou (hlavicka / paticka na modrej/
   cierny pas na mobile) -- replikuje Figmu (mix-blend-mode:multiply).

   Original UIkit <svg> v .el-link / .uk-icon-link je skryte (display:none).
   Sieť sa rozlisuje cez href odkazu (facebook.com / youtube.com /
   instagram.com), nie cez classu -- YOOtheme ju nedava k dispozicii.
   ========================================================================= */

.tm-header ul.uk-flex-inline > li > a.uk-icon-link,
.tm-header-mobile #module-124 .el-link,
#footer\#2 .el-link,
#footer\#3 .el-link,
.k21-social-mask .el-link {
    position: relative;
    overflow: visible;
    background-color: transparent !important;
}

.tm-header ul.uk-flex-inline > li > a.uk-icon-link svg,
.tm-header-mobile #module-124 .el-link svg,
#footer\#2 .el-link svg,
#footer\#3 .el-link svg,
.k21-social-mask .el-link svg {
    display: none !important;
}

.tm-header ul.uk-flex-inline > li > a.uk-icon-link::before,
.tm-header-mobile #module-124 .el-link::before,
#footer\#2 .el-link::before,
#footer\#3 .el-link::before,
.k21-social-mask .el-link::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: background-color .15s ease;
}

/* farba dlazdice: cierna vsade okrem mobilnej hlavicky (biela sada) */
.tm-header ul.uk-flex-inline > li > a.uk-icon-link::before,
#footer\#2 .el-link::before,
#footer\#3 .el-link::before,
.k21-social-mask .el-link::before {
    background-color: var(--k21-black, #000);
}

.tm-header-mobile #module-124 .el-link::before {
    background-color: #ffffff;
    border-radius: 6px;
}

/* hover/focus -- farba prechadza na ::before (rodic je uz priehladny) */
.tm-header ul.uk-flex-inline > li > a.uk-icon-link:hover::before,
.tm-header ul.uk-flex-inline > li > a.uk-icon-link:focus::before,
.tm-header-mobile #module-124 .el-link:hover::before,
.tm-header-mobile #module-124 .el-link:focus::before,
#footer\#2 .el-link:hover::before,
#footer\#2 .el-link:focus::before,
#footer\#3 .el-link:hover::before,
#footer\#3 .el-link:focus::before,
.k21-social-mask .el-link:hover::before,
.k21-social-mask .el-link:focus::before {
    background-color: var(--k21-yellow, #E9B446);
}

/* tvar symbolu podla siete (podla href, trieda nie je k dispozicii) */
.tm-header ul.uk-flex-inline > li > a[href*="facebook.com"]::before,
.tm-header-mobile #module-124 .el-link[href*="facebook.com"]::before,
#footer\#2 .el-link[href*="facebook.com"]::before,
#footer\#3 .el-link[href*="facebook.com"]::before,
.k21-social-mask .el-link[href*="facebook.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2058%2040%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M52.2808%200H5.19545C2.33419%200%200%202.35929%200%205.2331V34.561C0%2037.4474%202.33419%2039.7941%205.19545%2039.7941H52.2682C55.1295%2039.7941%2057.4637%2037.4348%2057.4637%2034.561V5.2331C57.4637%202.35929%2055.1295%200%2052.2682%200%20M30.4487%2012.9611V15.9687H35.1383L34.6092%2021.0909H30.4487V34.1786H24.268V21.0909H21.334V15.9687H24.268V12.6556C24.268%2010.2824%2025.4224%206.56996%2030.4968%206.56996H35.0662V11.5513H31.7474C31.1942%2011.5513%2030.4487%2011.8097%2030.4487%2012.9611Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2058%2040%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M52.2808%200H5.19545C2.33419%200%200%202.35929%200%205.2331V34.561C0%2037.4474%202.33419%2039.7941%205.19545%2039.7941H52.2682C55.1295%2039.7941%2057.4637%2037.4348%2057.4637%2034.561V5.2331C57.4637%202.35929%2055.1295%200%2052.2682%200%20M30.4487%2012.9611V15.9687H35.1383L34.6092%2021.0909H30.4487V34.1786H24.268V21.0909H21.334V15.9687H24.268V12.6556C24.268%2010.2824%2025.4224%206.56996%2030.4968%206.56996H35.0662V11.5513H31.7474C31.1942%2011.5513%2030.4487%2011.8097%2030.4487%2012.9611Z%22/%3E%3C/svg%3E");
}

.tm-header ul.uk-flex-inline > li > a[href*="youtube.com"]::before,
.tm-header-mobile #module-124 .el-link[href*="youtube.com"]::before,
#footer\#2 .el-link[href*="youtube.com"]::before,
#footer\#3 .el-link[href*="youtube.com"]::before,
.k21-social-mask .el-link[href*="youtube.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2058%2040%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M52.2808%200H5.19545C2.33419%200%200%202.35929%200%205.2331V34.561C0%2037.4474%202.33419%2039.7941%205.19545%2039.7941H52.2682C55.1295%2039.7941%2057.4637%2037.4348%2057.4637%2034.561V5.2331C57.4637%202.35929%2055.1295%200%2052.2682%200%20M37.3602%207.5298H19.0696C15.4707%207.5298%2012.5493%2010.5049%2012.5493%2014.1699V24.7336C12.5493%2028.3986%2015.4707%2031.3736%2019.0696%2031.3736H37.4025C41.0014%2031.3736%2043.9228%2028.3986%2043.9228%2024.7336V14.1699C43.8805%2010.5049%2040.959%207.5298%2037.3602%207.5298ZM24.5314%2025.0354V13.8249L33.592%2019.4302L24.5314%2025.0354Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2058%2040%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M52.2808%200H5.19545C2.33419%200%200%202.35929%200%205.2331V34.561C0%2037.4474%202.33419%2039.7941%205.19545%2039.7941H52.2682C55.1295%2039.7941%2057.4637%2037.4348%2057.4637%2034.561V5.2331C57.4637%202.35929%2055.1295%200%2052.2682%200%20M37.3602%207.5298H19.0696C15.4707%207.5298%2012.5493%2010.5049%2012.5493%2014.1699V24.7336C12.5493%2028.3986%2015.4707%2031.3736%2019.0696%2031.3736H37.4025C41.0014%2031.3736%2043.9228%2028.3986%2043.9228%2024.7336V14.1699C43.8805%2010.5049%2040.959%207.5298%2037.3602%207.5298ZM24.5314%2025.0354V13.8249L33.592%2019.4302L24.5314%2025.0354Z%22/%3E%3C/svg%3E");
}

.tm-header ul.uk-flex-inline > li > a[href*="instagram.com"]::before,
.tm-header-mobile #module-124 .el-link[href*="instagram.com"]::before,
#footer\#2 .el-link[href*="instagram.com"]::before,
#footer\#3 .el-link[href*="instagram.com"]::before,
.k21-social-mask .el-link[href*="instagram.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2058%2040%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M52.2808%200H5.19545C2.33419%200%200%202.35929%200%205.2331V34.561C0%2037.4474%202.33419%2039.7941%205.19545%2039.7941H52.2682C55.1295%2039.7941%2057.4637%2037.4348%2057.4637%2034.561V5.2331C57.4637%202.35929%2055.1295%200%2052.2682%200%20M32.8572%2019.5522C32.8572%2017.0749%2030.8396%2015.0317%2028.3367%2015.0317C25.8338%2015.0317%2023.8417%2017.0493%2023.8417%2019.5522C23.8417%2022.0551%2025.8593%2024.0728%2028.3367%2024.0728C30.814%2024.0728%2032.8572%2022.0551%2032.8572%2019.5522ZM36.9181%2012.3245C36.9181%2013.0651%2036.3051%2013.6781%2035.5645%2013.6781C34.8238%2013.6781%2034.2108%2013.0651%2034.2108%2012.3245C34.2108%2011.5838%2034.8238%2010.9708%2035.5645%2010.9708C36.3051%2010.9708%2036.9181%2011.5838%2036.9181%2012.3245ZM35.1047%2019.5522C35.1047%2023.2811%2032.0655%2026.3203%2028.3367%2026.3203C24.6078%2026.3203%2021.5686%2023.2811%2021.5686%2019.5522C21.5686%2015.8234%2024.6078%2012.7842%2028.3367%2012.7842C32.0655%2012.7842%2035.1047%2015.8234%2035.1047%2019.5522ZM39.1656%2025.8606V13.2439C39.1656%2010.741%2037.1479%208.72333%2034.645%208.72333H22.0283C19.5254%208.72333%2017.5078%2010.741%2017.5078%2013.2439V25.8606C17.5078%2028.3635%2019.5254%2030.3811%2022.0283%2030.3811H34.645C37.1479%2030.3811%2039.1656%2028.3635%2039.1656%2025.8606ZM41.4131%2026.3203C41.4131%2029.7937%2038.5782%2032.6286%2035.1047%2032.6286H21.5686C18.0696%2032.6286%2015.2603%2029.7937%2015.2603%2026.3203V12.7842C15.2603%209.31075%2018.0952%206.47582%2021.5686%206.47582H35.1047C38.6037%206.47582%2041.4131%209.31075%2041.4131%2012.7842V26.3203Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2058%2040%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M52.2808%200H5.19545C2.33419%200%200%202.35929%200%205.2331V34.561C0%2037.4474%202.33419%2039.7941%205.19545%2039.7941H52.2682C55.1295%2039.7941%2057.4637%2037.4348%2057.4637%2034.561V5.2331C57.4637%202.35929%2055.1295%200%2052.2682%200%20M32.8572%2019.5522C32.8572%2017.0749%2030.8396%2015.0317%2028.3367%2015.0317C25.8338%2015.0317%2023.8417%2017.0493%2023.8417%2019.5522C23.8417%2022.0551%2025.8593%2024.0728%2028.3367%2024.0728C30.814%2024.0728%2032.8572%2022.0551%2032.8572%2019.5522ZM36.9181%2012.3245C36.9181%2013.0651%2036.3051%2013.6781%2035.5645%2013.6781C34.8238%2013.6781%2034.2108%2013.0651%2034.2108%2012.3245C34.2108%2011.5838%2034.8238%2010.9708%2035.5645%2010.9708C36.3051%2010.9708%2036.9181%2011.5838%2036.9181%2012.3245ZM35.1047%2019.5522C35.1047%2023.2811%2032.0655%2026.3203%2028.3367%2026.3203C24.6078%2026.3203%2021.5686%2023.2811%2021.5686%2019.5522C21.5686%2015.8234%2024.6078%2012.7842%2028.3367%2012.7842C32.0655%2012.7842%2035.1047%2015.8234%2035.1047%2019.5522ZM39.1656%2025.8606V13.2439C39.1656%2010.741%2037.1479%208.72333%2034.645%208.72333H22.0283C19.5254%208.72333%2017.5078%2010.741%2017.5078%2013.2439V25.8606C17.5078%2028.3635%2019.5254%2030.3811%2022.0283%2030.3811H34.645C37.1479%2030.3811%2039.1656%2028.3635%2039.1656%2025.8606ZM41.4131%2026.3203C41.4131%2029.7937%2038.5782%2032.6286%2035.1047%2032.6286H21.5686C18.0696%2032.6286%2015.2603%2029.7937%2015.2603%2026.3203V12.7842C15.2603%209.31075%2018.0952%206.47582%2021.5686%206.47582H35.1047C38.6037%206.47582%2041.4131%209.31075%2041.4131%2012.7842V26.3203Z%22/%3E%3C/svg%3E");
}

/* rozmery dlazdic podla Figmy (prepisuju 56x40 / 32x32 / 34x30 povodne) */
.tm-header ul.uk-flex-inline > li > a.uk-icon-link {
    width: 57.46px;
    height: 39.79px;
}

.tm-header-mobile #module-124 .el-link {
    width: 44.76px !important;
    height: 31px !important;
    border-radius: 6px !important;
}

.tm-header-mobile #module-124 .el-item {
    padding-left: 19px !important;
}

#footer\#2 .el-link {
    width: 57.46px !important;
    height: 39.79px !important;
}

#footer\#2 {
    margin-left: -6.8px !important;
}

#footer\#2 .el-item {
    padding-left: 6.8px !important;
}

#footer\#3 .el-link {
    width: 37.41px !important;
    height: 25.9px !important;
}

#footer\#3 {
    margin-left: -4.55px !important;
}

#footer\#3 .el-item {
    padding-left: 4.55px !important;
}

/* poradie ikon v desktopovej paticke: FB - IG - YT (potvrdene vo Figme) */
#footer\#2 .el-item:nth-child(1) { order: 1; }
#footer\#2 .el-item:nth-child(2) { order: 3; }
#footer\#2 .el-item:nth-child(3) { order: 2; }


/* ===========================================================================
   Kulturak21 -- oprava socialnych ikon: hover, centrovanie, responsive medzera
   Nadvazuje na W-19 (2026-10-08, maskova technika socialnych ikon)
   ---------------------------------------------------------------------------
   1) MOBILNY HEADER - hover bug: stare pravidlo (cca riadok 503) prepisovalo
      pozadie odkazu na rovnaku zltu ako dlazdica pri hover -> ikona sa
      strati (splyne do jednej farebnej plochy). Fix: na hover necha pozadie
      odkazu priehladne, aby cez "dieru" v maske presvital tmavy podklad
      headra (kontrast oproti zltej dlazdici).
   2) MOBILNY HEADER - centrovanie: #module-124 uz mal justify-content:center,
      ale <ul> mal zdedeny margin-left:-15px (UIkit "grid stack" kompenzacia
      prveho prvku), ktory stred posuval mimo stred. Fix: margin-left:0 +
      vlastny justify-content:center priamo na <ul> (centruje aj druhy
      riadok, ak sa 3 ikony pri danej sirke nezmestia na jeden riadok vedla
      loga a hamburger menu).
   3) PATICKA (mobilna verzia, #footer#3) - horizontalne centrovanie ikon.
   4) RESPONSIVE MEDZERA (novo zistene): socialne ikony v paticke v rozsahu
      sirky okna cca 640px-1199px UPLNE ZMIZNU. Mobilna verzia paticky
      (#footer#3) ma triedu uk-hidden@s (skryje sa od 640px), desktopova
      verzia (#footer#2) ma uk-visible@l (zobrazi sa az od 1200px) - medzi
      tym nie je vidno ziadne ikony a riadok nad nimi "skolabuje"/posunie sa
      hore. Toto je pravdepodobne to "vyskocenie hore" pri zmene sirky okna.
      Fix: v tomto rozsahu vynuti zobrazenie mobilneho (#footer#3) riadku.
   =========================================================================== */

.tm-header-mobile #module-124 .el-link:hover,
.tm-header-mobile #module-124 .el-link:focus {
    background-color: transparent !important;
    color: inherit !important;
}

.tm-header-mobile #module-124 ul {
    margin-left: 0 !important;
    justify-content: center !important;
}

#footer\#3 {
    text-align: center !important;
}

@media (min-width: 640px) and (max-width: 1199px) {
    .uk-grid.uk-hidden\@s:has(#footer\#3) {
        display: flex !important;
    }
}


/* ===========================================================================
   Kulturak21 -- W-21: cierna lista mobilnej hlavicky bez loga (2026-10-08)
   ---------------------------------------------------------------------------
   Zadanie: cierna lista ma obsahovat LEN hamburger menu a socialne ikony
   (lupa sa nerobi vobec). Logo pojde samostatne, v bielom pase NAD cierny
   listou -- to je samostatna uloha, zatial neriesena (pozri kapitolu 7
   bod 6 / 17.1). Dovtedy logo v ciernej liste jednoducho skryvame.

   Predtym zaberal natívny .uk-logo prvok (cierne logo-black.png, ked je
   Customizer pole Site -> Mobile Logo prazdne, alebo logo-white.png, ked
   je vyplnene) stale cca 140-180px miesta v ciernej liste, aj ked bol
   vizualne neviditelny/neziaduci -- to tlacilo socialne ikony do uzkeho
   priestoru a nutilo ich lamat sa na viac riadkov. Teraz sa .uk-logo v
   mobilnej hlavicke rovno skryva cez CSS (nezavisle od Customizer pola)
   a #module-124 (socialne ikony) dostane celu dostupnu sirku po hamburger,
   takze sa vsetky 3 ikony zmestia na JEDEN riadok a su centrovane v ramci
   celej ciernej listy. Overene naziv (vstavany panel, 375px): ikony v
   jednom riadku, stred cca x=163 pri strede listy x=157.5 (rozdiel ~5px),
   hamburger ostava presne pri pravom okraji, ziadny pretek.
   =========================================================================== */

.tm-header-mobile .uk-logo {
    display: block !important;
    position: absolute;
    top: calc(-5.06px - 24.86vw);
    left: var(--k21-nav-padding, 20px);
    right: var(--k21-nav-padding, 20px);
    z-index: 1;
}

.tm-header-mobile .uk-logo img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

.tm-header-mobile .uk-navbar-left {
    flex: 1 1 auto !important;
}

.tm-header-mobile #module-124 {
    flex: 1 1 auto !important;
}

/* ===========================================================================
   Kulturak21 -- W-22: mobilne rozbalovacie menu -- vacsie rozostupy polozok
   a explicitny font-size 20px (2026-10-08)
   ---------------------------------------------------------------------------
   Zadanie: polozky hlavneho mobilneho menu (#tm-dialog-mobile) maju byt od
   seba vzdialenejsie, velkost pisma 20px -- podla Figma referencie
   "iPhone 17 - K21 HOME MENU" (node 194:3813), ktoru pouzivatel poslal ako
   screenshot (AKTUALITY/PROGRAM/KURZY/PRE SKOLY/PRENAJMY/GALERIA/O NAS/
   KONTAKTY na ciernom pozadi, velke medzery).

   Odmerane priamo vo Figme cez Chrome (Figma MCP limit na Starter plane
   vycerpany, vid Upravy_CSS_na_webstranke.md kapitola 4 -- zavazny postup
   od 7.10.): vybrany text layer s polozkami menu ma Font Grato Grotesk,
   Weight 400, Size 20px, Line height 100%, Case Uppercase, Align Center --
   to uz custom.css ma (text-transform:uppercase, text-align/justify:center),
   chybal len font-size a rozostup. Zmeranim stred-na-stred vzdialenosti
   textovych riadkov (zoom screenshot, prepocet cez znamu sirku ramceka
   287px/470 zoomovanych px) vyslo rovnomerne rozpatie ~54px medzi
   polozkami vo vsetkych 7 medzerach.

   Povodne (W-19/kapitola 9, blok v3) malo pravidlo
   #tm-dialog-mobile .uk-nav > li > a len padding: 3px var(--k21-nav-padding)
   a ziadny explicitny font-size (dedil sa default) -- rozstup v praxi len
   cca 30px. Teraz font-size 20px + line-height:1 (zodpoveda Figma "100%",
   Vertical trim Cap height) + padding 17px hore/dole: 20 + 17 + 17 = 54px,
   presne sediaci s odmeranym rozpatim. Horizontalny padding ostava
   nezmeneny (var(--k21-nav-padding, 20px)).

   Rozsah: len hlavne polozky menu (#tm-dialog-mobile .uk-nav > li > a).
   Submenu polozky (.uk-nav-sub a) nie su sucastou tejto poziadavky,
   nechane bez zmeny.
   =========================================================================== */

#tm-dialog-mobile .uk-nav > li > a {
    font-size: 20px;
    line-height: 1;
    padding: 17px var(--k21-nav-padding, 20px);
}

/* ===========================================================================
   Kulturak21 -- W-23: socialne ikony v ciernej liste -- centrovanie v ramci
   CELEJ sirky listy, nie len priestoru pred hamburger/X tlacidlom
   (2026-10-08)
   ---------------------------------------------------------------------------
   Zadanie: po W-22 pouzivatel nahlasil, ze socialne ikony (FB/YT/IG) v
   ciernej liste (viditelne aj v zatvorenom aj v otvorenom stave mobilneho
   menu, kedze je to ten isty #module-124 element) niesu na strede --
   su posunute dolava, pretoze W-21 ich centrovalo len v ramci priestoru
   PRED hamburger/X tlacidlom (0-315px z celkovych 375px), nie v ramci
   celej 375px sirky.

   Priciny (zistene meranim DOM v builtin paneli, 375px):
   - `.uk-navbar-left` (W-21) ma flex:1 1 auto, co ju natiahne len po
     hranicu `.uk-navbar-toggle` (hamburger/X), teda 0-315px -- toggle sam
     ma pevnu sirku 60px a je sucastou tej istej flex riadky (.uk-navbar,
     display:flex, justify-content:normal).
   - Vnutri tohto 0-315px boxu bolo `#module-124` centrovane na jeho
     stred (157.5px), nie na stred celej 375px listy (187.5px) -- rozdiel
     presne 30px, presne to, co pouzivatel videl ako "posunute".

   Riesenie: `#module-124` (vnoreny v .uk-navbar-left, ktory ma position:
   static) sa prepne na `position:absolute` s `top/right/bottom/left:0` --
   CSS containing block pre position:absolute hlada NAJBLIZSIEHO predka
   s position != static, co je priamo `.uk-navbar` (nie .uk-navbar-left,
   ten zostava static), a `.uk-navbar` uz ma natívne position:relative a
   sirku CELEJ listy (0-375px). Tym padom sa #module-124 centruje (uz
   existujucim justify-content:center) v ramci celych 375px, nezavisle od
   toho, kde zacina/konci hamburger/X tlacidlo. `.uk-navbar-left` sama
   zostava flex:1 1 auto (z W-21) -- to je dolezite ponechat, lebo prave
   vdaka tomu ostava hamburger/X tlacidlo pripnute na pravom okraji (ked
   by sa mu vzala flex-rozpera, flexbox by ho posunul k lavemu okraju).

   Past: absolutne pozicovany #module-124 teraz prekryva svojim (priehlad-
   nym) boxom aj priestor pod hamburger/X tlacidlom (315-375px), a
   pozicovane prvky sa v default stacking order vykresluju NAD statickymi
   -- aj ked su v DOM pred nim. Bez osetrenia by to zablokovalo klikanie
   na hamburger/X. Oprava: `pointer-events:none` na wrapperi, `pointer-
   events:auto` len na samotnych odkazoch ikon (`a`) -- klik cez
   priehladnu plochu prejde na tlacidlo pod nou, ikony ostavaju klikatelne.

   Overene naživo (vstavany panel, 375px, zatvoreny aj otvoreny stav menu):
   skupina ikon teraz stred ~188px (cielovy stred listy 187.5-187.7px,
   rozdiel <1px), hamburger/X ostava presne na pravom okraji a je
   funkcny (otestovany klik na X, menu sa korektne zatvorilo).
   =========================================================================== */

.tm-header-mobile #module-124 {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.tm-header-mobile #module-124 a {
    pointer-events: auto;
}


/* ===================================================================
   Kulturak21 -- W-07: mobilne logo v bielom pase NAD ciernou listou
   (Figma 194:3576 / 194:3580, frame "iPhone 17 - K21 HOME"; lupa sa
   nerobi -- vyhladavanie je v rozbalovacom menu, rozhodnutie Lukasa
   8.10.2026)
   2026-10-08
   -------------------------------------------------------------------
   Zivo overene pred implementaciou:
   - Biely pas vo Figme: obsah loga (skupina "Layer_1") ma 362x89 px,
     odsadeny 17px zhora / 20px zlava. Cely biely blok pozadia ale ide
     0-132px (overene cez cierny "Rectangle 78", ktory v ramci 402px
     Figma plátna zacina na top:132px, vyska 71px).
   - Logo s podtitulom "Stredisko kultury Bratislava-Nove Mesto" je vo
     Figme jeden zlúčený vektor (nie samostatný text) -- zhoduje sa so
     SVG exportom grafika: images/kulturak21/logo/logo_black.svg,
     viewBox 0 0 362 90 -- presne 1:1 s Figmou. Nastavene v
     Website Builderi: Site -> Mobile Logo (Optional) = logo_black.svg,
     takze .uk-logo uz obsahuje spravny obrazok, tu sa riesi len layout.
   - Sticky/show-on-up: mobilna hlavicka ma
     <div uk-sticky show-on-up ... sel-target=".uk-navbar-container">
     -- teda prave .uk-navbar-container (nie .tm-header-mobile) sa pri
     scrolle hore pripne hore so sklzom. Preto biely pas pridavam AKO
     SUCAST .uk-navbar-container (padding-top + ::before pozadie), nie
     do vonkajsieho <header>, aby sa pri scroll-up ukazal spolu s
     ciernou listou. Vnutro nav.uk-navbar (cierna lista, #module-124
     absolute-hack z W-23) sa vobec nemeni.
   ------------------------------------------------------------------- */

.tm-header-mobile .uk-navbar-container {
    position: relative;
    background: #fff !important;
    padding-top: calc(22.06px + 24.86vw);
}

.tm-header-mobile .uk-navbar-container nav.uk-navbar {
    background: #000;
}

/* 2026-10-09 doplnenie: povodny pevny padding-top:132px + ::before biele
   pozadie nahradene vzorcom zavislym od vw -- logo (width:100% svojho
   ramca) sa so sirkou obrazovky responzivne skaluje, takze aj biely pas
   nad ciernou listou musi rovnako rast/klesat, inak pri sirsich mobiloch
   logo pretieklo do ciernej listy (zistil a nahlasil Lukas, 2 screenshoty
   375 vs 687px). Vzorec: 17px odsadenie zhora + vyska loga (pomer 362:90,
   t.j. 24.86 % sirky ramca po odratani 2x20px bocneho padding) + 40px
   priestor zdola. Cierne pozadie presunute z .uk-navbar-container priamo
   na nav.uk-navbar (predtym malo nav.uk-navbar pozadie transparentne a
   ciernu farbu poskytoval container), takze sa ::before uz nepotrebuje.
   top loga (vyssie v subore, riadok ~840) prepocitany rovnakym vzorcom:
   17px (cielova pozicia v containeri) - padding-top(vw) = -30px - 24.86vw. */


/* ===========================================================================
   Kulturak21 -- W-29: znovupouzitelna trieda .k21-social-mask
   Nadvazuje na W-19 (technika socialnych ikon cez CSS mask, viz vyssie).
   2026-10-09
   ---------------------------------------------------------------------------
   Doteraz bola W-19 technika naviazana len na 4 konkretne existujuce
   kontajnery (.tm-header hlavicka, .tm-header-mobile #module-124,
   #footer#2, #footer#3) -- novy Social element inde na stranke preto
   nezafungoval (Lukas skusal 9.10.2026). Vsetky zakladne pravidla vyssie
   (reset, maska, farby, hover, 3x siet) su teraz rozsirene o 5. selektor
   ".k21-social-mask .el-link" (viz diff), takze staci PRIDAT triedu
   "k21-social-mask" do poľa Module Class pri akomkolvek dalsom module so
   Social elementom a automaticky dostane rovnaky vzhlad -- bez dalsej
   upravy custom.css. Rozmery/medzery nizsie zodpovedaju #footer#2
   (desktopova paticka, 57.46x39.79 px dlazdica).
   =========================================================================== */

.k21-social-mask .el-link {
    width: 57.46px !important;
    height: 39.79px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.k21-social-mask {
    margin-left: -6.8px !important;
}

.k21-social-mask .el-item {
    padding-left: 6.8px !important;
}

/* ==========================================================================
   W-41 — Mobilné menu (#tm-dialog-mobile, čierne pozadie): pole vyhľadávania
   Text sa písal čiernou na čiernom → biely text, svetlý rámik, biela lupa.
   2026-10-11
   ========================================================================== */
#tm-dialog-mobile .uk-search-input,
#tm-dialog-mobile .uk-search-input:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}
#tm-dialog-mobile .uk-search-input:focus {
    border-color: #fff;
}
#tm-dialog-mobile .uk-search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}
#tm-dialog-mobile .uk-search-icon,
#tm-dialog-mobile .uk-search-icon:hover {
    color: #fff;
}

/* W-50 (2026-10-14, grafik str. 2): zeleny box na HOME bez linky */
.uk-card-secondary,
.uk-card-secondary.uk-card-hover:hover {
    border-color: transparent;
}

/* 2026-10-14: spolocna velkost UI textu (tlacidla, tagy) */
:root {
    --k21-ui-font-size: 16px;
}
.uk-button,
.uk-button-small {
    font-size: var(--k21-ui-font-size);
}
/* 2026-10-14: tlacidla YOOthemu vysoke 40 px ako tlacidla Programu */
.uk-button:not(.uk-button-small) {
    line-height: 40px;
}
/* W-49 (2026-10-14): hover v menu rovnako vyrazny ako aktivna polozka */
.tm-header .uk-navbar-nav > li > a:hover::after,
.tm-header .uk-navbar-nav > li > a[aria-expanded="true"]::after,
.uk-offcanvas-bar .uk-nav > li:hover > a {
    border-color: #fff;
}
/* E-35 (2026-10-14, Lukas 19:20): spolocna velkost gulocky v stitkoch a filtroch */
:root { --k21-ui-dot-size: 12px; }
/* W-48 / D-26 (2026-10-19): spolocne premenne typografie - jediny zdroj pravdy */
:root {
    --k21-title-size: 32px;
    --k21-ui-border: 1px;
    --k21-btn-weight: 400;
}
/* mensie nazvy Baste B (H2) jednotne */
h2, .uk-h2 { font-size: var(--k21-title-size); }
/* tlacidla Regular ako horne menu */
.uk-button { font-weight: var(--k21-btn-weight); }
/* nadpisy sekcii z pluginu ako "Este sa deje" (24 px, Regular, bez verzalok) */
html .k21-hero__heading,
html .k21-ev-heading {
    font-family: "Grato Grotesk", sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: none;
}
/* W-71 (2026-10-19): mobilne menu - polozky biele ako na PC (predtym rgba .7) */
#module-menu-dialog-mobile .uk-nav > li > a,
#module-menu-dialog-mobile .uk-nav > li > a:hover,
#module-menu-dialog-mobile .uk-nav > li.uk-active > a { color: #fff; }
/* W-53 (2026-10-19, grafik str. 8 PC): medzera medzi riadkami filtrov = medzera nad filtrami (30 px), len od 960 px; na mobile ostava 10 px (Lukas 21:30) */
@media (min-width: 960px) {
    html .k21-ev-filters__row { row-gap: 30px; }
    html .k21-ev-filters__row:not(:last-child) { margin-bottom: 30px; }
}
/* W-54 (2026-10-19, grafik str. 13): stitky PANEL (.k21-tag) rovnako velke ako .k21-ev-tag (40 px, odsadenie 16 px) */
.k21-tag { min-height: 40px; padding: 0 16px; }
/* W-82 (2026-10-20, Lukas): Kontakty - ikony FB/IG zarovno s textom (po W-75 uz text nema posun -15 px) */
.k21-social-mask { margin-left: 0 !important; }
.k21-social-mask > .uk-grid { margin-left: -6.8px; }
/* W-89 (2026-10-21, grafik kor02 str. 6): jednotny sivy hover kariet (Figma 60 % z #E6E1DC) */
:root { --k21-hover-bg: #F0EDEA; }
/* W-87 (2026-10-21, kor02 str. 13): pole vo vysledkoch vyhladavania s plne oblymi rohmi ako v hlavicke */
#tm-main .uk-search .uk-search-input { border-radius: 999px; }
/* W-88 (2026-10-21, mobil kor02 str. 1): dlhy H1 v detaile aktuality na mobile nepretecie */
@media (max-width: 639px) {
    .k21-akt-title { font-size: 40px !important; overflow-wrap: anywhere; hyphens: auto; }
}