/* 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,#FF4D1F);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,#FF4D1F)}
  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(11,10,9,.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(11,10,9,.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}

/* ---- Lightbox zrzutów (js/lightbox.js) ---- */
#main figure img.wf-zoomable{cursor:zoom-in}
.wf-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(11,10,9,.93);padding:24px;-webkit-user-select:none;user-select:none}
.wf-lb.is-open{display:flex}
.wf-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:94vw;max-height:92vh}
.wf-lb__fig img{max-width:94vw;max-height:80vh;width:auto;height:auto;border-radius:0;
  border:1px solid rgba(245,239,227,.28);box-shadow:0 24px 80px rgba(0,0,0,.6);background:#0B0A09}
.wf-lb__cap{font-family:var(--font-headline,'Archivo',system-ui,sans-serif);
  color:rgba(245,239,227,.82);font-size:14px;line-height:1.5;max-width:760px;text-align:center}
.wf-lb__close{position:absolute;top:14px;right:18px;width:44px;height:44px;border:0;border-radius:0;
  background:transparent;color:#F5EFE3;font-size:30px;line-height:1;cursor:pointer}
.wf-lb__close:hover{color:#FF4D1F}
.wf-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:0;
  background:rgba(245,239,227,.08);color:#F5EFE3;font-size:34px;line-height:1;cursor:pointer}
.wf-lb__nav:hover{background:rgba(255,77,31,.16);color:#FF4D1F}
.wf-lb__prev{left:12px}.wf-lb__next{right:12px}
.wf-lb__close:focus-visible,.wf-lb__nav:focus-visible{outline:2px solid #FF4D1F;outline-offset:2px}
@media (max-width:640px){.wf-lb__nav{width:42px;height:42px;font-size:26px}.wf-lb__fig img{max-height:74vh}}
@media (prefers-reduced-motion:no-preference){.wf-lb.is-open{animation:wf-lb-in .18s ease}}
@keyframes wf-lb-in{from{opacity:0}to{opacity:1}}