/* ===================================================
   VETERINA LIBCICE - USER.CSS (Joomla 6)
   =================================================== */

/* 1. Základní šedomodré pozadí a text */
body {
  background-color: #e6edf2 !important;
  color: #2c3e50;
}

/* 2. Hlavička s obrázkem header.jpg */
header.header,
.header,
.container-header {
  background-image: url("/media/templates/site/cassiopeia/images/header.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 200px !important;
  height: 200px !important;
  display: block !important;
  width: 100% !important;
}

.header .navbar-brand,
.container-header .navbar-brand,
.header-item {
  display: none !important;
}

/* 3. Zprůhlednění systémových obalů a karet */
.site-grid,
.container-header,
.container-main-top,
.container-breadcrumbs,
.container-component,
.container-sidebar-right,
.card,
.card-body {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 4. HORNÍ MENU NA POZICI BANNER (Vodorovná tlačítka) */
.container-banner,
.banner {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 10px 0 20px 0 !important;
}

/* Vynucení řádku (flexbox) A VYCENTROVÁNÍ na střed */
.container-banner ul,
.banner ul,
.container-banner .mod-menu,
.banner .mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* <- Vycentruje tlačítka na střed stránky */
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.container-banner li,
.banner li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Úprava odkazů na tyrkysová tlačítka */
.container-banner a,
.banner a {
  display: inline-flex !important;
  background-color: #2b9bb3 !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  font-size: 0.95rem !important;
  font-weight: bold !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.container-banner a:hover,
.banner a:hover {
  background-color: #1f7285 !important;
  color: #ffffff !important;
}
/* 5. PRAVÝ PANEL (MAIN & Aktuality) – SEZNAM S PACIČKAMI */
.container-sidebar-right .mod-menu {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.container-sidebar-right .mod-menu li {
  position: relative !important;
  padding-left: 1.8rem !important; /* Prostor pro pacičku */
  margin: 0 !important;
}

/* Vložení pacičky před odkaz */
.container-sidebar-right .mod-menu li::before {
  content: "\1F43E" !important; /* Unicode pacička 🐾 */
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  color: #2b9bb3 !important;
  font-size: 1.1rem !important;
}

/* Čistý textový odkaz (bez tlačítka) */
.container-sidebar-right .mod-menu a {
  display: inline-block !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #2c3e50 !important;
  padding: 0 !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
}

.container-sidebar-right .mod-menu a:hover {
  color: #2b9bb3 !important;
  text-decoration: underline !important;
}

/* 6. Světle šedomodrá karta pro obsah článku i pravé menu */
main#content,
.com-content-article,
.container-sidebar-right .card,
.container-sidebar-right .mod-menu-container {
  background-color: #f0f4f8 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #d5e1eb !important;
}
/* ===================================================
   OPRAVA ŠÍŘKY ČLÁNKŮ V CSS GRIDU CASSIOPEIE
   =================================================== */

/* 1. Nastavení hlavní mřížky pro kontejner obsahu */
.site-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 25px !important;
  width: 100% !important;
}

/* 2. Roztáhnutí hlavního obsahu (komponenty / blogu / článku) v prvním sloupci */
.site-grid > .container-component,
.site-grid > main#content,
.container-component,
main#content {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
}

/* 3. Umístění pravého sidebaru do druhého sloupce */
.site-grid > .container-sidebar-right,
.container-sidebar-right {
  grid-column: 2 !important;
  width: 100% !important;
}

/* 4. Úprava samotného bloku s články uvnitř karty */
.blog,
.blog-items,
.com-content-article,
.com-content-category {
  width: 100% !important;
  max-width: 100% !important;
}
/* ===================================================
   SYMETRICKÉ DOLADĚNÍ STŘEDU A ZKRÁCENÍ MEZER (TOP/BOTTOM)
   =================================================== */

/* Sloupce: [Levá mezera] [Blog] [Sidebar] [Pravá mezera] */
.site-grid {
  display: grid !important;
  grid-template-columns: 
    minmax(10px, 1fr) 
    minmax(0, 800px) 
    300px 
    minmax(10px, 1fr) !important;
  gap: 25px !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Ořezání obřích mezer z šablony nahoře a dole pod článkem */
.container-main,
main#content,
.com-content-category-blog,
.com-content-featured,
.blog {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 10px !important;
}

/* Blog do 2. sloupce */
.site-grid > .container-component,
.site-grid > main#content {
  grid-column: 2 !important;
  width: 100% !important;
}

/* Sidebar do 3. sloupce */
.site-grid > .container-sidebar-right,
.site-grid > aside {
  grid-column: 3 !important;
  width: 100% !important;
}
/* ===================================================
   ODSTRANĚNÍ VERTIKÁLNÍ MEZERY POD BANNEREM A TLAČÍTKY
   =================================================== */

/* 1. Úplné vymazání prázdných sekcí top-a a top-b */
.container-top-a,
.container-top-b,
div[class*="container-top"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* 2. Zrušení spodního marginu u banneru/tlačítek nad článkem */
.container-header,
.container-banner,
.header,
.banner {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. Nulování horních mezer pro hlavní obsahový blok */
.container-main,
.site-grid,
main#content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  row-gap: 0 !important; /* Vypne svislé mezery mezi řádky gridu */
}
/* ===================================================
   KOMPLETNÍ ODSTŘIŽENÍ DEKLŮ A VYČIŠTĚNÍ SIDEBARU
   =================================================== */

/* 1. Vynulování pozadí a mezer na VŠECH obalech modulu vpravo */
.container-sidebar-right,
.container-sidebar-right [class*="mod-"],
.container-sidebar-right .card,
.container-sidebar-right .card-body,
.container-sidebar-right .card-header,
aside.sidebar-right,
aside.sidebar-right [class*="mod-"],
aside.sidebar-right .card,
aside.sidebar-right .card-body,
aside.sidebar-right .card-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* 2. Jediný obalový boxík pro každý modul s jemným rámečkem */
.container-sidebar-right > div,
aside.sidebar-right > div {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  margin-bottom: 20px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

/* 3. Nadpisy modulů (Menu, Aktuality) */
.container-sidebar-right h3,
.container-sidebar-right .card-title,
aside.sidebar-right h3,
aside.sidebar-right .card-title {
  font-size: 1.05rem !important;
  font-weight: bold !important;
  color: #111111 !important;
  margin: 0 0 8px 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid #2b9bb3 !important;
}

/* 4. Odkazy a seznamy uvnitř modulu */
.container-sidebar-right ul,
aside.sidebar-right ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.container-sidebar-right li,
aside.sidebar-right li {
  padding: 4px 0 !important;
  margin: 0 !important;
  border-bottom: 1px dashed #f0f0f0;
}

.container-sidebar-right li:last-child,
aside.sidebar-right li:last-child {
  border-bottom: none;
}
/* ===================================================
   ELEGANTNÍ ODSTUP SIDEBARU A OBSAHU OD HORNÍHO MENU
   =================================================== */

/* Přidání 20px mezery nad pravý panel i hlavní obsah */
.site-grid > .container-sidebar-right,
.site-grid > aside.sidebar-right,
.site-grid > .container-component,
.site-grid > main#content {
  margin-top: 20px !important;
}
/* ===================================================
   PATIČKA: TMAVŠÍ POZADÍ S TEXTUROU A BÍLÝM TEXTEM
   =================================================== */

.container-footer {
  /* Tmavé pozadí (pod poloprůhlednou texturu) */
  background-color: #1e293b !important; /* Případně #0f172a pro ještě tmavší */
  background-image: url("/media/templates/site/cassiopeia/images/footer.png") !important;
  background-repeat: repeat !important;
  background-position: top left !important;
  
  margin-top: 40px !important;
  padding: 25px 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* Vycentrování obsahu */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Bílý text na tmavém podkladu */
.container-footer > *,
.container-footer .mod-custom,
.container-footer .moje-paticka-obsah,
.container-footer p {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #ffffff !important; /* Čistě bílá pro skvělý kontrast */
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}