/* Workin'Flows — Cross-Document View Transitions
 * Natywne CSS, aplikowane przez przeglądarkę między page loadami.
 * Zero JS, zero wpływu na SEO (każda strona dalej pod własnym URL-em).
 * Graceful degradation w starszych przeglądarkach: normal navigation.
 */

@view-transition {
  navigation: auto;
}

/* Domyślne cross-fade root → root, 220ms easing brandowy */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1);
}

/* Header i footer mogą być traktowane jako "stałe" między stronami.
 * Przeglądarka dopasuje wizualnie te same elementy, co daje efekt
 * "persistent shell" zamiast pełnego fade. */
header.site { view-transition-name: wf-site-header; }
footer.site { view-transition-name: wf-site-footer; }

::view-transition-group(wf-site-header),
::view-transition-group(wf-site-footer) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1);
}

/* Respect prefers-reduced-motion: pełny opt-out */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Skip-to-content link (WCAG 2.4.1 Level A) */
.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}
.sr-only-focusable:focus{position:fixed;top:8px;left:8px;z-index:9999;padding:8px 16px;background:var(--wf-carbon,#0B0A09);color:var(--wf-bone,#F5EFE3);text-decoration:none;font-family:var(--font-headline,system-ui,sans-serif);font-weight:500;font-size:14px;border-radius:4px;outline:2px solid var(--wf-lime,#CEFF00);outline-offset:2px}

/* Focus-visible — branded outline for keyboard nav (H23) */
:focus-visible{outline:2px solid var(--wf-oxblood,#5E1221);outline-offset:2px;border-radius:2px}
.btn:focus-visible,nav.primary a:focus-visible,.bf:focus-visible,.chat-chip:focus-visible{outline:2px solid var(--wf-oxblood,#5E1221);outline-offset:3px}
section.oxblood :focus-visible,section.carbon :focus-visible{outline-color:var(--wf-lime,#CEFF00)}
