/* radiobiblia.online — hnedo-biely responzívny dizajn */
:root{
  --brown-900:#2f221d;
  --brown-800:#3b2e2a;
  --brown-700:#4a3a35;
  --brown-500:#6b4f4f;
  --beige-50:#faf6f1;
  --beige-100:#f4ede6;
  --white:#ffffff;
  --text:#1b1b1b;
  --maxw:1100px;
  --radius:16px;
  --shadow:0 10px 22px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--beige-50);
  line-height:1.6;
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  left:1rem; top:1rem; background:var(--brown-800); color:var(--white); padding:.5rem .75rem; border-radius:8px;
}

/* Layout helpers */
.container{max-width:var(--maxw); margin-inline:auto; padding:0 16px}
.section{padding:64px 0}
.section.alt{background:var(--beige-100)}
.grid.two{display:grid; gap:24px; grid-template-columns: 1fr}
@media (min-width: 880px){
  .grid.two{grid-template-columns: 1.2fr .8fr}
}

/* Header + Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--brown-800);
  color:var(--white);
  box-shadow:var(--shadow);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--white)}
.brand img{display:block; border-radius:8px}
.brand-text{font-weight:700; letter-spacing:.3px}

.nav-checkbox{position:absolute; opacity:0; pointer-events:none}
.nav-toggle{display:inline-flex; flex-direction:column; gap:5px; padding:10px; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--white)}

.main-nav .menu{list-style:none; padding:0; margin:0; display:none; position:absolute; top:64px; left:0; right:0; background:var(--brown-800)}
.main-nav .menu li{border-top:1px solid rgba(255,255,255,.08)}
.main-nav .menu a{display:block; padding:14px 20px; text-decoration:none; color:var(--white)}
.main-nav .menu a:hover,.main-nav .menu a:focus{background:var(--brown-700)}
.main-nav .menu a.listen{font-weight:600}

#nav-toggle:checked ~ nav .menu{display:block}

@media (min-width: 960px){
  .nav-toggle{display:none}
  .main-nav .menu{
    position:static; display:flex; gap:6px; background:transparent
  }
  .main-nav .menu li{border:0}
  .main-nav .menu a{padding:10px 14px; border-radius:10px}
  .main-nav .menu a:hover,.main-nav .menu a:focus{background:rgba(255,255,255,.1)}
}

/* Hero */
.hero{
  background: linear-gradient(135deg, var(--brown-800), var(--brown-500));
  color:var(--white);
  padding:90px 0 70px;
}
.hero-inner h1{
  font-size: clamp(32px, 4vw, 48px);
  margin:0 0 10px;
}
.hero-inner p{max-width: 60ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* Buttons */
.btn{
  display:inline-block; text-decoration:none;
  padding:12px 18px; border-radius:12px; border:2px solid var(--brown-800);
  background:var(--white); color:var(--brown-800); font-weight:600; cursor:pointer;
}
.btn.primary{background:var(--brown-800); color:var(--white); border-color:var(--brown-800)}
.btn.outline{background:transparent; color:var(--white); border-color:var(--white)}
.btn.small{padding:8px 12px; font-weight:600}

/* Content */
h2{font-size: clamp(24px, 3vw, 32px); margin:0 0 10px; color:var(--brown-800)}
p{margin:0 0 12px}
ul.checklist{padding-left:1.2rem}
ul.checklist li{margin:.25rem 0}

/* Player card */
.player-card{
  background:var(--white); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.player-card audio{width:100%; max-width:520px}
.player-actions{display:flex; gap:10px}

/* Forms */
label{display:block; font-weight:600; margin:.35rem 0 .2rem}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #d6cfc7; background:#fff;
}
input:focus, textarea:focus{outline:2px solid var(--brown-500); border-color:var(--brown-500)}

/* Footer */
.site-footer{
  background:var(--brown-900); color:var(--white); padding:30px 0; margin-top:30px
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.back-to-top{color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.35); padding:6px 10px; border-radius:8px}
.back-to-top:hover,.back-to-top:focus{background:rgba(255,255,255,.12)}

/* Section anchors offset for sticky header */
.section{scroll-margin-top:80px}