/*
Theme Name: LIVAS
Theme URI: https://livas.sk/
Author: LIVAS
Author URI: https://livas.sk/
Description: Minimal, fast WordPress theme starter for LIVAS (Windows, Doors & Accessories).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: livas
Tags: custom-logo, one-column, two-columns, block-styles, wide-blocks
*/
:root{
  --lvs-navy:#1F2A44;
  --lvs-anth:#2E2E2E;
  --lvs-accent:#3BB273;
  --lvs-bg:#ffffff;
  --lvs-muted:#6B7280;
  --lvs-card:#F7F7FB;
  --lvs-radius:18px;
  --lvs-shadow:0 10px 30px rgba(0,0,0,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--lvs-anth);background:var(--lvs-bg);line-height:1.6}
a{color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 18px}
.topbar{background:var(--lvs-navy);color:#fff}
.topbar .row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:10px 0;font-size:14px}
.topbar a{color:#fff;text-decoration:none;opacity:.95}
.header{position:sticky;top:0;background:#fff;z-index:50;border-bottom:1px solid #eee}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:34px;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:600;color:var(--lvs-anth);opacity:.9}
.nav a:hover{opacity:1}
.cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:12px 16px;border:1px solid #e5e7eb;background:#fff;text-decoration:none;font-weight:700}
.btn.primary{background:var(--lvs-navy);border-color:var(--lvs-navy);color:#fff}
.btn.accent{background:var(--lvs-accent);border-color:var(--lvs-accent);color:#fff}
.hero{padding:52px 0 26px;background:linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%)}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.h1{font-size:44px;line-height:1.12;margin:0 0 10px}
.sub{color:var(--lvs-muted);font-size:18px;margin:0 0 20px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.pill{background:#fff;border:1px solid #e9e9f2;border-radius:999px;padding:8px 12px;font-weight:700;font-size:14px}
.card{background:#fff;border:1px solid #ececf4;border-radius:var(--lvs-radius);box-shadow:var(--lvs-shadow)}
.hero-card{padding:18px}
.hero-card h3{margin:0 0 10px}
.hero-card ul{margin:0;padding-left:18px;color:var(--lvs-muted)}
.section{padding:44px 0}
.section h2{font-size:30px;margin:0 0 16px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{padding:16px;border-radius:var(--lvs-radius);background:var(--lvs-card);border:1px solid #ececf4}
.kpi b{display:block;font-size:18px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.service{padding:18px}
.service h3{margin:0 0 8px}
.service p{margin:0 0 14px;color:var(--lvs-muted)}
/* ===== PRODUCT ICON BADGES ===== */
.product-title{margin:0 0 8px}
.product-card{position:relative}
.product-badge{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 0 12px;
  background:var(--lvs-navy);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:transform .25s ease, background .25s ease;
}
.product-badge svg{width:26px;height:26px;display:block}
.product-card:hover .product-badge{background:var(--lvs-accent);transform:translateY(-3px)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{padding:18px}
.step .n{width:34px;height:34px;border-radius:10px;background:var(--lvs-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:10px}
.cta-strip{padding:26px;border-radius:var(--lvs-radius);background:var(--lvs-navy);color:#fff;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-strip p{margin:0;opacity:.95}
.footer{background:#0f172a;color:#cbd5e1;margin-top:40px}
.footer .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:34px 0}
.footer a{color:#cbd5e1;text-decoration:none}
.footer small{opacity:.8}
.form{display:grid;gap:10px}
input,textarea,select{width:100%;padding:12px 12px;border-radius:12px;border:1px solid #e5e7eb;font:inherit}
@media (max-width: 960px){
  .hero .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .h1{font-size:36px}
}
/* ===== ZNACKY PAS ===== */

.brands-strip{
  background:#f5f5f7;
  padding:60px 0;
  overflow:hidden;
}

.brand-ticker{
  overflow:hidden;
  width:100%;
}

.brand-track {
  display:flex;
  align-items:center;
  gap:60px;
  animation: scrollBrands 15s linear infinite;
  will-change: transform;
}


.brand-item{ flex:0 0 auto; }

.brand-item img{
  height:80px;
  width:auto;
  display:block;
}

@keyframes scrollBrands{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* ===== FIX KPI na mobile (aby neprekrývali hero) ===== */
@media (max-width: 960px){

  /* istota: hero nech má normálnu výšku */
  .hero{
    min-height: auto !important;
    padding-bottom: 24px !important;
  }

  /* KPI kontajner nech ide normálne pod seba */
  .kpis{
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  /* KPI karty menšie, aby sa zmestili */
  .kpi{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 12px !important;
  }

  .kpi b{
    font-size: 14px !important;
  }

  .kpi .muted, .kpi span{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
}

/* na úplne malom mobile nech idú pod seba */
@media (max-width: 520px){
  .kpis{
    grid-template-columns: 1fr !important;
  }
}
.product-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 8px;
}

.product-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  color:var(--lvs-navy); /* hlavná farba */
}

.service:hover .product-icon{
  color:var(--lvs-accent); /* akcent pri hover */
}

/* ===== RESPONSIVE (tablet + mobile) ===== */
.nav-toggle{
  display:none;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  line-height:1;
}
.nav-toggle svg{width:20px;height:20px;display:block}

@media (max-width: 1024px){
  .container{padding:0 16px}
  .brand img{height:32px}
  .hero .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .h1{font-size:38px}
}

@media (max-width: 720px){
  .topbar .row{flex-direction:column;align-items:flex-start}
  .header .row{flex-wrap:wrap}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .cta{gap:8px}
  .btn{padding:10px 14px}
  .brand img{height:30px}
  .nav{display:none;width:100%}
  .nav ul{flex-direction:column;gap:10px;padding:10px 0}
  body.nav-open .nav{display:block}
  body.nav-open .cta{width:100%}
}

@media (max-width: 640px){
  .cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .h1{font-size:32px}
  /* override inline hero height on small screens */
  .hero{min-height:auto !important;padding:60px 0 24px !important}
  .brand-item img{height:48px}
}
body{
    font-family: 'Inter', Arial, sans-serif;
    font-size:16px;
    line-height:1.6;
    color:#2E2E2E;
}
p{
    margin-bottom:18px;
    font-size:16px;
}
/* =========================
   LIVAS – jednotná typografia
   ========================= */

/* 1) Globálne premenné – ľahko zmeníš na jednom mieste */
:root{
  --lvs-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lvs-text: 16px;
  --lvs-line: 1.65;

  --lvs-color-text: #2E2E2E;
  --lvs-color-head: #1F2A44;

  --lvs-h1: 44px;
  --lvs-h2: 32px;
  --lvs-h3: 24px;
}

/* 2) Základ – celé telo webu */
html{ font-size: 100%; }
body{
  font-family: var(--lvs-font);
  font-size: var(--lvs-text);
  line-height: var(--lvs-line);
  color: var(--lvs-color-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3) Nadpisy – jednotný štýl */
h1, h2, h3, h4, h5, h6{
  font-family: var(--lvs-font);
  color: var(--lvs-color-head);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
}

h1{ font-size: var(--lvs-h1); }
h2{ font-size: var(--lvs-h2); font-weight: 700; }
h3{ font-size: var(--lvs-h3); font-weight: 700; }

/* 4) Bežný text */
p{
  margin: 0 0 1em;
}

/* 5) Odkazy – nech sú konzistentné */
a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 6) Zoznamy */
ul, ol{
  margin: 0 0 1em 1.2em;
}
li{ margin: 0.35em 0; }

/* 7) WordPress / Gutenberg – aby editor nepokazil štýl */
.entry-content,
.wp-site-blocks,
.wp-block-post-content{
  font-family: var(--lvs-font);
  color: var(--lvs-color-text);
}

.entry-content :where(p, li){
  font-size: var(--lvs-text);
  line-height: var(--lvs-line);
}

/* 8) Tlačidlá (Gutenberg + vlastné) */
.wp-block-button__link,
.button,
.btn{
  display: inline-block;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

/* 9) Mobilná typografia – aby to nebolo “rozsekané” */
@media (max-width: 768px){
  :root{
    --lvs-text: 16px;
    --lvs-h1: 30px;
    --lvs-h2: 24px;
    --lvs-h3: 20px;
  }

  /* dôležité: dlhé slová/URL nech nelámu layout */
  .entry-content{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}