/* ==========================================================================
   EduPlaner 2026 — baza: fonty, reset, tło, typografia, komponenty
   Odpowiednik: _ds/industry-*/styles.css + inline <style> szablonu
   (te 15 klas, które szablon faktycznie wykorzystuje).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonty self-hosted (decyzja D5 — zero Google Fonts, zero CDN)
   -------------------------------------------------------------------------- */

/* Mulish — font zmienny 200–1000, jeden plik na cały zakres wag */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-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;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-italic-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;
}

/* Allura — wyłącznie podpis odręczny autorki */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/allura-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/allura-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;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ep-font);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ep-tekst);
  -webkit-font-smoothing: antialiased;

  /* Tło „papieru milimetrowego" — 5 warstw, kolejność ma znaczenie.
     Szablon: linie 33–39. */
  background:
    linear-gradient(rgba(107, 92, 165, 0.045) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(107, 92, 165, 0.045) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(1100px 620px at 88% -8%, #EFE8FA 0%, rgba(239, 232, 250, 0) 62%),
    radial-gradient(900px 520px at 4% 12%, #F7EDE0 0%, rgba(247, 237, 224, 0) 64%),
    linear-gradient(180deg, #FDFAF6 0%, #FBF6F0 46%, #F8F1E9 100%);
  background-attachment: fixed;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }

/* --------------------------------------------------------------------------
   3. Typografia
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 6.8px;
  text-wrap: pretty;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 10.2px; }

a {
  color: var(--ep-fiolet-700);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
a:hover { color: var(--ep-braz); }

button, input, textarea, select {
  font-family: inherit;
  color: inherit;
}
button { color: inherit; }

::selection { background: var(--ep-fiolet-200); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--ep-koral);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   4. Komponenty — tylko te, których szablon faktycznie używa
   -------------------------------------------------------------------------- */

/* 4.1 Ramka „blueprint" ze znacznikami pasera w narożnikach.
   Baza z design systemu (border 1px, radius 0), nadpisania z inline <style>
   szablonu (radius 20px, border 2px) — składam od razu w wartość docelową. */
.ep-blueprint {
  position: relative;
  border: 2px solid var(--ep-ramka-mocna);
  border-radius: var(--ep-promien);
}

.ep-blueprint > .ep-corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: color-mix(in srgb, var(--ep-tekst) 55%, transparent);
}
.ep-blueprint > .ep-corner::before,
.ep-blueprint > .ep-corner::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.ep-blueprint > .ep-corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.ep-blueprint > .ep-corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.ep-blueprint > .ep-corner.tl { top: -6px; left: -6px; }
.ep-blueprint > .ep-corner.tr { top: -6px; right: -6px; }
.ep-blueprint > .ep-corner.bl { bottom: -6px; left: -6px; }
.ep-blueprint > .ep-corner.br { bottom: -6px; right: -6px; }

/* 4.2 Przyciski */
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 14px;
  line-height: 1.2;
  color: var(--ep-tekst);
  background: transparent;
  border: 1px solid var(--ep-brzeg);
  border-radius: var(--ep-promien-sm);
  padding: 6.8px 12.24px;
}
.ep-btn svg { display: block; }
.ep-btn:disabled { opacity: .45; cursor: not-allowed; }

.ep-btn-primary {
  background: var(--ep-fiolet);
  border-color: var(--ep-fiolet);
  color: var(--ep-tlo);
}
.ep-btn-secondary { border-color: var(--ep-brzeg); }
.ep-btn-secondary:hover { background: color-mix(in srgb, var(--ep-tekst) 7%, transparent); }
.ep-btn-secondary:active { background: color-mix(in srgb, var(--ep-tekst) 14%, transparent); }

/* Wariant CTA — powtarza się w szablonie 13 razy z identycznym stylem inline.
   Wyciągam do klasy, żeby nie kopiować gradientu i cienia po sekcjach. */
.ep-btn-cta {
  background: var(--ep-grad-cta);
  border-color: var(--ep-koral);
  color: var(--ep-na-koralu);
  box-shadow: var(--ep-cien-cta);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ep-btn-cta:hover {
  color: var(--ep-na-koralu);
  transform: translateY(-2px);
  background: var(--ep-grad-cta-hover);
  box-shadow: var(--ep-cien-cta-hover);
}
.ep-btn-cta:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px -4px rgba(51, 43, 84, 0.5);
}

/* 4.3 Etykiety */
.ep-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.ep-tag-outline {
  border: 1px solid var(--ep-fiolet);
  color: var(--ep-fiolet);
}

/* 4.4 Pola formularza */
.ep-input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ep-tekst);
  caret-color: var(--ep-fiolet);
  background: var(--ep-powierzchnia);
  border: 1px solid var(--ep-brzeg);
  border-radius: var(--ep-promien-sm);
}
.ep-input:hover { border-color: color-mix(in srgb, var(--ep-tekst) 45%, transparent); }
.ep-input:focus-visible { border-color: var(--ep-fiolet); outline-offset: 0; }
textarea.ep-input { min-height: 90px; resize: vertical; }

/* 4.5 Nadtytuł sekcji z kreską */
.ep-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ep-braz);
  margin-bottom: 14px;
}
.ep-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ep-grad-kreska);
  border-radius: 2px;
  flex: none;
}

/* 4.6 Link pomijania nawigacji */
.ep-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ep-fiolet-900);
  color: var(--ep-na-koralu);
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-size: 15px;
}
.ep-skip-link:focus { left: 0; color: var(--ep-na-koralu); }

/* --------------------------------------------------------------------------
   5. Animacje
   -------------------------------------------------------------------------- */

@keyframes mzIn    { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes mzType  { 0% { width: 0; } 100% { width: var(--w, 70%); } }
@keyframes mzBar   { 0% { width: 8%; } 100% { width: 100%; } }
@keyframes mzPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,69,10,0.35); } 50% { box-shadow: 0 0 0 8px rgba(232,69,10,0); } }
@keyframes mzTick  { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }

.ep-mz-row { opacity: 0; animation: mzIn .5s ease forwards; }
.ep-mz-fill {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #C9BEE8, #9182C6);
  width: 0;
  animation: mzType 1.1s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}