/* ================================================================
   WALNUT & SAND (autism) — sdílený styl podstránek trial autism webu babysleepAutismClassical.
   Sladěno s homepage (description.html): stejné tokeny, Fraunces + Inter,
   noční paleta, 2 akcenty (lila + měsíční zlatá), sklo karty, hvězdy.
   Restyluje STÁVAJÍCÍ markup podstránek (h1/h2/.review/.cta-button…) —
   žádná změna HTML těla nutná. Dvě témata jako na homepage.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg-0:#100c09; --bg-1:#1a1411;
  --card:rgba(255,255,255,.04); --line:rgba(255,255,255,.09);
  --ink:#f2eae1; --dim:#b3a396; --head:#ffffff;
  --moon:#c9a88c; --moon-deep:#a6835f;
  --lilac:#ded6ce;
  --cta-1:#c9a88c; --cta-2:#a6835f;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter","Segoe UI",Roboto,sans-serif;
  --maxw:760px; --r:18px;
}

/* světlá varianta "night cream" — přepínatelná stejně jako na homepage */
:root[data-theme="cream"] {
  --bg-0:#f2ece2; --bg-1:#ebe1d2;
  --card:rgba(38,52,42,.05); --line:rgba(38,52,42,.15);
  --ink:#2e241c; --dim:#6e5d4c; --head:#221a14;
  --moon:#8a6b4d; --moon-deep:#6e5439;
  --lilac:#6e5439;
}

* { box-sizing:border-box; }

html {
  background:
    radial-gradient(1000px 600px at 70% -100px, rgba(160,125,90,.16), transparent 65%),
    radial-gradient(800px 500px at 15% 300px, rgba(201,168,140,.05), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  scroll-behavior:smooth;
}
:root[data-theme="cream"] html {
  background:
    radial-gradient(1000px 600px at 70% -100px, rgba(110,84,57,.10), transparent 65%),
    radial-gradient(800px 500px at 15% 300px, rgba(138,107,77,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%);
  background-repeat:no-repeat; background-attachment:fixed;
}

body {
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:1.5rem clamp(1rem,4vw,1.6rem) 3.5rem;
  font-family:var(--sans);
  font-size:16.5px; line-height:1.75;
  color:var(--ink);
  background:transparent;
}

/* hvězdy — jedna jemná fixní vrstva za obsahem (bez blikání) */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 18%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 9%,  rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 71% 14%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 31%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 47%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 38%, rgba(255,255,255,.22) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 80% 62%, rgba(255,255,255,.2) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 76%,  rgba(255,255,255,.2) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 45% 84%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 89%, rgba(255,255,255,.2) 50%, transparent 51%);
}
:root[data-theme="cream"] body::before { filter:invert(1) hue-rotate(20deg); opacity:.22; }

/* ---------- typografie ---------- */
h1, h2, h3 { font-family:var(--serif); font-weight:600; color:var(--head); line-height:1.2; }
h1 {
  font-size:clamp(1.9rem,4.6vw,2.9rem); letter-spacing:-.01em;
  text-align:center; margin:.4rem 0 .5rem;
}
h2 {
  font-size:clamp(1.35rem,3vw,1.85rem); letter-spacing:-.01em;
  text-align:left; margin:2.6rem 0 .5rem;
}
h3 { font-size:1.2rem; margin:1.6rem 0 .5rem; }

p { margin:0 0 1.05rem; text-align:left; }
strong { color:var(--head); font-weight:600; }
em { font-style:italic; }
a { color:var(--lilac); text-decoration:none; }
a:hover { text-decoration:underline; }

/* seznamy (využívají hlavně právní stránky privacy/delete_data) */
ul, ol { padding-left:1.5rem; margin:0 0 1.05rem; text-align:left; }
li { margin:.35rem 0; }
li p { margin:0 0 .4rem; }

/* podnadpis pod H1 (dřív červený) → tlumený měsíční kurzívou, na střed */
.alternative {
  color:var(--moon); font-weight:500; font-style:italic;
  font-family:var(--serif);
  text-align:center; font-size:clamp(1.02rem,2.2vw,1.2rem);
  max-width:46ch; margin:0 auto 2.2rem;
}
/* italická „lead" věta pod H2 */
.feature-title {
  color:var(--lilac); font-style:italic; font-weight:500;
  text-align:left; margin:0 0 .7rem; font-size:1.02rem;
}
.peaceful-sleep { font-weight:600; color:var(--head); }

/* ---------- horní nav (emoji lišta) + jazyk ---------- */
.topnav {
  text-align:center; font-size:.9rem; line-height:2.1;
  padding:.9rem 0 1.1rem; margin:0 0 1.2rem;
  border-bottom:1px solid var(--line);
}
.topnav a { color:var(--dim); }
.topnav a:hover { color:var(--head); text-decoration:none; }
.topnav strong { color:var(--moon); font-weight:600; }

.lang-link { text-align:right; margin:0 0 .3rem; font-size:.88rem; color:var(--dim); }
.lang-select {
  font-family:var(--sans); font-size:.85rem; padding:.3rem .55rem;
  border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--ink); cursor:pointer;
}
.lang-select option { background:var(--bg-1); color:var(--ink); }

/* ---------- obsahové karty (.review) ---------- */
.reviews-section { margin:1.5rem 0; }
.review {
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--lilac);
  border-radius:0 var(--r) var(--r) 0;
  margin:1rem 0; padding:1.1rem 1.3rem;
  text-align:left;
}
.review-author {
  font-family:var(--serif); font-weight:600; color:var(--head);
  font-size:1.05rem; margin:0 0 .4rem; text-align:left;
}
.review-text { color:var(--dim); margin:0 0 .3rem; text-align:left; font-style:normal; }
.review-text + .review-text { margin-top:.6rem; }

/* ---------- CTA tlačítko (měsíční zlatá) ---------- */
.cta-button {
  display:block; width:fit-content; margin:1.4rem auto .6rem;
  padding:1rem 2.1rem; border-radius:14px;
  background:linear-gradient(180deg, var(--cta-1), var(--cta-2));
  color:#1a1411; font-family:var(--sans); font-size:1.05rem; font-weight:600;
  text-decoration:none; box-shadow:0 10px 30px rgba(201,168,140,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta-button:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(201,168,140,.32); text-decoration:none; }

/* ---------- obrázky ---------- */
.google-play-image, .google-play-image-small {
  display:block; margin:.4rem auto 1rem; border:0; max-width:100%; height:auto;
}
.google-play-image { max-width:200px; }
.google-play-image-small { width:200px; }
.babysleep-icon-image, .centered-image {
  display:block; margin:1rem auto; border:0; max-width:100%; height:auto;
  border-radius:16px;
}
.half-size { width:50% !important; max-width:100% !important; height:auto !important; }

/* volitelné mřížky screenshotů (kdyby je některá stránka měla) */
.screenshots-section { margin:1.5rem 0; }
.screenshots-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:700px; margin:0 auto; }
.screenshot-item { width:120px; flex-shrink:0; text-align:center; }
.screenshot-item img { width:120px; height:auto; border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.4); display:block; margin:0 auto; }
.screenshot-caption { font-size:.8rem; color:var(--dim); margin:.35rem 0 0; text-align:center; }

/* ---------- responsivita ---------- */
@media (max-width:768px) {
  body { font-size:16px; padding:1rem .9rem 3rem; }
  h2 { margin-top:2rem; }
  .half-size { width:100% !important; }
  .topnav { line-height:2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}