/* =========================
   Domov Oderské vrchy – CSS
   ========================= */

/* === PROMĚNNÉ === */
:root{
  --primary:#2E6B3E;
  --accent:#88B04B;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --bg-soft:#EFE9DF;
}

/* === ZÁKLAD === */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Inter,Arial,sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
a:hover{ text-decoration:underline; }

/* anchor offset pro sticky bar – jeden zápis */
[id]{ scroll-margin-top:84px; }

/* Kontejner */
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }

/* =========================================
   TOPBAR (desktop i mobil + slide-down anim.)
   ========================================= */
header.topbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #e2e8f0;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
header.topbar .topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; gap:14px;
}
header.topbar .brand{
  color:var(--primary); font-weight:800; font-size:22px;
  text-decoration:none; white-space:nowrap;
}

/* Navigace v jedné řádce + oddělovače */
header.topbar .mainnav{
  display:flex; align-items:center; gap:0; white-space:nowrap;
  animation: topbarSlideDown .35s ease both;       /* jemná animace */
}
header.topbar .mainnav a{
  color:#0f172a; font-weight:500; padding:0 18px; line-height:1;
  position:relative; display:inline-flex; align-items:center; min-height:38px;
}
header.topbar .mainnav a + a{ border-left:1px solid rgba(148,163,184,.6); }
header.topbar .mainnav a:hover{ color:#1f2937; }

/* CTA tlačítka vpravo */
.topbar__ctas{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:.55rem 1rem; border-radius:14px;
  font-size:.92rem; font-weight:700; border:1px solid transparent;
  transition:.2s ease; text-decoration:none;
}
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ opacity:.92; }
.btn-outline{ border:1px solid #cbd5e1; color:var(--ink); background:transparent; }
.btn-outline:hover{ background:#f8fafc; }

/* Toggle (pouze mobil) */
.nav-toggle{
  display:none; width:42px; height:36px; border:1px solid #cbd5e1; border-radius:10px;
  background:#fff; align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.nav-toggle__bar{ display:block; width:18px; height:2px; background:#334155; }

/* Slide-down animace pro desktop */
@keyframes topbarSlideDown{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:none; }
}

/* ================
   MOBILNÍ ÚPRAVY
   ================ */
@media (max-width:960px){

  html, body{ overflow-x:hidden !important; }           /* prevence bílé lišty */
  header.topbar .container{ padding-left:12px; padding-right:12px; }

  /* Topbar pod sebou: logo, CTA pod sebe, menu schované */
  header.topbar .topbar__inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  header.topbar .brand{ flex:0 0 100% !important; }
  header.topbar .mainnav{ display:none !important; }

  .topbar__ctas{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    width:100% !important;
  }
  .topbar__ctas .btn{ width:100% !important; text-align:center !important; }
}

/* ===============================
   HERO – CTA vždy v jednom řádku
   (na mobilech hezky pod sebe)
   =============================== */
.hero-ctas{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.hero-ctas .btn,
.hero-ctas .sppb-btn{                 /* SPPB kompatibilita */
  white-space:nowrap !important;      /* nezalamovat text */
  min-width:220px !important;         /* aby „Jak to u nás vypadá“ bylo na 1 řádku */
  padding:12px 18px !important;
  line-height:1.15 !important;
}
@media (max-width:420px){
  .hero-ctas .btn,
  .hero-ctas .sppb-btn{
    min-width:100% !important;
  }
}

/* ==========================
   GALERIE – full-bleed fix
   ========================== */
@media (max-width:960px){
  .gallery-section{
    width:100% !important; left:0 !important; right:0 !important;
    margin-left:0 !important; margin-right:0 !important;
  }
}

/* =========
   FOOTER
   ========= */
.site-footer{ background:#0f172a; color:#e2e8f0; }
.site-footer a{ color:#cbd5e1; }
.site-footer a:hover{ text-decoration:underline; }
.footer__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px; padding:28px 0;
}
.footer__title{ font-weight:600; }
.footer__tag{ color:#94a3b8; font-size:14px; margin:6px 0 0; }
.footer__copy{ font-size:14px; align-self:end; }
.footer__links{ font-size:14px; justify-self:end; }
@media (max-width:800px){
  .footer__grid{ grid-template-columns:1fr; gap:10px; }
  .footer__links{ justify-self:start; }
}