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

/* ==========================================================================
   USER.CSS - Chovatelská stanice Od Velkého Budína (Joomla 5 Cassiopeia)
   ========================================================================== */

/* 1. GLOBÁLNÍ SYSTEMOVÉ PROMĚNNÉ (Přebijí výchozí modrou/fialovou Joomla 5) */
:root {
  /* Staré Joomla 4 proměnné */
  --cassiopeia-color-primary: #223229 !important; /* Mechově šedozelená */
  --cassiopeia-color-hover: #d29f63 !important;    /* Teplá zlatavá kůže */
  --cassiopeia-color-link: #d29f63 !important;
  
  /* Nové Joomla 5 systémové proměnné */
  --primary: #223229 !important;
  --link-color: #d29f63 !important;
  --link-color-rgb: 210, 159, 99 !important;
  --link-hover-color: #b0824b !important;
  --link-hover-color-rgb: 176, 130, 75 !important;
  --body-bg: #16221c !important; /* Citelné lesní pozadí */
}

/* 2. ABSOLUTNÍ PŘEPISY ELEMENTŮ (Pojistka proti černé barvě z výchozího stylu) */
html, body, .body-innerwrapper, .site-grid, .container-component {
  background-color: #16221c !important; /* Zabraňuje černé barvě na všech úrovních */
  background-image: none !important; /* Odstraní případné výchozí gradienty pozadí */
  color: #d29f63 !important; /* #d1dad4 Jemná šedozelená pro dlouhé texty */
  font-family: 'Montserrat', sans-serif !important;
}

/* Nadpisy na webu */
h1, h2, h3, h4, h5, h6, .site-title, .site-title a {
  font-family: 'Cinzel', serif !important;
  color: #f1ede2 !important; /* Antická krémová */
}

/* Globální barva odkazů v článcích */
a {
  color: #d29f63 !important;
  text-decoration: none;
}
a:hover {
  color: #f1ede2 !important;
  text-decoration: underline;
}

/* 3. ZÁHLAVÍ A NAVIGACE (Zde odstraňujeme nativní modrofialový přechod) */
.container-header {
  background-color: #223229 !important;
  background-image: none !important; /* KLÍČOVÉ! Smaže výchozí fialový gradient Cassiopeia */
  border-bottom: 3px solid #d29f63 !important; /* Zlatavá dělící linka */
}

/* Lišta nad menu (pokud je aktivní) */
.container-topbar {
  background-color: #16221c !important;
  background-image: none !important;
  border-bottom: 1px solid #384b3f !important;
}

/* Stylování navigačního menu */
.navbar {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Odkazy v menu */
.navbar .nav-link, 
.metismenu.mod-menu a,
.metismenu.mod-menu .mm-toggler {
  color: #a4b2a6 !important; /* Tlumená zelená */
}

/* Aktivní položka a hover stav v menu */
.navbar .nav-link:hover, 
.navbar .active > .nav-link,
.metismenu.mod-menu a:hover,
.metismenu.mod-menu .active > a,
.metismenu.mod-menu .mm-toggler:hover {
  color: #d29f63 !important; /* Zlatavá */
  background: transparent !important;
}

/* Mobilní hamburger menu */
.navbar-toggler {
  border-color: #384b3f !important;
  color: #d29f63 !important;
}

/* 4. ÚPRAVA VZLEDU MODULŮ (Karty / Cards v sidebaru) */
.card, .moduletable {
  background-color: #223229 !important; /* Mechově šedozelená pro kontrast na tmavém pozadí */
  border: 1px solid #384b3f !important;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.card-title, .module-title {
  font-family: 'Cinzel', serif;
  border-bottom: 1px solid rgba(210, 159, 99, 0.3);
  padding-bottom: 8px;
  margin-bottom: 15px;
  color: #d29f63 !important;
}

/* Tlačítka (např. odeslat kontakt, číst dál) */
.btn-primary {
  background-color: #d29f63 !important;
  border-color: #d29f63 !important;
  color: #16221c !important;
  font-weight: 600;
  border-radius: 6px;
}
.btn-primary:hover {
  background-color: #f1ede2 !important;
  border-color: #f1ede2 !important;
  color: #16221c !important;
}

/* 5. VLASTNÍ DVOUŘÁDKOVÝ HERO BANNER */
.custom-banner-hero {
  background: linear-gradient(rgba(22, 34, 28, 0.55), rgba(22, 34, 28, 0.85)), 
              url('/images/banner-bg.webp') no-repeat center center;
  background-size: cover;
  padding: 80px 20px;
  text-align: center;
  border-bottom: 2px solid #d29f63;
  margin-bottom: 40px;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}

.banner-row-1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #d29f63;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.banner-row-2 {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  color: #f1ede2;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* 6. TABULKY (Rodokmeny a Výsledky zkoušek) */
table, .table {
  color: #d1dad4 !important;
  background: rgba(22, 34, 28, 0.4) !important;
  border: 1px solid #384b3f !important;
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: rgba(210, 159, 99, 0.15) !important;
  color: #f1ede2 !important;
  font-family: 'Cinzel', serif;
  font-weight: 600;
}

td, th {
  border-bottom: 1px solid rgba(56, 75, 63, 0.25) !important;
  padding: 12px 18px !important;
}


/* Pro standardní články v Joomle (všechna metadata jako Category, Details, Published) */
.article-info, 
.article-info dd, 
.article-info-term {
    color: #a4b2a6 !important; /* (můžete změnit např. na #cccccc pro ještě světlejší) */
}

/* 7. METADATA ČLÁNKŮ (Podrobnosti, Kategorie, Autor atd.) */
.article-info, 
.article-info dd, 
.article-info-term,
.article-info span {
    color: #a4b2a6 !important; /* Světlá šedostříbrná (pokud chcete čistě šedou, dejte #cccccc) */
}

/* Úprava odkazů v metadatech (např. klikatelná kategorie), aby nebyla tmavá */
.article-info a, 
.article-info dd a {
    color: #d29f63 !important; /* Zachová vaši zlatavou pro odkazy */
}
.article-info a:hover, 
.article-info dd a:hover {
    color: #f1ede2 !important; /* Při najetí myší zbělá */
}

/* 8. TEXT SAMOTNÝCH ČLÁNKŮ */
.com-content-article, 
.article-details, 
.com-content-article p {
    color: #d1dad4 !important; /* Jemná, velmi světlá šedozelená (případně #eeeeee pro čistou světle šedou) */
}

/* ==========================================================================
   9. DOPORUČENÁ VYLEPŠENÍ PRO DOČIŠTĚNÍ DESIGNU
   ========================================================================== */

/* A. Lepší čitelnost dlouhých textů v článcích */
.com-content-article p {
    line-height: 1.7 !important; /* Zvětší mezery mezi řádky, text se nebude slévat */
    margin-bottom: 1.5rem !important; /* Pěkné rozestupy mezi odstavci */
    font-size: 1.05rem !important; /* Mírné zvětšení pro pohodlnější čtení */
}

/* B. Stylování odkazů přímo v textu článků */
/* Aby odkazy v textu nezapadly, dáme jim jemné spodní podtržení */
.com-content-article p a {
    border-bottom: 1px dotted #d29f63;
    padding-bottom: 2px;
    transition: all 0.2s ease-in-out;
}
.com-content-article p a:hover {
    border-bottom: 1px solid #f1ede2;
    text-decoration: none !important;
}

/* C. Zjemnění tabulek (Rodokmeny) */
/* Aby tabulky nepůsobily tak tvrdě, zakulatíme jim rohy a přidáme jemný stín */
table, .table {
    border-radius: 6px !important;
    overflow: hidden; /* Aby kulaté rohy fungovancy i na vnitřní buňky */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Zvýraznění řádku při najetí myší - usnadní čtení v řádku rodokmenu */
tbody tr:hover {
    background-color: rgba(210, 159, 99, 0.05) !important;
}

/* D. Stylování obrázků v článcích */
/* Přidá fotkám vašich psů/štěňat elegantní tenký rámeček a jemný stín */
.com-content-article img {
    border: 1px solid #384b3f !important;
    border-radius: 6px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 100%; /* Jistota, že obrázek nepřeteče na mobilech */
    height: auto;
}