/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

html {
  scroll-behavior: smooth;
}

html, body {
  background-color: var(--secondary);
}
main {
  background-color: var(--bg-body);
}

a {
    transition: all 0.3s ease;
}

.nowrap {
 white-space: nowrap;
}

main p a:hover {
    text-decoration: underline;
}
.expand-click:focus-within:after {
    content: "";
    outline: none!important;
}

.tlacitko .wp-block-button__link {
    background-color: var(--primary);
    border-radius: 1rem;
    letter-spacing: 0px;
    margin-top: 15px;
    padding: 6px 14px;
}
.tlacitko .wp-block-button__link:hover {
    background-color: var(--primary-d-1);
}

/* === GLOBÁLNA TRIEDA PRE TMAVÉ SEKCIE === */

.section--dark {
    /* Nastavenie tmavého pozadia */
    background-color: var(--secondary); /* alebo #1A2332 */
    
    /* Pre istotu (Fallback pre elementy bez premenných) */
    color: var(--text-body-dark); 
}

/* Aplikácia farieb na elementy (ak CF nepoužíva premenné všade automaticky) */
.section--dark h1, 
.section--dark h2, 
.section--dark h3, 
.section--dark h4, 
.section--dark h5, 
.section--dark h6,
.section--dark .brxe-heading {
    color: var(--light);
}

/*
.section--dark p,
.section--dark li,
.section--dark span,
.section--dark .brxe-text-basic,
.section--dark .brxe-text {
    color: var(--text-body-dark);
}*/

.sub-menu > li:last-child {
    border-bottom: none!important;
}

.footer-menu a {
    color: var(--light-70);;
}
.footer-menu a:hover {
    color: var(--tertiary);;
}

/*======================= EFEKTY ========================*/
/* Definícia animácie "float" */
@keyframes kf-float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px); /* Posun hore o 20px */
    }
    100% {
        transform: translateY(0px); /* Návrat dole */
    }
}

/* Aplikácia na samotný element */
.efekt-float {
    animation: kf-float 6s ease-in-out infinite;
}




  /* Základný štýl pre všetky tabuľky */
table {
  width: 100%; 
  margin-bottom: 15px;
}

/* RESPONZIVITA - Iba pre obrazovky menšie ako 768px */
@media (max-width: 768px) {
  table {
    display: block;       /* Aktivuje skrolovanie na mobile */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

table th {
  text-align: left;
  font-weight: 800;
}

table thead tr:first-of-type {
  background-color: var(--primary);
  color: white;
}

table td {
  color: #444;
  vertical-align: top;
}

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Pridá vertikálnu linku medzi stĺpce */
table td, 
table th {
  padding: 0.5rem 1.5rem;
}

table ul {
  padding: 0px;
  margin-left: 16px;
  margin-block-start: 3px !important;
  margin-block-end: 3px !important;
}
table ul li {
  line-height: 1.2;
}


/* Start - LED indikátory */
.led {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.led-green { background-color: #44bb44; }
.led-yellow { background-color: #ffcc00; }
.led-red { background-color: #ee3333; }
/* End - LED indikátory */


.button {
  border: 1px solid currentColor;
  padding: 10px 20px;
  border-radius: var(--radius-m);
}

.fullimage {
  width: 100%;
  height: auto;
}

/* Start - Styles for BB Rich text element */
.brxe-text h1, 
.brxe-text h2,
.brxe-text h3,
.brxe-text h4,
.brxe-text h5,
.brxe-text h6 {
  margin-bottom: 10px;
}
.brxe-text ul {
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  padding-left: 3rem;
}
.brxe-text a {
  text-decoration: underline;
}
.brxe-text a:hover {
  text-decoration: none;
}
/* End - Styles for BB Rich text element */









/* Dizajn prevodu tabuliek do modernej verzie */
/* JEDNOTNÉ CSS */
  .tech-specs {
    --bg-alt: #f9f9f9;
    --border-color: #e0e0e0;
    --text-main: #333;
    font-family: inherit;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 5px;
    margin-bottom: 15px;
  }

  .ts-header-red {
    background-color: var(--primary, #0055aa);
    padding: 12px 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid var(--secondary, #003366);
  }

  .ts-row {
    position: relative;
    display: grid;
    /* Pridané zarovnanie na stred, aby texty "neviseli" rôzne vysoko */
    align-items: center; 
    border-bottom: 1px solid var(--border-color);
  }
  .ts-row:last-child { border-bottom: none; }
  .ts-row:nth-child(even) { background-color: var(--bg-alt); }
  .ts-row:hover {
    background-color: #f0f0f0;
  }

  .ts-cell {
    padding: 10px 15px;
    /* ZMAZAL SOM border-right. Moderný dizajn používa skôr biele miesto ako čiary */
    border-right: none; 
  }

  .ts-cell .brxe-text-basic {
    /* Povie prehliadaču, že môže zlomiť slovo kdekoľvek, ak preteká */
    overflow-wrap: anywhere; 
    word-break: break-word;
    /* Voliteľné: ak chceš, aby sa pri dlhom texte objavili tri bodky (iba pre 1 riadok) */
    /* text-overflow: ellipsis; */
  }
  
  /* Pomocná trieda pre COLSPAN (cez celý riadok) */
  .ts-span-all {
    grid-column: 1 / -1;
  }

  /* HLAVIČKA TABUĽKY (Šedá lišta - kategórie) */
  .ts-sub-header {
    background: #eeeeee;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
  }

/* --- RESPONZIVITA (Mobil) --- */

/* 1. Predvolene skryjeme mobilné popisy na desktope */
.mobile-label {
  display: none;
}

/* 2. Mobilné zobrazenie (max-width: 768px) */
@media (max-width: 768px) {
  
  /* 1. Rozbijeme mriežku na jeden stĺpec */
  .ts-row { 
    grid-template-columns: 1fr !important;
    display: flex;
    flex-direction: column;
    padding: 30px 0;
  }

  /* 2. Skryjeme hlavičku tabuľky */
  .ts-header-row {
    display: none !important;
  }

  /* 3. Zobrazíme mobilné popisy */
  .mobile-label {
    display: inline-block;
    font-weight: bold;
    color: #333;
    /* min-width: 60px;  Šírka popisu, aby boli hodnoty pod sebou */
    margin-right: 5px;
  }

  /* 4. Úprava buniek - VŠETKO VĽAVO */
  .ts-cell {
    padding: 0px 15px;
    width: 100%;
    display: flex;     
    align-items: center;
    justify-content: flex-start; /* TOTO JE ZMENA: Zarovná všetko doľava */
    text-align: left !important;
    border: none;
    gap: 0px; /* Medzera medzi prvkami sa rieši cez margin v HTML/Label */
  }

  /* Odsadenie názvu súboru */
  .ts-cell:first-child {
      margin-bottom: 5px;
  }
  
  /* Tlačidlo - to necháme v strede a podfarbené */
  .ts-cell .bricks-button {
    margin-top: 10px;
  }
  .ts-row { 
    padding-bottom: 15px;
  }
}


/* IKONY do Wysiwyg Editora cez Formats (vloží class="ikona-..." )*/
/* Styling pre odkaz s ikonou alert */
.ikona {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  line-height: 1; /* Pomáha pri presnom centrovaní flexboxom */
}

.ikona::before {
  content: "";
  display: inline-block;
  width: 1.4em;  
  height: 1.4em; 
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Namiesto background-image použijeme mask */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Základná farba pre všetky ikony (ak nezadefinuješ inú) */
  background-color: currentColor; 
  flex-shrink: 0;
}

.ikona-tabulka {
  margin-right: 4px;
  font-size: 1.6em;
  line-height: 0;
  font-weight: 600;
}


.ikona-pdf::before {
  /* Ak chceš PDF ikonu predsa len o niečo väčšiu ako 1em, tak tu: */
  width: 2em; 
  height: 2em;

  -webkit-mask-image: url("/wp-content/uploads/2026/02/icon-pdf.svg");
  mask-image: url("/wp-content/uploads/2026/02/icon-pdf.svg");
  background-color: var(--primary); /* Tvoja červená */
}

.ikona-info::before {
  -webkit-mask-image: url("/wp-content/uploads/2026/02/icon-info.svg");
  mask-image: url("/wp-content/uploads/2026/02/icon-info.svg");
}

.ikona-alert::before {
  -webkit-mask-image: url("/wp-content/uploads/2026/02/icon-warning.svg");
  mask-image: url("/wp-content/uploads/2026/02/icon-warning.svg");
}

.cerveny-text {
  color: var(--primary);
}

/* Polylang flag / text gap */
.lang-item a {
    gap: 5px!important;
}