/* =========================================================
   Satudemiveya — sdílený styl · cottagecore / mochomůrka
   Společné pro: index, o-mne, zakazky, shroomkit
   Barvy jedou přes sémantické tokeny → světlý + tmavý režim.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600&family=Spectral:ital,wght@0,400;0,500;1,400&family=Caveat:wght@500;600&display=swap");

:root{
  /* SVĚTLÝ režim (výchozí cottagecore look) */
  --bg:            #f6ecd9;            /* pozadí stránky */
  --bg-grad-1:     #fcf6e8;            /* horní radial gradient */
  --bg-grad-2:     #e6dcc2;            /* dolní radial gradient */
  --surface:       #f6ecd9;            /* karty, nav, rozcestník */
  --surface-2:     #efe0c6;            /* tlačítka-ghost, dny v plánu, tier karty, socky */
  --surface-hover: #fff8ec;            /* hover socky */
  --surface-shadow:#efe0c6;            /* „papírový" offset stín pod kartami */
  --nav-bg:        rgba(246,236,217,.82);
  --text:          #3a2f25;            /* běžný text */
  --text-muted:    #8a6c4d;            /* popisky, kurzíva */
  --heading:       #34472e;            /* nadpisy h1/h2, .path b, brand */
  --accent:        #c0463c;            /* mochomůrková červená (hlavní akcent) */
  --accent-strong: #9c352e;            /* tmavší červená (stíny tlačítek, even tagy) */
  --moss:          #4e6b43;            /* zelené tagy / odd akcenty */
  --moss-strong:   #34472e;            /* stín zelených tagů, pozadí video rámu */
  --border:        #8a6c4d;            /* okraje karet, tlačítek */
  --spot:          #fbf3e3;            /* bílé tečky na kloboučku (stejné v obou) */
  --on-accent:     #fbf3e3;            /* text na barevných plochách (tlačítka, tagy) */
  --rose:          #d29a8f;            /* akcent v ukázkách videí (stejné v obou) */
  --shadow:        rgba(58,47,37,.18); /* měkký vržený stín */
  color-scheme: light;
}

[data-theme="dark"]{
  /* TMAVÝ režim — „noční les" */
  --bg:            #1b211a;
  --bg-grad-1:     #232b20;
  --bg-grad-2:     #14180f;
  --surface:       #242b20;
  --surface-2:     #2e3626;
  --surface-hover: #343c2c;
  --surface-shadow:#161a12;
  --nav-bg:        rgba(27,33,26,.82);
  --text:          #ece0c8;
  --text-muted:    #c2a98a;
  --heading:       #ece0c8;
  --accent:        #d65649;            /* červená malinko zesvětlená, ať svítí na tmavém */
  --accent-strong: #b0433a;
  --moss:          #84a86a;
  --moss-strong:   #3c5a30;
  --border:        #5a4d3a;
  --spot:          #fbf3e3;
  --on-accent:     #fbf3e3;
  --rose:          #d29a8f;
  --shadow:        rgba(0,0,0,.45);
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Spectral",Georgia,serif;
  color:var(--text);
  line-height:1.7;
  background:
    radial-gradient(120% 90% at 80% -10%, var(--bg-grad-1) 0%, transparent 55%),
    radial-gradient(120% 100% at -10% 110%, var(--bg-grad-2) 0%, transparent 50%),
    var(--bg);
  overflow-x:hidden;
  transition:background-color .3s, color .3s;
}
body::before{                       /* jemné zrno */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 24px; }
.spore{ position:absolute; border-radius:50%; background:var(--accent); opacity:.12; z-index:0; }

/* ===================== NAVIGACE ===================== */
nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(6px);
  background:var(--nav-bg);
  border-bottom:2px solid var(--surface-2);
}
.nav-in{
  max-width:920px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--heading); font-family:"Fraunces"; font-weight:600; font-size:1.2rem;
  margin-right:auto;
}
.brand svg{ width:30px; height:30px; }
.nav-links{ display:flex; gap:6px; flex-wrap:wrap; }
.nav-links a{
  text-decoration:none; color:var(--text); font-weight:500; font-size:1rem;
  padding:6px 13px; border-radius:999px; transition:background .15s,color .15s;
}
.nav-links a:hover{ background:var(--surface-2); }
.nav-links a.active{ background:var(--accent); color:var(--on-accent); box-shadow:0 3px 0 -1px var(--accent-strong); }

/* ——— přepínač motivu ——— */
.theme-toggle{
  flex:none; width:40px; height:40px; border-radius:50%;
  border:2px solid var(--border); background:var(--surface-2); color:var(--text);
  font-size:1.15rem; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:transform .15s, background .15s, box-shadow .15s, color .15s;
}
.theme-toggle:hover{ transform:translateY(-2px); box-shadow:0 5px 12px -6px var(--shadow); }

/* ===================== TYPOGRAFIE / SEKCE ===================== */
header.page-head{ text-align:center; padding:64px 0 18px; position:relative; }
.kicker{
  font-family:"Caveat",cursive; font-size:1.6rem; color:var(--text-muted);
  transform:rotate(-3deg); display:inline-block; margin-bottom:4px;
}
h1{
  font-family:"Fraunces",serif; font-weight:600; font-size:clamp(2.6rem,9vw,5rem);
  line-height:.98; margin:.1em 0 .2em; color:var(--heading); letter-spacing:-.02em;
}
h1 .em{ font-style:italic; color:var(--accent); }
.tagline{ font-size:clamp(1.05rem,3vw,1.3rem); font-style:italic; color:var(--text-muted); max-width:34ch; margin:0 auto; }

section{ margin:0 0 56px; }
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.show{ animation:rise .7s ease forwards; }

.card{
  background:var(--surface); border:2px solid var(--border); border-radius:26px;
  padding:38px 34px; position:relative;
  box-shadow:0 14px 0 -4px var(--surface-shadow), 0 22px 34px -18px var(--shadow);
}
.card::after{
  content:""; position:absolute; top:16px; right:20px; width:14px; height:14px;
  border-radius:50%; background:var(--spot); border:2px solid var(--accent);
}
h2{
  font-family:"Fraunces",serif; font-weight:600; font-size:clamp(1.7rem,5vw,2.4rem);
  color:var(--heading); margin:0 0 .5em; letter-spacing:-.01em;
  display:flex; align-items:center; gap:.5em;
}
h2 .dot{ width:.5em; height:.5em; border-radius:50%; background:var(--accent); flex:none; }
h3{ font-family:"Fraunces"; color:var(--accent-strong); margin:0 0 .3em; font-size:1.25rem; }
p{ margin:0 0 1em; } p:last-child{ margin-bottom:0; }
.note{ font-family:"Caveat",cursive; font-size:1.4rem; color:var(--text-muted); transform:rotate(-1.5deg); }
.lead{ font-size:1.15rem; }
a.inline{ color:var(--accent-strong); }

/* ——— tlačítka ——— */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:"Fraunces"; font-weight:600; font-size:1.05rem;
  background:var(--accent); color:var(--on-accent);
  padding:13px 24px; border-radius:999px; border:none; cursor:pointer;
  box-shadow:0 5px 0 -1px var(--accent-strong); transition:transform .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 -1px var(--accent-strong); }
.btn.moss{ background:var(--moss); box-shadow:0 5px 0 -1px var(--moss-strong); }

/* ——— rozcestník (domů) ——— */
.paths{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.path{
  text-decoration:none; color:var(--text); background:var(--surface);
  border:2px solid var(--border); border-radius:22px; padding:26px 24px;
  box-shadow:0 10px 0 -4px var(--surface-shadow), 0 18px 28px -18px var(--shadow);
  transition:transform .18s, box-shadow .18s; display:block;
}
.path:hover{ transform:translateY(-4px) rotate(-.6deg); box-shadow:0 14px 0 -4px var(--surface-shadow), 0 22px 30px -16px var(--shadow); }
.path svg{ width:54px; height:54px; margin-bottom:10px; }
.path b{ font-family:"Fraunces"; font-size:1.3rem; color:var(--heading); display:block; }
.path span{ font-style:italic; color:var(--text-muted); }

/* ——— socky ——— */
.links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.links a{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:500;
  background:var(--surface-2); border:2px solid var(--border); border-radius:16px; padding:14px 16px;
  transition:transform .18s, box-shadow .18s, background .18s;
}
.links a:hover{ transform:translateY(-3px) rotate(-1deg); background:var(--surface-hover); box-shadow:0 10px 18px -10px var(--shadow); }
.links a .ic{ width:30px; height:30px; flex:none; }
.links a small{ display:block; font-style:italic; color:var(--text-muted); font-size:.82rem; }

/* ——— plán streamů ——— */
.schedule{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; }
.day{ text-align:center; background:var(--surface-2); border:2px dashed var(--border); border-radius:16px; padding:16px 10px; }
.day b{ font-family:"Fraunces"; display:block; color:var(--accent-strong); font-size:1.05rem; }
.day span{ font-size:.95rem; color:var(--text); }
.day.off{ opacity:.55; border-style:dotted; }

/* ——— tagy ——— */
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tags span{ background:var(--moss); color:var(--on-accent); font-weight:500; padding:7px 15px; border-radius:999px; font-size:.95rem; box-shadow:0 4px 0 -1px var(--moss-strong); }
.tags span:nth-child(even){ background:var(--accent); box-shadow:0 4px 0 -1px var(--accent-strong); }

/* ——— ceník / balíčky ——— */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.tier{ background:var(--surface-2); border:2px solid var(--border); border-radius:20px; padding:24px 22px; position:relative; }
.tier.feature{ border-color:var(--accent); }
.tier .ribbon{ position:absolute; top:-12px; right:18px; background:var(--accent); color:var(--on-accent); font-family:"Fraunces"; font-size:.8rem; padding:3px 12px; border-radius:999px; }
.tier .price{ font-family:"Fraunces"; font-size:1.8rem; color:var(--accent-strong); margin:.1em 0 .4em; }
.tier ul{ list-style:none; padding:0; margin:0 0 6px; }
.tier li{ padding:5px 0 5px 24px; position:relative; }
.tier li::before{ content:"✿"; position:absolute; left:0; color:var(--moss); }

/* ——— postup (kroky) ——— */
.steps{ counter-reset:step; display:grid; gap:14px; }
.step{ display:flex; gap:16px; align-items:flex-start; }
.step .num{
  counter-increment:step; flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--accent); color:var(--on-accent); font-family:"Fraunces"; font-size:1.2rem;
  display:grid; place-items:center; box-shadow:0 4px 0 -1px var(--accent-strong);
}
.step .num::before{ content:counter(step); }

/* ——— seznam s fajfkou / křížkem ——— */
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.checklist li{ padding-left:30px; position:relative; }
.checklist li.yes::before{ content:"✿"; color:var(--moss); position:absolute; left:0; font-size:1.1rem; }
.checklist li.no::before{ content:"✕"; color:var(--accent); position:absolute; left:2px; font-weight:700; }

/* ——— galerie ——— */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.gallery .slot{
  aspect-ratio:1; border-radius:18px; border:2px dashed var(--border); background:var(--surface-2);
  display:grid; place-items:center; text-align:center; color:var(--text-muted); font-family:"Caveat"; font-size:1.3rem; padding:10px;
}

/* ——— videa / ukázky ——— */
.videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.video figure{ margin:0; }
.video .frame{
  position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:2px solid var(--border); background:var(--moss-strong);
  box-shadow:0 10px 0 -4px var(--surface-shadow), 0 18px 26px -18px var(--shadow);
}
.video .frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video .ph{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; padding:16px; color:var(--on-accent); }
.video .ph .play{ width:56px; height:56px; opacity:.95; }
.video .ph small{ font-family:"Caveat",cursive; font-size:1.25rem; color:var(--rose); }
.video figcaption{ font-family:"Fraunces"; color:var(--accent-strong); margin-top:10px; font-size:1.08rem; }
.video figcaption span{ font-style:italic; color:var(--text-muted); font-weight:400; font-family:"Spectral"; font-size:.95rem; }
.soon{ font-size:.68rem; background:var(--moss); color:var(--on-accent); padding:2px 9px; border-radius:999px; font-family:"Fraunces"; margin-left:6px; vertical-align:2px; }

/* ——— hero ilustrace ——— */
.mushroom-hero{ width:clamp(140px,36vw,210px); height:auto; display:block; margin:0 auto 8px; filter:drop-shadow(0 18px 22px var(--shadow)); }
.mushroom-hero .cap{ transform-origin:center bottom; animation:sway 6s ease-in-out infinite; }

footer{ text-align:center; padding:30px 0 70px; color:var(--text-muted); }
footer .sprig{ width:60px; opacity:.8; margin-bottom:6px; }
footer .heart{ color:var(--accent); }
footer .mini-nav{ margin-bottom:10px; }
footer .mini-nav a{ color:var(--text); text-decoration:none; margin:0 8px; }
footer .mini-nav a:hover{ color:var(--accent-strong); }

@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes sway{ 0%,100%{ transform:rotate(-2.5deg);} 50%{ transform:rotate(2.5deg);} }
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}