/* =======================
   Hody & Hudba — Global
   ======================= */

/* Fonts (lokálne TTF) */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope/Manrope-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope/Manrope-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather/Merriweather-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Reset a základ */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1a1a1a;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,161,84,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(132,255,210,.14), transparent 60%),
              #fffdf9;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; height: auto; }
a { color: var(--hh-accent-3); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--hh-accent-2); outline-offset: 2px; }

:root{
  --hh-bg: #fffdf9;
  --hh-ink: #1a1a1a;
  --hh-orange: #ff7a1a;
  --hh-orange-deep: #e75d00;
  --hh-accent-1: #22d3ee;  /* tyrkys */
  --hh-accent-2: #a3e635;  /* limetka */
  --hh-accent-3: #a855f7;  /* fialová */
  --hh-muted: #6b7280;
  --hh-card: #ffffff;
  --hh-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left: 12px; top: 12px; width:auto; height:auto; padding:8px 12px; background:#fff; box-shadow: var(--hh-shadow); border-radius: 10px; }

/* Header */
.hh-header{
  position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hh-bar{
  max-width: 1200px; margin: 0 auto; padding: 14px 18px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
}
.hh-logo{
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px;
  font-weight: 700; color: var(--hh-orange); letter-spacing: .2px; font-size: 1.1rem;
}
.logo-mark{
  width: 24px; height: 24px; border-radius: 6px; background:
    conic-gradient(from 0deg, var(--hh-orange), var(--hh-accent-1), var(--hh-accent-2), var(--hh-accent-3), var(--hh-orange));
  box-shadow: inset 0 0 0 2px #fff, 0 6px 16px rgba(0,0,0,.12);
  animation: spin-sheen 8s linear infinite;
}
@keyframes spin-sheen{
  0%{ transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}

/* Nav */
.hh-nav{ position: relative; }
.nav-toggle{
  appearance: none; border: 0; background: #fff; padding: 10px 12px; border-radius: 12px;
  box-shadow: var(--hh-shadow); display: none; align-items: center; gap: 10px; cursor: pointer;
}
.nav-icon{ width: 18px; height: 12px; position: relative; display:inline-block; }
.nav-icon::before, .nav-icon::after, .nav-icon span{
  content:""; position:absolute; left:0; right:0; height:2px; background:#111; border-radius:2px;
}
.nav-icon::before{ top:0; }
.nav-icon::after{ bottom:0; }
.nav-icon span{ top:50%; transform: translateY(-50%); }
.nav-text{ font-weight:600; }

.menu{
  display: grid; grid-auto-flow: column; gap: 18px; list-style: none; margin:0; padding:0;
}
.menu a{
  display:inline-block; padding:10px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(168,85,247,.08), rgba(168,85,247,.03));
  border: 1px solid rgba(168,85,247,.25);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.menu a:hover{ transform: translateY(-2px); background: rgba(168,85,247,.18); }

/* Hudobná osnova pod headerom */
.staff-lines{
  height: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 6px);
  position: relative;
  overflow:hidden;
}
.staff-lines::after{
  content:""; position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(255,122,26,.35), rgba(163,230,53,.35), rgba(168,85,247,.35), rgba(34,211,238,.35));
  mix-blend-mode: multiply; transform: translateX(-30%); animation: sweep 12s linear infinite;
}
@keyframes sweep{
  0%{ transform: translateX(-30%) }
  100%{ transform: translateX(30%) }
}

/* Main & Footer */
.hh-main{ max-width: 1200px; margin: 0 auto; padding: 24px 18px 80px; }
.page-title{
  font-family: Merriweather, Georgia, serif; font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  margin: 24px 0 16px; color: #0f0f0f;
}
.hh-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff; padding: 22px 18px; color: var(--hh-muted);
}
.foot-links{
  display:flex; gap:12px; list-style:none; margin:10px 0 0; padding:0; flex-wrap:wrap;
}
.foot-links a{
  padding:8px 12px; border-radius:10px; background: rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.25);
}

/* Media & helpers */
.media-img{ width: 100%; max-width: 350px; border-radius: 16px; }
.hover-rise{
  transition: transform .2s ease, filter .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.hover-rise:hover{
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.18));
}

/* Reveal-on-scroll */
.reveal-on-scroll{ opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal-on-scroll.is-visible{ opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 980px){
  .menu{ position: absolute; right: 0; top: 48px; grid-auto-flow: row;
    background: #fff; padding: 10px; border-radius: 16px; box-shadow: var(--hh-shadow);
    min-width: 220px; display: none;
  }
  .nav-toggle{ display: inline-flex; }
  .menu.open{ display: grid; }
}
@media (max-width: 720px){
  .hh-bar{ grid-template-columns: 1fr auto; }
  .page-title{ margin-top: 18px; }
}
@media (max-width: 420px){
  .hh-bar{ padding: 12px 14px; }
  .nav-toggle{ padding: 8px 10px; }
}
/* добавь переменную высоты хедера */
:root{ 
  /* ...твои переменные... */
  --hh-header-h: 64px;      /* desktop */
}

/* мобильная высота хедера */
@media (max-width: 720px){
  :root{ --hh-header-h: 56px; }
}

/* делаем header фиксированным */
.hh-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999; /* над контентом и лентой */
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding-top: env(safe-area-inset-top); /* вырез под «чёлку» iOS */
}

/* сдвигаем основной контент ниже фиксированного хедера */
.hh-main{
  /* было: padding: 24px 18px 80px; */
  padding: calc(24px + var(--hh-header-h)) 18px 80px;
}
/* Footer legal links: чуть спокойнее визуально */
.foot-links a.legal{
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  border: 1px solid rgba(0,0,0,.10);
  color: #334155;
}
.foot-links a.legal:hover{
  background: rgba(0,0,0,.06);
  transform: translateY(-2px);
}