/* ====== Základní téma ====== */
:root{
  --color-primary:#e76b50;
  --color-secondary:#bea6a0;
  --color-accent:#7fd1ae;
  --color-background:#fff5f0;

  --radius:12px;
  --shadow:0 4px 10px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body{
  margin:0;
  background-color:var(--color-background);
  color:#2b2b2b;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  line-height:1.5;
}

/* ====== Hlavička + logo ====== */
header{
  background:#fff;
  border-bottom:3px solid var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 1.25rem;
  gap:1rem;
  position:sticky;
  top:0;
  z-index:1000;
}

.header-left,.header-center,.header-right{
  display:flex; align-items:center;
}

.header-left{ flex:1; }
.header-center{ flex:2; justify-content:center; }
.header-right{ flex:1; justify-content:flex-end; gap:.5rem; }

.logo{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:clamp(1rem,1.6vw,1.15rem);
}
.logo-img{ width:72px; height:auto; }

/* ====== Navigace (desktop) ====== */
.nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.25rem);
  flex-wrap:wrap; /* dovolí zalomení do dvou řádků na ~1200 px */
  justify-content:center;
}

.nav-list > li > a,
.dropdown-toggle{
  appearance:none; background:none; border:0; cursor:pointer;
  text-decoration:none; font-weight:600;
  color:var(--color-primary);
  padding:.55rem .75rem;
  border-radius:8px;
  font-size:clamp(.95rem,1.5vw,1.05rem);
  line-height:1;
  display:inline-flex; align-items:center; gap:.35rem;
}

.nav-list > li > a:hover,
.nav-list > li > a:focus-visible,
.dropdown-toggle:hover,
.dropdown-toggle:focus-visible{
  background:rgba(231,107,80,.12);
  outline:none;
}

/* ====== Dropdown (desktop) ====== */
.has-dropdown{ position:relative; }
.chevron{ transition:transform .2s ease; }

.dropdown{
  position:absolute; left:0; top:calc(100% + .4rem);
  min-width:220px; padding:.4rem; margin:0;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  list-style:none; display:none;
}

.has-dropdown:hover .dropdown{ display:block; }
.has-dropdown:hover .chevron{ transform:rotate(180deg); }

.dropdown li a{
  display:block; width:100%;
  padding:.6rem .75rem; border-radius:8px;
  color:#333; text-decoration:none; font-weight:500;
}
.dropdown li a:hover,
.dropdown li a:focus-visible{
  background:rgba(190,166,160,.18);
  color:#000;
}

/* ====== Hamburger ====== */
.menu-toggle{
  display:none;
  cursor:pointer;
  font-size:1.8rem;
  color:var(--color-primary);
  background:none; border:none;
  padding:.25rem .5rem;
}

/* Odznaky vpravo */
.badge-icon{ height:40px; width:auto; }

/* ====== HERO a zbytek (ponecháno, jen drobné doladění) ====== */
.hero{
  
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:3em 2em; background-color:var(--color-secondary);
}
.hero h1{
  margin-bottom: 1em;/* větší mezera mezi nadpisem a obrázkem */
  font-size:clamp(1.5rem,3.2vw,3rem);
  color:#fff; 
  background-color:var(--color-primary);
  padding:.5em 1em; 
  border-radius:10px;
}
.hero-image-container{ width:100%; max-width:680px; }
.hero-image{ width:100%; height:auto; border-radius:10px; }

section{ padding:3em 2em; }
.services,.blog-preview{ background:#fff; }
.services h2,.blog-preview h2{ color:var(--color-primary); }

/* Karty služeb – beze změny */
.services ul{
  display:flex; flex-wrap:wrap; gap:2em; list-style:none; padding:0; justify-content:center;
}
.services li{
  background:var(--color-background);
  border:1px solid var(--color-secondary);
  border-radius:10px; padding:1.5em; text-align:center; max-width:300px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  transition:transform .25s ease;
}
.services li:hover{ transform:translateY(-6px); }
.service-icon{ width:80px; height:auto; margin-bottom:1em; }
.services h3{ color:var(--color-primary); margin:.25em 0 .5em; }
.services p{ font-size:.95rem; margin-bottom:1em; line-height:1.45; }
.services a{ text-decoration:none; color:var(--color-accent); font-weight:700; }

.contact{ background:var(--color-accent); color:#fff; }
.contact a{ color:#fff; font-weight:700; }
footer{
  text-align:center; padding:1em; font-size:.95rem;
  background:var(--color-primary); color:#fff;
}

/* ====== Responsivita ====== */

/* do ~1200 px povoleno wrap (už nastaveno) */

/* Tablet & mobil: hamburger + akordeon pro „Služby“ */
@media (max-width: 1024px){
  .header-right{ display:none; }    /* šetříme místo */
  .menu-toggle{ display:block; margin-left:auto; }
  .header-center{
    display:none; position:static;
  }
  .header-center.show{
    display: block !important;  width:100%;
    order:1; margin-top:.5rem;
  }
  .nav-list{
    flex-direction:column; align-items:stretch;
    gap:.25rem; padding:.25rem 0;
    background:#fff; border:1px solid rgba(0,0,0,.06);
    border-radius:var(--radius);
  }
  .nav-list > li > a,
  .dropdown-toggle{
    width:100%; justify-content:space-between;
    padding:.9rem 1rem; border-radius:10px;
    background:#fff;
  }

  /* Dropdown jako akordeon (na klik) */
  .has-dropdown .dropdown{
    position:static; display:none;
    box-shadow:none; border:1px dashed rgba(0,0,0,.1);
    border-radius:10px; margin:.25rem 0; padding:.25rem;
  }
  .has-dropdown.open .dropdown{ display:block; }
  .has-dropdown.open .chevron{ transform:rotate(180deg); }
}

/* Úpravy pro úplně malé displeje */
@media (max-width: 360px){
  .logo-img{ width:60px; }
}

/* ====== KB karty (úvodní stránka) ====== */
.kb-preview { background:#fff; }
.kb-preview h2 { color:var(--color-primary); margin-top:0; }
.kb-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.5rem;
}
@media (max-width: 1024px){ .kb-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .kb-grid{ grid-template-columns: 1fr; } }

.kb-card{
  background:var(--color-background);
  border:1px solid var(--color-secondary);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column; gap:.75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kb-card:hover{ transform: translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,.12); }

.kb-cover img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

.kb-meta{
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; color:#555; padding:0 1rem;
}
.kb-badge{
  background: rgba(231,107,80,.12);
  color: var(--color-primary);
  border: 1px solid rgba(231,107,80,.35);
  padding:.15rem .5rem; border-radius:999px; font-weight:700; font-size:.8rem;
}

.kb-card h3{ margin:0 .9rem; font-size:1.1rem; }
.kb-card h3 a{ color:#222; text-decoration:none; }
.kb-card h3 a:hover{ text-decoration:underline; }

.kb-card p{ margin:0 .9rem .5rem; color:#333; }

.kb-more{
  align-self:flex-start; margin:.25rem .9rem 1rem;
  text-decoration:none; font-weight:700; color:var(--color-accent);
}

.kb-actions{ margin-top:1rem; text-align:center; }
.btn{
  display:inline-block; padding:.75rem 1rem; border-radius:10px;
  background:var(--color-primary); color:#fff; text-decoration:none; font-weight:700;
}
.btn:hover{ filter:brightness(.95); }
