/* ==========================================================================
   EnviDoc s.r.o. — vizuální styl webu
   Editorial layout: papírové pozadí, vlasové linky, serifové nadpisy,
   technické popisky v neproporcionálním písmu.
   ========================================================================== */

:root {
  /* barvy */
  --forest:     #12281f;
  --green-deep: #1b4a34;
  --green:      #2a6a49;   /* barva wordmarku */
  --green-soft: #7ea88d;
  --lime:       #b8cf4d;

  --paper:      #f4f3ed;
  --white:      #ffffff;

  --ink:        #1a201c;
  --ink-soft:   #4d564f;
  --ink-mute:   #838b82;

  --rule:       #dcd9cd;
  --rule-soft:  #e7e4d9;
  --rule-dark:  rgba(255, 255, 255, .16);

  /* typografie */
  --display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* rozměry */
  --maxw: 1200px;
  --gut: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--forest);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 .55em;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--forest); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* --- pomocné třídy ------------------------------------------------------ */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.measure { max-width: 66ch; }

.label {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 22px;
}
.label::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--lime);
  margin-right: 10px;
  vertical-align: 2px;
}
.label.plain::before { display: none; }

.skip { position: absolute; left: -9999px; background: var(--forest); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* --- hlavička ----------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 243, 237, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 78px; }

.brand {
  order: 1; margin-right: auto;
  display: inline-flex; align-items: center; gap: 13px;
  text-decoration: none;
}
.brand-mark {
  flex: none;
  display: block;
  height: 34px; width: auto;
  overflow: visible;
  color: var(--forest);              /* tmavě zelená na světlém podkladu */
  transition: color .16s ease;
}
.brand:hover .brand-mark { color: var(--green-deep); }
.brand-word {
  font-family: var(--display);
  font-size: 1.42rem; font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--forest);
}
.brand-word em { font-style: normal; color: var(--green); }

.nav { order: 2; display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block; padding: 7px 13px;
  font-size: .92rem; color: var(--ink-soft); text-decoration: none;
}
.nav a:hover { color: var(--forest); }
.nav a[aria-current="page"] { color: var(--forest); box-shadow: inset 0 -1px 0 var(--forest); }

/* přepínač jazyka — anglická verze se teprve připravuje */
.lang {
  order: 3; position: relative;
  display: flex; align-items: center; gap: 6px;
  margin-left: 14px; padding-left: 18px;
  border-left: 1px solid var(--rule);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
}
.lang button {
  font: inherit; padding: 4px 2px; cursor: pointer;
  background: none; border: 0; color: var(--ink-mute);
}
.lang button[aria-pressed="true"] { color: var(--forest); box-shadow: inset 0 -1px 0 var(--lime); }
.lang button:hover { color: var(--forest); }
.lang .sep { color: var(--rule); }

.lang-note {
  position: absolute; top: calc(100% + 12px); right: 0;
  white-space: nowrap;
  background: var(--forest); color: var(--paper);
  font-family: var(--sans); font-size: .78rem; letter-spacing: 0;
  padding: 7px 11px;
  opacity: 0; transform: translateY(-4px); transition: .18s ease;
  pointer-events: none;
}
.lang-note.show { opacity: 1; transform: translateY(0); }

.nav-toggle {
  display: none; order: 4;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 14px; cursor: pointer;
  background: none; border: 1px solid var(--rule); color: var(--ink);
}

/* --- úvodní blok -------------------------------------------------------- */

.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(30px, 4vw, 52px); }
.hero-grid {
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: end;
}
.hero h1 { margin-bottom: 0; }
.hero h1 .thin { color: var(--green); }
.hero-aside p { color: var(--ink-soft); font-size: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* pruh s čísly */
.meta-strip {
  margin-top: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.meta-strip div { padding: 26px 30px 30px; border-right: 1px solid var(--rule); }
.meta-strip div:first-child { padding-left: 0; }
.meta-strip div:last-child { padding-right: 0; border-right: 0; }
.meta-strip.three { grid-template-columns: repeat(3, 1fr); }
.meta-strip.flush { margin-top: 0; border-top: 0; }
.meta-strip.flush div { padding-top: 0; }
.meta-strip b {
  display: block;
  font-family: var(--display); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 600; color: var(--forest); line-height: 1;
  letter-spacing: -0.03em;
}
.meta-strip span {
  display: block; margin-top: 10px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* --- záhlaví podstránky ------------------------------------------------- */

.page-head { padding: clamp(44px, 6vw, 84px) 0 clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--rule); }
.page-head .measure { color: var(--ink-soft); }
.crumb {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 26px;
}
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--forest); text-decoration: underline; }

/* --- sekce -------------------------------------------------------------- */

section { padding: clamp(52px, 7vw, 96px) 0; }
section + section { border-top: 1px solid var(--rule); }
section.flush { border-top: 0; }
section.white { background: var(--white); border-top: 1px solid var(--rule); }
section.dark {
  background: var(--forest); color: rgba(255, 255, 255, .78);
  border-top: 0;
}
section.dark h2, section.dark h3 { color: var(--white); }
section.dark .label { color: var(--green-soft); }
section.dark a { color: var(--white); }

/* dvousloupcový editoriální rozvrh: popisek vlevo, text vpravo */
.split { display: grid; gap: 40px 56px; grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
.split > .aside { position: sticky; top: 110px; }
.split-wide { grid-template-columns: 200px minmax(0, 1fr); }

.cols { display: grid; gap: 40px 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* --- rejstřík služeb ---------------------------------------------------- */

.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index-list li { border-bottom: 1px solid var(--rule); }
.index-list a, .index-list .row {
  display: grid; gap: 8px 28px;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: baseline;
  padding: 22px 0;
  text-decoration: none; color: inherit;
  transition: padding .18s ease, background .18s ease;
}
.index-list a:hover { padding-left: 12px; padding-right: 12px; background: rgba(18, 40, 31, .035); }
.index-list .n { font-family: var(--mono); font-size: .74rem; color: var(--ink-mute); letter-spacing: .06em; }
.index-list .t { font-family: var(--display); font-size: 1.28rem; font-weight: 600; color: var(--forest); letter-spacing: -0.015em; }
.index-list .d { font-size: .93rem; color: var(--ink-soft); }
.index-list a:hover .t { color: var(--green); }

section.dark .index-list { border-color: var(--rule-dark); }
section.dark .index-list li { border-color: var(--rule-dark); }
section.dark .index-list .n { color: var(--green-soft); }
section.dark .index-list .t { color: var(--white); }
section.dark .index-list .d { color: rgba(255, 255, 255, .66); }
section.dark .index-list a:hover { background: rgba(255, 255, 255, .05); }
section.dark .index-list a:hover .t { color: var(--lime); }

/* --- odrážkový seznam s vlasovými linkami ------------------------------- */

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.rule-list li:first-child { border-top: 1px solid var(--rule); }
.rule-list strong { display: block; font-weight: 600; color: var(--forest); }
.rule-list span { font-size: .93rem; color: var(--ink-soft); }

/* --- tlačítka a odkazy -------------------------------------------------- */

.btn {
  display: inline-block; padding: 13px 24px;
  font-size: .93rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--forest); color: var(--forest); background: none;
  transition: .16s ease;
}
.btn:hover { background: var(--forest); color: var(--paper); }
.btn-solid { background: var(--forest); color: var(--paper); }
.btn-solid:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--paper); }
.btn-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-light:hover { background: #fff; color: var(--forest); border-color: #fff; }

.arrow {
  display: inline-block;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .04em;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.arrow::after { content: " →"; }

/* --- textový obsah ------------------------------------------------------ */

.prose { font-size: 1.03rem; }
.prose h2 { margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 22px; margin-bottom: .55em; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--green);
}
.prose blockquote {
  margin: 1.8em 0; padding: 0 0 0 26px;
  border-left: 2px solid var(--lime);
  font-family: var(--display); font-size: 1.28rem; line-height: 1.35;
  color: var(--forest); letter-spacing: -0.012em;
}

.note {
  font-family: var(--mono); font-size: .76rem; line-height: 1.7;
  letter-spacing: .02em; color: var(--ink-mute);
  border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 26px;
}
.note a { color: var(--ink-soft); }
section.dark .note { border-color: var(--rule-dark); color: rgba(255,255,255,.55); }

/* --- definiční seznam --------------------------------------------------- */

.dl { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; margin: 0; }
.dl dt {
  padding: 14px 0; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.dl dd { padding: 14px 0; margin: 0; border-top: 1px solid var(--rule); }
.dl dt:first-of-type, .dl dd:first-of-type { border-top: 0; }

/* --- osoby -------------------------------------------------------------- */

.people { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.person { padding: 32px 36px 32px 0; border-top: 1px solid var(--rule); }
.person:nth-child(2) { padding-left: 36px; border-left: 1px solid var(--rule); }
.person .role {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); margin: 0 0 1em;
}
.person h3 { margin-bottom: .35em; }
.person p { font-size: .96rem; color: var(--ink-soft); }

/* --- výzva k akci ------------------------------------------------------- */

.cta { background: var(--green-deep); color: rgba(255,255,255,.8); border-top: 0; }
.cta .label { color: var(--green-soft); }
.cta a { color: #fff; }
.cta h2 { color: var(--white); max-width: 20ch; }
.cta p { max-width: 54ch; }
.cta .hero-actions { margin-top: 30px; }

/* --- patička ------------------------------------------------------------ */

.site-footer {
  background: var(--forest); color: rgba(255, 255, 255, .66);
  font-size: .92rem;
  padding: 64px 0 26px;
  border-top: 1px solid var(--rule-dark);
}
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22); }
.site-footer a:hover { color: #fff; border-color: #fff; }
.site-footer .brand-mark { color: var(--paper); }   /* světlá na tmavém podkladu */
.site-footer .brand:hover .brand-mark { color: #fff; }
.site-footer .brand-word { color: var(--white); }
.site-footer .brand-word em { color: var(--green-soft); }
.footer-top { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
.site-footer h4 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); font-weight: 400;
  margin: 0 0 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer .brand { margin-bottom: 18px; }
.footer-bottom {
  margin-top: 56px; padding-top: 20px;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: rgba(255,255,255,.42);
}

/* --- responzivita ------------------------------------------------------- */

/* menu má 8 položek a do jednoho řádku se vejde až od ~1 070 px */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav {
    order: 5; display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 0 18px; border-top: 1px solid var(--rule);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 2px; }
  .nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--forest); padding-left: 12px; }
  .header-inner { flex-wrap: wrap; gap: 10px; }
  .lang { order: 2; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .split, .split-wide { grid-template-columns: 1fr; gap: 20px; }
  .split > .aside { position: static; }
  .cols { grid-template-columns: 1fr; }
  .meta-strip, .meta-strip.three { grid-template-columns: repeat(2, 1fr); }
  .meta-strip div:nth-child(odd) { padding-left: 0; }
  .meta-strip div:nth-child(even) { padding-right: 0; border-right: 0; }
  .meta-strip div:nth-child(3), .meta-strip div:nth-child(4) { border-top: 1px solid var(--rule); }
  .people { grid-template-columns: 1fr; }
  .person:nth-child(2) { padding-left: 0; border-left: 0; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-list a, .index-list .row { grid-template-columns: 36px minmax(0, 1fr); }
  .index-list .d { grid-column: 2; }
}

@media (max-width: 860px) {
  .dl { grid-template-columns: 1fr; }
  .dl dd { padding-top: 0; border-top: 0; }
  .dl dt { padding-bottom: 4px; }
  .meta-strip, .meta-strip.three { grid-template-columns: 1fr; }
  .meta-strip div { border-right: 0; border-top: 1px solid var(--rule); padding: 20px 0 22px; }
  .meta-strip div:first-child { border-top: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .index-list a:hover { padding-left: 0; padding-right: 0; }
}

@media print {
  .site-header, .cta, .nav-toggle { display: none; }
  body { background: #fff; font-size: 11pt; }
}

/* --- mapa referencí ------------------------------------------------------ */

.map-figure {
  margin: 0;
  border: 1px solid var(--rule);
  background: #fff;
}
.map-figure img { display: block; width: 100%; height: auto; }

.map-legend {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  padding: 15px 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.map-legend span { display: inline-flex; align-items: center; gap: 9px; }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; flex: none; }

.map-figure figcaption {
  padding: 15px 20px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--mono); font-size: .74rem; line-height: 1.7;
  letter-spacing: .02em; color: var(--ink-mute);
}
.map-figure figcaption a { color: var(--ink-soft); }
.map-figure figcaption strong { color: var(--ink); font-weight: 600; }

/* --- soubor ke stažení --------------------------------------------------- */

.download {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 28px;
  padding: 22px 26px;
  border: 1px solid var(--rule); background: var(--white);
  text-decoration: none; color: inherit;
  transition: border-color .16s ease;
}
.download:hover { border-color: var(--green); }
.download .t {
  display: block;
  font-family: var(--display); font-size: 1.12rem; font-weight: 600;
  color: var(--forest); letter-spacing: -0.012em;
}
.download .m {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.download .go {
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .06em; color: var(--green); white-space: nowrap;
}
.download:hover .go { color: var(--forest); }