/* ==========================================================================
   ZAMEK KRÓLEWSKI W CHĘCINACH — user.css (napisany od nowa)
   Plik: media/templates/site/cassiopeia/css/user.css

   Spis treści:
     1. Import fontów
     2. Zmienne
     3. Nagłówek — pasek menu
     4. Menu DESKTOP: kolory, wyśrodkowanie, separatory SVG
     5. Menu ROZWIJANE (dropdown)
     6. Menu MOBILE: logo + przycisk „MENU" + flaga w jednej linii
     7. Typografia artykułów
     8. Ramka artykułu (rounded 10px, delikatny cień)
     9. Elementy dodatkowe artykułu (metadane, cytaty, tabele, readmore)
    10. Klocki zk-* (listy, ramki, kafelki, tabela godzin)
    11. Karta zk-sheet — samodzielne dokumenty
    12. Mobile — drobiazgi typograficzne
    13. Druk

   Wymagane pliki graficzne (zakłada się, że witryna stoi w katalogu
   głównym domeny):
     • images/separator.svg  — pionowy oddzielacz pozycji menu (10 × 40 px)
     • logo — wgrane w ustawieniach Cassiopei (Styl szablonu → Logo)

   Ścieżki w CSS są zapisane relatywnie z /media/templates/site/cassiopeia/css/.
   ========================================================================== */


/* ==========================================================================
   1. IMPORT FONTÓW  (@import musi stać przed jakąkolwiek regułą)
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=IBM+Plex+Sans:wght@500;600;700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap");


/* ==========================================================================
   2. ZMIENNE
   ========================================================================== */
:root {
    --zk-burgund-jasny: #9b0f39;
    --zk-braz: #6c132e;
    --zk-braz-mgla: #6b4343;
    --zk-pergamin: #f5f1e7;
    --zk-mosiadz: #a67c3d;
    --zk-linia: rgba(59, 42, 30, .16);
    --menu-bg: #9b0f39;
    --menu-fg: #ecd17f;
    --menu-fg-hover: #ffffff;
    --menu-fg-active: #ffffff;
    --art-bg: #f7f3e8;
    --art-border: rgb(148 18 58 / 41%);
    --art-shadow: 0 4px 18px rgb(59 42 30 / 29%);
    --zk-font-tekst: "Spectral", Georgia, "Times New Roman", serif;
    --zk-font-naglowek: "Fraunces", Georgia, serif;
    --zk-font-etykieta: "IBM Plex Sans", system-ui, sans-serif;
}

/* ==========================================================================
   3. NAGŁÓWEK — pasek menu
   ========================================================================== */
.container-header,
.container-header .container-nav{
  background:var(--menu-bg);
}


/* ==========================================================================
   4. MENU DESKTOP — kolory, wyśrodkowanie, separatory SVG
   ========================================================================== */
@media (min-width: 768px){


  .container-header .container-nav{
    justify-content:center;
  }
  .container-header .navbar{
    flex:1;
  }

  /* Lista menu: pozioma, wycentrowana, dziecko-flex do wyrównania separatorów */
  .container-header .mod-menu{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
  }

  /* Pozycje menu */
  .container-header .mod-menu > li{
    display:flex;
    align-items:center;
  }

  /* Separator między pozycjami — SVG 10×40, wyśrodkowany w pionie i poziomie */
  .container-header .mod-menu > li + li::before{
    content:"";
    display:block;
    width:10px;
    height:40px;
    margin:0 0.6rem;
    background:url("../../../../../images/separator.svg") center center / contain no-repeat;
    flex-shrink:0;
  }

  /* Linki i przyciski w menu */
 @media (min-width: 768px) {
    .container-header .mod-menu > li > a, .container-header .mod-menu > li > button {
        display: flex;
        align-items: center;
        padding: 0rem 0rem;
        color: var(--menu-fg);
        font-family: var(--zk-font-etykieta);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0em;
        text-decoration: none;
        background: transparent;
        border: 0;
        transition: color .2s ease;
        text-transform: uppercase;
    }
}

  /* Ikona (np. korona) w linku Home */
  .container-header .mod-menu > li > a img{
    display:block;
    height:30px;
    width:auto;
  }

  /* Hover / focus */
  .container-header .mod-menu > li > a:hover,
  .container-header .mod-menu > li > a:focus-visible,
  .container-header .mod-menu > li > button:hover,
  .container-header .mod-menu > li > button:focus-visible{
    color:var(--menu-fg-hover);
  }

  /* Pozycja aktywna / bieżąca */
  .container-header .mod-menu > li.active > a,
  .container-header .mod-menu > li.current > a,
  .container-header .mod-menu > li[class*="active"] > a{
    color:var(--menu-fg-active);
  }
}


/* ==========================================================================
   5. MENU ROZWIJANE (podmenu dropdown) — te same kolory
   ========================================================================== */
.container-header .mod-menu .mod-menu__sub,
.container-header .mod-menu :where(.mod-menu__sub:not(.mod-menu__sub *)){
  background-color:var(--menu-bg);
  border:0;
  min-width:12rem;
  margin:0;
  padding:.35rem 0;
  list-style:none;
  z-index:1001;
}

.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub button{
  display:block;
  padding:.55rem 1rem;
  color:var(--menu-fg);
  font-family:var(--zk-font-etykieta);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  background:transparent;
  border:0;
  transition:color .2s ease, background-color .2s ease;
}

.container-header .mod-menu .mod-menu__sub a:hover,
.container-header .mod-menu .mod-menu__sub a:focus-visible,
.container-header .mod-menu .mod-menu__sub button:hover{
  color:var(--menu-fg-hover);
  background:rgba(255,255,255,.05);
}

.container-header .mod-menu .mod-menu__sub li.active > a,
.container-header .mod-menu .mod-menu__sub li.current > a{
  color:var(--menu-fg-active);
}

/* Strzałka rozwijania w kolorze menu */
.container-header .mod-menu .mm-toggler-link::after,
.container-header .mod-menu button.mm-toggler::after,
.container-header .mod-menu > li > a .caret{
  color:var(--menu-fg);
}


/* ==========================================================================
   6. MENU MOBILE — logo + przycisk „MENU" + flaga w JEDNEJ LINII
   Przy szerokości < 768 px pasek pokazuje w jednym rzędzie:
     ▸ logo (natywne .navbar-brand z ustawień Cassiopei — klikalne)
     ▸ przycisk MENU z ikoną hamburgera
     ▸ flaga zmiany języka (dosunięta do prawej)
   Lista pozycji rozwija się pod paskiem (obsługa w bloku „POPRAWKA" niżej).
   ========================================================================== */
@media (max-width: 767.98px){

  /* Pasek nagłówka jako jeden rząd; elementy zawijają się tylko dla listy menu */
  .container-header .container-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    row-gap:8px;
  }
  .container-header .navbar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    flex:1 1 auto;
    padding:.6rem .8rem;
  }

  /* LOGO natywne (.navbar-brand) — pierwsze w rzędzie, pomniejszone */
  .container-header .navbar-brand{
    order:1;
    margin:0;
    padding:0;
    flex-shrink:0;
    display:flex;
    align-items:center;
  }
  .container-header .navbar-brand img{
    height:56px;
    width:auto;
    display:block;
  }

  /* Przycisk MENU + ikona — zaraz obok logo */
  .container-header .navbar-toggler{
    order:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:.55rem 1.1rem;
    border:1px solid rgba(255,255,255,.35);
    border-radius:4px;
    background-color:rgba(0,0,0,.25);
    background-image:none !important;
    color:var(--menu-fg);
    box-shadow:none;
  }
  .container-header .navbar-toggler:focus{
    box-shadow:0 0 0 2px rgba(237,187,39,.5);
  }
  .container-header .navbar-toggler [class*="icon-"],
  .container-header .navbar-toggler .icon-menu{
    display:none;
  }
  .container-header .navbar-toggler::before{
    content:"MENU";
    font-family:var(--zk-font-etykieta);
    font-size:14px;
    font-weight:600;
    letter-spacing:.12em;
    color:var(--menu-fg);
  }
  .container-header .navbar-toggler::after{
    content:"";
    width:20px;
    height:20px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23edbb27' stroke-linecap='round' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .container-header .navbar-toggler[aria-expanded="true"]::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23edbb27' stroke-linecap='round' stroke-width='3' d='M7 7l16 16M23 7L7 23'/%3E%3C/svg%3E");
  }

  /* FLAGA zmiany języka — w tej samej linii, dosunięta do prawej krawędzi */
  .container-header .mod-languages{
    order:3;
    margin-left:auto;
    flex-shrink:0;
  }
  .container-header .mod-languages ul{
    margin:0;            /* kasuje margin-top:26px z dolnej sekcji na mobile */
    padding:0;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .container-header .mod-languages img{
    display:block;
    height:20px;
    width:auto;
  }

  /* Lista menu ma spaść pod pasek na całą szerokość (styl w bloku POPRAWKA) */
  .container-header .mod-menu{
    order:4;
    flex-basis:100%;
  }
}


/* ==========================================================================
   7. TYPOGRAFIA ARTYKUŁÓW
   ========================================================================== */
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item){
  font-family:var(--zk-font-tekst);
  font-size:17px;
  line-height:1.72;
  color:var(--zk-braz);
}

/* Tytuł artykułu */
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) .page-header h1,
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) .page-header h2,
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) > h1,
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) .item-title{
  font-family:var(--zk-font-naglowek);
  font-weight:700;
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--zk-burgund);
  margin:0 0 22px;
}

/* Śródtytuły */
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) h2{
  font-family:var(--zk-font-naglowek);font-weight:700;font-size:1.5rem;line-height:1.2;
  color:var(--zk-burgund);margin:38px 0 10px;
}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) h3{
  font-family:var(--zk-font-naglowek);font-weight:500;font-size:1.18rem;line-height:1.3;
  color:var(--zk-braz);margin:28px 0 8px;
}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) h4{
  font-family:var(--zk-font-etykieta);font-weight:600;font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zk-mosiadz);
  margin:26px 0 8px;
}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) :is(h2,h3,h4):first-child{
  margin-top:0;
}

/* Akapity, listy, linki */
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) p{margin:0 0 16px}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) :is(ul,ol){margin:0 0 16px;padding-left:1.5rem}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) li{margin:0 0 8px}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) li::marker{color:var(--zk-burgund-jasny)}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) a{
  color:var(--zk-burgund);text-decoration-color:rgba(90,26,34,.4);text-underline-offset:3px;
}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) a:hover{color:var(--zk-burgund-jasny)}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) a:focus-visible{
  outline:2px solid var(--zk-mosiadz);outline-offset:3px;
}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) strong{font-weight:600}
:is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) hr{
  border:0;border-top:1px solid var(--zk-linia);margin:32px 0;opacity:1;
}


/* ==========================================================================
   8. RAMKA ARTYKUŁU — rounded 10px, delikatny cień
   Efekt jak na stronie „Regulamin zwiedzania".
   ========================================================================== */
.item-page,
.blog-item,
.com-content-article{
  background:var(--art-bg);
  border:1px solid var(--art-border);
  border-radius:10px;
  box-shadow:var(--art-shadow);
  padding:clamp(20px,4vw,40px);
  margin-bottom:28px;
}

/* Jeśli artykuł ma w środku samodzielną kartę zk-sheet / zk-wrap,
   nie duplikujemy ramki — karta ma własną oprawę. */
.item-page:has(.zk-sheet),
.item-page:has(.zk-wrap),
.blog-item:has(.zk-sheet),
.blog-item:has(.zk-wrap),
.com-content-article:has(.zk-sheet),
.com-content-article:has(.zk-wrap){
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
}


/* ==========================================================================
   9. ELEMENTY DODATKOWE ARTYKUŁU
   ========================================================================== */
:is(.item-page,.blog-item) .article-info,
:is(.item-page,.blog-item) .article-info dd{
  font-family:var(--zk-font-etykieta);font-size:.71875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--zk-braz-mgla);
}
:is(.item-page,.blog-item) .article-info{
  margin:0 0 26px;padding:0 0 18px;border-bottom:1px solid var(--zk-linia);
}

:is(.item-page,.blog-item) blockquote{
  background:rgba(90,26,34,.055);border-left:3px solid var(--zk-burgund);
  padding:16px 20px;margin:22px 0;font-style:italic;color:var(--zk-braz);
  border-radius:0 6px 6px 0;
}
:is(.item-page,.blog-item) blockquote p:last-child{margin-bottom:0}

:is(.item-page,.blog-item) table{
  width:100%;border-collapse:collapse;margin:22px 0;font-size:.94rem;
}
:is(.item-page,.blog-item) :is(th,td){
  padding:10px 12px;border-bottom:1px solid var(--zk-linia);text-align:left;vertical-align:top;
}
:is(.item-page,.blog-item) th{
  font-family:var(--zk-font-etykieta);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--zk-burgund);
  border-bottom:2px solid var(--zk-burgund);
}

:is(.item-page,.blog-item) img{max-width:100%;height:auto;border-radius:6px}
:is(.item-page,.blog-item) figcaption{
  font-family:var(--zk-font-etykieta);font-size:.75rem;color:var(--zk-braz-mgla);
  padding-top:8px;
}

.readmore .btn,
.com-content-category-blog__item .readmore .btn{
  background:var(--zk-burgund);border-color:var(--zk-burgund);color:#fff;
  font-family:var(--zk-font-etykieta);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;border-radius:0;padding:10px 20px;
}
.readmore .btn:hover{background:var(--zk-burgund-jasny);border-color:var(--zk-burgund-jasny);color:#fff}


/* ==========================================================================
   10. KLOCKI zk-* — do wstawiania w treści artykułu
   ========================================================================== */

/* 10a. Lista numerowana z burgundowymi numerami */
ol.zk-list{list-style:none;margin:0 0 6px;padding:0;counter-reset:zkitem}
ol.zk-list > li{position:relative;padding:0 0 0 40px;margin:0 0 12px;counter-increment:zkitem}
ol.zk-list > li::before{
  content:counter(zkitem) ".";position:absolute;left:0;top:.12em;
  font-family:var(--zk-font-etykieta);font-size:13px;font-weight:600;
  color:var(--zk-burgund-jasny);
}
ol.zk-list.zk-zakaz > li::before{
  content:"";width:9px;height:9px;left:6px;top:.62em;
  background:var(--zk-burgund);transform:rotate(45deg);
}

/* 10b. Ramka informacyjna */
.zk-note{
  background:rgba(90,26,34,.055);border-left:3px solid var(--zk-burgund);
  padding:16px 20px;margin:22px 0;border-radius:0 6px 6px 0;
}
.zk-note h3{
  font-family:var(--zk-font-etykieta);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zk-burgund);margin:0 0 8px;
}
.zk-note p{margin:0}

/* 10c. Ramka „do uzupełnienia" */
.zk-trasa{
  border:1px dashed rgba(90,26,34,.4);padding:18px 20px;margin:16px 0;
  color:var(--zk-braz-mgla);font-style:italic;border-radius:6px;
}

/* 10d. Kafelki dat / tagów */
ul.zk-days{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px;padding:0;list-style:none}
ul.zk-days li{
  font-family:var(--zk-font-etykieta);font-size:12.5px;font-weight:500;
  background:var(--zk-pergamin);border:1px solid rgba(90,26,34,.28);
  color:var(--zk-burgund);padding:5px 11px;margin:0;border-radius:4px;
}

/* 10e. Tabela godzin */
.zk-hours{margin:20px 0 22px;border-top:1px solid var(--zk-linia)}
.zk-hrow{
  display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--zk-linia);
}
.zk-hlet{font-family:var(--zk-font-etykieta);font-size:10.5px;font-weight:600;color:var(--zk-mosiadz)}
.zk-hmon{font-size:.98rem}
.zk-hval{
  font-family:var(--zk-font-etykieta);font-size:12.5px;font-weight:500;
  color:var(--zk-braz);text-align:right;white-space:nowrap;
}

/* 10f. Nagłówek sekcji z oznaczeniem */
.zk-sec{display:block;padding:38px 0 0}
.zk-sec + .zk-sec{border-top:1px solid var(--zk-linia);margin-top:38px}
.zk-mark{
  font-family:var(--zk-font-naglowek);font-weight:700;font-size:1.5rem;
  color:var(--zk-burgund);line-height:1.2;letter-spacing:.01em;margin:0 0 6px;
}
.zk-mark span{
  display:inline-block;margin-left:12px;vertical-align:middle;
  font-family:var(--zk-font-etykieta);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zk-mosiadz);
}
.zk-body > h2{
  font-family:var(--zk-font-naglowek);font-weight:500;font-size:1.15rem;line-height:1.3;
  margin:0 0 16px;padding:0;color:var(--zk-braz-mgla);border:0;
}
.zk-body > p{margin:0 0 14px}
.zk-body > p:last-child,
.zk-body > ol:last-child{margin-bottom:0}


/* ==========================================================================
   11. KARTA zk-sheet — samodzielna oprawa dokumentów (regulamin, RODO)
   Użycie: <div class="zk-wrap"><article class="zk-sheet"> … </article></div>
   ========================================================================== */
.zk-wrap{width:100%}
.zk-wrap,.zk-wrap *,.zk-wrap *::before,.zk-wrap *::after{box-sizing:border-box}
.zk-sheet{
  background:var(--zk-pergamin);
  border:1px solid var(--zk-linia);
  border-top:5px solid var(--zk-burgund);
  border-radius:10px;
  box-shadow:0 22px 50px rgba(59,42,30,.13);
  color:var(--zk-braz);
  font-family:var(--zk-font-tekst);
  font-size:17px;line-height:1.72;
  padding:0 clamp(20px,5vw,64px) clamp(36px,5vw,64px);
  overflow:hidden;
}
.zk-hero{position:relative;padding:clamp(40px,7vw,72px) 0 26px;text-align:center}
.zk-eyebrow{
  font-family:var(--zk-font-etykieta);font-size:11.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--zk-burgund-jasny);margin:0 0 18px;
}
.zk-hero h1{
  font-family:var(--zk-font-naglowek);font-weight:700;
  font-size:clamp(2.1rem,6.2vw,3.5rem);line-height:1.06;letter-spacing:-.015em;
  margin:0;color:var(--zk-burgund);
}
.zk-hero .zk-lead{max-width:44ch;margin:20px auto 0;color:var(--zk-braz-mgla);font-size:1.03rem}
.zk-silhouette{display:block;width:100%;max-width:520px;height:auto;margin:30px auto 0;opacity:.9}
.zk-rule{border:0;border-top:1px solid var(--zk-linia);margin:34px 0 0;opacity:1}
.zk-foot{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--zk-linia);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;text-align:center;
  font-family:var(--zk-font-etykieta);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zk-braz-mgla);
}
.zk-fade{opacity:0;transform:translateY(10px);animation:zkIn .7s ease forwards}
@keyframes zkIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .zk-fade{animation:none;opacity:1;transform:none}
}


/* ==========================================================================
   12. MOBILE — drobiazgi typograficzne
   ========================================================================== */
@media (max-width:720px){
  :is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item){font-size:16px}
  :is(.item-page,.blog-item,.com-content-article,.com-content-category-blog__item) h2{font-size:1.3rem;margin-top:30px}
  .zk-sheet{font-size:16px}
  .zk-mark{font-size:1.3rem}
  .zk-hrow{grid-template-columns:14px 1fr auto;gap:10px}
  .item-page,.blog-item,.com-content-article{padding:20px 18px}
}


/* ==========================================================================
   13. DRUK
   ========================================================================== */
@media print{
  .container-header{display:none}
  :is(.item-page,.blog-item,.com-content-article){
    font-size:11pt;color:#000;
    background:#fff;border:0;box-shadow:none;padding:0;
  }
  .zk-sheet{
    background:#fff;border:0;border-top:3pt solid var(--zk-burgund);
    border-radius:0;box-shadow:none;padding:0;font-size:11pt;
  }
  .zk-silhouette{max-width:300px}
  .zk-sec{break-inside:avoid;page-break-inside:avoid}
  .zk-fade{animation:none;opacity:1;transform:none}
}
@media (width >= 992px) {
    .container-header .mod-menu>li+li {
        margin-left: 0em;
    }
}
.container-header .container-nav
 {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 0em;
    margin-top: -25px;
}
.container-header .mod-menu a, .container-header .mod-menu button
 {color: #fbebae;}
 .container-header .mod-menu:hover
 {color: #ffffff;}
 
.metismenu.mod-menu .mm-collapse
 {
    background-color: #703f44;
    position: absolute;
    box-shadow: 1px 1px 4px #0000001a;
}
.kafle-date
 {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
    letter-spacing: .0em;
    opacity: 1;
    background: #703f44;
    color: #fdfaf1 !important;
    text-align: center;
    padding: 3px 0px;
}
.kafle-mode-below .kafle-title {
    display: block;
    margin-top: 14px;
    color: var(--kafle-accent);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color .25s ease;
    height: 48px;
}
div.mod-languages ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 26px;
}
div.mod-languages ul li.lang-active
 {
    background-color: #f0f0f000;
    display: none;
}
.metismenu.mod-menu .mm-toggler
 {
    color: rgb(233 208 131);
    user-select: none;
    height: 100%;
    box-shadow: none;
    background: 0 0;
    border: none;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
}
.metismenu.mod-menu .metismenu-item>ul
 {
    z-index: 1001;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
    top: 100%;
    box-shadow: 0 0 .5em #000000a8;
    right: -15px;
}
.metismenu.mod-menu .mm-collapse {
    background-color: #94123a;
    position: absolute;
    box-shadow: 1px 1px 4px #0000001a;
}
.container-header .metismenu>li.level-1>ul{min-width: 210px;}

/* ===== POCZĄTEK POPRAWKI: blok owinięty w media mobilne =====
   Ten blok („Rozwinięta lista menu") wcześniej działał na WSZYSTKICH
   szerokościach i psuł menu na desktopie (flex-direction:column).
   Teraz obowiązuje wyłącznie poniżej 768 px. */
@media (max-width: 767.98px){

  /* Rozwinięta lista menu — panel pod paskiem, pełna szerokość.
       UWAGA: nie ustawiaj tu display! Widocznością steruje Bootstrap collapse. */
  .container-header .mod-menu{
    flex-basis:100%;
    width:100%;
    margin:.4rem 0 0;
    padding:.25rem 0;
    list-style:none;
    background:var(--menu-bg);
    border:0;
    border-radius:0;
    flex-direction:column;
  }
  .container-header .mod-menu > li{
    display:block;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .container-header .mod-menu > li:last-child{
    border-bottom:0;
  }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
    width:100%;
    color:var(--menu-fg);
    font-family:var(--zk-font-etykieta);
    font-size:15px;
    font-weight:600;
    letter-spacing:.02em;
    line-height:1.2;
    text-align:left;
    text-decoration:none;
    background:transparent;
    border:0;
  }
  .container-header .mod-menu > li > a:hover,
  .container-header .mod-menu > li > button:hover{
    color:var(--menu-fg-hover);
    background:rgba(255,255,255,.05);
  }
  .container-header .mod-menu > li.active > a,
  .container-header .mod-menu > li.current > a{
    color:var(--menu-fg-active);
  }
  .container-header .mod-menu > li > a img{
    display:block;
    height:24px;
    width:auto;
  }
  .container-header .mod-menu > li + li::before{
    content:none;
  }

}
/* ===== KONIEC POPRAWKI ===== */


/* --- Strona startowa: bez ramki artykułu, hero na pełną szerokość ------- */

/* === STRONA STARTOWA (Itemid 117 PL, 118 EN) ============================
   Ściąga pergaminową ramkę artykułu, żeby moduły hero i inne bloki
   siedziały na tle strony bez kartonika i cienia.
   ======================================================================== */
body.itemid-117 .item-page,
body.itemid-118 .item-page,
body.itemid-117 .com-content-article,
body.itemid-118 .com-content-article {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: -35px;
}

/* Ukrywa tytuł artykułu na stronie startowej — na wypadek gdyby
   ustawienie w opcjach pozycji menu nie zadziałało */
body.itemid-117 .item-page > .page-header,
body.itemid-118 .item-page > .page-header,
body.itemid-117 .com-content-article__title,
body.itemid-118 .com-content-article__title {
  display: none;
}

/* Pozwala hero i szerokim modułom sięgać krawędzi kontenera Cassiopei */
body.itemid-117 .container-component,
body.itemid-118 .container-component {
  max-width: none;
  padding-inline: 0;
}
/* === Montserrat na całej witrynie =================================== */
:root{
  --zk-font-tekst: "Ubuntu", system-ui, sans-serif;
  --zk-font-naglowek: "Ubuntu", system-ui, sans-serif;
  --zk-font-etykieta: "Ubuntu", system-ui, sans-serif;
}

body,
body.site,
.container-header,
.mod-menu,
button,
input,
select,
textarea{
  font-family: "Ubuntu", system-ui, sans-serif;
}

.metismenu.mod-menu .metismenu-item {
    flex-wrap: wrap;
    align-items: center;
    padding: .5em 0.2em;
    font-size: 1.1rem;
    line-height: 1.5;
    display: flex;
}
    .sppb-btn-dark {
    color: #fff;
    background-color: #510018!important;
    border-color: #343a40;
}