/* Content links */
a {
  color: #3A5661;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}

a:hover {
  color: #2B3F46; /* ešte tmavší odtieň pri hover */
   text-decoration: none !important;
  background-color: rgba(10, 73, 87, 0.08);
}

a:visited {
  color: #1A2528;
}
/* ============================== */
/* Header: lighter background for better contrast */
/* ============================== */
header.container-header.full-width.position-sticky.sticky-top,
.header--main,
header.site-header {
  background-color: #769EAD !important; /* svetlejšia modrá */
  background-image: linear-gradient(135deg, #769EAD 0%, #AEC6CF 100%) !important;
  color: #ffffff !important;
  padding: 0.8rem 1.5rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  position: relative !important;
  z-index: 9999 !important;
  font-size: 0.95rem !important;
}
/* Zmena pozadia tagov */
.tags.list-inline .list-inline-item a {
    background-color: #F8F8F8;  /* nová farba pozadia */
    color: #333;                 /* text farba */
    border: 1px solid #DFE3E7;   /* rám okolo tagu */
    border-radius: 6px;           /* zaoblenie rohov */
    padding: 2px 8px;             /* vnútorný padding */
    margin: 2px;                  /* medzery medzi tagmi */
    text-decoration: none;        /* odstráni podčiarknutie */
}

/* Hover efekt */
.tags.list-inline .list-inline-item a:hover {
    background-color: #DFE3E7;
    color: #000;
}

/* --- Základný kontajner --- */
.content_rating_container {
    background-color: #F8F8F8;
    border: 1px solid #DFE3E7;
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* --- Zoznam hviezdičiek --- */
.content_rating_container .content_rating ul {
    display: flex;
    gap: 4px; /* medzera medzi všetkými hviezdami */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Všeobecné nastavenie SVG hviezdičiek --- */
.content_rating_container .content_rating li svg {
    width: 24px;
    height: 24px;
    transition: fill 0.2s ease;
}

/* --- Plné hviezdy --- */
.vote-star svg {
    fill: #FFC107;
}

/* --- Polovičné hviezdy (samostatný SVG) --- */
.vote-star-half svg {
    fill: #FFC107;
}

/* --- Prázdne hviezdy --- */
.vote-star-empty svg {
    fill: #E0E0E0;
}

/* --- Text s hodnotením --- */
.content_rating_container .rating-value {
    font-size: 15px;
    color: #444;
    margin-left: 6px;
    font-weight: 500;
}

/* --- Počet hlasov --- */
.content_rating_container .rating-count {
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}

/* --- Formulár hodnotenia --- */
.content_rating_container form.content_vote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* Štýl tlačidla "Hodnotiť" ako tag */
.content_rating_container .btn-primary {
    background-color: #F8F8F8;   /* rovnaké pozadie ako tag */
    color: #333;                 /* text farba */
    border: 1px solid #DFE3E7;   /* rám */
    border-radius: 6px;          /* zaoblenie */
    padding: 2px 8px;            /* vnútorný padding */
    margin: 2px;                 /* medzera */
    text-decoration: none;       /* bez podčiarknutia */
    font-size: 0.9rem;
    line-height: 1.5;
  font-weight: 600;            /* 🔹 tučný text */
    transition: all 0.2s ease;
}

/* Hover efekt hodnotit – rovnaký ako pri tagoch */
.content_rating_container .btn-primary:hover {
    background-color: #DFE3E7;
    color: #000;
    border-color: #C8CCD0;
}
/* =========================
   GLOBÁLNY BLOG CARD LAYOUT
   pre category aj featured
   ========================= */

/* Card wrapper */
.com-content-category-blog__item,
.blog-featured .blog-item {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #DFE3E7;
    border-radius: 14px;
    padding: 1.6rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Hover effect na card */
.com-content-category-blog__item:hover,
.blog-featured .blog-item:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

/* =========================
   OBRÁZKY
   ========================= */
.com-content-category-blog__item figure.item-image,
.blog-featured .blog-item figure.item-image {
    width: 100%;
    margin: 0 0 1rem 0;
    float: none;
}

.com-content-category-blog__item figure.item-image img,
.blog-featured .blog-item figure.item-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    filter: grayscale(100%);
    transition: transform 0.35s ease, filter 0.35s ease;
}

/* Hover efekt obrázku: farebný a mierne zväčšený */
.com-content-category-blog__item figure.item-image:hover img,
.blog-featured .blog-item figure.item-image:hover img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* Caption */
.com-content-category-blog__item figure.item-image .caption,
.blog-featured .blog-item figure.item-image .caption {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #555555;
    text-align: center;
}

/* =========================
   OBSAH (TEXT, TITLE, META, TAGS)
   ========================= */
.com-content-category-blog__item .item-content,
.blog-featured .blog-item .item-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Názov článku */
.com-content-category-blog__item .item-title a,
.blog-featured .blog-item .item-title a {
    font-size: 1.35rem;
    font-weight: 600;
    color: #222222;
    text-decoration: none;
    transition: color 0.25s ease;
}

.com-content-category-blog__item .item-title a:hover,
.blog-featured .blog-item .item-title a:hover {
    color: #007bff; /* modrá farba hover linku */
}

/* Meta info box */
.com-content-category-blog__item .article-top-info,
.blog-featured .blog-item .article-top-info {
    background-color: #F8F8F8;
    color: #333333;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #DFE3E7;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: center;
    margin-bottom: 20px;
}

/* Tags */
.com-content-category-blog__item .tags,
.blog-featured .blog-item .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0.5rem;
}

.com-content-category-blog__item .tags a,
.blog-featured .blog-item .tags a {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 6px;
    background-color: #17a2b8; /* btn-info farba */
    color: #fff;
    text-decoration: none;
    transition: background-color 0.25s ease;
}

.com-content-category-blog__item .tags a:hover,
.blog-featured .blog-item .tags a:hover {
    background-color: #138496;
}

/* Text článku */
.com-content-category-blog__item .item-content p,
.blog-featured .blog-item .item-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444444;
    margin: 0;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (min-width: 768px) {
    .com-content-category-blog__item,
    .blog-featured .blog-item {
        flex-direction: row;
        gap: 2rem;
    }

    .com-content-category-blog__item figure.item-image,
    .blog-featured .blog-item figure.item-image {
        flex: 0 0 45%;
        margin: 0;
    }

    .com-content-category-blog__item .item-content,
    .blog-featured .blog-item .item-content {
        flex: 1;
    }
}
/* ===================================================
   1. Category blog layout - zväčšenie vzdialenosti obsahu od rámčeka
   =================================================== */
.com-content-category-blog__items .blog-item {
    padding: 20px;          /* padding medzi obsahom a rámčekom */
    box-sizing: border-box;  /* aby padding nepridal extra šírku */
}

/* zachovávanie existujúceho vizuálu rámčeka */
.com-content-category-blog__items .blog-item .article-top-info {
    margin-bottom: 20px;    /* zachová spacing medzi boxom info a textom */
}

/* ===================================================
   2. Featured layout - rovnaký nadpis ako category blog layout
   =================================================== */
.blog-featured .blog-item .item-title {
    font-size: 24px;        /* rovnaké ako v category blog layout */
    font-weight: 600;       /* podľa category layout */
    line-height: 1.3;
    margin-bottom: 10px;    /* spacing pod nadpisom */
}

/* voliteľné - zjednotenie fontu, ak sa líši */
.blog-featured .blog-item .item-title a {
    color: inherit;         /* rovnaká farba ako category layout */
    text-decoration: none;  /* odstránenie podčiarknutia, ak bolo */
}
/* Featured layout - nadpis ako v category blog layout */
.blog-featured .item-title {
    font-size: 1.75rem; /* veľkosť ako v category */
    font-weight: 600;   /* hrúbka písma */
    margin: 0 0 15px 0; /* spodný margin */
    line-height: 1.2;
}

.blog-featured .item-title a {
    color: inherit;      /* rovnaká farba ako v category layout */
    text-decoration: none;
}
/* ===================================================
   OBRÁZKY - oprava hover a border-radius
   =================================================== */

/* Kontajner obrázku - zabezpečí zaoblené rohy aj pri scale */
.com-content-category-blog__item figure.item-image,
.blog-featured .blog-item figure.item-image {
    width: 100%;
    margin: 0 0 1rem 0;
    float: none;
    border-radius: 10px;   /* zaoblenie rohů */
    overflow: hidden;       /* zachovanie zaoblenia pri scale */
}

/* Obrázok vo vnútri kontajneru */
.com-content-category-blog__item figure.item-image img,
.blog-featured .blog-item figure.item-image img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    transition: transform 0.35s ease, filter 0.35s ease;
}

/* Hover efekt obrázku: farebný a mierne zväčšený */
.com-content-category-blog__item figure.item-image:hover img,
.blog-featured .blog-item figure.item-image:hover img {
    filter: grayscale(0%);
    transform: scale(1.5);
}
/* ===================================================
   ARTICLE DETAIL – PEREX IMAGE NA CELÚ ŠÍRKU
   len v detaile článku (nie blog / category)
   =================================================== */

/* Zrušenie floatu a roztiahnutie kontajnera */
.com-content-article figure.left.item-image {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    margin: 1.5rem 0 2rem 0;
}

/* Obrázok na plnú šírku obsahu */
.com-content-article figure.left.item-image img {
    width: 100% !important;
    height: auto;
    display: block;
    border-radius: 14px;
}

/* Caption */
.com-content-article figure.left.item-image figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #6d757e;
    text-align: center;
}

/* Footer menu horizontálne */
footer.container-footer .footer-menu {
  display: flex !important;        /* hlavný ul je flex */
  flex-direction: row !important;  /* horizontálne položky */
  justify-content: center;         /* centrovanie */
  gap: 30px;                       /* medzera medzi položkami */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* li položky vo footeri */
footer.container-footer .footer-menu .nav-item {
  display: inline-block !important; /* horizontálne */
}

/* odkazy vo footeri */
footer.container-footer .footer-menu .nav-item a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: color 0.3s;
}

footer.container-footer .footer-menu .nav-item a:hover {
  color: #ffd700;
}

/* Responzívne pre mobil */
@media (max-width: 768px) {
  footer.container-footer .footer-menu {
    flex-direction: column !important; /* pod sebou na mobile */
    gap: 15px;
    align-items: center;
  }
}
/* =========================
   LEFT SIDEBAR MENU (Joomla 5)
   ========================= */

/* Základný vzhľad menu kontajnera */
.sidebar-left.card {
    background-color: #F8F8F8; /* svetlý neutrálny podklad */
    border: 1px solid #DFE3E7;
    border-radius: 10px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Názov menu */
.sidebar-left.card .card-header {
    background-color: #769EAD;
    background-image: linear-gradient(135deg, #769EAD 0%, #AEC6CF 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

/* Zoznam položiek menu */
.sidebar-left .mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Jednotlivé položky */
.sidebar-left .mod-menu li.nav-item {
    margin: 0;
    border-bottom: 1px solid #DFE3E7;
}

/* Posledná položka - odstráni spodný border */
.sidebar-left .mod-menu li.nav-item:last-child {
    border-bottom: none;
}

/* Odkazy v menu */
.sidebar-left .mod-menu li a {
    display: block;                /* celé li klikateľné */
    padding: 10px 16px;            /* vnútorný padding */
    color: #3A5661;                /* farba textu zhodná s odkazmi */
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover efekt */
.sidebar-left .mod-menu li a:hover {
    background-color: rgba(10, 73, 87, 0.08);
    color: #2B3F46;
}

/* Aktívna položka */
.sidebar-left .mod-menu li.current.active a {
    background-color: #007bff;    /* modré pozadie pre aktívnu */
    color: #fff;                   /* biely text */
    font-weight: 700;
}

/* Zaoblené rohy aktívnej položky (voliteľné) */
.sidebar-left .mod-menu li.current.active a {
    border-radius: 6px;
}

/* Responsívne: mierne zmeny na menších obrazovkách */
@media (max-width: 767px) {
    .sidebar-left.card {
        margin-bottom: 15px;
    }
    .sidebar-left .mod-menu li a {
        padding: 8px 12px;
        font-size: 0.95rem;
    }
    .sidebar-left.card .card-header {
        font-size: 0.95rem;
        padding: 10px 12px;
    }
}
/* Styl pre obsah článku */
.toc {
    border: 1px solid #ccc;        /* jemný rámček */
    border-radius: 8px;            /* zaoblené rohy */
    background-color: #f9f9f9;     /* svetlé pozadie */
    padding: 15px 20px;            /* vnútorný odsadenie */
    margin: 20px 0;                /* oddelenie od okolia */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* jemný tieň */
    font-family: Arial, sans-serif;
}

/* Styl pre obsah článku */
.toc {
    border: 1px solid #ccc;        
    border-radius: 8px;            
    background-color: #f9f9f9;     
    padding: 15px 20px;            
    margin: 20px 0;                
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    font-family: Arial, sans-serif;
    color: #3A5661; /* hlavná farba textu */
}

/* Nadpis Obsah článku */
.toc > p {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #3A5661; /* farba nadpisu */
}

/* Odražky linkov */
.toc div {
    padding-left: 20px;  
    margin-bottom: 5px;
}

/* Druhá úroveň (padding-left: 40px) */
.toc div div {
    padding-left: 40px;
}

/* Ikonky pred linkami */
.toc i.fa-circle {
    color: #3A5661;  /* farba bodiek zladená s textom */
}

/* Linky */
.toc a {
    text-decoration: none;
    color: #3A5661;  /* farba linkov */
}

.toc a:hover {
    text-decoration: underline;
}