/* ===== PROkid THEME — dokładne kolory z logotypu ===== */
/* TYLKO te trzy heksy: #f1e216 (żółty) · #e61140 (czerwony) · #145d9a (niebieski) */

:root {
  --brand-primary:      #145d9a;
  --brand-primary-dark: #145d9a;
  --brand-primary-light: rgba(20,93,154,.1);
  --brand-red:          #e61140;
  --brand-red-dark:     #e61140;
  --brand-yellow:       #f1e216;
  --brand-yellow-dark:  #f1e216;
  --border-focus:       #f1e216;
  --shadow-brand:       0 8px 24px rgba(241,226,22,.3);
}

body { background: #ffffff; }

/* --- Navbar --- */
.navbar { background: rgba(255,255,255,.97); border-bottom: 3px solid #f1e216; }
.navbar__logo { color: #0a0a0a; }
.navbar__logo-mark { background: #145d9a; color: #fff; }
/* kolor pozycji menu bierzemy z main.css, żeby był wszędzie ten sam */


/* --- Labels / tags --- */
.section-label { background: #f1e216; color: #0a0a0a; border: none; font-weight: 700; }
.tag--primary { background: #f1e216; color: #0a0a0a; }

/* --- Buttons override --- */
.btn--primary { background: #145d9a; color: #fff; }
.btn--primary:hover { background: #145d9a; opacity: .88; transform: translateY(-1px); }
.btn--secondary { color: #145d9a; border-color: #145d9a; }
.btn--secondary:hover { background: rgba(20,93,154,.08); }

/* --- Subnav (drugi poziom menu) --- */
.navbar-subnav--prokid {
  background: #fffdf0;
  border-bottom: 1px solid #f1e216;
}
.navbar-subnav--prokid .navbar-subnav__current {
  background: #f1e216; color: #0a0a0a;
}
.navbar-subnav--prokid a { color: #6b6b6b; }
.navbar-subnav--prokid a:hover { color: var(--brand-primary, #145d9a); background: rgba(20,93,154,.08); }

/* ============================================================
   HERO PROkid — żółte tło, czarny tekst, niebieski akcent
   ============================================================ */
/* ============================================================
   HERO — animowany gradient z 3 kolorami logotypu
   ============================================================ */
.hero--prokid {
  background: #f1e216;
  border-bottom: 4px solid #e61140;
  position: relative;
  overflow: hidden;
}

/* Główny ruchomy gradient tła */
.hero--prokid .hero__gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -45deg,
    #f1e216,
    #ffe000,
    #e61140,
    #ff4d70,
    #145d9a,
    #1e7ccc,
    #f1e216
  );
  background-size: 400% 400%;
  animation: prokid-flow 28s ease infinite;
  opacity: .85;
}

@keyframes prokid-flow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

/* Orby kolorów emanujące z rogów */
.hero--prokid .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hero--prokid .orb--yellow {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #f1e216 0%, transparent 70%);
  top: -120px; left: -80px;
  opacity: .9;
  animation: orb-drift-1 14s ease-in-out infinite alternate;
}
.hero--prokid .orb--red {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #e61140 0%, transparent 70%);
  top: 20%; right: -60px;
  opacity: .75;
  animation: orb-drift-2 18s ease-in-out infinite alternate;
}
.hero--prokid .orb--blue {
  width: 450px; height: 450px;
  background: radial-gradient(circle, #145d9a 0%, transparent 70%);
  bottom: -80px; left: 35%;
  opacity: .7;
  animation: orb-drift-3 22s ease-in-out infinite alternate;
}

@keyframes orb-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(80px, 60px) scale(1.15); }
  66%  { transform: translate(-40px, 120px) scale(.9); }
  100% { transform: translate(60px, -40px) scale(1.1); }
}
@keyframes orb-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-100px, 80px) scale(1.2); }
  80%  { transform: translate(-60px, -50px) scale(.85); }
  100% { transform: translate(40px, 60px) scale(1.05); }
}
@keyframes orb-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-80px, -60px) scale(1.1); }
  70%  { transform: translate(100px, 30px) scale(.95); }
  100% { transform: translate(-40px, -80px) scale(1.15); }
}

/* Nakładka semi-transparentna — gwarantuje czytelność tekstu */
.hero--prokid .hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  backdrop-filter: brightness(1.05);
}
.hero--prokid .hero__label         { color: #145d9a; }
.hero--prokid .hero__label::before { background: #145d9a; }
.hero--prokid .hero__title         { color: #ffffff; }
.hero--prokid .hero__title em      { color: #f1e216; font-style: normal; }
.hero--prokid .hero__sub           { color: rgba(255,255,255,.75); }
.hero--prokid .hero__stat-num      { color: #145d9a; }
.hero--prokid .hero__stat-label    { color: #444; }

/* ============================================================
   STEP CARDS — 3 kroki rejestracji
   ============================================================ */
.step-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2rem;
  border: 2.5px solid #145d9a;
  text-align: center;
  position: relative;
  transition: all var(--t);
}
.step-card:hover {
  border-color: #f1e216;
  box-shadow: 0 8px 32px rgba(241,226,22,.25);
  transform: translateY(-3px);
}
.step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #f1e216;
  color: #0a0a0a;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  border: 2px solid #0a0a0a;
}
.step-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.step-title { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: .6rem; color: #0a0a0a; }
.step-desc  { font-size: .9rem; color: #555; line-height: 1.6; }

/* ============================================================
   PANEL PREVIEW (mockup)
   ============================================================ */
.panel-preview {
  background: #fffdf0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid #f1e216;
}
.panel-preview__bar {
  background: #f1e216;
  padding: .75rem 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.panel-preview__dot           { width: 10px; height: 10px; border-radius: 50%; }
.panel-preview__dot--red      { background: rgba(10,10,10,.25); }
.panel-preview__dot--yellow   { background: rgba(10,10,10,.18); }
.panel-preview__dot--green    { background: rgba(10,10,10,.12); }
.panel-preview__content       { padding: 1.5rem; color: #0a0a0a; background: #fff; }
.panel-preview__header        { font-size: .8rem; color: #145d9a; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; font-weight: 700; }
.panel-preview__child         { background: #fffdf0; border: 1px solid #f5eba8; border-radius: var(--r-md); padding: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; }
.panel-preview__avatar        { width: 44px; height: 44px; border-radius: 50%; background: #145d9a; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.1rem; color: #fff; }
.panel-preview__child-name    { font-weight: 600; font-size: .95rem; color: #0a0a0a; }
.panel-preview__child-sub     { font-size: .78rem; color: #6b6b6b; }
.panel-preview__progress      { margin-bottom: 1rem; }
.panel-preview__progress-label { font-size: .78rem; color: #6b6b6b; margin-bottom: .4rem; display: flex; justify-content: space-between; }
.panel-preview__bar-track     { background: #f0f0f0; border-radius: 4px; height: 8px; }
.panel-preview__bar-fill      { height: 8px; border-radius: 4px; background: #145d9a; }
.panel-preview__next          { background: #f4f9fd; border: 1px solid #d8e7f4; border-radius: var(--r-md); padding: 1rem; }
.panel-preview__next-label    { font-size: .75rem; color: #145d9a; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.panel-preview__class         { display: flex; align-items: center; gap: .75rem; }
.panel-preview__class-dot     { width: 8px; height: 8px; border-radius: 50%; background: #145d9a; }
.panel-preview__class-text    { font-size: .88rem; color: #0a0a0a; }

/* ============================================================
   BENEFIT CARDS
   ============================================================ */
.benefit-card {
  background: #fff;
  border: 2px solid #145d9a;
  border-radius: var(--r-lg);
  padding: 1.5rem;
  text-align: center;
  transition: all var(--t);
}
.benefit-card:hover { border-color: #f1e216; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(241,226,22,.2); }
.benefit-icon  { font-size: 2.5rem; margin-bottom: .75rem; }
.benefit-title { font-weight: 700; font-size: 1rem; margin-bottom: .4rem; color: #0a0a0a; }
.benefit-desc  { font-size: .85rem; color: #555; line-height: 1.5; }

/* ============================================================
   WIZARD — formularz rejestracji
   ============================================================ */
.wizard-indicator.active .wizard-indicator__dot { background: #f1e216; border-color: #f1e216; }
.wizard-indicator.done .wizard-indicator__dot   { background: #145d9a; border-color: #145d9a; }

/* ============================================================
   SCHOOLS BAND — niebieski pas z czerwonym akcentem
   ============================================================ */
.schools-band { background: #145d9a; }
.schools-band-accent { color: #f1e216; }

/* ============================================================
   HIGHLIGHT / PILL TAGS
   ============================================================ */
.prokid-pill-yellow { background: #f1e216; color: #0a0a0a; padding: .2rem .7rem; border-radius: var(--r-full); font-weight: 700; font-size: .8rem; }
.prokid-pill-red    { background: #e61140; color: #fff;    padding: .2rem .7rem; border-radius: var(--r-full); font-weight: 700; font-size: .8rem; }
.prokid-pill-blue   { background: #145d9a; color: #fff;    padding: .2rem .7rem; border-radius: var(--r-full); font-weight: 700; font-size: .8rem; }

/* Footer override */
.footer { background: #0a0a0a; }
.footer__brand-mark { background: #f1e216; color: #0a0a0a; }
.footer__brand-name, .footer__col-title { color: #fff; }
.footer__desc, .footer__links a { color: rgba(255,255,255,.55); }
.footer__links a:hover { color: #f1e216; }
.footer__bottom { border-top-color: rgba(255,255,255,.1); color: rgba(255,255,255,.35); }