/* ============================================================
   OPERA-PREHLIADAC.COM
   Vlastné úpravy šablóny Helix3 (Joomla 4.4)
   ------------------------------------------------------------
   Build:  2026-08-02-A
   Paleta: #cd2525  základná červená
           #a21d1d  tmavšia (hover, aktívny stav)
           #de3636  svetlejšia (navštívené odkazy)
           #b32020  okraj tlačidiel
           #8c1919  okraj tlačidiel pri hover
   ------------------------------------------------------------
   Obmedzenia:
   - Bez var() – Opera 12 (Presto) CSS premenné nepozná.
   - Bootstrap sa načítava AŽ ZA týmto súborom, preto sa pri
     odkazoch pracuje s vyššou špecificitou alebo !important.
   ------------------------------------------------------------
   Obsah:
    1. Globálne odkazy
    2. Tlačidlá a primárne plochy
    3. Hlavička a hlavné menu
    4. Obsah a články
    5. Lišta "Čítať ďalej"
    6. Modul Posledné komentáre
    7. JComments – detail diskusie
    8. Paginácia
    9. Systémové správy
   10. Prihlasovací modul
   11. Prepis modrých odkazov Bootstrapu
   12. Odkazy v texte článku
   13. Päta
   14. Mobilné zobrazenie (≤ 991 px)
   ============================================================ */


/* ============================================================
   1. GLOBÁLNE ODKAZY
   Základná farebnosť odkazov pre celý web.
   Poradie L-V-H-A je záväzné: keby :visited nasledovalo po
   :hover, navštívené odkazy by na kurzor nereagovali.
   ============================================================ */

a          { color: #cd2525; transition: color 0.2s; }
a:visited  { color: #de3636; }
a:hover,
a:focus    { color: #a21d1d; text-decoration: none; }


/* ============================================================
   2. TLAČIDLÁ A PRIMÁRNE PLOCHY
   Firemná červená na hlavných akčných prvkoch, titulku stránky
   a päte. Trieda .alert tu zámerne NIE JE – inak by červené
   pozadie dostali aj úspešné a informačné hlásenia (sekcia 9).
   ============================================================ */

.btn-primary,
.sppb-btn-primary,
.sp-page-title,
#sp-footer {
  background-color: #cd2525;
  color: #ffffff !important;
}

.btn-primary { border-color: #b32020; }

.btn-primary:hover {
  background-color: #a21d1d;
  border-color: #8c1919;
  color: #ffffff !important;
}

/* Profil používateľa – biely text na červenom tlačidle */
.com-users-profile .btn,
.com-users-profile .btn-primary { color: #ffffff !important; }


/* ============================================================
   3. HLAVIČKA A HLAVNÉ MENU
   ============================================================ */

/* Hlavička má svetlé pozadie s obrázkom. Deklarácia zakazuje
   prehliadaču automatické tmavnutie (auto-dark v Androide,
   režim vysokého kontrastu), ktoré text menu inak invertuje. */
#sp-header, #sp-header *,
#sp-menu,   #sp-menu * {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
}

/* Neaktívne položky menu – čierne, bez tieňa a priesvitnosti */
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Aktívna položka a hover – červené zvýraznenie */
#sp-menu .sp-megamenu-parent > li.active > a,
#sp-menu .sp-megamenu-parent > li.current-item > a,
#sp-menu .sp-megamenu-parent > li:hover > a,
#sp-menu .sp-megamenu-parent > li:focus > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
  color: #cd2525 !important;
  -webkit-text-fill-color: #cd2525 !important;
}


/* ============================================================
   4. OBSAH A ČLÁNKY
   ============================================================ */

#sp-main-body { padding: 35px 0; }
#sp-component { padding-right: 10px; }

/* Karta článku.
   position:relative je kotvou pre absolútne umiestnenú lištu
   .comments-readmore (sekcia 5); spodný padding 55px jej
   vyhradzuje priestor – pri jeho znížení lišta prekryje text. */
article.item,
.article,
.item-featured {
  position: relative !important;
  display: block !important;
  overflow: visible !important;
  padding: 5px 15px 55px 15px;
  margin-bottom: 35px;
  background-color: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 5px;
}

.entry-header    { position: relative; margin-bottom: 15px; }
.entry-header h2 { margin-bottom: 10px; }

/* Obrázky: trieda .foto pre obtekané náhľady v texte,
   samostatný obrázok v odstavci sa centruje. */
.foto    { margin: 0 10px 2px 0; border: 1px solid #fff; }
p > img  { display: block; margin-left: auto; margin-right: auto; }

/* Riadok meta informácií nad nadpisom (autor, kategória,
   dátum, počet návštev). Zámerne stíšený, aby neprekrýval
   vizuálnu váhu nadpisu. */
.article-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
}

.article-info .meta-item,
.article-info span,
.article-info a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.article-info i,
.article-info .fa,
.article-info .glyphicon,
.article-info .sp-icon {
  margin: 0 !important;
  color: rgba(0, 0, 0, 0.46) !important;
  opacity: 0.85 !important;
  font-size: 0.88em !important;
  line-height: 1;
}

.article-info a:hover {
  color: rgba(0, 0, 0, 0.78);
  text-decoration: underline;
}


/* ============================================================
   5. LIŠTA "ČÍTAŤ ĎALEJ"
   Sivý pás ukotvený na spodnom okraji karty článku.
   Vľavo odkaz na komentáre, vpravo tlačidlo Čítať ďalej
   (poradie zabezpečuje row-reverse).
   ============================================================ */

.comments-readmore {
  position: absolute !important;
  bottom: 5px !important;
  left: 5px !important;
  width: calc(100% - 10px) !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #f4f4f4 !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

.comments-readmore .row {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.comments-readmore p,
.comments-readmore .readmore p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Tlačidlo Čítať ďalej – šípka je súčasťou pozadia (jc_readmore.gif).
   Cesty sú relatívne k umiestneniu tohto CSS súboru. */
.readmore a.btn-secondary {
  display: inline-block !important;
  padding: 4px 24px 4px 10px !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: #fff !important;
  background: #cd2525 url(../images/jc_readmore.gif) no-repeat 94% 50% !important;
  border: none !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}

.readmore a.btn-secondary:hover {
  background-color: #de3636 !important;
  background-image: url(../images/jc_readmorea.gif) !important;
}

/* Odkaz na komentáre – bez rámu, ikona bubliny ako pozadie */
.btn-group[aria-label="Comments link"] {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

.btn-group[aria-label="Comments link"] a.btn-secondary {
  padding: 2px 10px 2px 28px !important;
  font-size: 12px !important;
  color: #333 !important;
  background: transparent url(../images/jc_comment.png) no-repeat left center !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}


/* ============================================================
   6. MODUL POSLEDNÉ KOMENTÁRE (pravý panel)
   Zoznam najnovších príspevkov: názov článku normálnym písmom,
   pod ním úryvok komentára kurzívou uvedený červeným ">".
   Viditeľný iba prihláseným používateľom.
   ============================================================ */

.newsfeed li {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e6e6;
}

.newsfeed .feed-link a {
  color: #222;
  font-weight: 400;
  text-decoration: none;
}

.newsfeed .feed-item-description {
  display: block;
  padding-left: 8px;
  font-size: 0.92em;
  font-style: italic;
  line-height: 1.35;
  color: #666;
}

.newsfeed .feed-item-description::before {
  content: ">";
  margin-right: 5px;
  color: #cd2525;
  font-weight: bold;
  font-style: normal;
}

/* Odkazy v pravom paneli sú stíšené, aby vedľa seba nekričalo
   viacero červených položiek naraz. */
#sp-right a       { color: #333 !important; text-decoration: none; }
#sp-right a:hover { color: #cd2525 !important; text-decoration: underline; }


/* ============================================================
   7. JCOMMENTS – DETAIL DISKUSIE
   ============================================================ */

/* Karta jedného príspevku */
.comment-item,
.jc-comment {
  margin-bottom: 8px !important;
  padding: 5px 10px !important;
  background-color: #fdfdfd !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Citovaný text: prerušovaný rám dookola, plný červený vľavo.
   Poradie deklarácií je dôležité – border-left musí nasledovať
   až za skratkou border, inak ho prepíše. */
.comment-body blockquote {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-style: italic !important;
  background-color: #f9f9f9 !important;
  border: 1px dashed #849b9f !important;
  border-left: 3px solid #cd2525 !important;
}

.comment-body figure           { margin: 0 0 10px 0 !important; }
.comment-body figure > blockquote { margin-top: 0 !important; }

/* Hlavička citácie ("Citovanie XY:") */
.comment-body figcaption.quote {
  display: block !important;
  margin: 0 !important;
  padding: 0 0 4px 14px !important;
  font-size: 13px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #666 !important;
}

.comment-body figcaption.quote::before {
  content: "> ";
  color: #cd2525;
  font-style: normal;
}

/* Avatary sú stíšené do odtieňov sivej, aby nerušili čítanie */
#comments .comment-avatar img,
#comments .avatar img {
  opacity: 0.35;
  filter: grayscale(100%);
  border-radius: 3px;
}

/* Prázdne zalomenia a ikony "+", ktoré JComments generuje navyše */
.comment-body figure br,
.comment-box br,
.blog .icon-plus,
.blog-featured .icon-plus {
  display: none !important;
}

/* V blogovom a featured výpise sa odkaz na komentáre generuje
   dvakrát (#comments aj #addcomments). Druhý sa skrýva. */
.blog .btn-group:has(a[href*="#comments"]) > a[href*="#addcomments"],
.blog-featured .btn-group[aria-label="Comments link"]:has(a[href*="#comments"]) > a[href*="#addcomments"] {
  display: none !important;
}

/* Akcie pod príspevkom (Odpovedať, Citovať, Upraviť) */
.comments-buttons,
.user-actions {
  margin-top: 5px !important;
  text-align: right !important;
  font-size: 12px !important;
  font-style: italic;
}

.comments-buttons a {
  margin-left: 0 !important;
  color: #cd2525 !important;
  text-decoration: none !important;
}

.comments-buttons a:hover { text-decoration: underline !important; }


/* ============================================================
   8. PAGINÁCIA
   Stránkovanie v sivom bloku; čísla nad počítadlom strán
   (poradie rieši flex-direction: column + order na .counter).
   ============================================================ */

.pagination-wrapper,
div.pagination {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 20px 0 !important;
  padding: 15px !important;
  background-color: #f9f9f9 !important;
  border-radius: 5px;
  clear: both;
}

ul.pagination {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

.pagination li a,
.pagination li span,
.pagination .page-link {
  margin: 0 2px !important;
  padding: 6px 12px !important;
  color: #000000 !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
}

.pagination li a:hover {
  background-color: #eee !important;
  color: #cd2525 !important;
}

.pagination .active span,
.pagination .active a {
  background-color: #cd2525 !important;
  border-color: #cd2525 !important;
  color: #ffffff !important;
}

.pagination .counter {
  order: 2 !important;
  font-size: 11px !important;
  color: #888 !important;
}


/* ============================================================
   9. SYSTÉMOVÉ SPRÁVY
   Zafarbené je iba varovanie. Úspešné (zelené) a informačné
   (modré) hlásenia si ponechávajú predvolený vzhľad Bootstrapu.
   ============================================================ */

#system-message-container .alert.alert-warning {
  background-color: #cd2525 !important;
  color: #ffffff !important;
  border-color: #b32020 !important;
}

/* Krížik na zatvorenie je čierne SVG – filter ho zbelie */
#system-message-container .alert-warning .btn-close {
  filter: brightness(0) invert(1) !important;
  opacity: 0.8;
}


/* ============================================================
   10. PRIHLASOVACÍ MODUL
   Kompaktnejšia verzia predvoleného modulu: menšie písmo,
   nižšie polia, zjednotená výška ikon aj vstupov na 34 px.
   ============================================================ */

/* Štvorcový box s ikonou pred vstupným poľom */
.mod-login .input-group-text,
.login .input-group-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  background: #f3f3f3 !important;
  border: 1px solid #d6d6d6 !important;
  color: #444 !important;
  box-sizing: border-box !important;
}

.mod-login .input-group-text i,
.mod-login .input-group-text .icon-user,
.mod-login .input-group-text .icon-lock,
.login .input-group-text i,
.login .input-group-text .icon-user,
.login .input-group-text .icon-lock {
  font-size: 12px !important;
  line-height: 1 !important;
  color: #333 !important;
}

/* Vstupné polia (bez checkboxov a odosielacích tlačidiel) */
.mod-login input:not([type="checkbox"]):not([type="submit"]),
.login input:not([type="checkbox"]):not([type="submit"]) {
  height: 34px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
}

.mod-login label,
.login label,
.mod-login .form-check-label,
.login .form-check-label {
  font-size: 12px !important;
  color: #333 !important;
}

.mod-login .form-links a,
.login .form-links a,
.mod-login .mod-login__options a,
.login .mod-login__options a {
  font-size: 12px !important;
}

/* Spoločný rozmer všetkých tlačidiel modulu */
#form-login-submit .btn,
.mod-login .btn,
.mod-login input.btn,
.mod-login__logout .btn,
.login .btn,
.login input.btn,
.logout-button .btn {
  padding: 5px 11px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Prihlásiť / Odhlásiť – hlavná akcia, firemná červená */
#form-login-submit .btn-primary,
.mod-login .btn-primary,
.mod-login input.btn-primary,
.mod-login__logout .btn-primary,
.login .btn-primary,
.login input.btn-primary,
.logout-button .btn-primary {
  background: #cd2525 !important;
  border: 1px solid #b32020 !important;
  color: #fff !important;
}

#form-login-submit .btn-primary:hover,
.mod-login .btn-primary:hover,
.mod-login input.btn-primary:hover,
.mod-login__logout .btn-primary:hover,
.login .btn-primary:hover,
.login input.btn-primary:hover,
.logout-button .btn-primary:hover {
  background: #a21d1d !important;
  border-color: #8c1919 !important;
  color: #fff !important;
}

/* Vytvoriť účet – vedľajšia akcia, neutrálna sivá namiesto
   predvolenej zelenej .btn-success */
#form-login-submit a.btn-success,
.mod-login a.btn-success,
.login a.btn-success {
  background: #efefef !important;
  border: 1px solid #d2d2d2 !important;
  color: #333 !important;
  box-shadow: none !important;
}

#form-login-submit a.btn-success:hover,
.mod-login a.btn-success:hover,
.login a.btn-success:hover {
  background: #e2e2e2 !important;
  border-color: #c6c6c6 !important;
  color: #111 !important;
  text-decoration: none !important;
}


/* ============================================================
   11. PREPIS MODRÝCH ODKAZOV BOOTSTRAPU
   Bootstrap definuje a { color:#0d6efd } a načítava sa až za
   týmto súborom. Pri rovnakej špecificite preto vyhráva jeho
   modrá. Prvky nižšie sú tie, ktoré tým boli zasiahnuté.
   ============================================================ */

/* Príprava pre Bootstrap 5.3+, ktorý farbu odkazov číta z premenných.
   V aktuálnej verzii je #0d6efd zapísaná napevno, takže tento blok
   zatiaľ nemá účinok. Presto ho ignoruje celý. */
:root {
  --bs-link-color: #cd2525;
  --bs-link-hover-color: #a21d1d;
  --bs-link-color-rgb: 205, 37, 37;
  --bs-link-hover-color-rgb: 162, 29, 29;
}

/* ---------- Ikona hamburgera ----------
   Helix3 vykresľuje ikonu buď ikonovým fontom, SVG obrázkom
   alebo tromi <span> prúžkami. Pokryté sú všetky tri varianty.
   Pri fonte a SVG sa mení iba farba – background-color by na
   pseudoelemente vykreslil plný červený štvorec. */
#offcanvas-toggler,
#offcanvas-toggler > a,
.offcanvas-toggler-right,
.offcanvas-toggler-left,
.offcanvas-toggler-primary {
  color: #cd2525 !important;
  -webkit-text-fill-color: #cd2525 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Varianta ikonovým fontom */
#offcanvas-toggler i,
#offcanvas-toggler .fa,
#offcanvas-toggler i::before,
#offcanvas-toggler i::after {
  color: #cd2525 !important;
  -webkit-text-fill-color: #cd2525 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
}

/* Varianta SVG – iba výplň, obrys musí zostať prázdny */
#offcanvas-toggler svg,
#offcanvas-toggler svg path,
.burger-icon svg path {
  fill: #cd2525 !important;
  stroke: none !important;
}

/* Varianta troch prúžkov – tu je background-color na mieste */
.burger-icon,
#offcanvas-toggler .burger-icon {
  background: none !important;
  background-color: transparent !important;
}

.burger-icon > span,
#offcanvas-toggler .burger-icon > span {
  background-color: #cd2525 !important;
}

/* ---------- Odkaz "Upraviť" (viditeľný len administrátorovi) ---------- */
a[href*="task=article.edit"],
a[href*="layout=edit"],
.edit-icon a,
a.edit-icon,
.icons a,
.icons .btn,
.icons .btn-link,
.article-header .icons a,
.entry-header .icons a {
  color: #cd2525 !important;
  -webkit-text-fill-color: #cd2525 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

a[href*="task=article.edit"]:hover,
.edit-icon a:hover,
.icons a:hover {
  color: #a21d1d !important;
  -webkit-text-fill-color: #a21d1d !important;
  text-decoration: underline !important;
}

a[href*="task=article.edit"] i,
.edit-icon a i,
.icons a i,
.icons a .fa {
  color: #cd2525 !important;
}

/* ---------- Odkazy vnútri diskusie ---------- */
#comments a,
.comment-item a,
.jc-comment a,
#jc a {
  color: #cd2525 !important;
}

#comments a:hover,
.comment-item a:hover,
#jc a:hover {
  color: #a21d1d !important;
  text-decoration: underline !important;
}

/* E-mailové adresy autorov komentárov.
   Päta je vyňatá – má červené pozadie a rieši ju sekcia 13. */
a[href^="mailto:"]:not(#sp-footer a),
#comments a[href^="mailto:"],
.comment-author a[href^="mailto:"],
.comment-author-email a {
  color: #cd2525 !important;
  -webkit-text-fill-color: #cd2525 !important;
  text-decoration: none !important;
}

a[href^="mailto:"]:hover { text-decoration: underline !important; }

/* Odkaz "Zasielať oznámenie o nových komentároch".
   JComments ho generuje s rôznym označením podľa verzie,
   preto je pokrytých viacero variantov naraz. */
#comments-subscribe,
#comments-subscribe a,
a#comments-subscribe,
a.jc-subscribe,
#comments a[href*="subscribe"],
#comments a[onclick*="subscribe"],
.comments-subscribe a {
  color: #cd2525 !important;
  -webkit-text-fill-color: #cd2525 !important;
  text-decoration: none !important;
}

#comments-subscribe a:hover,
a.jc-subscribe:hover,
#comments a[href*="subscribe"]:hover {
  color: #a21d1d !important;
  text-decoration: underline !important;
}


/* ============================================================
   12. ODKAZY V TEXTE ČLÁNKU
   Zásah je zámerne obmedzený na odstavce, tabuľky, citácie
   a zoznamy v tele článku. Selektor #sp-component a by chytil
   aj nadpisy, meta riadok a moduly – celý výpis by zčervenal.
   Nadpisy a meta majú preto nižšie vlastný reset.
   ============================================================ */

#sp-component p a,
#sp-component .article-body p a,
#sp-component .item-page p a,
#sp-component td a,
#sp-component blockquote a,
#sp-component ul:not(.pagination):not(.nav):not(.article-info) li a,
#sp-component ol li a {
  color: #cd2525;
  text-decoration: none;
}

#sp-component p a:visited { color: #de3636; }

#sp-component p a:hover,
#sp-component p a:focus,
#sp-component td a:hover,
#sp-component ol li a:hover {
  color: #a21d1d;
  text-decoration: underline;
}

/* Prvky s vlastným pozadím podčiarknutie nedostávajú */
#sp-component p a.btn,
#sp-component p a.btn-primary,
#sp-component p a.btn-secondary,
#sp-component .readmore a,
#sp-component .comments-readmore a,
#sp-component .pagination a,
#sp-component .article-info a,
#sp-component .btn-group a {
  text-decoration: none !important;
}

#sp-component .readmore a.btn-secondary { color: #fff !important; }

/* Reset: nadpisy článkov zostávajú tmavé, červenejú až pri hover */
#sp-component h1 a, #sp-component h2 a,
#sp-component h3 a, #sp-component h4 a,
#sp-component h5 a, #sp-component h6 a,
#sp-component .entry-header h2 a,
#sp-component .article-title a,
#sp-component .page-header a {
  color: #222222;
  text-decoration: none;
}

#sp-component h1 a:hover, #sp-component h2 a:hover,
#sp-component h3 a:hover, #sp-component h4 a:hover,
#sp-component .entry-header h2 a:hover,
#sp-component .article-title a:hover {
  color: #cd2525;
  text-decoration: none;
}

/* Reset: meta riadok zostáva sivý (nadväzuje na sekciu 4) */
#sp-component .article-info a,
#sp-component .article-info a:visited {
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
}

#sp-component .article-info a:hover {
  color: rgba(0, 0, 0, 0.78);
  text-decoration: underline;
}

/* ---------- Tlačidlá vo formulároch a v obsahu ----------
   Prvky s farebným pozadím potrebujú biely text, inak ich
   prebije pravidlo #sp-component p a a text splynie s podkladom
   (napr. prázdne tlačidlo Zrušiť v registrácii).
   Vymenované sú IBA triedy s vlastným farebným pozadím –
   .btn-group ako celok sem nepatrí, lebo rovnakú triedu
   nesie aj textový odkaz na komentáre (sekcia 5). */

#sp-component a.btn-primary,
#sp-component a.btn-danger,
#sp-component a.btn-success,
#sp-component a.btn-info,
#sp-component a.btn-warning,
#sp-component a.btn-dark,
#sp-component .readmore a.btn-secondary,
#sp-component form a.btn-primary,
#sp-component form a.btn-danger,
#sp-component .control-group a.btn-primary,
#sp-component .control-group a.btn-danger {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

/* Svetlé a odľahčené tlačidlá – tmavý text */
#sp-component a.btn-light,
#sp-component a.btn-outline-secondary,
#sp-component a.btn-outline-primary,
#sp-component a.btn-link {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}

/* Poistka: odkaz na komentáre v lište pod článkom
   ostáva tmavý na svetlom podklade (nadväzuje na sekciu 5). */
#sp-component .btn-group[aria-label="Comments link"] a,
#sp-component .btn-group[aria-label="Comments link"] a.btn-secondary,
#sp-component .comments-readmore .btn-group a {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  background-color: transparent !important;
  text-decoration: none !important;
}


/* ============================================================
   13. PÄTA
   Podklad je firemná červená (sekcia 2), preto tu musia byť
   všetky odkazy vrátane mailto biele. Blok stojí zámerne ako
   posledný, aby prebil pravidlá zo sekcií 11 a 12.
   Ak #sp-bottom nemá červené pozadie, tento riadok vypustiť.
   ============================================================ */

#sp-footer a,
#sp-footer a:link,
#sp-footer a:visited,
#sp-footer a[href^="mailto:"],
#sp-footer .sp-copyright a,
#sp-bottom a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

#sp-footer a:hover,
#sp-footer a:focus,
#sp-footer a[href^="mailto:"]:hover {
  color: #f2c7c7 !important;
  -webkit-text-fill-color: #f2c7c7 !important;
}


/* ============================================================
   14. MOBILNÉ ZOBRAZENIE (≤ 991 px)
   Hranica 991 px zodpovedá zlomu "lg" v Bootstrape aj bodu,
   v ktorom Helix3 prepína na off-canvas menu.
   ============================================================ */

@media (max-width: 991px) {

  /* Hlavička sa musí prispôsobiť výške obsahu; pevných 90 px
     z template.css by orezalo logo aj ikonu menu. */
  #sp-header {
    height: auto !important;
    min-height: 64px;
    overflow: visible !important;
  }

  /* Logo vľavo, ikona menu vpravo v jednom riadku.
     Bez nowrap sa riadok zalomí a menu spadne pod logo. */
  #sp-header .container > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* Logo sa smie zmenšiť, ale min-width mu bráni, aby ho
     flexbox stlačil na nulovú šírku. */
  #sp-logo {
    flex: 0 1 auto !important;
    min-width: 190px;
    max-width: 70%;
  }

  #sp-logo .logo {
    display: flex !important;
    align-items: center;
    height: auto !important;
  }

  /* Logo sa vykresľuje ako pozadie odkazu, nie cez <img>.
     Tým sa obchádza atribút srcset, ktorý na displejoch
     s vyšším DPR žiadal neexistujúci retina variant.
     Cesta je absolútna od koreňa webu. */
  #sp-logo .logo a {
    display: block !important;
    width: 190px;
    max-width: 100%;
    height: 44px;
    background: url(/images/OPCmini.png) left center / contain no-repeat;
    text-indent: -9999px;
    overflow: hidden;
  }

  #sp-logo .logo a img { display: none !important; }

  /* Menu zarovnané doprava; megamenu ustupuje off-canvasu */
  #sp-menu {
    flex: 0 0 auto !important;
    margin-left: auto;
    text-align: right;
    position: static !important;
  }

  #sp-menu .sp-megamenu-parent { display: none !important; }

  /* Ikona hamburgera musí byť viditeľná (farbu rieši sekcia 11) */
  #offcanvas-toggler,
  .offcanvas-toggler-right,
  .offcanvas-toggler-left {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Poistka proti vodorovnému posunu pri pretečení hlavičky */
  body { overflow-x: hidden; }
}