/**
 * Zsengezöld – page.php oldalstílusok
 *
 * Korábban a sablon <style> blokkjában volt, ami minden
 * oldalletöltéssel újra letöltődött. Külön fájlként a böngésző
 * egyszer tölti le és utána gyorsítótárazza.
 */

.zs-prose .zs-container { max-width: 1100px; }

.zs-prose__thumb { margin: 0 0 40px; }
.zs-prose__thumb-img {
  display: block; width: 100%; height: 340px;
  object-fit: cover; border-radius: 12px; background: var(--placeholder);
}

.zs-prose h1 { margin-bottom: 28px; }

/* Olvasható sorhossz: a szövegoszlop keskenyebb, mint a konténer */
.zs-prose__content { max-width: 720px; }

.zs-prose__content,
.zs-prose__content p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px; line-height: 1.8; color: var(--brown);
}
.zs-prose__content > * { margin: 0 0 20px; }
.zs-prose__content > *:last-child { margin-bottom: 0; }

.zs-prose__content h2,
.zs-prose__content h3,
.zs-prose__content h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--green); font-weight: 600; line-height: 1.3;
  margin: 44px 0 16px;
}
.zs-prose__content h2 { font-size: 30px; }
.zs-prose__content h3 { font-size: 22px; }
.zs-prose__content h4 { font-size: 18px; }

/* A tervben a mottó arany és félkövér – a szerkesztőben félkövérrel éred el */
.zs-prose__content strong { color: var(--gold); font-weight: 700; }

.zs-prose__content a { color: var(--gold); font-weight: 600; }
.zs-prose__content a:hover { color: var(--green); }

.zs-prose__content ul,
.zs-prose__content ol { padding-left: 22px; }
.zs-prose__content li { margin-bottom: 8px; }

.zs-prose__content blockquote {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 22px; margin-left: 0; font-style: italic;
}
.zs-prose__content img { max-width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 767px) {
  .zs-prose__content h2 { font-size: 24px; }
  .zs-prose__content h3 { font-size: 20px; }
  .zs-prose__thumb-img { height: 200px; }
  .zs-prose__thumb { margin-bottom: 24px; }
}

/* ---------- letöltés gomb (nyomtatható dokumentumok) ---------- */
.zs-prose .zs-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 13px 26px;
  border: 2px solid var(--gold);
  border-radius: 6px;
  background: var(--gold);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
/* Letöltés-ikon, hogy ránézésre elkülönüljön a szokásos linkektől */
.zs-prose .zs-download::before {
  content: '';
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--zs-download-ikon) center / contain no-repeat;
  mask: var(--zs-download-ikon) center / contain no-repeat;
}
.zs-prose {
  --zs-download-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5'/%3E%3Cpath d='M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2'/%3E%3C/svg%3E");
}
/*
 * A színt hoverre is ki kell írni: a .zs-prose__content a:hover szabály
 * zöldre festené a feliratot – ugyanolyan zöldre, mint a gomb háttere,
 * vagyis olvashatatlanná tenné.
 */
.zs-prose .zs-download:hover,
.zs-prose .zs-download:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}
.zs-prose .zs-download:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }