/* ==========================================================================
   Miasto i Gmina Chełmek - nakładka na Cassiopeię (Joomla 6)
   1) kolory i nagłówek  2) zgodność ze starym znacznikiem UIkit 2 (yoo_avenue)
   3) strona główna i kafle  4) wysoki kontrast (przełącznik dla niedowidzących)
   ========================================================================== */

:root {
  --chelmek-primary: #155e63;      /* morski - kolor przewodni */
  --chelmek-primary-dark: #0e4245;
  --chelmek-accent: #c8102e;       /* czerwień z herbu */
  --chelmek-bg-soft: #f3f7f7;
  --cassiopeia-color-primary: var(--chelmek-primary);
  --cassiopeia-color-link: #0d5257;
  --cassiopeia-color-hover: var(--chelmek-accent);
  --cassiopeia-font-family-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cassiopeia-font-family-headings: var(--cassiopeia-font-family-body);
}

/* ---------- 1. nagłówek ---------- */
.container-header {
  background: linear-gradient(90deg, var(--chelmek-primary-dark), var(--chelmek-primary));
  background-image: linear-gradient(90deg, var(--chelmek-primary-dark), var(--chelmek-primary));
}
.container-header .navbar-brand img { max-height: 70px; width: auto; }
.container-header .container-topbar { font-size: .9rem; padding-top: .35rem; padding-bottom: .35rem; }
.container-header .mod-menu > li > a,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button { font-weight: 600; }
.container-header .container-search input { min-width: 12rem; }

/* tytuły artykułów na stronie głównej - mniejsze i bez podkreślenia */
.blog-featured .item-title, .com-content-category-blog .item-title,
.blog-featured h2, .com-content-category-blog h2 { font-size: 1.35rem; line-height: 1.3; }
.blog-featured h2 a, .com-content-category-blog h2 a { text-decoration: none; }
.blog-featured h2 a:hover, .com-content-category-blog h2 a:hover { text-decoration: underline; }
.blog-items .blog-item { border-bottom: 1px solid #dfe5e5; padding-bottom: 1rem; margin-bottom: 1.25rem; }

/* obrazy i tabele z treści nie mogą rozpychać strony */
.com-content-article img, .blog-item img, .moduletable img, .card-body img, .no-card img, .custom img { max-width: 100%; height: auto; }
.com-content-article table { max-width: 100%; }
.custom table { width: 100% !important; height: auto !important; }
@media (max-width: 767.98px) { .custom table, .custom tbody, .custom tr, .custom td { display: block; width: 100% !important; } }
iframe { max-width: 100%; }

/* ---------- 2. zgodność z UIkit 2 (klasy w starych modułach i artykułach) ---------- */
.uk-list { list-style: none; padding-left: 0; margin-left: 0; }
.uk-list > li { margin-bottom: .35rem; }
.uk-list-line > li + li { border-top: 1px solid #e3e7e7; padding-top: .5rem; margin-top: .5rem; }
.uk-clearfix::after { content: ""; display: table; clear: both; }
.uk-float-left { float: left; margin-right: .75rem; }
.uk-float-right { float: right; margin-left: .75rem; }
.uk-text-muted { color: #5f6b6b; }
.uk-text-danger { color: var(--chelmek-accent); }
.uk-text-center { text-align: center; }
.uk-margin-remove { margin: 0 !important; }
.uk-margin { margin-bottom: 1rem; }
.uk-display-block { display: block; }
.uk-responsive-height, .uk-responsive-width { max-width: 100%; height: auto; }
.uk-panel-title { font-size: 1.15rem; font-weight: 700; margin: .75rem 0 .5rem; color: var(--chelmek-primary-dark); }
.uk-overlay { position: relative; display: block; overflow: hidden; border-radius: 6px; }
.uk-overlay img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.uk-overlay:hover img, .uk-overlay a:focus img { transform: scale(1.04); }
.uk-progress { background: #e6ecec; border-radius: 4px; overflow: hidden; height: 1.6rem; margin: .5rem 0 1rem; }
.uk-progress-bar { background: var(--chelmek-accent); color: #fff; height: 100%; font-size: .85rem; line-height: 1.6rem; padding: 0 .5rem; white-space: nowrap; }
@media (max-width: 767.98px) { .uk-hidden-small { display: none !important; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .uk-hidden-medium { display: none !important; } }
@media (min-width: 1200px) { .uk-hidden-large { display: none !important; } }

/* zakładki (uk-tab + uk-switcher) - obsługę klikania dodaje user.js */
.uk-tab { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0 0 .75rem; border-bottom: 2px solid var(--chelmek-primary); }
.uk-tab > li > a { display: block; padding: .5rem 1rem; border-radius: 6px 6px 0 0; background: var(--chelmek-bg-soft); text-decoration: none; font-weight: 600; }
.uk-tab > li.uk-active > a, .uk-tab > li > a[aria-selected="true"] { background: var(--chelmek-primary); color: #fff; }
.uk-switcher { list-style: none; padding: 0; margin: 0; }
.uk-switcher > li { display: none; }
.uk-switcher > li.uk-active { display: block; }
.uk-tab-js .uk-tab > li > a:focus-visible { outline: 3px solid var(--chelmek-accent); outline-offset: 2px; }

/* ikonki (Facebook, YouTube, kontrast, mapa serwisu) - Font Awesome z Joomli */
.tm-social-icon-buttons { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.tm-social-icon-buttons img { max-height: 32px; width: auto; }
.uk-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: rgba(255,255,255,.15); color: #fff !important; text-decoration: none; }
.uk-icon-button:hover, .uk-icon-button:focus { background: var(--chelmek-accent); }
.uk-icon-button::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1rem; line-height: 1; }
.uk-icon-eye::before { content: "\f06e"; }
.uk-icon-eye-slash::before { content: "\f070"; }
.uk-icon-sitemap::before { content: "\f0e8"; }
.uk-icon-facebook::before { content: "\f09a"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.uk-icon-youtube::before { content: "\f167"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }

/* ---------- 3. strona główna i kafle ---------- */
.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-main-bottom { gap: 1.25rem; }
.container-top-b .no-card img, .container-top-b .moduletable img { display: block; margin: 0 auto .5rem; border-radius: 4px; }
.container-bottom-a .no-card, .container-bottom-a .moduletable { background: #fff; border: 1px solid #e3e7e7; border-radius: 8px; padding: .75rem; }
.container-bottom-b { background: var(--chelmek-bg-soft); border-radius: 8px; padding: 1rem; }
.container-sidebar-right .moduletable, .container-sidebar-left .moduletable { margin-bottom: 1.25rem; }
.container-sidebar-right .moduletable > h3, .container-sidebar-left .moduletable > h3,
.container-sidebar-right .card-header, .container-sidebar-left .card-header {
  font-size: 1.05rem; background: var(--chelmek-primary); color: #fff; padding: .5rem .75rem; border-radius: 6px 6px 0 0; margin: 0; }
.footer { background: var(--chelmek-primary-dark); }
.footer a { color: #fff; }

/* ---------- 4. wysoki kontrast ---------- */
html.chelmek-kontrast, html.chelmek-kontrast body { background: #000 !important; color: #ff0 !important; }
html.chelmek-kontrast * { background-color: transparent !important; background-image: none !important; color: #ff0 !important; border-color: #ff0 !important; box-shadow: none !important; }
html.chelmek-kontrast a { color: #0ff !important; text-decoration: underline !important; }
html.chelmek-kontrast img { filter: grayscale(1) contrast(1.2); }
html.chelmek-kontrast .uk-tab > li > a[aria-selected="true"] { outline: 2px solid #ff0; }


/* ==========================================================================
   5. poprawki po przeglądzie na żywo (24.10)
   ========================================================================== */

/* pasek górny: bez tytułów modułów, menu po lewej, ikony po prawej */
.container-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: .4rem 1rem; max-width: 1320px; margin: 0 auto; }
.container-topbar .topbar { flex: 0 1 auto; }
.container-topbar .topbar > h3 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container-topbar .topbar:has(.mod-menu) { order: 1; }
.container-topbar .topbar:has(.tm-social-icon-buttons) { order: 2; margin-left: auto; }
.container-topbar .mod-menu { display: flex; flex-direction: row; flex-wrap: wrap; gap: .1rem 1rem; margin: 0; padding: 0; }
.container-topbar .mod-menu a { color: #e6f2f2; font-size: .8rem; font-weight: 500; text-decoration: none; }
.container-topbar .mod-menu a:hover, .container-topbar .mod-menu a:focus { color: #fff; text-decoration: underline; }
.container-topbar .tm-social-icon-buttons { width: auto; }

/* herb zamiast logo Cassiopei (dopóki logo nie jest ustawione w stylu szablonu) */
.brand-logo img.logo[src*="cassiopeia/images/logo"] { content: url(/images/yootheme/demo/default/herb.png); }
.brand-logo img.logo { height: 56px; width: auto; }

/* menu główne (metismenu Cassiopei): zwarte, w jednej linii na dużych ekranach */
@media (min-width: 992px) {
  .container-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; }
  .container-nav .navbar { flex: 1 1 auto; min-width: 0; padding: 0; }
  .container-nav .metismenu > li > a, .container-nav .metismenu > li > button { font-size: .92rem; white-space: nowrap; }
  .container-nav .metismenu.mod-menu { gap: 0; }
  .container-nav .container-search { flex: 0 0 auto; }
}
.container-nav .metismenu .mm-collapse { z-index: 1050; }
.container-nav .metismenu .mm-collapse a { white-space: normal; }
.navbar-toggler { border-color: rgba(255,255,255,.6); color: #fff; }

/* wyszukiwarka (Inteligentne wyszukiwanie) */
.container-search .mod-finder, .container-search form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.container-search .mod-finder .input-group { flex-wrap: nowrap; }
.container-search input[type="text"], .container-search input[type="search"] { min-width: 11rem; }
.container-search .btn, .container-search button { background: var(--chelmek-accent); border-color: var(--chelmek-accent); color: #fff; }
.container-search .btn:hover, .container-search button:hover { filter: brightness(1.1); }

/* strona główna: Fotogalerie / Film / Złote sakiewki w 3 kolumnach */
@media (min-width: 768px) {
  .container-component:has(> .main-bottom) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; align-items: start; align-content: start; }
  .container-component > * { grid-column: 1 / -1; }
  .container-component > .main-bottom { grid-column: auto; }
}
.main-bottom img, .main-top img { width: auto; max-width: 100%; height: auto; }
.main-bottom p { margin-bottom: .5rem; }

/* aktualności na stronie głównej jako karty (skracanie treści robi user.js) */
.blog-featured .blog-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1.5rem; }
.blog-featured .blog-item { border: 1px solid #e3e7e7; border-radius: 8px; padding: 1rem; margin: 0; display: flex; flex-direction: column; }
.blog-featured .item-content { display: flex; flex-direction: column; height: 100%; }
.blog-featured .item-content .readmore { margin-top: auto; }
.chelmek-intro { max-height: 17rem; overflow: hidden; position: relative; margin-bottom: .75rem; }
.chelmek-intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.chelmek-intro img { max-height: 180px; width: 100%; object-fit: cover; border-radius: 6px; }
.blog-featured .chelmek-intro p { text-align: left !important; }
.article-info .article-info-term { display: none; }
.blog-item .article-info { font-size: .8rem; margin: .25rem 0 .5rem; }
html.chelmek-kontrast .chelmek-intro::after { display: none; }

/* kafle działów (dół strony głównej) */
.container-bottom-a h3.uk-panel-title { font-size: 1rem; }


/* ==========================================================================
   6. starsze klasy UIkit używane w artykułach (ikony plików, alerty, tabele)
   ========================================================================== */
[class*="uk-icon-file-"], .uk-icon-arrow-circle-o-right, .uk-icon-link, .uk-icon-external-link-square, .uk-icon-phone-square {
  font-style: normal; display: inline-block; text-decoration: none; }
[class*="uk-icon-file-"]::before, .uk-icon-arrow-circle-o-right::before, .uk-icon-link::before,
.uk-icon-external-link-square::before, .uk-icon-phone-square::before {
  font-family: "Font Awesome 6 Free"; font-weight: 400; line-height: 1; margin-right: .25em; }
.uk-icon-file-pdf-o::before { content: "\f1c1"; color: #c0392b; }
.uk-icon-file-word-o::before { content: "\f1c2"; color: #2b579a; }
.uk-icon-file-excel-o::before { content: "\f1c3"; color: #217346; }
.uk-icon-file-image-o::before { content: "\f1c5"; }
.uk-icon-file-o::before, .uk-icon-file-text-o::before { content: "\f15b"; }
.uk-icon-file-archive-o::before, .uk-icon-file-zip-o::before { content: "\f1c6"; }
.uk-icon-arrow-circle-o-right::before { content: "\f35a"; color: var(--chelmek-primary); }
.uk-icon-link::before { content: "\f0c1"; font-weight: 900; }
.uk-icon-external-link-square::before { content: "\f14c"; font-weight: 900; }
.uk-icon-phone-square::before { content: "\f098"; font-weight: 900; }
.uk-icon-small::before { font-size: 1.15em; }
.uk-icon-medium::before { font-size: 1.6em; vertical-align: -0.15em; }
.uk-article-lead { font-size: 1.15rem; line-height: 1.5; color: #2f3b3b; margin-bottom: 1rem; }
.uk-alert { position: relative; padding: .75rem 1rem; margin: 0 0 1rem; border-radius: 6px; background: #ebf5fb; border: 1px solid #b6daf2; color: #0f4c75; }
.uk-alert-success { background: #edf7ee; border-color: #b7dfb9; color: #1e5b22; }
.uk-alert-warning { background: #fff8e6; border-color: #f3d58a; color: #6b4e00; }
.uk-alert-danger { background: #fdecea; border-color: #f5b5ae; color: #8a1c13; }
.uk-alert-close, .uk-close { display: none; }
.uk-button { display: inline-block; padding: .4rem 1rem; border-radius: 4px; background: #eef2f2; border: 1px solid #cdd6d6; color: #1d2b2b; text-decoration: none; }
.uk-button-primary { background: var(--chelmek-primary); border-color: var(--chelmek-primary); color: #fff !important; }
.uk-button:hover, .uk-button:focus { filter: brightness(.95); text-decoration: underline; }
.uk-text-primary { color: var(--chelmek-primary); }
.uk-text-success { color: #2e7d32; }
.uk-text-right { text-align: right; }
.uk-margin-top-remove { margin-top: 0 !important; }
.uk-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.uk-table th, .uk-table td { padding: .45rem .6rem; border-bottom: 1px solid #e3e7e7; vertical-align: top; text-align: left; }
.uk-table-condensed th, .uk-table-condensed td { padding: .25rem .45rem; }
.uk-table-striped tbody tr:nth-of-type(odd) { background: #f6f9f9; }
.uk-table-hover tbody tr:hover { background: #eef5f5; }
.uk-align-left, .uk-align-medium-left { float: left; margin: 0 1rem 1rem 0; }
.uk-align-medium-right { float: right; margin: 0 0 1rem 1rem; }
@media (max-width: 767.98px) { .uk-align-medium-left, .uk-align-medium-right { float: none; display: block; margin: 0 auto 1rem; } }
.uk-width-1-2 { width: 50%; }
@media (max-width: 767.98px) { .uk-width-1-2 { width: 100%; } }
.uk-grid { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }
.uk-grid > * { flex: 1 1 260px; }
.uk-panel-box { background: var(--chelmek-bg-soft); border: 1px solid #e3e7e7; border-radius: 6px; padding: 1rem; }
.uk-thumbnail-caption { font-size: .85rem; color: #5f6b6b; text-align: center; }
.uk-description-list dt { font-weight: 700; }
.uk-description-list-line dd + dt { border-top: 1px solid #e3e7e7; padding-top: .5rem; margin-top: .5rem; }

/* stopka */
.footer { color: #e6f2f2; }
.footer .grid-child { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.chelmek-stopka-linki { margin-bottom: .75rem; font-weight: 600; }
.chelmek-stopka-linki a { color: #fff; }
.footer p { margin: 0 0 .25rem; font-size: .9rem; }

/* czytelność i dostępność */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--chelmek-accent) !important; outline-offset: 2px; }
.com-content-article__body img { border-radius: 4px; }

/* ==========================================================================
   7. nagłówek - poprawki specyficzności względem Cassiopei, rozwijane menu
   ========================================================================== */
@media (min-width: 992px) {
  .container-header .container-nav { flex-wrap: nowrap; align-items: center; gap: 1rem; }
  .container-header .container-nav .navbar { flex: 1 1 auto; width: auto; min-width: 0; }
  .container-header .container-nav .container-search { flex: 0 0 auto; margin: 0; }
  .container-header .container-nav .metismenu > li { padding: 0; }
  .container-header .container-nav .metismenu > li > a,
  .container-header .container-nav .metismenu > li > button { font-size: .88rem; padding-left: .45rem; padding-right: .45rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-header .container-nav { flex-wrap: wrap; }
  .container-header .container-nav .container-search { margin-left: auto; }
}
.container-header .metismenu > li > ul.mm-collapse { min-width: 16rem; padding: .5rem 0; border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18); border-top: 3px solid var(--chelmek-accent); }
.container-header .metismenu > li > ul.mm-collapse > li { padding: 0; margin: 0; }
.container-header .metismenu > li > ul.mm-collapse > li > a { padding: .35rem 1rem; display: block; font-size: .9rem; }
.container-header .metismenu > li > ul.mm-collapse > li > a:hover,
.container-header .metismenu > li > ul.mm-collapse > li > a:focus { background: var(--chelmek-bg-soft); }
@media (min-width: 992px) {
  .container-header .metismenu > li > ul.mm-collapse:has(> li:nth-child(12)) { column-count: 2; column-gap: 0; width: 34rem; }
  .container-header .metismenu > li > ul.mm-collapse > li { break-inside: avoid; }
}

/* ==========================================================================
   8. telefony i drobiazgi
   ========================================================================== */
.pagination { flex-wrap: wrap; gap: .15rem; }
@media (max-width: 767.98px) {
  .container-topbar { padding: .3rem .75rem; }
  .container-topbar .topbar:has(.mod-menu) { width: 100%; }
  .container-topbar .mod-menu { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .2rem; }
  .container-topbar .mod-menu > li { flex: 0 0 auto; }
  .container-topbar .topbar:has(.tm-social-icon-buttons) { margin-left: 0; }
  .brand-logo img.logo, .brand-logo img { height: 46px; }
  .blog-featured .item-title, .blog-featured h2 { font-size: 1.15rem; }
}
/* wyniki wyszukiwania */
.com-finder__results-list, #search-result-list { list-style: none; padding: 0; }
.com-finder__results-list > li, #search-result-list > li { border-bottom: 1px solid #e3e7e7; padding: .75rem 0; }

/* ==========================================================================
   9. listy kategorii jako kafle, menu - strzałki przy pozycjach
   ========================================================================== */
.com-content-categories > .com-content-categories__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .75rem; }
.com-content-categories__item { border: 1px solid #e3e7e7; border-left: 4px solid var(--chelmek-primary); border-radius: 6px; padding: .75rem 1rem; background: #fff; }
.com-content-categories__item:hover { border-left-color: var(--chelmek-accent); background: var(--chelmek-bg-soft); }
.com-content-categories__item-title a { font-weight: 600; text-decoration: none; display: block; }
.com-content-categories__item-title a:hover { text-decoration: underline; }
.com-content-categories__item-title .badge { background: #e6efef !important; color: #3b4b4b; font-weight: 500; margin-top: .35rem; }
.com-content-categories__item .com-content-categories__children { display: none; }
@media (min-width: 992px) {
  .container-header .container-nav .metismenu > li > button { padding-left: 0; padding-right: .5rem; }
  .container-header .container-nav .metismenu > li > a { padding-right: .2rem; }
}

/* link "Przejdź do treści" */
.chelmek-skip { position: absolute; left: 1rem; top: -4rem; z-index: 2000; background: #fff; color: var(--chelmek-primary-dark); padding: .6rem 1rem; border-radius: 0 0 6px 6px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.chelmek-skip:focus { top: 0; }
main:focus { outline: none; }
.com-content-categories__description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; color: #4a5757; }