/* ===========================================================================
   Power BI NextGen — infoShare Academy
   Style globalne. Tokeny, motyw light/dark, animacje i media queries
   przeniesione 1:1 z prototypu Claude Design (Power BI NextGen.dc.html).
   Reguły :hover / :focus odtwarzają atrybuty style-hover / style-focus
   z prototypu (w prototypie obsługiwał je runtime support.js).
   =========================================================================== */

:root{
  --bg:#FBFAF8; --bg-elev:#FFFFFF; --surface:#F4F2EE; --surface-2:#EEEBE4;
  --text:#16120F; --text-soft:#5B554E; --text-faint:#8A8379;
  --border:#E6E1D8; --border-strong:#D6D0C5;
  --accent:#F20B32; --accent-ink:#FFFFFF; --accent-soft:#FFE6EB;
  --code-bg:#14110F; --code-surface:#1E1A17; --code-text:#EDE9E2; --code-border:#2E2924;
  --code-green:#5FD08A; --code-pink:#FF6E8A; --code-blue:#6FA8FF; --code-amber:#F2C879;
  --shadow:0 1px 2px rgba(20,17,15,.04),0 12px 40px -12px rgba(20,17,15,.12);
}
html[data-theme="dark"]{
  --bg:#0C0B0E; --bg-elev:#151318; --surface:#17151B; --surface-2:#1F1C24;
  --text:#F6F3EF; --text-soft:#ABA59C; --text-faint:#736D66;
  --border:#272430; --border-strong:#332F3C;
  --accent:#FF2B4D; --accent-ink:#FFFFFF; --accent-soft:#2A1117;
  --code-bg:#08070A; --code-surface:#121016; --code-text:#E7E3DC; --code-border:#231F2B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6;transition:background .35s ease,color .35s ease;}
::selection{background:var(--accent);color:#fff}
a{color:inherit}
details > summary{list-style:none;cursor:pointer}
details > summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(45deg)}
details[open] .acc-card{border-color:var(--accent)}
html[data-theme="dark"] .icon-sun{display:none!important}
html:not([data-theme="dark"]) .icon-moon{display:none!important}
html[data-theme="dark"] .logo-on-light{display:none!important}
html:not([data-theme="dark"]) .logo-on-dark{display:none!important}
html[data-font="poppins"] *{font-family:'Poppins',sans-serif!important}
.nav-link{transition:color .2s}
.nav-active{color:var(--accent)!important}
.nav-burger{display:none}

/* Panel mobilny — odtwarza navPanelStyle z prototypu (animacja max-height).
   Domyślnie ukryty; pokazywany w media query <=880px; klasa .open rozwija. */
.nav-mobile-panel{
  display:none;
  overflow:hidden;
  background:var(--bg);
  border-top:1px solid transparent;
  max-height:0;
  transition:max-height .32s ease;
}
.nav-mobile-panel.open{
  max-height:480px;
  border-top-color:var(--border);
}

@media (max-width:880px){
  .nav-desktop{display:none!important}
  .nav-cta{display:none!important}
  .nav-burger{display:inline-flex!important}
  .nav-mobile-panel{display:block!important}
}
@media (max-width:430px){
  .cf-turnstile{transform:scale(.9);transform-origin:top left}
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(13px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glowpulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Offset pod sticky-nav, żeby kotwice nie chowały się pod nagłówkiem
   (drobne usprawnienie UX — nie zmienia warstwy wizualnej). */
#top,section[id]{scroll-margin-top:96px}

/* ---------------------------------------------------------------------------
   Stany :hover / :focus — odpowiedniki style-hover / style-focus z prototypu.
   Klasy dodane na elementach, które w prototypie miały te atrybuty.
   --------------------------------------------------------------------------- */
.hover-lift-1,.hover-lift-2,.hover-outline,.hover-card,.hover-bright,
.hover-bright-strong,.hover-accent-text,.hover-translate,.hover-white-bg{
  transition:filter .2s ease,transform .2s ease,color .2s ease,background .2s ease,border-color .2s ease;
}
.hover-lift-1:hover{filter:brightness(1.05);transform:translateY(-1px)}          /* nav „Zapisz się” */
.hover-lift-2:hover{filter:brightness(1.06);transform:translateY(-2px)}          /* CTA akcent (hero, cennik) */
.hover-outline:hover{border-color:var(--accent);color:var(--accent)}            /* przyciski obrysowane */
.hover-card:hover{border-color:var(--accent);transform:translateY(-3px)}        /* karty kompetencji CV */
.hover-bright:hover{filter:brightness(1.06)}                                     /* „Wyślij wiadomość” */
.hover-bright-strong:hover{filter:brightness(1.1)}                               /* link e-mail */
.hover-accent-text:hover{color:var(--accent)}                                    /* „Zapytaj o termin” */
.hover-translate:hover{transform:translateY(-2px)}                               /* CTA finalne — białe */
.hover-white-bg:hover{background:rgba(255,255,255,.24)}                          /* CTA finalne — ghost */

/* Pola formularza — odpowiednik style-focus="border-color:var(--accent)". */
.field{transition:border-color .2s ease}
.field:focus{border-color:var(--accent)}

/* Komunikat statusu formularza (sukces / błąd). */
.form-status{font-size:14px;font-weight:600;margin:4px 0 0;display:none}
.form-status.is-visible{display:block}
.form-status.is-ok{color:#1a8f57}
.form-status.is-err{color:var(--accent)}
html[data-theme="dark"] .form-status.is-ok{color:var(--code-green)}

/* Przycisk submit w trakcie wysyłki. */
button[disabled]{opacity:.6;cursor:progress}