/* ==========================================================================
   Cassiopeia – user.css
   Lokalizacja: /media/templates/site/cassiopeia/css/user.css
   (jeśli plik nie istnieje, utwórz go – Cassiopeia ładuje go automatycznie)
   ========================================================================== */

/* --- Font Montserrat (Google Fonts) --------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* --- Zmienne szablonu ------------------------------------------------------
   Cassiopeia definiuje fonty i kolory przez zmienne CSS – nadpisanie ich
   załatwia większość elementów (nagłówki, body, formularze) za jednym razem */
:root {
  --cassiopeia-font-family-body: 'Montserrat', sans-serif;
  --cassiopeia-font-family-headings: 'Montserrat', sans-serif;
  --cassiopeia-color-primary: #282e39;
  --cassiopeia-color-link: #00aeef;
  --cassiopeia-color-hover: #6c9900;
}

/* --- Tło całej strony ------------------------------------------------------ */
body.site {
  font-family: 'Montserrat', sans-serif;
  background-image: url('/images/tlostrony/1.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #dbdbdb;
}

/* --- Nagłówek / pasek menu: przezroczysty, żeby tło strony było widoczne ---- */
.container-header {
  background-image: none !important;
  background-color: transparent !important;
}

/* Pasek "banner" i ewentualne tło pod navbarem również przezroczyste */
.container-banner,
.container-topbar,
.container-header .navbar {
  background: transparent !important;
}

/* --- Menu główne ------------------------------------------------------------ */
.container-header .mod-menu a,
.container-header .mod-menu .nav-link,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  color: #ffffff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

/* Hover */
.container-header .mod-menu a:hover,
.container-header .mod-menu a:focus,
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > button:hover {
  color: #00aeef;
}

/* Pozycja aktywna */
.container-header .mod-menu li.active > a,
.container-header .mod-menu li.current > a,
.container-header .metismenu > li.active > a {
  color: #6c9900;
}

/* Rozwijane podmenu – ciemne tło, żeby białe fonty były czytelne */
.container-header .metismenu ul.mm-collapse,
.container-header .mod-menu ul {
  background-color: #282e39;
}

.container-header .metismenu ul.mm-collapse a {
  color: #ffffff;
  font-size: 14px;
}

.container-header .metismenu ul.mm-collapse a:hover {
  color: #00aeef;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Strzałki rozwijania podmenu na biało */
.container-header .metismenu .mm-toggler-link::after,
.container-header .metismenu button.mm-toggler::after {
  color: #ffffff;
}

/* --- Tło i fonty artykułów / treści ----------------------------------------- */
.site-grid .container-component {
  background-color: #282e39;
  color: #dbdbdb;
  padding: 1.5rem;
}

/* Wpisy na listach bloga i pojedyncze artykuły */
.com-content-article,
.blog-item,
.blog-featured .item {
  background-color: #282e39;
  color: #dbdbdb;
}

/* Moduły w kolumnach bocznych – spójnie z artykułami */
.container-sidebar-left .card,
.container-sidebar-right .card {
  background-color: #282e39;
  color: #dbdbdb;
  border-color: rgba(255, 255, 255, 0.1);
}

.container-sidebar-left .card-header,
.container-sidebar-right .card-header {
  background-color: #6c9900;
  color: #ffffff;
}

/* Linki w treści */
.site-grid .container-component a:not(.btn),
.blog-item a:not(.btn) {
  color: #00aeef;
}

.site-grid .container-component a:not(.btn):hover {
  color: #6c9900;
}

/* Tekst pomocniczy (daty, autorzy, "Czytaj więcej") na jaśniejszo */
.site-grid .container-component .article-info,
.site-grid .container-component .text-muted {
  color: #a9b0bd !important;
}

/* --- Nagłówki stron i tytuły artykułów --------------------------------------- */
.page-header > h1,
.page-header > h2,
.article-header > h1,
.article-header > h2,
.blog-item .item-title,
.com-content-article__title {
  background-color: #6c9900;
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-family: 'Montserrat', sans-serif;
}

/* Tytuły-linki na listach bloga – biały font także w linku */
.blog-item .item-title a,
.page-header h2 a,
.article-header h2 a {
  color: #ffffff;
  text-decoration: none;
}

.blog-item .item-title a:hover,
.page-header h2 a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Pozostałe nagłówki wewnątrz treści – białe, bez tła */
.site-grid .container-component h3,
.site-grid .container-component h4,
.site-grid .container-component h5 {
  color: #ffffff;
}

/* --- Stopka (opcjonalnie, spójnie z resztą) ---------------------------------- */
.container-footer .footer {
  background-color: rgba(40, 46, 57, 0.9);
  color: #dbdbdb;
}

.container-footer .footer a {
  color: #00aeef;
}