/* DESIGN SYSTEM APPLIED */
/* Rogala Przybyło Adwokaci s.c. — kancelariagostyn.pl
   Stack: editorial light, oxblood + paper, Playfair Display + Manrope, Tailwind CDN
   Refaktor 2026-05-05: ekstrakcja z <style> inline, dead code wycięty, design tokens. */

/* === Design Tokens === */
:root {
    /* Kolory (synchronizowane z tailwind.config) */
    --oxblood: #5e1b1e;
    --oxblood-hover: #4a1518;
    --paper: #F7F6F0;
    --paper-dark: #EBEAE0;
    --graphite: #18181B;
    --graphite-light: #3F3F46;

    /* Typografia */
    --font-serif: "Playfair Display", Georgia, serif;
    --font-sans: "Manrope", system-ui, sans-serif;

    /* Spacing 8px scale */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-xxl: 64px;
}

/* === Base === */
body {
    background-color: var(--paper);
    color: var(--graphite);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-sans);
}

@media (max-width: 767px) {
    body { padding-bottom: 60px; }
}

::selection {
    background-color: var(--oxblood);
    color: var(--paper);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--graphite-light); border-radius: 4px; }

/* === Mobile menu (CSS-only via checkbox, zero JS dependencies) === */
#menu-checkbox {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

#mobile-menu {
    display: block;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

#menu-checkbox:checked ~ #mobile-menu {
    transform: translateX(0);
    pointer-events: auto;
}

#mobile-menu-toggle {
    display: flex;
    position: relative;
    z-index: 100;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
}

/* Hamburger → X animacja (CSS-only via checkbox) */
#menu-checkbox:checked ~ nav #mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#menu-checkbox:checked ~ nav #mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
}
#menu-checkbox:checked ~ nav #mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
    #mobile-menu { display: none !important; }
    #mobile-menu-toggle { display: none !important; }
}

/* Wymuszone ukrycie desktop CTA "Skontaktuj się" na mobile (gdyby Tailwind CDN nie zdążył) */
@media (max-width: 767px) {
    #navbar a[href="#kontakt"].md\:inline-flex { display: none !important; }
}

/* === Accessibility (WCAG 2.2 AA) === */
/* Focus visible — wyraziste outline oxblood */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--oxblood);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Pól formularza w stopce (ciemne tło) — jaśniejszy outline */
footer input:focus-visible,
footer textarea:focus-visible {
    outline-color: var(--paper);
    outline-offset: 4px;
}

/* Skip link (WCAG 2.4.1 — Bypass Blocks). Widoczny po fokusie tabem. */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--oxblood);
    color: var(--paper);
    padding: 10px 16px;
    z-index: 1000;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.skip-link:focus { top: 0; }

/* === Form states === */
.form-status {
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success {
    background: rgba(247, 246, 240, 0.08);
    color: var(--paper);
    border-left: 3px solid var(--oxblood);
}
.form-status.is-error {
    background: rgba(94, 27, 30, 0.15);
    color: var(--paper);
    border-left: 3px solid var(--oxblood);
}
button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* === Typography utilities (fluid hero) === */
.fluid-heading {
    font-size: clamp(3rem, 8vw + 1rem, 8rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
}

.fluid-sub {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* === Navigation glass effect === */
.glass-nav {
    background: rgba(247, 246, 240, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(24, 24, 27, 0.05);
}

/* === Reveal on scroll (Intersection Observer driven) === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* === FAQ accordion (max-height pattern — pełna kompatybilność przeglądarek) === */
.accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.accordion-content[aria-hidden="false"] {
    max-height: 1500px;
}