/* ligno.sk – statická verzia (pôvodne WordPress / Themify Float, skin Gray) */

/* ---------- Písma (lokálne, bez Google Fonts) ---------- */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/opensans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/opensans-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-italic-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Základ ---------- */
:root{
  --accent:#6b7a86;          /* skin Gray */
  --accent-hover:#9fb0bd;
  --nav-hover:#c8d2d8;
  --text:#656565;
  --heading:#000;
  --gutter:3.2%;
  --container:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:1.1em/1.8em 'Open Sans',sans-serif;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;border:0;vertical-align:bottom}
a{color:var(--accent);text-decoration:none;transition:color .3s}
a:hover{color:var(--accent-hover)}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
figure{margin:0}
h1,h2,h3,h4{color:var(--heading);font-family:'Playfair Display',serif;font-weight:900;line-height:1.3em;margin:0 0 .5em;overflow-wrap:normal}
h1,h2,h3{font-style:italic}
h1{font-size:4.2em}
h2,h3{font-size:2.5em}
h4{font:600 1.3em/1.4em 'Poppins',sans-serif;letter-spacing:.04em;text-transform:uppercase}
section[id]{scroll-margin-top:60px}

/* ---------- Hlavička (zobrazí sa po posunutí stránky, ako na pôvodnom webe) ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;background:rgba(0,0,0,.5);color:#fff;
  transform:translateY(-100%);opacity:0;transition:transform .4s ease,opacity .4s ease}
.site-header.is-visible,.site-header.menu-open{transform:none;opacity:1}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 30px;min-height:60px}
.header-logo img{height:40px;width:auto;display:block}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.26em}
.main-nav a{display:block;color:#fff;font:600 1em/1.6 'Poppins',sans-serif;letter-spacing:-.015em;text-transform:uppercase;padding:.15em .525em}
.main-nav a:hover{color:var(--nav-hover)}
.menu-toggle{display:none;background:none;border:0;padding:10px;margin:-10px;cursor:pointer;color:#fff}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:26px;height:2px;background:currentColor;position:relative;transition:transform .3s,background .3s}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0}
.menu-toggle span::before{top:-8px}
.menu-toggle span::after{top:8px}
.menu-open .menu-toggle span{background:transparent}
.menu-open .menu-toggle span::before{transform:translateY(8px) rotate(45deg)}
.menu-open .menu-toggle span::after{transform:translateY(-8px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;background:rgba(255,255,255,.7);z-index:999}

/* ---------- Riadky / mriežka ---------- */
.row{position:relative;width:100%}
.row-inner{width:min(var(--container),100%);margin:0 auto;position:relative}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter);align-items:center}
.row-offer .row-inner,.row-pad .row-inner,.row-pt .row-inner,.row-contact{width:100%}
.text-box{padding:30px}
.img-box{text-align:center}
.img-box img{display:block;margin:0 auto}

.row-grad-90{background:linear-gradient(90deg,rgba(240,240,240,.98) 0%,#fff 100%)}
.row-grad-180{background:linear-gradient(180deg,#f0f0f0 0%,#fff 100%)}
.row-grad-270{background:linear-gradient(270deg,#f0f0f0 0%,#fff 100%)}
.row-offer{padding:2em 0 2px}
.row-pad{padding:2em 0}
.row-pt{padding-top:2em}

/* O nás */
.row-hero{background:url(../img/drevo-hero.jpg) center top/cover fixed;background-image:image-set(url(../img/drevo-hero.webp) type('image/webp'),url(../img/drevo-hero.jpg) type('image/jpeg'));padding-top:6em;animation:bounce 1s both}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1025fr);column-gap:var(--gutter);align-items:center}
.hero-logo{text-align:center}
.hero-text{padding:1.5em;background:rgba(0,0,0,.25);color:#fff}
.hero-text h2,.hero-text p{color:#fff}

/* Fancy nadpis */
.fancy-heading{text-align:center;line-height:1.25;margin:0 0 .5em;font-size:4.2em}
.fancy-heading::after{content:"";display:block;width:2em;margin:.4em auto 0;border-top:1px solid currentColor;font-size:70%}
.row-offer .row-inner:first-child{padding-top:4em}

/* Kontakt */
.row-contact{background:#7a6a58 url(../img/kontakt.jpg) center/cover fixed;background-image:image-set(url(../img/kontakt.webp) type('image/webp'),url(../img/kontakt.jpg) type('image/jpeg'))}
.contact-head{background:rgba(0,0,0,.3);padding-top:6em}
.contact-head .fancy-heading{color:#fff;padding-top:0;margin:0;padding-bottom:.5em}
.contact-text{background:rgba(0,0,0,.3);padding:30px;text-align:center}
.contact-text{font-style:normal}
.contact-block{font:600 1.3em/1.4em 'Poppins',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:0 0 .5em}
.contact-block strong{font-weight:600}
.contact-block:last-child{margin-bottom:0}
.contact-text a{color:#fff}
.contact-text a:hover{color:var(--nav-hover)}
.contact-map{background:#fff}
.contact-map iframe{display:block;width:100%;height:350px;border:0;filter:grayscale(1) contrast(1.05)}

/* Časté otázky */
.row-faq{padding:2em 0 4em}
.faq-inner{max-width:900px!important;padding:4em 20px 0}
.faq details{border-bottom:1px solid #ddd}
.faq details:first-child{border-top:1px solid #ddd}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:1em 2.5em 1em 0;font:600 1.05em/1.5 'Poppins',sans-serif;color:#000}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4em;top:50%;transform:translateY(-50%);font:400 1.6em/1 'Open Sans',sans-serif;color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq details p{margin:0 0 1.2em;padding-right:2.5em}

/* Prístupnosť */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:#000;color:#fff;padding:.6em 1em}
.skip-link:focus{left:10px;top:10px;color:#fff}

/* ---------- Pätička ---------- */
.site-footer{background:url(../img/drevo-paticka.jpg) center top/cover;background-image:image-set(url(../img/drevo-paticka.webp) type('image/webp'),url(../img/drevo-paticka.jpg) type('image/jpeg'));padding-top:2em;color:#fff}
.footer-nav{display:table;list-style:none;margin:1em auto 3em;padding:0;font-size:.95em}
.footer-nav li{display:inline-block}
.footer-nav a{margin:0 1em .8em 0}
.footer-nav li:last-child a{margin-right:0}
.footer-nav a:hover{color:#ed1e24}
.back-top{margin:1em auto 0;text-align:center;width:50px;line-height:0}
.back-top a{display:inline-block;color:var(--accent)}
.back-top a:hover{animation:backtop 1s infinite linear}
.footer-logo{text-align:center;font:700 2.65em/normal 'Poppins',sans-serif;letter-spacing:-.04em;text-transform:uppercase;margin:.6em 0 .75em}
.footer-logo a{color:#fff}
.footer-text{border-top:1px solid #ddd;margin:0 20%;padding:3.1em 0;text-align:center;font-size:.75em;letter-spacing:.02em;color:#fff}
.footer-text a{color:inherit}
.footer-text p{margin:0}
.footer-nap{margin-bottom:.6em!important;opacity:.9}

/* ---------- Animácie ---------- */
.anim{opacity:0}
.anim.in{animation-duration:1s;animation-fill-mode:both}
.anim.in[data-anim="fadeInLeft"]{animation-name:fadeInLeft}
.anim.in[data-anim="fadeInRight"]{animation-name:fadeInRight}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes bounce{from,20%,53%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0) scaleY(.95)}90%{transform:translate3d(0,-4px,0) scaleY(1.02)}}
@keyframes backtop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .row-hero,.anim.in,.back-top a:hover{animation:none}
  .anim{opacity:1}
}

/* ---------- Responzivita ---------- */
@media (max-width:1260px){
  body{font-size:1em}
  .row-hero .row-inner{max-width:94%}
  .footer-text{margin:0}
}
@media (max-width:1200px){
  .menu-toggle{display:block;position:relative;z-index:2}
  .main-nav{position:fixed;top:0;right:0;height:100%;width:300px;max-width:85vw;overflow-y:auto;padding:70px 25px 20px;
    background:linear-gradient(135deg,#9eb3c2,#767c7f);transform:translateX(100%);transition:transform .25s ease-in-out;z-index:1}
  .menu-open .main-nav{transform:none}
  .main-nav ul{display:block}
  .main-nav a{border-bottom:1px solid rgba(255,255,255,.3);padding:.6em 0;font-size:1.1em}
}
/* iOS nepodporuje background-attachment: fixed */
@supports (-webkit-touch-callout:none){
  .row-hero,.row-contact{background-attachment:scroll}
}
@media (max-width:760px){
  .row-hero .row-inner{max-width:90%}
}
@media (max-width:680px){
  h1{font-size:2.4em}
  h2{font-size:1.8em}
  h3{font-size:1.8em}
  .fancy-heading{font-size:2.4em}
  h4,.contact-block{font-size:1.1em}
  .split{grid-template-columns:1fr}
  .row-hero{padding-top:2em}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-text{order:-1;margin-top:3em}
  .hero-logo{padding:2em 0}
  .text-box{padding:30px 20px}
  .img-box{padding:0 20px}
  .anim.in[data-anim]{animation-name:fadeInUp}
  .header-inner{padding:8px 20px}
  .footer-nav{margin-bottom:2em}
  .footer-logo{font-size:2.2em}
}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}