/*
 * Teatr Komedia, warstwa wygladu motywu.
 *
 * Tu siedza reguly, ktore dotycza markupu BeTheme, a nie markupu tej wtyczki:
 * baner hero ze slidera, miekkie przejscia miedzy sekcjami i nagłowek.
 * Markup wlasny wtyczki (karty repertuaru, metryka, pasek zakupu) ma osobny
 * plik styl.css i tak zostaje.
 *
 * DLACZEGO TO NIE JEST JUZ W THEME OPTIONS (przeniesione 2026-10-14).
 * Wczesniej te reguly jechaly w polu Custom CSS, czyli w bazie, wgrywane
 * presetem. Trzy powody, dla ktorych to bylo zle miejsce:
 *
 *  1. Przelacznik "Static CSS" wylacza wypisywanie Custom CSS w <head>
 *     i przenosi je do pliku uploads/betheme/css/static.css, ktory powstaje
 *     WYLACZNIE przy zapisie z panelu. Preset wchodzi do bazy z pominieciem
 *     panelu, wiec na takiej instalacji CSS po prostu nie dociera na strone.
 *  2. Adres tego pliku nie ma znacznika wersji (wp_enqueue_style z
 *     MFN_THEME_VERSION), wiec po kazdej regeneracji przegladarka moze
 *     dlugo podawac stara wersje.
 *  3. Poprawka wygladu po wyjsciu na produkcje wymagalaby albo klikania
 *     w panelu, albo ponownej migracji bazy, czyli nadpisania tresci klienta.
 *
 * Tutaj jest to zwykly plik: wdraza sie podmiana katalogu wtyczki, ma wersje
 * z KOMEDIA_BILETOMAT_WERSJA (czyli cache sam sie unie­waznia) i nie da sie
 * tego skasowac klikaniem w ustawieniach motywu.
 */

/* === HERO SLIDER ====================================================== */
/* Natywny item "slider" BeTheme w stylu description to zwykly slider z
   podpisem POD zdjeciem, a hero teatru ma byc banerem. Ponizsze reguly
   kladą tytul, opis i przycisk na fotografii, bez ruszania markupu motywu.
   Markup jednego slajdu: li > img + h2.title + div.desc

   UWAGA na specyficznosc: motyw adresuje te elementy przez
   .content_slider.flat.description, czyli cztery klasy. Nasze reguly musza
   miec tyle samo, inaczej przegrywaja (padding opisu wracal do 0 20% i
   przycisk ladowal pod kropkami slidera). */

/* Trzy rzeczy odbieraja hero pelna szerokosc i trzeba je zdjac po kolei:
   motyw rezerwuje 140 px po bokach slidera na strzalki, kolumna BeBuildera
   dokłada wlasny margines 12 px, a slick wstrzykuje kazdemu slajdowi
   display:inline-block stylem inline, wiec grid wchodzi tylko z !important. */
.column_slider > .mcb-column-inner { margin: 0 !important; }

.content_slider.flat.description { position: relative; margin: 0; padding: 0 !important; }

.content_slider.flat.description .content_slider_li {
  display: grid !important;
  grid-template-rows: 1fr auto auto;
  position: relative;
  height: clamp(440px, 64vh, 700px);
  text-align: center;
}

/* Zdjecie rozpiete na wszystkie rzedy, wiec tekst lezy na nim, a nie pod nim. */
.content_slider.flat.description .content_slider_li > img {
  grid-area: 1 / 1 / -1 / 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
}

/* Przyciemnienie od dolu, zeby bialy tekst wyrobil kontrast na kazdym kadrze. */
.content_slider.flat.description .content_slider_li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,9,11,.28) 0%, rgba(16,9,11,.52) 45%, rgba(16,9,11,.84) 100%);
  pointer-events: none;
}

.content_slider.flat.description .content_slider_li .title,
.content_slider.flat.description .content_slider_li .desc {
  grid-column: 1;
  position: relative;
  z-index: 2;
  color: #FFFFFF;
  margin: 0;
  padding: 0 8%;
}

.content_slider.flat.description .content_slider_li .title {
  grid-row: 2;
  color: #FFFFFF;
  margin-bottom: 16px;
  text-shadow: 0 2px 18px rgba(16,9,11,.55);
}

.content_slider.flat.description .content_slider_li .desc {
  grid-row: 3;
  padding-bottom: 84px;
  line-height: 1.6;
}

.content_slider.flat.description .content_slider_li .desc p {
  color: #EFE7E4;
  max-width: 740px;
  margin: 0 auto 26px;
}

/* Motyw rozbiera przycisk w sliderze do golego linku 40 px ustawionego
   absolutnie (.content_slider.flat a.button). Skladamy go z powrotem. */
.content_slider.flat.description .desc a.button {
  position: static !important;
  display: inline-block !important;
  top: auto !important;
  margin: 0 !important;
  font-size: 17px !important;
  opacity: 1 !important;
  background-color: #D81E2C !important;
  color: #FFFFFF !important;
}
.content_slider.flat.description .desc a.button:hover {
  background-color: #A4121E !important;
}

/* Strzalki i kropki na zdjeciu, nie obok niego. */
.content_slider.flat.description .slider_prev,
.content_slider.flat.description .slider_next {
  z-index: 3;
  color: #FFFFFF;
  opacity: .75;
}
.content_slider.flat.description .slider_prev { left: 26px; }
.content_slider.flat.description .slider_next { right: 26px; }
.content_slider.flat.description .slider_prev:hover,
.content_slider.flat.description .slider_next:hover { opacity: 1; }

/* Kropki motywu sa czarne na 15 procentach krycia, czyli na ciemnym zdjeciu
   nie widac ich wcale. Na banerze musza byc biale. */
.content_slider.flat.description .slider_pagination .slick-dots li a {
  background-color: rgba(255,255,255,.45) !important;
}
.content_slider.flat.description .slider_pagination .slick-dots li a:hover,
.content_slider.flat.description .slider_pagination .slick-dots li.slick-active a {
  background-color: #FFFFFF !important;
}

.content_slider.flat.description .slider_pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 3;
  margin: 0;
}

/* Zanim slick wystartuje (0.7.4, CLS 0.204 w PageSpeed).
   Motyw chowa liste slajdow do inicjalizacji (opacity 0, max-height 300 px),
   a slajdy plywaja (float), wiec lista ma 0 px wysokosci. Po starcie slidera
   rosnie do 520-700 px i spycha cala strone w dol. Pokazujemy od razu pierwszy
   slajd w docelowym rozmiarze, reszte chowamy. Slick po starcie dodaje klase
   slick-slider i te reguly przestaja dzialac. Przy okazji pierwszy slajd jest
   widoczny wczesniej, a nie dopiero po zaladowaniu skryptow. */
.content_slider.flat.description .content_slider_ul:not(.slick-slider) {
  opacity: 1;
  max-height: none;
}
.content_slider.flat.description .content_slider_ul:not(.slick-slider) .content_slider_li { float: none; }
.content_slider.flat.description .content_slider_ul:not(.slick-slider) .content_slider_li:not(:first-child) { display: none !important; }

@media only screen and (max-width: 767px) {
  .content_slider.flat.description .content_slider_li { height: clamp(380px, 72vh, 520px); }
  .content_slider.flat.description .content_slider_li .title,
  .content_slider.flat.description .content_slider_li .desc { padding-left: 24px; padding-right: 24px; }
  .content_slider.flat.description .content_slider_li .desc { padding-bottom: 76px; }
  .content_slider.flat.description .slider_prev,
  .content_slider.flat.description .slider_next { display: none !important; }
}

/* === MIEKKIE PRZEJSCIA MIEDZY SEKCJAMI ================================ */
/* Klient prosil o "bardzo lekkie urozmaicenie tla". Faktura papieru zalatwia
   plaskosc plaszczyzny, ale nie zalatwia GRANICY: krem #F2ECE8 zaczynal sie
   ostra, prosta krecha na cieplej bieli #FAF7F4 i to ona najmocniej czytala
   sie jako "dwa prostokaty". Ponizsze reguly rozpuszczaja te krecha.

   Gradient idzie pseudoelementem, a nie jako drugie tlo sekcji, bo tlo sekcji
   zajmuje juz kafelek faktury, a BeTheme kompiluje background-image sekcji
   z pojedynczej wartosci i doklada do niej url(). Pseudoelement omija caly ten
   mechanizm i trzyma regule w jednym miejscu, zamiast rozsypywac ja po
   css_advanced_* w kazdym ukladzie z osobna.

   Klasy nadaje generator ukladow kluczem 'klasy' na sekcji. Gora i dol sa
   osobno, bo nie kazda kremowa sekcja sasiaduje z biala z obu stron: pod
   niektorymi jest fotografia albo ciemna stopka, a tam rozjasnianie krawedzi
   daloby brudny pas zamiast przejscia. */

.komedia-przejscie-gora,
.komedia-przejscie-dol { position: relative; }

.komedia-przejscie-gora::before,
.komedia-przejscie-dol::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
}

.komedia-przejscie-gora::before {
  top: 0;
  background: linear-gradient(to bottom, #FAF7F4 0%, rgba(250,247,244,0) 100%);
}

.komedia-przejscie-dol::after {
  bottom: 0;
  background: linear-gradient(to top, #FAF7F4 0%, rgba(250,247,244,0) 100%);
}

/* Tresc sekcji musi zostac NAD gradientem. Bez tego pierwszy naglowek
   w sekcji laduje pod przejsciem i traci kontrast. */
.komedia-przejscie-gora > .section_wrapper,
.komedia-przejscie-gora > .mcb-section-inner,
.komedia-przejscie-dol > .section_wrapper,
.komedia-przejscie-dol > .mcb-section-inner { position: relative; z-index: 1; }

@media only screen and (max-width: 767px) {
  /* Na telefonie sekcje sa nizsze, wiec 120 px zjadaloby polowe sekcji. */
  .komedia-przejscie-gora::before,
  .komedia-przejscie-dol::after { height: 70px; }
}

/* === NAGLOWEK: pasek gorny, logo na srodku, menu pod spodem =========== */
/* Uklad robi generator ukladow (naglowek.yaml), tutaj jest tylko to, czego
   ustawieniami sekcji sie nie da: typografia paska dyzurnego i zachowanie
   menu, ktorego markup nalezy do motywu.
   Klasy nadaje generator kluczem 'klasy' na sekcji. */

/* Pasek dyzurny nad logiem: dyrektor po lewej, rezerwacje i adres po prawej.
   Maly i przygaszony, bo to informacja, a nie nawigacja. */
.komedia-pasek-gorny { font-size: 14px; letter-spacing: .01em; }
.komedia-pasek-gorny p { margin: 0; line-height: 1.5; }
.komedia-pasek-gorny a { color: inherit; text-decoration: none; }
.komedia-pasek-gorny a:hover { color: #D81E2C; }

/* Menu glowne: wieksze i pogrubione niz w pasku po przewinieciu.
   Zapis '> .mfn-menu-li >' trzyma te reguly przy pozycjach pierwszego poziomu,
   bo w rozwijanym submenu taki rozmiar rozsadzilby liste.
   Pas menu to od 14.10 jedna kolumna na pelna szerokosc: przycisk "Kup bilet"
   wylecial z naglowka, wiec menu nie potrzebuje juz kolumny-przeciwwagi
   i samo siedzi na srodku. */
.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li > .mfn-menu-link {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .015em;
  padding-left: 20px;
  padding-right: 20px;
}

/* Hover i pozycja aktywna: czerwona belka pod etykieta, wyjezdzajaca ze srodka.
   Sam kolor tekstu to za malo, bo przy pogrubionym kroju zmiana z grafitu
   na czerwien czyta sie jako drganie, a nie jako zaznaczenie. Belka daje
   jednoznaczna informacje, gdzie jestem i co wlasnie wskazuje kursor.
   Etykieta musi dostac position:relative, inaczej belka liczy pozycje
   wzgledem calego linku razem z paddingiem i wychodzi poza litery. */
.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li > .mfn-menu-link .menu-label {
  position: relative;
  display: inline-block;
}

.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li > .mfn-menu-link .menu-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  border-radius: 2px;
  background: #D81E2C;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li > .mfn-menu-link:hover .menu-label::after,
.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li.current-menu-item > .mfn-menu-link .menu-label::after,
.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li.current-menu-ancestor > .mfn-menu-link .menu-label::after,
.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li.current-page-ancestor > .mfn-menu-link .menu-label::after {
  transform: scaleX(1);
}

/* Strzalka rozwijania przy pozycji z podmenu nie moze rosnac razem z fontem,
   bo przy 22 px zaczyna konkurowac z etykieta. */
.komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li > .mfn-menu-link .mfn-menu-subicon i { font-size: 11px; }

/* --- pasek mobilny: logo na srodku ------------------------------------ */
/* Trzy kolumny: pusta, logo, burger. Kolumny boczne musza miec IDENTYCZNA
   szerokosc, inaczej logo nie jest na srodku, tylko na srodku tego, co zostalo
   po burgerze. flex-grow sam tego nie zalatwia: rozdziela wolne miejsce po
   rowno, ale punktem wyjscia jest szerokosc tresci, a jedna kolumna jest pusta.
   Ten sam blad zlapany wczesniej na desktopie, gdzie srodek menu wypadal 75 px
   w lewo. */
.komedia-pasek-mobilny .mcb-wrap:first-child,
.komedia-pasek-mobilny .mcb-wrap:last-child { flex: 0 0 54px !important; }
.komedia-pasek-mobilny .mcb-wrap:nth-child(2) { flex: 1 1 auto !important; }

/* Burger wiekszy: 44 px to minimalny komfortowy cel dotykowy, a ikona motywu
   startuje grubo ponizej. */
.komedia-pasek-mobilny .mfn-header-menu-burger .icon-wrapper i { font-size: 30px; }
.komedia-pasek-mobilny .mfn-header-menu-burger { padding: 7px; }

/* --- menu wysuwane spod burgera --------------------------------------- */
/* Panel boczny to osobny markup (.mfn-header-tmpl-menu-sidebar), wiec reguly
   pasa desktopowego go nie dotycza. Na telefonie pozycje maja byc duze
   i rozstrzelone: palec trafia w cala linie, nie w sam napis. */
.mfn-header-tmpl-menu-sidebar .mfn-header-menu > .mfn-menu-li > .mfn-menu-link {
  font-size: 22px;
  font-weight: 600;
  padding-top: 14px;
  padding-bottom: 14px;
}

.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-submenu .mfn-menu-link {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Zaznaczenie pozycji: to samo podkreslenie co w menu na desktopie, zeby
   serwis mowil jednym jezykiem.
   Pierwsza wersja miala czerwona belke przy lewej krawedzi linku i to byl blad
   widoczny dopiero na renderze: pozycje w panelu sa wysrodkowane, a link
   rozciaga sie na cala szerokosc panelu, wiec belka wisiala samotnie kilkadziesiat
   pikseli od napisu. Belka musi sie czepiac ETYKIETY, nie linku.
   Na telefonie kursora nie ma, wiec realnie pracuje stan aktywny; :hover i :focus
   zostaja dla tabletu z mysza i dla klawiatury. */
.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li > .mfn-menu-link .menu-label {
  position: relative;
  display: inline-block;
}

.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li > .mfn-menu-link .menu-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 2px;
  background: #D81E2C;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li > .mfn-menu-link:hover .menu-label::after,
.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li > .mfn-menu-link:focus .menu-label::after,
.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li.current-menu-item > .mfn-menu-link .menu-label::after,
.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li.current-menu-ancestor > .mfn-menu-link .menu-label::after {
  transform: scaleX(1);
}

.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li > .mfn-menu-link:hover,
.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li > .mfn-menu-link:focus,
.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li.current-menu-item > .mfn-menu-link,
.mfn-header-tmpl-menu-sidebar .mfn-header-menu .mfn-menu-li.current-menu-ancestor > .mfn-menu-link {
  color: #D81E2C;
}

/* Panel w kolorze strony, nie w domyslnej szarosci motywu. */
.mfn-header-tmpl-menu-sidebar .mfn-header-tmpl-menu-sidebar-wrapper { background: #FAF7F4; }

/* Krzyzyk zamykajacy panel tez jest celem dotykowym. */
.mfn-header-tmpl-menu-sidebar .mfn-close-icon .icon { font-size: 26px; }

/* Laptop: ten sam uklad, tylko ciasniej. Przy 1280 px menu przy 22 px
   z odstepami 20 px zaczyna dotykac krawedzi siatki. */
@media only screen and (min-width: 768px) and (max-width: 1439px) {
  .komedia-pas-menu .mfn-header-mainmenu > .mfn-menu-li > .mfn-menu-link {
    font-size: 19px;
    padding-left: 15px;
    padding-right: 15px;
  }
}