/* ==========================================================================
   Pogadajka / Mikołaj – style strony
   Układ (rozmiary, odstępy, kolory sekcji) siedzi w atrybutach style="" w HTML,
   dokładnie tak jak w eksporcie z projektu graficznego. Tutaj są: czcionka,
   baza, tło hero, elementy interaktywne (hover, focus, animacje) i FAQ.
   ========================================================================== */

/* --- Czcionka Nunito (hostowana lokalnie, bez Google Fonts) --- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../fonts/nunito-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;
}

/* --- Baza --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #0f2a1c;
  color: #f7f0e3;
  font-family: Nunito, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #f0c66e; text-underline-offset: 3px; }
a:hover { color: #ffe0a1; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
section[id], #rozmowa { scroll-margin-top: 72px; }

/* Główny kontener: dzięki niemu jednostki cqi w stylach liczą się względem szerokości strony */
.mk {
  container: mk / inline-size;
  background: #0f2a1c;
  min-height: 100%;
  color: #f7f0e3;
}

:focus-visible { outline: 3px solid #f0c66e; outline-offset: 3px; }
.wl-box :focus-visible { outline-color: #0f2a1c; outline-offset: 1px; }
.mk-btn-red:focus-visible { outline-color: #fff; }

/* --- Nagłówek --- */
.mk-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15, 42, 28, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* menu chowa się na wąskich ekranach (tak jak w projekcie: poniżej ~1000 px) */
@container mk (max-width: 998px) { .mk-nav { display: none !important; } }

/* tekst " za darmo" w przycisku w nagłówku pokazujemy tylko na szerszych ekranach */
@container mk (max-width: 480px) { .mk-wide { display: none; } }

/* --- Przyciski --- */
.mk-btn-red {
  background: #d2443a;
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.mk-btn-red:hover { background: #b8352c; color: #fff; }
.mk-submit:hover { background: #b8352c; }
.mk-btn-cream:hover { background: #fff !important; }
.mk-play:hover { background: #fff !important; }
.mk-linkbtn:hover { color: #ffe0a1 !important; }
.mk-submit[disabled] { opacity: .65; cursor: progress; }

/* --- Hero: sceneria (gwiazdy, księżyc, wzgórza, choinki, domki z dymem, śnieg) --- */
.mk-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mk-layer { position: absolute; inset: 0; will-change: transform; }
.mk-star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff6d8; }
.mk-moon {
  position: absolute; right: 4%; top: -34px; will-change: transform;
  width: clamp(64px, 8cqi, 96px); height: clamp(64px, 8cqi, 96px);
  border-radius: 50%; background: #fbe7b0; box-shadow: 0 0 60px 20px rgba(251, 231, 176, .25);
}
.mk-hill {
  position: absolute; left: -20%; right: -20%; bottom: 40px; will-change: transform;
  height: 280px; border-radius: 50% 50% 0 0; background: #173b28;
}
.mk-tree {
  position: absolute;
  clip-path: polygon(50% 0, 63% 24%, 57% 24%, 73% 48%, 65% 48%, 83% 74%, 73% 74%, 94% 100%, 6% 100%, 27% 74%, 17% 74%, 35% 48%, 27% 48%, 43% 24%, 37% 24%);
}
.mk-house { position: absolute; }
.mk-chimney { position: absolute; right: 16%; top: -58%; width: 13%; height: 42%; background: #4a2418; }
.mk-smoke-box { position: absolute; right: 16%; top: -58%; width: 13%; height: 0; }
.mk-smoke {
  position: absolute; left: 50%; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: #e8e2d6; animation: mkSmoke 6s ease-out infinite;
}
.mk-roof {
  position: absolute; left: -12%; right: -12%; top: -55%; height: 60%; background: #5a2a1c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mk-wall { position: absolute; inset: 0; background: #3b2218; border-radius: 2px; }
.mk-win {
  position: absolute; top: 28%; width: 22%; height: 30%; background: #f6c76a;
  box-shadow: 0 0 14px rgba(246, 199, 106, .7);
}
.mk-win-l { left: 22%; }
.mk-win-r { right: 22%; }
.mk-snow { position: absolute; border-radius: 50%; background: #f7f0e3; }
.mk-snow-l { left: -30%; width: 90%; bottom: -150px; height: 240px; }
.mk-snow-r { right: -30%; width: 100%; bottom: -170px; height: 250px; }
.mk-snow-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: #f7f0e3; }
@keyframes mkSmoke {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  15% { opacity: .75; }
  100% { transform: translate(calc(-50% + 18px), -70px) scale(1.8); opacity: 0; }
}

/* --- Dekoracje w tle sekcji jasnych (płatki i gwiazdki z parallaxem) --- */
.mk-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mk-dx { position: absolute; line-height: 1; will-change: transform; }

/* --- Animacja wjazdu kroków (tylko gdy działa JS) --- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal] [data-reveal-img] {
  transform: scale(.92);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal].is-in [data-reveal-img] { transform: scale(1); }
.no-reveal [data-reveal], .no-reveal [data-reveal] [data-reveal-img] { opacity: 1 !important; transform: none !important; }

/* --- FAQ (rozwijane bez JS: wszystkie odpowiedzi widoczne; z JS: harmonijka) --- */
.faq-ico {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: #f0c66e; color: #0f2a1c;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.faq-item.is-open .faq-ico { transform: rotate(135deg); }
.faq-a {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
}
.faq-a > div { overflow: hidden; min-height: 0; }
.faq-a p {
  margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: #d9e1d6;
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.js .faq-item:not(.is-open) .faq-a { grid-template-rows: 0fr; }
.js .faq-item:not(.is-open) .faq-a > div { visibility: hidden; transition: visibility 0s .45s; }
.js .faq-item:not(.is-open) .faq-a p { opacity: 0; transform: translateY(-8px); }

/* Bez JavaScriptu demo rozmowy nie działa, więc nie pokazujemy jego przycisków */
html:not(.js) [data-demo-play],
html:not(.js) [data-demo-toggle] { display: none; }

/* --- Formularz zapisów --- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.wl-box input::placeholder { color: #7a7f73; opacity: 1; }

/* --- Mniej ruchu, jeśli użytkownik tak ustawił system --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js [data-reveal] [data-reveal-img] { opacity: 1; transform: none; }
}