/* celkový text v článkoch na blogu */
.post-text {
  font-size: 18px;       /* základná veľkosť textu */
  line-height: 1.6;      /* čitateľnejší riadkový rozostup */
}

/* odkazy v článkoch */
.post-text a,
.post-text a:link,
.post-text a:visited {
  color: #889e25 !important;
  text-decoration: underline; /* vždy podčiarknuté */
  font-weight: 500;           /* voliteľné: jemne zvýrazní odkaz */
}

.post-text a:hover,
.post-text a:focus {
  color: #889e25 !important;
  text-decoration: none; /* pri hover sa podčiarknutie vypne */
}

/* Výnimka pre tlačidlá (.btn-main) v texte, aby si zachovali vzhľad zo style.css */
.post-text a.btn-main,
.post-text a.btn-main:link,
.post-text a.btn-main:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Výnimka pre tlačidlá (.btn-main) v texte, aby si zachovali vzhľad zo style.css */
.post-text a.btn-main,
.post-text a.btn-main:link,
.post-text a.btn-main:visited {
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  display: inline-block !important;
}

/* menšie displeje (mobile) */
@media (max-width: 768px) {
  .post-text {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* Všetky tagy – bledozelené */
.tag-list .tag-item {
  display: inline-block;
  padding: .2rem .6rem;       /* menší padding = menšie tlačidlá */
  border-radius: .45rem;
  background: #798d7a;
  color: #fff;
  text-decoration: none;
  margin: .3rem .4rem .3rem 0;
  font-weight: 600;
  font-size: 0.90rem;         /* väčšie písmo (napr. 16px) */
}

/* Aktívne tagy (patria k článku) – tmavozelené */
.tag-list .tag-item.tag--highlight {
  background: #354e33;
  border-color: #354e33;
  color: #fff;
}

/* ===== Sidebar: Posledné pridané – čiary rieši HTML ===== */
.widget-post .de-bloglist-type-1 { 
  margin-top: .75rem; 
}
.widget-post .de-bloglist-type-1 li {
  padding: 10px 0;
  border: none !important; /* žiadne čiary z CSS */
}

/* Mobil – medzera nad sekciou */
.widget.widget-post {
  margin-top: 1.5rem;
}

/* Desktop – zarovnanie hore */
@media (min-width: 992px) {
  .widget.widget-post {
    margin-top: 0;
    border-top: 0;
  }
}

/* Zdroj ilustrácie – len pri tematických fotkách vo figure */
.post-text figure .img-source {
  display: block;
  margin-top: .6rem;   /* mobil */
}
@media (min-width: 992px){
  .post-text figure .img-source {
    margin-top: .8rem; /* desktop */
  }
}

/* Oddeľovač medzi tagmi a populárnymi značkami */
.d-content {
  border-bottom: solid 1px rgba(0, 0, 0, .1);
  padding-bottom: 15px; /* rovnaký padding ako v .de-bloglist-type-1 .d-content */
  margin-bottom: 15px;  /* rovnaký spodný odstup */
  min-height: auto;
}

.post-text figure figcaption {
  font-style: italic;
  font-size: 0.95em;  /* napr. o 20 % väčšie */
}

.post-text figure figcaption::first-letter {
  font-style: normal;
  font-size: 1em;  /* napr. o 20 % väčšie */
}

/* === Audio reader card (TTS) === */
.audio-card{
  padding:12px 16px;
  margin:16px 0;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#F0F1F3;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
}
.audio-card p{ margin:0 0 6px; }
.audio-card audio{ width:100%; outline:none; }
.audio-card .text-muted{ color:#6b7280; }

@media (prefers-color-scheme: dark){
  .audio-card{ background:#111827; border-color:#1f2937; }
  .audio-card .text-muted{ color:#9ca3af; }
}

.rating-stars { 
  display:inline-flex; 
  gap:2px; 
  vertical-align:middle; 
}

.rating-stars .star { 
  width:16px;   /* zmenšené z 22px → môžeš dať 14px alebo 18px podľa oka */
  height:16px; 
  cursor:pointer; 
  display:inline-flex; 
}

.rating-stars .star svg { 
  width:16px; 
  height:16px; 
  display:block; 
}

/* === 0) Globálne: stop horizontálnemu scrollu === */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* === 1) Riadok hodnotenia – nech sa môže zalomiť === */
#rating .d-flex {
  flex-wrap: wrap !important;
  gap: 6px 10px;
  align-items: center;
}
#rating strong { white-space: normal; }
#rating-stars { display: inline-flex; flex: 0 0 auto; }
#rating-summary { flex: 1 1 auto; min-width: 0; white-space: normal; }

/* === 1a) SVG hviezdy – konzistentné vykreslenie === */
.rating-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.rating-stars .star { width: 16px; height: 16px; cursor: pointer; display: inline-flex; }
.rating-stars .star svg { width: 16px; height: 16px; display: block; }

/* veľkosť hviezd na mobile (prepíše inline šírky) */
@media (max-width: 480px){
  .rating-stars .star,
  .rating-stars .star svg { width: 14px !important; height: 14px !important; }
}

/* === 2) Zdieľacie tlačidlá – nech sa zalomia, žiadne pretŕčanie === */
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.share-buttons a,
.share-buttons button {
  flex: 1 1 220px;
  max-width: 100%;
  white-space: normal !important; /* prebitie nowrapu z knižníc */
}
@media (max-width: 480px){
  .share-buttons a,
  .share-buttons button { flex-basis: 100%; }
}

/* === 3) (Voliteľné) FAQ riadky – titul + plusko bez pretŕčania === */
.faq-row.d-flex,
.d-flex.faq-row { justify-content: space-between; gap: 12px; }
.faq-row .faq-title { flex: 1 1 auto; min-width: 0; }
.faq-row .faq-toggle { flex: 0 0 auto; }

/* Bezpečne odstráň horizontálne pretŕčanie */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* === Riadok hodnotenia === */
#rating > .d-flex {              /* presne tento riadok v tvojom HTML */
  flex-wrap: wrap !important;
  gap: 6px 10px;
  align-items: center;
}
#rating strong { white-space: normal; }
#rating-stars { flex: 0 0 auto; }
#rating-summary {
  flex: 1 1 auto;
  min-width: 0;                  /* kľúčové: zabráni roztiahnutiu */
  white-space: normal;           /* nech sa text zalomí */
  overflow-wrap: anywhere;       /* ak by boli dlhé reťazce */
}

/* === Zdieľacie tlačidlá === */
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap !important; }
.share-buttons a, .share-buttons button {
  flex: 1 1 220px;
  max-width: 100%;
  white-space: normal !important;  /* vypne nowrap z knižníc */
}
@media (max-width: 480px){
  .share-buttons a, .share-buttons button { flex-basis: 100%; }
}

/* Rating riadok */
#rating .d-flex {
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px; /* alebo 6px – medzera medzi hviezdami a textom */
}

#rating-stars {
  display: inline-flex;
  flex: 0 0 auto; /* hviezdy majú fixnú šírku podľa počtu */
}

#rating-summary {
  flex: 0 1 auto; /* už nie 1 1 auto, nech sa netlačí doprava */
  white-space: nowrap;
  font-size: 13px;
}

/* Fix: avatar v komentároch – vždy štvorcový, 50×50 */
#comment-list img.rounded-circle,
#comment-list .comment .rounded-circle {
  width: 50px !important;
  height: 50px !important;
  aspect-ratio: 1 / 1;        /* moderný zámok pomeru strán */
  object-fit: cover;          /* vyreže, aby nebolo zdeformované */
  flex: 0 0 50px;             /* vo flext riadku drží šírku */
  display: block;             /* vyhne sa zvláštnemu riadkovému layoutu */
}

/* nech je riadok s avatarom a textom pekne vycentrovaný */
#comment-list .d-flex {
  align-items: flex-start;     /* alebo center podľa vkusu */
  gap: 12px;
}

/* === Reklamné bloky (desktop: vedľa seba, mobil: zalomené) === */
.post-text .ad-box{
  --ad-bg:#f8fbf3;           /* zmeň si podľa potreby */
  --ad-border:#e1ebe2;
  --ad-title:#4984e2;        /* farba nadpisu/odkazu v reklame */
  --ad-text:#354e33;
  --ad-badge-bg:#f8fbf3;
  --ad-badge-text:#354e33;
  --ad-badge-border:#f8fbf3;

  background:var(--ad-bg);
  border:1px solid var(--ad-border);
  border-radius:10px;        /* mierne zaoblený štvorec */
  padding:12px;
  margin:20px 0;
}

.post-text .ad-box .ad-badge{
  font-size:12px; font-weight:700;
  background:var(--ad-badge-bg);
  color:var(--ad-badge-text);
  border:1px solid var(--ad-badge-border);
  border-radius:6px;
  display:inline-block; padding:2px 8px; margin-bottom:8px;
}

.post-text .ad-box .ad-inner{
  display:flex; align-items:flex-start; gap:12px;
}

.post-text .ad-box .ad-img img{
  width:120px; height:120px; object-fit:cover;
  border-radius:8px; /* mierne zaoblený štvorec */
  flex-shrink:0;
}

.post-text .ad-box .ad-body{ flex:1 1 auto; min-width:0; }

/* prebitie zelenej farby odkazov v článkoch */
.post-text .ad-box .ad-title{
  display:block; font-weight:600; font-size:16px;
  color:var(--ad-title) !important;
  text-decoration:underline; margin-bottom:4px; margin-left:16px;
}
.post-text .ad-box .ad-title:hover{ text-decoration:none; }

.post-text .ad-box .ad-text{ font-size:14px; color:var(--ad-text); margin:0; }

@media (max-width:768px){
  .post-text .ad-box .ad-inner{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;         /* kľúč: nikdy pod obrázok */
    align-items:flex-start;
  }

  .post-text .ad-box .ad-img{ flex:0 0 120px; }

  .post-text .ad-box .ad-img img{
    width:120px;
    height:120px;             /* nech je to ako desktop */
    object-fit:cover;
    margin-right:10px;
  }

  .post-text .ad-box .ad-body{
    flex:1 1 auto;
    min-width:140px;          /* drží text vedľa */
    overflow-wrap:anywhere;   /* aby sa text lámal */
  }
}


/* Voliteľne: dark mode */
@media (prefers-color-scheme: dark){
  .post-text .ad-box{
    --ad-bg:#f8fbf3; --ad-border:#e1ebe2;
    --ad-title:#4984e2; --ad-text:#354e33;
    --ad-badge-bg:#f8fbf3; --ad-badge-text:#354e33; --ad-badge-border:#f8fbf3;
  }
}

/* Spoločný štýl pre reklamu */
.post-text .ad-box .ad-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;             /* menšia medzera medzi obrázkom a textom */
}

.post-text .ad-box .ad-body {
  margin-top: 0;         /* odstráni zbytočný horný odstup */
  line-height: 1.4;      /* kompaktnejší text */
}

.post-text .ad-box .ad-title {
  display: inline-block;
  margin-bottom: 10px;    /* menší rozostup medzi názvom a textom */
  color: #3c602f;        /* nech zostane klikateľný kontrastný */
}

.post-text .ad-box .ad-text {
  margin: 0;             /* odstráni extra odstupy */
  font-size: 0.9rem;     /* o chlp menšie, aby pôsobilo sekundárne */
  color: #555;           /* bližšie k šedej */
  margin-left:16px;
  line-height:1.3; 
}

/* === FAQ: zalamovanie otázky + pevná kolóna pre +/− === */
.blog-read .my-5 .d-flex.justify-content-between.align-items-center{
  display:flex !important;
  justify-content:flex-start !important;  /* zruší space-between */
  align-items:flex-start !important;      /* ikonka hore */
  gap:12px !important;
}

.blog-read .my-5 .d-flex.justify-content-between.align-items-center > div:first-child{
  flex:1 1 auto !important;
  min-width:0 !important;
}

.blog-read .my-5 .d-flex.justify-content-between.align-items-center > .text-end{
  flex:0 0 28px !important;               /* úzka kolóna napravo */
  width:28px !important;
  text-align:right !important;
}

/* default (desktop/tablet) */
.blog-read .my-5 h4.mb-1{
  font-size: 20px !important;
  line-height: 1.35;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* tablet a menšie */
@media (max-width: 768px){
  .blog-read .my-5 h4.mb-1{
    font-size: 16px !important;
  }
}

/* malé mobily */
@media (max-width: 480px){
  .blog-read .my-5 h4.mb-1{
    font-size: 16px !important;
  }
}

.blog-read .my-5 .faq-answer{
  display:block;                                  /* keď ju JS zapne */
  margin-top:.25rem;
  white-space:normal;
  overflow-wrap:anywhere;
}

.blog-read .my-5 .faq-toggle{
  display:inline-block;
  width:28px;                                     /* rovnaké ako kontajner */
  text-align:center;
  line-height:1;
  cursor:pointer;
  user-select:none;
}

//* === Reklama: text vedľa obrázka (desktop + mobile) === */
.post-text .ad-box .ad-inner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:nowrap;
}

/* obrázok */
.post-text .ad-box .ad-img{
  flex:0 0 120px;
}

.post-text .ad-box .ad-img img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  margin-left:8px;
}

/* textová časť */
.post-text .ad-box .ad-body{
  flex:1 1 auto;
  min-width:0;
  position:relative;
  top:-4px;              /* ⬅️ POSUN TEXTU HORE (zarovnanie s obrázkom) */
}

/* nadpis reklamy */
.post-text .ad-box .ad-title{
  margin-top:0;          /* odstráni default margin */
  line-height:1.25;
}

/* mobile */
@media (max-width: 420px){
  .post-text .ad-box .ad-img{
    flex-basis:100px;
  }

  .post-text .ad-box .ad-img img{
    width:100px;
    height:100px;
  }

  .post-text .ad-box .ad-body{
    top:-2px;            /* jemnejšie dorovnanie na mobile */
  }
}


/* Alternatíva: zúž celý box a vycentruj ho na desktope */
@media (min-width: 1200px){
  .post-text .ad-box{
    max-width: 400px;
    margin-left: 0px;
    margin-right: auto;
  }
}

/* Odporúčame prečítať – odkazy ako v texte článku */
.blog-read .my-5 > h4 + ul.list-unstyled.mt-3 { 
  margin-top: .5rem;
  padding-left: 0;
}

.blog-read .my-5 > h4 + ul.list-unstyled.mt-3 li.mb-2 {
  color: inherit;            /* bodka bude mať farbu okolitého textu */
  font-weight: 400;          /* normálna váha ako bežný text */
  padding: .25rem 0;
}

.blog-read .my-5 > h4 + ul.list-unstyled.mt-3 li.mb-2 a {
  color: #889e25 !important;  /* odkazy ostanú zelené */
  text-decoration: underline;
  font-weight: 500;
}

.blog-read .my-5 > h4 + ul.list-unstyled.mt-3 li.mb-2 a:hover {
  text-decoration: none;
}

.post-meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.post-meta .sep { padding:0 6px; }

@media (max-width:768px){
  .post-meta{ display:block; }
  .post-meta .meta-item{ display:block; margin:0 0 .25rem 0; }
  .post-meta .sep{ display:none; } /* na mobile skryje „|“ */
}

/* Meta info blok pod titulnou fotkou */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;          /* menšia medzera medzi položkami */
  align-items: center;
  font-size: 14px;        /* namiesto .small → čitateľnejšie */
  color: #555;            /* decentne sivé */
  text-align: left !important;
}

.post-meta .meta-item {
  display: inline;
}

.post-meta .sep {
  color: #aaa;            /* jemná farba oddelovača */
}

/* Mobile fix – meta údaje zarovnať doľava */
@media (max-width: 768px){
  .post-meta,
  .post-meta * {
    text-align: left !important;   /* prebije bootstrap center */
  }
  .post-meta {
    display: block;
    line-height: 0;              /* menšie riadkovanie */
    font-size: 15px;
  }
  .post-meta .meta-item {
    display: block;
    margin-bottom: 2px;
  }
  .post-meta .sep { display: none; }
}

/* ==========================
   Newsletter – základ
   ========================== */
.newsletter { display:block; width:100%; }

.newsletter__inner{
  background:#e1ebe2;
  border:1px solid #e1ebe2;
  border-radius:12px;
  padding:18px 24px;
  box-sizing:border-box;
}

.newsletter__form{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;     /* aby sa na menších obrazovkách zlomilo */
}

.newsletter__label{
  font-size:1rem;   /* bolo 1rem, daj väčšie */
  color:#333;
  white-space:nowrap;
}

.newsletter__label span{
  font-weight:700;
  margin-left:4px;
  font-size:1.2rem;   /* nech je rovnaké ako hlavný text */
}


.newsletter__input{
  flex:1;
  min-width:220px;
  height:44px;
  padding:0 12px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:1rem;
}

.newsletter__input:focus{
  outline:none;
  border-color:#9bb79e;
  box-shadow:0 0 0 3px rgba(66,112,77,.12);
}

/* honeypot */
.newsletter__hp{ display:none !important; }

/* ==========================
   Inline verzia (článok)
   ========================== */
.newsletter--inline .newsletter__inner {
  max-width: 900px;
  margin: 0px auto;   /* 20px hore/dole, auto vľavo/vpravo */
  padding-bottom: 50px;
}

/* ==========================
   Mobil – úpravy len do 768px
   ========================== */
@media (max-width: 768px){

  /* stĺpček pod seba, zarovnanie doľava */
  .newsletter .newsletter__form{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: left;
  }

  .newsletter .newsletter__label{
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    font-size: 1rem;
  }

  /* pohodlná výška poľa, fixnuté override */
  .newsletter .newsletter__input{
    height: 37px !important;
    min-height: 37px;
    line-height: 37px;
    padding: 0 14px !important;
    font-size: 16px;
    box-sizing: border-box;
    -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
  }

  /* (voliteľné) ak obalíš pomlčku do <span class="nl-sep">–</span> */
  .newsletter .newsletter__label .nl-sep{ display:none; }
}

.btn-main[disabled]{
  opacity:.5; cursor:not-allowed; pointer-events:none;
}

/* ČLÁNOK (desktop ≥ 992px): 1. riadok label, 2. riadok input + obe tlačidlá vedľa seba */
@media (min-width: 992px){
  .newsletter--inline .newsletter__form{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:12px 14px !important;
  }
  /* 1) label s textom zaberie celý 1. riadok */
  .newsletter--inline .newsletter__label{
    flex:0 0 100% !important;
    margin:0 0 4px 0 !important;
    white-space:normal !important;
  }
  /* 2) 2. riadok: input sa roztiahne, tlačidlá ostanú vpravo vedľa seba */
  .newsletter--inline .newsletter__input{
    flex:1 1 auto !important;
    min-width:320px !important;      /* aby mal input vždy rozumnú šírku */
    margin:0 !important;
  }
  .newsletter--inline .btn-main{
    flex:0 0 auto !important;
    margin:0 !important;
  }
  /* odkaz "Odhlásiť sa" zarovnať k tlačidlu */
  .newsletter--inline #nl-toggle{
    flex:0 0 auto !important;
    display:inline-block !important;
    margin:0 !important;
    padding-left:8px !important;
    line-height:38px !important;     /* výška textu = výške tlačidla */
    vertical-align:middle !important;
  }
}

/* medzera medzi H2 a prvým odstavcom/obsahom */
.blog-read .post-text h2 {
  margin-bottom: 12px;
}

.blog-read .post-text h2 + p,
.blog-read .post-text h2 + figure,
.blog-read .post-text h2 + ul,
.blog-read .post-text h2 + ol {
  margin-top: 0;
}

/* === Konverzný blok v článku (Variant A / B) === */
.blog-conversion-box {
  background-color: #E1EBE2; /* Jemný zelenkastý podklad zladený s dizajnom */
  border: 1px solid #dce6db;
  padding: 30px;
  margin: 45px 0;            /* Definuje odsadenie od okolitého textu */
}

.blog-conversion-box h3 {
  color: #354e33;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 22px;
}

.blog-conversion-box p {
  margin-bottom: 0;
  color: #4a5c48;
  font-size: 16px;
}

@media (max-width: 991px) {
  .blog-conversion-box {
    padding: 20px;
    margin: 30px 0;
  }
}
/* Keep comment text inside the article, including long words and URLs. */
#comment-list .d-flex {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
#comment-list .d-flex > div {
  flex: 1 1 0%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
#comment-list .d-flex > div p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}