/* =====================================================
   OFFSETDRUK I MEDIA — css/style.css
   Własne style uzupełniające Tailwind CDN
   ===================================================== */

/* ---------- 1. Baza ---------- */
body {
    font-family: 'Inter', sans-serif;
}

/* Ikony Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Ukrycie scrollbara (karuzela pozioma itp.) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- 2. Karuzela ---------- */
.carousel-slide {
    opacity: 0;
    transition: opacity 1000ms ease-in-out;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-slide {
        transition: none !important;
    }
}

/* ---------- 3. Sticky Nav — cień po scrollu ---------- */
nav {
    transition: box-shadow 300ms ease;
}

nav.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}

/* ---------- 4. Hamburger (mobile) ---------- */

/* Przycisk hamburgera — 3 kreski */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 200ms ease;
}

.hamburger-btn:hover {
    background: rgba(0,0,0,0.06);
}

.hamburger-btn .bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ba0013; /* var primary */
    border-radius: 2px;
    transition: transform 300ms ease, opacity 300ms ease, width 300ms ease;
    transform-origin: center;
}

/* Animacja X po otwarciu */
.hamburger-btn.open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.open .bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.hamburger-btn.open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 5. Mobile Nav Menu ---------- */
.mobile-nav {
    /* domyślnie ukryte */
    display: none;
    flex-direction: column;
    gap: 0;
    background: #f6faff; /* bg-surface */
    border-top: 1px solid #e7bdb8; /* outline-variant */
    padding: 12px 0 8px;
    position: fixed;
    top: 80px; /* wysokość navbara */
    left: 0;
    right: 0;
    z-index: 40;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    animation: slideDown 250ms ease;
}

.mobile-nav.open {
    display: flex;
}

.mobile-nav a {
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 500;
    color: #141d23; /* on-surface */
    text-decoration: none;
    border-bottom: 1px solid #e0e9f2; /* surface-container-high */
    transition: background 200ms ease, color 200ms ease;
}

.mobile-nav a:last-child {
    border-bottom: none;
}

.mobile-nav a:hover,
.mobile-nav a.active {
    background: #e6eff8; /* surface-container */
    color: #ba0013; /* primary */
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 6. Fade-In (Intersection Observer) ---------- */
.fade-in-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* ---------- 7. Płynne przewijanie globalnie ---------- */
html {
    scroll-behavior: smooth;
}

/* ---------- 8. Fokus / dostępność ---------- */
:focus-visible {
    outline: 2px solid #ba0013;
    outline-offset: 3px;
    border-radius: 4px;
}