/* stavebnidozordrevostavba.cz — sdílené styly
   Věrná statická konverze návrhu Otakara (SPA prototyp, červenec 2026).
   Inline styly stránek jsou 1:1 z návrhu; tento soubor nese fonty (self-host,
   žádné CDN), base pravidla, animace, responsivitu a prvky progressive
   enhancementu (mobilní menu, hero A/B, kalkulačka, formulář).
   Dokumentované odchylky od prototypu:
   - footer a kontaktní grid dostaly mobilní zlom (v prototypu chyběl),
   - role=button divy jsou skutečné <a>/<button> (přístupnost, vzhled 1:1). */

/* ==== 1. FONTY — self-host WOFF2, latin + latin-ext ==== */
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/zilla-slab-v12-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/zilla-slab-v12-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/zilla-slab-v12-latin_latin-ext-600.woff2') format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/zilla-slab-v12-latin_latin-ext-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2')}

/* ==== 2. BASE — 1:1 z návrhu ==== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{background:#e9dcc4;color:#3a2c1e;font-family:'Inter',sans-serif}
h1,h2,h3,h4{font-family:'Zilla Slab',serif;margin:0}
::selection{background:#46603c;color:#f2ecdd}
input,textarea{font-family:'Inter',sans-serif}
a{color:#7d4f26}
a:hover{color:#46603c}
.hamburger{display:none}

/* ==== 3. ANIMACE — 1:1 z návrhu ==== */
@keyframes plankSlide{from{opacity:0;transform:translateX(70px) skewX(-24deg)}to{opacity:1;transform:translateX(0) skewX(-24deg)}}
@keyframes plankRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes swayX{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0deg);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(110vh) rotate(320deg);opacity:0}}
.lift{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease}
.lift:hover{transform:translateY(-6px)!important;box-shadow:0 22px 40px -22px rgba(60,40,18,.55)}
[data-tilt]{transition:transform .18s ease-out;will-change:transform}

/* ==== 4. RESPONSIVITA — 1:1 z návrhu + dokumentované doplňky ==== */
@media (max-width:880px){
  .desknav{display:none !important}
  .deskcta{display:none !important}
  .hamburger{display:flex !important}
  .heroGrid{grid-template-columns:1fr !important}
  .twoCol{grid-template-columns:1fr !important}
  .threeCol{grid-template-columns:1fr !important}
  .isoWrap{display:none !important}
  h1{font-size:clamp(38px,10vw,58px) !important}
  .pad{padding-left:20px !important;padding-right:20px !important}
  /* doplněk konverze: footer grid v prototypu neměl mobilní zlom */
  .footgrid{grid-template-columns:1fr !important}
  /* hero B headline je <p>, clamp na h1 ho nepokryje (validace: přetečení na 360-375px) */
  .heroB-h{font-size:clamp(38px,10vw,58px) !important}
  /* kalkulačka: výsledkový box nad ovladače, ať je změna ceny vidět (ghost-visitor) */
  #calc-vysledek{position:static !important;order:-1}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ==== 5. PRVKY STATICKÉ KONVERZE ==== */
[hidden]{display:none !important}
:focus-visible{outline:2px solid #a9713a;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Skip link (WCAG 2.4.1 Bypass Blocks) — viditelný jen na focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#2f4128;padding:12px 20px;font-weight:600;font-size:15px;text-decoration:none;border-radius:0 0 8px 0}
.skip-link,.skip-link:focus,.skip-link:hover{color:#f2ecdd}
.skip-link:focus,.skip-link:hover{left:0;outline:3px solid #a9713a;outline-offset:2px}
#obsah:focus{outline:none}

/* Odkazy a tlačítka nesou inline styly z návrhu; resety, ať sedí 1:1 */
a.btn{text-decoration:none}
button.btn{border:0;font-family:'Inter',sans-serif;font-size:inherit}
.desknav a:hover{color:#2c1f12}
a.brand{text-decoration:none;color:inherit}
footer a{text-decoration:none}
footer a:hover{color:#f2ecdd}

/* Hamburger jako <button> — vzhled 1:1 s prototypem */
button.hamburger{align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px;border:1px solid #cdbd9f;background:#f3ebda;cursor:pointer;flex-direction:column;gap:4px;padding:0}

/* Mobilní menu — zavřené, otevírá JS (bez JS je rozbalené přes <noscript> styl) */
#mnav{display:none;border-top:1px solid #d8c9ae;background:rgba(243,235,218,.98);padding:8px 20px 18px}
#mnav.open{display:block}

/* Hero varianta A/B — default A; html[data-hero=b] přepíná (localStorage) */
#hero-b{display:none}
html[data-hero=b] #hero-a{display:none}
html[data-hero=b] #hero-b{display:block}
.hvbtn{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:13px;border:1px solid rgba(255,255,255,.28);background:transparent;color:rgba(255,255,255,.72);padding:0;font-family:'Inter',sans-serif}
.hvbtn.on{border:0;background:#96632f;color:#fff} /* #a9713a s bílou jen 4,11:1 — ztmaveno na 5,09 (WCAG) */

/* Kalkulačka — segmentová tlačítka (hodnoty ze segStyle prototypu) */
.seg{flex:1 1 auto;padding:11px 14px;cursor:pointer;border-radius:8px;text-align:center;font-family:'Inter',sans-serif;font-size:14px;transition:all .15s;white-space:nowrap;border:1px solid #d3c3a3;background:#f3ebda;color:#5c4a39;font-weight:500}
.seg.on{border:1px solid #46603c;background:#46603c;color:#f2ecdd;font-weight:600}
input[type=range]{width:100%;accent-color:#46603c;cursor:pointer;height:6px}

/* Formulář — stavové boxy */
#f-error{display:none;background:#7a2e1f;color:#f6e7dd;border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.5}
#f-success{display:none;text-align:center;padding:40px 10px}

/* ==== 6. MAPA REALIZACÍ (jen realizace.html) ==== */
#mapa{height:520px;width:100%;border-radius:16px;overflow:hidden;background:#e6d8bf;border:1px solid #d8c9ae;z-index:0}
@media (max-width:880px){#mapa{height:420px}}
.leaflet-container{font-family:'Inter',sans-serif;background:#e6d8bf}
.leaflet-popup-content-wrapper{background:#f6efe1;color:#3a2c1e;border:1px solid #e2d5bd;border-radius:10px;box-shadow:0 14px 40px -12px rgba(60,40,18,.5)}
.leaflet-popup-tip{background:#f6efe1;border:1px solid #e2d5bd}
.leaflet-popup-content{font-size:13.5px;margin:12px 16px}
.leaflet-container a.leaflet-popup-close-button{color:#8a7048}
.leaflet-bar a{background:#f3ebda;color:#3a2c1e;border-color:#d3c3a3}
.leaflet-bar a:hover{background:#e6d8bf}
.leaflet-control-attribution{background:rgba(246,239,225,.85);color:#6a563c;font-size:10px}
.leaflet-control-attribution a{color:#7d4f26}
/* piny — kruh s prstencem; „probíhá" pulzuje */
.pin{width:14px;height:14px;border-radius:50%;border:2px solid #f2ecdd;box-shadow:0 2px 6px rgba(60,40,18,.5)}
.pin-hotovo{background:#7d4f26}
.pin-planovano{background:#a9713a}
.pin-probiha{background:#46603c;animation:pinpulse 1.8s ease-out infinite}
@keyframes pinpulse{0%{box-shadow:0 0 0 0 rgba(70,96,60,.6),0 2px 6px rgba(60,40,18,.5)}70%{box-shadow:0 0 0 10px rgba(70,96,60,0),0 2px 6px rgba(60,40,18,.5)}100%{box-shadow:0 0 0 0 rgba(70,96,60,0),0 2px 6px rgba(60,40,18,.5)}}
@media (prefers-reduced-motion:reduce){.pin-probiha{animation:none}}
.maplegend{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.maplegend span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#5c4a39}
.maplegend .dot{width:12px;height:12px;border-radius:50%;border:2px solid #f2ecdd;box-shadow:0 1px 3px rgba(60,40,18,.4)}

/* ==== 7. LETOKRUHY (o-mne.html) — kreslení kruhů + pomalá rotace ==== */
.lk-spin{animation:ringSpin 120s linear infinite}
/* kreslení kruhů (jednou) + trvalá pulzující vlna od středu ven (jako na hladině).
   Odstup --d roste s poloměrem, takže hřeben vlny cestuje od jádra k okraji. */
.lk-ring{stroke-dasharray:1;stroke-dashoffset:1;transform-origin:100px 100px;
  animation:lkDraw 1.4s cubic-bezier(.2,.7,.2,1) forwards, lkRipple 3.4s ease-in-out infinite;
  animation-delay:var(--d,0s),calc(var(--d,0s) * 2 + 1.2s)}
@keyframes lkDraw{to{stroke-dashoffset:0}}
@keyframes lkRipple{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
/* středový bod = zdroj vlny, jemný pulz v rytmu vln */
.lk-core{transform-origin:100px 100px;animation:lkCore 3.4s ease-in-out infinite}
@keyframes lkCore{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@media (max-width:880px){
  .letokruhy-box{grid-template-columns:1fr !important;gap:28px !important;padding:36px 26px !important;text-align:center}
  .letokruhy{width:150px !important;height:150px !important}
  .letokruhy svg{width:150px;height:150px}
}
@media (prefers-reduced-motion:reduce){
  .lk-spin{animation:none}
  .lk-ring{stroke-dashoffset:0;animation:none;transform:none;opacity:1}
  .lk-core{animation:none;transform:none;opacity:1}
}