/* ==========================================================================
   1. IMPORT CZCIONEK I ZMIENNE GLOBALNE
   ========================================================================== */
/*@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&family=Rufina:wght@400;700&display=swap');*/

:root {
    --bs-body-font-family: 'Lato', sans-serif;
    --bs-heading-font-family: 'Lato', sans-serif;
    --lead-color-01: rgba(193, 225, 193, 1); 
    --lead-color-02: rgba(186, 104, 91, 1); 
    --lead-color-03: rgba(87, 96, 105, 1); 
    --lead-color-05: rgba(174, 217, 241, 1); 
}

/* ==========================================================================
   2. RESET BAZOWY I TYPOGRAFIA
   ========================================================================== */
body, html { 
    margin: 0; 
    padding: 0; 
    font-family: 'Lato', sans-serif; 
    background-color: #000; 
}

h1, h2, h3, h4, h5 { 
    font-family: 'Rufina', serif; 
}

.text-accent { 
    color: rgba(186, 104, 91, 1); 
}

/* ==========================================================================
   3. TARCZE OCHRONNE (IZOLACJA SCROLLA)
   ========================================================================== */
/* Tylko strona główna: zablokowany scroll dla Fullpage.js */
html:has(body.index-body), body.index-body {
    width: 100vw; 
    height: 100dvh; 
    overflow: hidden !important; 
}

/* Wszystkie podstrony: naturalne przewijanie */
html:has(body.subpage), body.subpage {
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

/* ==========================================================================
   4. GLOBALNA NAWIGACJA (HEADER)
   ========================================================================== */
.site-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 110px; /* Domyślna wysokość dla desktopu */
    padding: 0 40px; /* Domyślny padding dla desktopu */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 1100; 
    box-sizing: border-box; 
    transition: color 0.4s ease; 
    pointer-events: none; 
}

.site-header * { pointer-events: auto; } 

.header-logo-wrapper { 
    display: flex; 
    align-items: center; 
    position: relative; 
    width: 200px; /* Domyślna szerokość dla desktopu */
    height: auto; 
    transition: all 0.5s ease; 
}

.header-logo-wrapper svg { width: 100%; height: auto; display: block; }
.logo-colour { transition: fill 0.4s ease; } 

.header-lang-switcher { font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; user-select: none; }
.lang-trigger { text-decoration: none !important; color: inherit; opacity: 0.4; transition: opacity 0.3s ease; }
.lang-trigger:hover { opacity: 0.8; }
.lang-trigger.is-active { opacity: 1; font-weight: 700; }
.lang-separator { opacity: 0.2; }

.header-nav-trigger { display: flex; align-items: center; }
.hamburger { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 10px; outline: none !important; box-shadow: none !important; }
.hamburger-line { display: block; width: 28px; height: 2px; transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.4s ease; }
.hamburger.active .hamburger-line { background-color: #ffffff !important; }
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Motywy nagłówka */
.site-header.theme-dark { color: #ffffff; }
.site-header.theme-dark .logo-colour { fill: #ffffff; }
.site-header.theme-dark .hamburger-line { background-color: #ffffff; }
.site-header.theme-light { color: #000000; }
.site-header.theme-light .logo-colour { fill: #000000; }
.site-header.theme-light .hamburger-line { background-color: #000000; }

/* ==========================================================================
   5. MENU OVERLAY (KURTYNA) I MODAL KONTAKTOWY
   ========================================================================== */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.98); z-index: 1050; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.5s ease-in-out; }
.menu-overlay.active { opacity: 1; visibility: visible; }
.overlay-content a.nav-link { display: block; color: #fff; font-size: 3rem; text-decoration: none; font-family: 'Rufina', serif; margin: 20px 0; text-transform: uppercase; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; transform: translateY(20px); }
.menu-overlay.active a.nav-link { opacity: 1; transform: translateY(0); }
.menu-overlay.active a.nav-link:nth-child(1) { transition-delay: 0.2s; }
.menu-overlay.active a.nav-link:nth-child(2) { transition-delay: 0.4s; }
#menu-overlay .nav-link:hover { color: #888888 !important; }

/* Przełącznik języków w menu (Lang Switcher) */
.lang-link { font-family: 'Lato', sans-serif; font-size: 1.2rem; display: inline-block; margin: 0 10px; text-decoration: none; transition: color 0.3s ease; }
.lang-link:hover { color: #fff !important; }
.lang-separator { font-family: 'Lato', sans-serif; font-size: 1.2rem; color: #555; user-select: none; }

/* Modal Kontaktowy */
.custom-modal { display: flex; visibility: hidden; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100dvh; background-color: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; }
.custom-modal.show { visibility: visible; opacity: 1; pointer-events: auto; }
.custom-modal-content { background-color: #111; padding: 40px; width: 90%; max-width: 500px; position: relative; transform: translateY(20px); transition: transform 0.3s ease; border: 1px solid #333; }
.custom-modal.show .custom-modal-content { transform: translateY(0); }
.close-modal { position: absolute; top: 15px; right: 20px; color: #888; font-size: 28px; line-height: 1; cursor: pointer; transition: color 0.2s ease; }
.close-modal:hover { color: #fff; }
.custom-modal-content .form-control::placeholder { color: #777; }

/* ==========================================================================
   6. STRONA GŁÓWNA (FULLPAGE.JS I ANIMACJE)
   ========================================================================== */
#fullpage-wrapper { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
.fp-section { position: absolute; top: 0; left: 0; width: 100vw; height: 100dvh; visibility: hidden; }

.fp-section.is-active { visibility: visible; }
.fp-section.ready-to-animate { transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); visibility: visible; }

#fullpage-wrapper .fp-section .container { padding-top: 130px; position: relative; z-index: 1; padding-left: 80px; padding-right: 80px; }

/* ==========================================================================
   STEROWANIE TEKSTAMI W SEKCJACH (DESKTOP / KOMPUTERY)
   ========================================================================== */

/* 1. GŁÓWNY NAGŁÓWEK (Tytuł sekcji np. "Witaj w moim...") */
.fp-section .display-1 {
    font-size: clamp(3rem, 5vw + 1rem, 5.5rem) !important; /* Płynna wielkość. Zmień na np. 5rem !important dla sztywnego rozmiaru */
    margin-bottom: 0px !important; /* Odstęp pod nagłówkiem głównym */
}

/* 2. PODTYTUŁ (Tekst z kolorowym zakreślaczem) */
.fp-section .fw-light {
    font-size: 2.2rem !important; /* Wielkość fontu podtytułu na komputerach */
    margin-top: 1.5rem !important; /* Odstęp od nagłówka wyżej */
    margin-bottom: 0px !important; /* Odstęp w dół */
}

/* 3. TEKST OPISOWY (Główny akapit sekcji) */
.fp-section .section-desc {
    font-size: 1.25rem !important; /* Wielkość tekstu opisu na komputerach */
    line-height: 1.6 !important; /* Interlinia (światło między wierszami) */
    margin-top: 1.5rem !important; /* Odstęp od podtytułu wyżej */
    margin-bottom: 2rem !important; /* Odstęp od przycisku na dole */
}

/* 4. PRZYCISK W SEKCJACH (Desktop) */
#fullpage-wrapper .fp-section .fp-btn {
    font-family: 'Lato', sans-serif !important;
    font-size: 1rem !important; /* Wielkość tekstu na przycisku (komputery) */
    padding: 12px 35px !important; /* Odstępy wewnątrz przycisku: [góra/dół] [lewo/prawo] */
    letter-spacing: 2px !important; /* Rozstrzelenie liter */
    text-transform: uppercase !important; /* Wymuszenie wielkich liter */
    border-width: 1px !important; /* Grubość ramki przycisku */
    margin-top: 1rem !important; /* Odstęp od tekstu nad przyciskiem */
}

/* 5. ZDJĘCIE W SEKCJACH (Desktop) */
#fullpage-wrapper .fp-section .fp-image {
    margin-top: 0px !important; /* Odstęp nad zdjęciem na komputerach (zazwyczaj 0, bo jest w osobnej kolumnie obok tekstu) */
    margin-bottom: 0px !important; /* Odstęp pod zdjęciem */
    max-width: 100% !important; /* Zabezpieczenie przed wychodzeniem zdjęcia poza kontener */
}

/* Animacje wjazdu */
.fp-section .display-1, .fp-section .fw-light, .fp-section .section-desc, .fp-section .fp-btn, .fp-section .fp-image { opacity: 0; transform: translateY(20px); }
.fp-section.is-active .display-1 { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s; }
.fp-section.is-active .fw-light { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s; }
.fp-section.is-active .section-desc, .fp-section.is-active .fp-btn, .fp-section.is-active .fp-image { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s; }

/* Nawiagacja kropek Fullpage */
#fp-nav { display: flex; position: fixed; top: 50%; right: 30px; transform: translateY(-50%); z-index: 999; flex-direction: column; gap: 15px; }
.fp-dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); cursor: pointer; transition: 0.3s; }
.fp-dot.active { background-color: #fff; transform: scale(1.4); }
#fp-nav.nav-on-light .fp-dot { background-color: rgba(0, 0, 0, 0.3); }
#fp-nav.nav-on-light .fp-dot.active { background-color: #000000; }

/* Animowana myszka scrolla */
.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 10; animation: float 2s infinite; }
.mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,0.7); border-radius: 12px; position: relative; }
.wheel { width: 4px; height: 6px; background: #fff; border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scroll-dot 1.5s infinite; }
@keyframes scroll-dot { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50% , 12px); } }
@keyframes float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }
.scroll-indicator.indicator-dark .mouse { border-color: rgba(0,0,0,0.7); }
.scroll-indicator.indicator-dark .wheel { background: #000; }
.scroll-indicator.indicator-dark .scroll-text { color: #000; font-weight: 500; }
.scroll-indicator.indicator-light .mouse { border-color: rgba(255,255,255,0.7); }
.scroll-indicator.indicator-light .wheel { background: #fff; }
.scroll-indicator.indicator-light .scroll-text { color: #fff; }
/* Wyrównanie myszki do lewej (np. dla podstron projektów i artykułów) */
.scroll-indicator.align-left {
    left: 0 !important;
    transform: none !important;
    align-items: flex-start !important;
    animation: float-left 2s infinite !important;
}
@keyframes float-left { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-10px); } 
}
/* Dodatkowe tła z panelu Admina */
.background-lead-01{ background: var(--lead-color-01); }
.background-lead-02{ background: var(--lead-color-02); }
.background-lead-03{ background: var(--lead-color-03); }
.background-lead-05{ background: var(--lead-color-05); }

/* ==========================================================================
   7. PODSTRONY (PORTFOLIO, WIDOK PROJEKTU I KONTAKT)
   ========================================================================== */
.portfolio-body { background-color: #000; color: #fff; }
.portfolio-body .logo-colour { fill: #fff; }
.portfolio-body .hamburger-line { background-color: #fff; }

/* Siatka portfolio / Bloga */
.portfolio-page { min-height: 100vh; padding-top: 140px !important; }
.filter-nav { margin-bottom: 50px; }
.filter-btn { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; font-family: 'Lato', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; padding: 8px 16px; margin: 5px; cursor: pointer; transition: all 0.3s ease; color: inherit !important; opacity: 0.5; position: relative; }
.filter-btn:hover, .filter-btn.active { opacity: 1; color: inherit !important; }
.filter-btn.active::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background-color: currentColor; }
.portfolio-grid-item { transition: opacity 0.4s ease, transform 0.4s ease; opacity: 1; transform: scale(1); }
.portfolio-grid-item.is-hidden { display: none !important; }
.portfolio-card { position: relative; overflow: hidden; background-color: #111; cursor: pointer; }
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.portfolio-card:hover img { transform: scale(1.05); }
.portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; text-align: center; opacity: 0; transition: opacity 0.4s ease; z-index: 2; }
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-item-title { font-family: 'Rufina', serif; font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; transform: translateY(10px); transition: transform 0.4s ease; }
.portfolio-card:hover .portfolio-item-title { transform: translateY(0); }
.portfolio-item-cat { font-family: 'Lato', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: #aaa; }

/* Widok pojedynczego projektu / artykułu */
.project-page { padding-top: 140px !important; padding-bottom: 80px !important; }
.project-category { font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 0.9rem; opacity: 0.6; }
.project-title { font-family: 'Rufina', serif; font-size: 3.5rem; font-weight: 700; }
.project-subheader { font-family: 'Rufina', serif; font-style: italic; opacity: 0.8; }
.project-hero-img { width: 100%; height: auto; object-fit: cover; border-radius: 0px; }
.project-content { font-family: 'Lato', sans-serif; font-size: 1.1rem; line-height: 1.8; opacity: 0.9; }
.project-content h1, .project-content h2, .project-content h3 { font-family: 'Rufina', serif; margin-top: 1.5rem; margin-bottom: 1rem; }
.project-content img { max-width: 100%; height: auto; }
.back-btn { font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; display: inline-block; transition: opacity 0.3s; font-size: 0.85rem; }
.back-btn:hover { opacity: 0.7; }

/* Galeria Masonry (Wewnętrzna) */
.masonry-gallery { column-count: 2; column-gap: 1.5rem; padding-bottom: 2rem; }
.masonry-item { break-inside: avoid; margin-bottom: 1.5rem; overflow: hidden; }
.masonry-item img { width: 100%; height: auto; display: block; border-radius: 0px; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.masonry-item:hover img { transform: scale(1.02); }

/* Strona Kontaktowa */
.contact-page-wrapper { min-height: 100vh; padding-top: 140px; padding-bottom: 80px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid currentColor; transition: all 0.3s ease; text-decoration: none; color: inherit; background-color: transparent; }
.social-link i, .social-link { color: currentColor; }
.social-link:hover { background-color: currentColor; transform: translateY(-3px); }
.theme-bg-white .social-link:hover i { color: #FFFFFF !important; }
.theme-bg-black .social-link:hover i { color: #000000 !important; }
.theme-bg-lead1 .social-link:hover i { color: var(--color-lead1) !important; }
.theme-bg-lead2 .social-link:hover i { color: var(--color-lead2) !important; }
.theme-bg-lead3 .social-link:hover i { color: var(--color-lead3) !important; }
.theme-bg-lead4 .social-link:hover i { color: var(--color-lead4) !important; }

/* ==========================================================================
   8. STOPKA (FOOTER)
   ========================================================================== */
.site-footer { background-color: #070707; color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 80px 0 50px 0; }
.footer-logo { width: 100%; max-width: 280px; margin-bottom: 30px; display: block; }
.footer-logo svg { width: 100%; height: auto; transform: translateX(-4.8%); /* Kompensacja marginesu wektora na desktopie */ }
.footer-logo svg .logo-colour { fill: #ffffff !important; }
.footer-heading { font-family: 'Rufina', serif; font-size: 1.8rem; letter-spacing: 1px; color: #fff; }
.footer-link { font-family: 'Lato', sans-serif; color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 1.1rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s ease; display: inline-block; }
.footer-link:hover { color: #fff; }
#footer-contact-form .form-control { background-color: #111 !important; border-color: #333 !important; color: #fff !important; padding: 12px 15px; }
#footer-contact-form .form-control:focus { border-color: #777 !important; box-shadow: none !important; }
#footer-contact-form textarea { resize: none; }

/* ==========================================================================
   9. MEDIA QUERIES (RESPONSYWNOŚĆ - SMARTFONY I TABLETY)
   ========================================================================== */

@media (max-width: 768px) {
    /* Nawigacja (Header) */
    .site-header { 
        height: 80px; 
        padding: 0 20px; 
    }
    .header-logo-wrapper { 
        width: 140px; 
    }

    /* Strona główna (Fullpage) */
    #fullpage-wrapper .fp-section .container { 
        padding-top: 140px; 
        padding-left: 15px; 
        padding-right: 15px; 
    }
    
    /* ==========================================================================
       STEROWANIE TEKSTAMI W SEKCJACH (MOBILE - TELEFONY)
       ========================================================================== */
    
    /* 1. GŁÓWNY NAGŁÓWEK NA TELEFONACH */
    #fullpage-wrapper .fp-section .display-1 { 
        font-size: 2.3rem !important; /* Wielkość tytułu głównego na małych ekranach */
        line-height: 1.1 !important; 
        margin-bottom: 0px !important;
        word-wrap: break-word; 
    }

    /* 2. PODTYTUŁ NA TELEFONACH */
    #fullpage-wrapper .fp-section .fw-light { 
        font-size: 1.7rem !important; /* Wielkość podtytułu na małych ekranach */
        line-height: 1.3 !important; 
        margin-top: 1rem !important; /* Zmniejszony odstęp od nagłówka na mobile */
    }

    /* 3. TEKST OPISOWY NA TELEFONACH */
    #fullpage-wrapper .fp-section .section-desc {
        font-size: 1.1rem !important; /* Wielkość opisu na małych ekranach */
        line-height: 1.3 !important;
        margin-top: 1rem !important; /* Zmniejszony odstęp góra */
        margin-bottom: 1.2rem !important; /* Zmniejszony odstęp od przycisku */
    }

    /* 4. PRZYCISK W SEKCJACH NA TELEFONACH (Mobile) */
    #fullpage-wrapper .fp-section .fp-btn {
        font-size: 0.85rem !important; /* Mniejszy tekst na przycisku na telefonach */
        padding: 10px 10px !important; /* Nieco węższy przycisk, żeby lepiej pasował do ekranu */
        letter-spacing: 1px !important; /* Mniejsze rozstrzelenie liter */
        margin-top: 0.5rem !important; /* Zmniejszony odstęp z góry na małych ekranach */
        margin-bottom: 0.5rem !important; /* Zmniejszony odstęp z góry na małych ekranach */
    }

    /* 5. ZDJĘCIE W SEKCJACH NA TELEFONACH (Mobile) */
    #fullpage-wrapper .fp-section .fp-image {
        margin-top: 0rem !important; /* Kluczowy parametr! Odstęp zdjęcia od znajdującego się nad nim przycisku/tekstu na telefonie */
        margin-bottom: 0rem !important; /* Odstęp od dolnej krawędzi (lub wskaźnika scrollowania) */
    }

    #fp-nav { 
        display: none; /* Ukrycie kropek nawigacji po prawej stronie na telefonach */
    }

    /* Galeria Masonry (Pojedyncza kolumna) */
    .masonry-gallery { 
        column-count: 1; 
    }

    /* Stopka (Wyśrodkowanie wszystkich elementów) */
    .site-footer {
        text-align: center;
    }
    .footer-logo {
        margin: 0 auto 30px auto !important;
    }
    .footer-logo svg {
        transform: none !important; /* Reset przesunięcia wektora na środku ekranu */
    }
    .site-footer .d-flex.flex-column {
        align-items: center !important;
    }

/* ==========================================================================
       KARTY PORTFOLIO (MOBILE) - Zawsze widoczny tytuł na pasku
       ========================================================================== */
    .portfolio-overlay {
        opacity: 1 !important; /* Zawsze widoczne, brak wymogu "hover" */
        top: auto !important; /* Odpinamy od góry okładki */
        bottom: 0 !important; /* Przypinamy wyłącznie do dołu */
        height: auto !important; /* Pasek zajmuje tylko tyle miejsca, ile tekst */
        background: rgba(0, 0, 0, 0.6) !important; /* Półprzezroczyste czarne tło (0.6 dla lepszej czytelności białego tekstu) */
        padding: 15px 10px !important; /* Zmniejszone odstępy wewnętrzne */
    }

    .portfolio-item-title {
        transform: translateY(0) !important; /* Resetujemy animację podnoszenia */
        font-size: 1.4rem !important; /* Nieco mniejszy font, żeby zgrabnie leżał na pasku */
        margin-bottom: 3px !important; /* Ciaśniejszy odstęp od nazwy kategorii */
    }

    .portfolio-item-cat {
        font-size: 0.75rem !important; /* Mniejszy font kategorii */
    }

    
}