/* ==========================================================================
   poseceme.to – site.css (v1.0, 2025-12-12)
   - světlé téma, lepší kontrast
   - jednotné karty, gridy, FAQ, formuláře
   ========================================================================== */

/* --- ZÁKLADNÍ PROMĚNNÉ (TÉMA) ------------------------------------------- */
:root{
  /* pozadí & text */
  --bg: #f6faf7;
  --text: #0f1b14;
  --muted: #5b6b61;

  /* značka (zelená) */
  --green: #1f7a3d;
  --green-dark: #0f3b22;

  /* plochy */
  --surface: #ffffff;
  --surface-2: #eef6f1;
  --border: #dfeae4;
  --shadow: 0 2px 12px rgba(0,0,0,.05);

  /* tlačítka */
  --btn-bg: #2e7d32;
  --btn-bg-hover: #276c2b;
  --btn-text: #fff;

  /* odkazy */
  --link: #1f7a3d;
  --link-hover: #13512a;

  /* FAQ */
  --faq-bg: #ffffff;
  --faq-open-bg: #eaf6ef;
  --faq-border: #d6e7dc;
  --faq-icon: #2f6f46;
}

/* --- RESET ---------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ color:var(--link-hover); }
h1,h2,h3{ line-height:1.25; margin:0 0 .6rem; color:var(--text); }
p{ margin:.6rem 0 1rem; }
.small{ font-size:.925rem; color:var(--muted); }

/* --- LAYOUT --------------------------------------------------------------- */
.wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }
.hero{ padding:1.2rem 0; background:transparent; }

/* Grid helper */
.grid-2{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-2.asym{ grid-template-columns: 1fr 1.6fr; } /* foto : text = ~1:1.6 */
}

/* Sekce */
.section{ margin:1.2rem 0; }

/* --- HLAVIČKA / PATIČKA --------------------------------------------------- */
.site-header{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  position:sticky; top:0; z-index:20;
}
.site-header .nav{ display:flex; gap:1rem; align-items:center; }
.site-header a{ text-decoration:none; color:var(--text); }
.site-header .nav a:hover{ color:var(--green); }
.nav a.active{ font-weight:600; text-decoration:underline; text-underline-offset:4px; }

.site-footer{
  background:#fff;
  color:var(--muted);
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:2rem; padding:1.2rem 0;
}

/* --- KARTY & OBSAH -------------------------------------------------------- */
.cards{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .cards{ grid-template-columns: repeat(3, 1fr); }
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:1rem;
}
.media-card{
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
}
.media-card img{ display:block; width:100%; height:auto; }
figure{ margin:0; }
figcaption{
  font-size:.92rem; color:var(--muted);
  padding:.6rem .8rem .8rem;
}

/* --- CHECKLIST ------------------------------------------------------------ */
.checklist{ padding-left:1.25rem; }
.checklist li{ margin:.25rem 0; }
.checklist li em{ font-style:italic; }

/* --- PROCESS (číslovaný postup) ------------------------------------------ */
.process{
  counter-reset: step;
  list-style:none; padding:0; margin:0 0 1rem 0;
}
.process li{
  counter-increment: step;
  margin:.5rem 0; padding-left:2.2rem; position:relative;
}
.process li::before{
  content: counter(step) ".";
  position:absolute; left:0; top:.1rem;
  width:1.6rem; text-align:right; font-weight:700; color:var(--green);
}

/* --- CTA ------------------------------------------------------------------ */
.cta{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  margin:1rem 0;
}

/* --- TLAČÍTKA ------------------------------------------------------------- */
.btn{
  display:inline-block;
  background:var(--btn-bg);
  color:var(--btn-text);
  border:1px solid transparent;
  border-radius:10px;
  padding:.55rem .9rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{ background:var(--btn-bg-hover); }

/* Sekundární (linkové) tlačítko – nepovinné */
.btn.outline{
  background:transparent; color:var(--text);
  border-color:var(--border);
}
.btn.outline:hover{ border-color:#b7c9bf; }

/* --- FORMULÁŘE ------------------------------------------------------------ */
.input,
input[type="text"], input[type="email"], input[type="tel"],
select, textarea{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
}
textarea{ resize:vertical; }

/* --- FAQ (akordeony) ------------------------------------------------------ */
.faq details{ margin:.6rem 0; }
.faq summary{
  display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.25rem;
  background:var(--faq-bg);
  border:1px solid var(--faq-border);
  border-radius:12px; cursor:pointer;
  color:var(--text);
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; margin-left:auto; width:.65rem; height:.65rem;
  border-right:2px solid var(--faq-icon);
  border-bottom:2px solid var(--faq-icon);
  transform:rotate(-45deg); transition:transform .2s ease;
}
.faq details[open] summary{
  background:var(--faq-open-bg);
  border-color:#cfe5d7;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > *:not(summary){
  padding: .2rem 1.25rem 1rem 1.25rem;
}

/* --- UTILITY -------------------------------------------------------------- */
.mt-0{ margin-top:0!important; }
.mb-0{ margin-bottom:0!important; }

/* --- RESPONSIVE DROBNOSTI ------------------------------------------------- */
@media (max-width: 480px){
  .nav{ gap:.75rem; }
  .btn{ padding:.5rem .8rem; }
}

/* --- TISK (základ) -------------------------------------------------------- */
@media print{
  .site-header, .site-footer{ display:none; }
  a{ color:#000; text-decoration:none; }
  .card, .cta{ box-shadow:none; }
}