/* ==========================================================================
   EduPlaner 2026 — nagłówek i stopka
   Desktop: 1:1 z szablonem (linie 84–109 i 1253–1269).
   Mobile (≤1000 px): układ zaprojektowany od zera — w źródle go nie ma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Nagłówek — desktop
   -------------------------------------------------------------------------- */

.ep-naglowek {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(253, 250, 246, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(59, 49, 86, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
              0 10px 30px -18px rgba(51, 43, 84, 0.35);
}

.ep-naglowek__pas {
  max-width: var(--ep-kontener);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.ep-marka {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  flex: none;
  color: inherit;
}
.ep-marka:hover { color: inherit; }

.ep-marka__logo {
  width: 70px;
  height: 70px;
  display: block;
  object-fit: contain;
}

.ep-marka__tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.ep-marka__nazwa {
  font-family: var(--ep-font-naglowek);
  font-weight: 600;
  font-size: 29px;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.ep-marka__podtytul {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ep-braz);
  margin-top: 3px;
}

.ep-nawigacja {
  display: flex;
  gap: 15px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.ep-naglowek__cta {
  padding: 9px 18px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: none;
}

/* Przycisk hamburgera — tylko w wersji mobilnej */
.ep-hamburger {
  display: none;
  width: 46px;
  height: 46px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--ep-ramka-slaba);
  border-radius: var(--ep-promien-md);
  color: var(--ep-fiolet-800);
}
.ep-hamburger__kreski,
.ep-hamburger__kreski::before,
.ep-hamburger__kreski::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.ep-hamburger__kreski::before,
.ep-hamburger__kreski::after {
  content: "";
  position: absolute;
}
.ep-hamburger__kreski::before { transform: translateY(-6px); }
.ep-hamburger__kreski::after  { transform: translateY(6px); }

.ep-hamburger[aria-expanded="true"] .ep-hamburger__kreski { background: transparent; }
.ep-hamburger[aria-expanded="true"] .ep-hamburger__kreski::before { transform: rotate(45deg); }
.ep-hamburger[aria-expanded="true"] .ep-hamburger__kreski::after  { transform: rotate(-45deg); }

/* Kotwice nawigacji muszą zatrzymywać się pod przyklejonym nagłówkiem,
   inaczej początek sekcji chowa się za paskiem. W oryginale tego nie ma —
   to poprawka błędu, nie zmiana projektu. */
[id] { scroll-margin-top: 112px; }

/* Zasłona pod szufladą nawigacji istnieje tylko w wersji mobilnej. */
.ep-zaslona { display: none; }

/* --------------------------------------------------------------------------
   2. Stopka — desktop
   -------------------------------------------------------------------------- */

.ep-stopka {
  border-top: 1px solid rgba(59, 49, 86, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(245, 240, 252, 0.7));
}

.ep-stopka__pas {
  max-width: var(--ep-kontener);
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ep-braz-ciemny);
}

.ep-stopka__logo { width: 40px; height: 40px; display: block; }
.ep-stopka__kontakt { margin-left: auto; }
.ep-stopka__spolecznosci { display: flex; gap: 10px; }

.ep-spolecznosc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  transition: background .2s ease, transform .2s ease;
}
.ep-spolecznosc--fb {
  border: 1px solid #C6BAE6;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ep-fiolet-800);
}
.ep-spolecznosc--fb:hover { background: var(--ep-fiolet-200); transform: translateY(-1px); color: var(--ep-fiolet-800); }
.ep-spolecznosc--strona {
  border: 1px solid #C6BAE6;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ep-fiolet-800);
}
.ep-spolecznosc--strona:hover { background: var(--ep-fiolet-200); transform: translateY(-1px); color: var(--ep-fiolet-800); }
.ep-spolecznosc--blog {
  border: 1px solid var(--ep-koral-300);
  background: var(--ep-koral-100);
  color: var(--ep-koral-700);
}
.ep-spolecznosc--blog:hover { background: var(--ep-koral-200); transform: translateY(-1px); color: var(--ep-koral-700); }

/* --------------------------------------------------------------------------
   3. Pasek cookie
   -------------------------------------------------------------------------- */

.ep-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: rgba(253, 250, 246, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--ep-ramka-slaba);
  box-shadow: 0 -12px 30px -20px rgba(51, 43, 84, 0.5);
}
.ep-cookies[hidden] { display: none; }
.ep-cookies__tresc {
  max-width: var(--ep-kontener);
  margin: 0 auto;
  padding: 16px var(--ep-kontener-pad);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ep-cookies__tekst {
  flex: 1;
  min-width: 260px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ep-akapit);
}
.ep-cookies__przycisk { flex: none; padding: 11px 24px; font-size: 14px; letter-spacing: 0.03em; }

/* --------------------------------------------------------------------------
   4. Wersja mobilna — do 1000 px
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

  /* Szuflada nawigacji jest dzieckiem nagłówka, więc dziedziczy jego kontekst
     nakładania. Bez podniesienia z-index nagłówka zasłona (z-index 30)
     przykrywałaby otwarte menu, mimo że menu ma z-index 40.
     Przy okazji pasek nagłówka zostaje nad zasłoną — hamburger jest dalej
     klikalny i zamyka menu.

     `backdrop-filter` musi zejść z samego nagłówka na warstwę pod nim:
     element z tym filtrem jest blokiem zawierającym dla potomków
     `position: fixed`, więc szuflada kotwiczyła się do miejsca nagłówka
     w dokumencie, a nie do okna — po przewinięciu strony otwierała się
     poza ekranem. Pseudoelement nie ma potomków, więc rozmycie zostaje,
     a szuflada liczy się już względem okna. */
  .ep-naglowek {
    z-index: 50;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ep-naglowek::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(253, 250, 246, 0.86);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }

  .ep-naglowek__pas {
    padding: 10px var(--ep-kontener-pad);
    gap: 12px;
  }

  .ep-marka__logo  { width: 48px; height: 48px; }
  .ep-marka__nazwa { font-size: 21px; }
  .ep-marka__podtytul { font-size: 9px; letter-spacing: 0.2em; }

  /* z-index nad szufladą (40), żeby po otwarciu menu przycisk był dalej
     widoczny i klikalny — zmienia się wtedy w krzyżyk zamknięcia. */
  .ep-hamburger { display: inline-flex; position: relative; z-index: 45; }

  /* Szuflada nawigacji wjeżdżająca z prawej, zawsze na całą wysokość okna.
     `100dvh` z zapasem `100vh` — na telefonach pasek adresu chowa się przy
     przewijaniu i sama `vh` zostawiłaby wtedy pustą szparę u dołu. */
  .ep-nawigacja {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    height: 100vh;
    height: 100dvh;
    width: min(360px, 86vw);
    z-index: 40;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 92px 24px 28px;
    overflow-y: auto;
    background: linear-gradient(160deg, #FDFAF6 0%, #F4EFFC 100%);
    border-left: 1px solid var(--ep-ramka-slaba);
    box-shadow: -20px 0 50px -30px rgba(51, 43, 84, 0.6);
    transform: translateX(100%);
    /* Wolniej niż domyślne .2s, żeby ruch dało się śledzić okiem, ale bez
       wrażenia ociągania. Krzywa hamuje na końcu — szuflada „dojeżdża". */
    transition: transform .34s cubic-bezier(.32, .72, .24, 1);
    font-size: 17px;
    white-space: normal;
  }
  .ep-nawigacja[data-otwarte="true"] { transform: translateX(0); }

  .ep-nawigacja a {
    padding: 15px 4px;
    border-bottom: 1px solid var(--ep-ramka-wlos);
    color: var(--ep-fiolet-900);
  }
  .ep-nawigacja a:hover { color: var(--ep-koral-700); }

  /* Reguła wyżej (`.ep-nawigacja a`) jest bardziej szczegółowa niż
     `.ep-btn-cta`, więc przemalowywała napis na przycisku na fiolet.
     Kolor i cień wracają tu jawnie — przycisk ma wyglądać tak samo jak
     ten w pasku nagłówka na desktopie. */
  .ep-nawigacja a.ep-nawigacja__cta {
    display: inline-flex;   /* wygrywa z .ep-tylko-mobile { display:block } */
    margin-top: 22px;
    width: 100%;
    padding: 15px 20px;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ep-na-koralu);
    border-bottom-color: var(--ep-koral);
    box-shadow: var(--ep-cien-cta);
  }
  .ep-nawigacja a.ep-nawigacja__cta:hover,
  .ep-nawigacja a.ep-nawigacja__cta:focus-visible { color: var(--ep-na-koralu); }

  /* Przycisk zamówienia z paska nagłówka chowamy — jest w szufladzie */
  .ep-naglowek__cta { display: none; }

  .ep-zaslona {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(36, 30, 60, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .34s cubic-bezier(.32, .72, .24, 1);
  }
  .ep-zaslona[data-otwarte="true"] { opacity: 1; pointer-events: auto; }

  body.ep-menu-otwarte { overflow: hidden; }

  [id] { scroll-margin-top: 84px; }

  /* Stopka: wszystko w pionie, wyśrodkowane */
  .ep-stopka__pas {
    padding: 26px var(--ep-kontener-pad);
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
  }
  .ep-stopka__kontakt { margin-left: 0; }
}