/* Workin'Flows — site.css · shared UI layer (WIF-UI-2026)
 * Zakres: PODSTRONY (header.site ciemny + nav.top). index.html ma własny hamburger inline — nie dotykamy.
 * Reguła rady floty: selektory wyłącznie .wf-* / body.wf-nav-open nav.top. ZERO globalnego resetu (body/h1/a/*).
 * Cel: mobilna nawigacja (disclosure drawer) na ~38 podstronach, które chowały nav.top bez alternatywy.
 */

/* ---- Mobile nav toggle (hamburger) — wariant na ciemny header ---- */
.wf-navbtn{
  display:none;background:transparent;border:1px solid rgba(245,239,227,.45);
  border-radius:4px;cursor:pointer;width:44px;height:44px;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto
}
.wf-navbtn .wf-bar{
  display:block;width:20px;height:2px;background:var(--wf-bone,#F5EFE3);
  transition:transform .2s cubic-bezier(.25,.1,.25,1),opacity .2s cubic-bezier(.25,.1,.25,1)
}
.wf-navbtn[aria-expanded="true"] .wf-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.wf-navbtn[aria-expanded="true"] .wf-bar:nth-child(2){opacity:0}
.wf-navbtn[aria-expanded="true"] .wf-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.wf-navbtn:focus-visible{outline:2px solid var(--wf-lime,#CEFF00);outline-offset:2px}

@media (max-width:860px){
  /* pokaż hamburger; margin-left:auto grupuje go z CTA po prawej, brand zostaje po lewej */
  .wf-navbtn{display:inline-flex;margin-left:auto}
  header.site .inner > .btn-top,
  header.site .inner > .btn{margin-left:12px}

  /* Drawer: nav.top wysuwa się z prawej, ciemny (spójny z headerem) */
  body.wf-nav-open nav.top{
    display:flex;position:fixed;top:0;right:0;bottom:0;width:min(320px,82vw);
    background:var(--wf-carbon,#0B0A09);border-left:1px solid rgba(245,239,227,.15);
    box-shadow:-12px 0 36px rgba(0,0,0,.45);flex-direction:column;gap:0;
    padding:84px 22px calc(24px + env(safe-area-inset-bottom));z-index:9990;overflow-y:auto;
    animation:wfNavIn .25s cubic-bezier(.25,.1,.25,1)
  }
  body.wf-nav-open nav.top a{padding:14px 16px;border-radius:4px;font-size:16px;color:var(--wf-bone,#F5EFE3)}
  body.wf-nav-open nav.top a:hover{background:rgba(245,239,227,.08);color:var(--wf-lime,#CEFF00)}
  body.wf-nav-open::before{
    content:"";position:fixed;inset:0;background:rgba(11,10,9,.6);z-index:9980;
    animation:wfFade .2s cubic-bezier(.25,.1,.25,1)
  }
  @keyframes wfNavIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
  @keyframes wfFade{from{opacity:0}to{opacity:1}}

  /* touch target floor dla CTA w headerze */
  header.site .inner .btn-top{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- Reduced motion: bez animacji drawera ---- */
@media (prefers-reduced-motion: reduce){
  .wf-navbtn .wf-bar{transition:none}
  body.wf-nav-open nav.top{animation:none}
  body.wf-nav-open::before{animation:none}
}

/* ---- Responsywność treści (WCAG 1.4.10 Reflow) ---- */
/* Szerokie tabele/pre: scroll wewnątrz zamiast łamania layoutu strony na mobile.
 * Scope: tylko w main, tylko ≤760px. Nie rusza tabel desktopowych. */
@media (max-width:760px){
  main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main pre{max-width:100%;overflow-x:auto}
  /* długie identyfikatory w inline code (np. nazwy klas) — zawijaj zamiast rozpychać */
  main :not(pre) > code{overflow-wrap:anywhere}
}

/* ---- Prezentacja zrzutów: okno przeglądarki / telefon / karta (brand §7.3) ---- */
/* Zrzut w realnej oprawie zamiast płaskiej ramki. Miękki cień oxblood, 8-10px radius,
 * monochromatyczny carbon frame, podpis POD oprawą. Bez gradientów. */
.wf-shot{margin:0 0 36px}
.wf-shot .wf-frame{
  position:relative;border:1px solid rgba(11,10,9,.16);border-radius:10px;overflow:hidden;
  background:var(--wf-bone,#F5EFE3);
  box-shadow:0 24px 50px -22px rgba(94,18,33,.30), 0 6px 16px -8px rgba(11,10,9,.14)
}
/* pasek okna przeglądarki z trzema kropkami */
.wf-shot .wf-frame::before{
  content:"";display:block;height:38px;background:var(--wf-carbon,#0B0A09);
  background-image:
    radial-gradient(circle at 23px 19px, rgba(245,239,227,.55) 4.5px, transparent 5px),
    radial-gradient(circle at 44px 19px, rgba(245,239,227,.40) 4.5px, transparent 5px),
    radial-gradient(circle at 65px 19px, rgba(245,239,227,.28) 4.5px, transparent 5px)
}
.wf-shot .wf-frame > picture, .wf-shot .wf-frame > img,
.wf-shot .wf-frame > picture > img{display:block;width:100%;max-width:100%;height:auto}
/* zrzuty: pełna wysokość, bez przycinania (widoczność > kompaktowość) */
.wf-shot > figcaption{
  margin-top:12px;font-family:var(--font-headline,system-ui,sans-serif);font-size:12px;
  color:var(--wf-carbon-soft,rgba(11,10,9,.72));letter-spacing:.02em;line-height:1.5
}
/* wariant TELEFON: węższy, zaokrąglony, carbon outline, notch zamiast paska */
.wf-shot--phone .wf-frame{
  max-width:330px;margin:0 auto;border:2px solid var(--wf-carbon,#0B0A09);border-radius:28px;
  box-shadow:0 26px 56px -22px rgba(94,18,33,.34), 0 6px 16px -8px rgba(11,10,9,.16)
}
.wf-shot--phone .wf-frame::before{height:26px;background:var(--wf-carbon,#0B0A09);background-image:none}
.wf-shot--phone .wf-frame::after{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:56px;height:7px;border-radius:5px;background:rgba(245,239,227,.30)
}
/* wariant KARTA: gotowa grafika (nie UI) — sama oprawa bez paska okna */
.wf-shot--card .wf-frame::before{display:none}
.wf-shot--card .wf-frame{border-radius:8px}
@media (max-width:520px){ .wf-shot--phone .wf-frame{max-width:270px} }

/* ---- Helper sr-only (uzupełnienie do transitions.css) ---- */
.wf-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}