/*
Theme Name: Kamelon NOIOKEJ v3.3
Theme URI: https://example.com/
Author: Kamelon Web Design
Author URI: https://example.com/
Description: Nowoczesny, dostepny motyw dla mobilnych stron i wizytowek biznesowych. Przeniesiony z oryginalnego projektu SPA (HTML/JS) do WordPress. Wersja bezpieczna: nonce/CSRF na formularzu kontaktowym, sanityzacja i walidacja danych po stronie serwera, zablokowany bezposredni dostep do plikow PHP, przypiete wersje bibliotek zewnetrznych, dodatkowe naglowki bezpieczenstwa. Nowosci v3.3: przelacznik jezyka PL/EN, kafelki z realizacjami portfolio (przewijane w bok) przed FAQ, przycisk "Zamow" przed protokolem wdrozenia, zaktualizowany numer kontaktowy i naprawiony przycisk pływajacy z linkami do socjali.
Version: 1.3.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kamelon-noiokej-v3-3
*/

body {
    background-color: #050505;
    color: #f3f3f5;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    cursor: default;
    /* Naprawa bledu mobilnego: bez tego przegladarka na telefonie potrafila zinterpretowac
       przewiniecie w gore (np. wewnatrz pola opisu w formularzu) jako gest "pociagnij, aby
       odswiezyc" i przeladowac cala strone. Poniewaz to SPA domyslnie pokazujace tylko
       sekcje "Strona glowna", takie przeladowanie wygladalo jak nagle "cofniecie" do
       strony glownej w trakcie wypelniania formularza. */
    overscroll-behavior-y: contain;
}

html {
    overscroll-behavior-y: contain;
}

/* WCAG: Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #41D37B;
    color: #000;
    padding: 8px 16px;
    z-index: 99999;
    font-weight: bold;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
}

/* WCAG: Globalne outline dla nawigacji klawiatura */
*:focus-visible {
    outline: 2px solid #41D37B;
    outline-offset: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: none;
}

@media (max-width: 768px) {
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .space-y-24 > * + * { margin-top: 3rem !important; }
    .space-y-20 > * + * { margin-top: 2.5rem !important; }
    .space-y-16 > * + * { margin-top: 2rem !important; }
    #hero { padding-top: 5.5rem !important; padding-bottom: 2rem !important; }
}

#webgl-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; }

.custom-cursor { pointer-events: none; position: fixed; top: 0; left: 0; z-index: 9999; transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), width 0.2s, height 0.2s, background-color 0.2s; border-radius: 50%; }

/* Flat Panel */
.flat-panel {
    background: #0a0a0c;
    border: 1px solid #222226;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.flat-panel:hover {
    border-color: #333338;
    background: #0f0f11;
}

.text-gradient-custom { background: linear-gradient(135deg, #ffffff 20%, #41D37B 80%, #8B5CF6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333338; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #41D37B; }

.gsap-reveal { opacity: 1; transform: none; }

/* Wsparcie dla preferencji redukcji animacji (WCAG) */
@media (prefers-reduced-motion: reduce) {
    .gsap-reveal { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto !important; }
    .custom-cursor { display: none !important; }
}

.page-fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .page-fade-in { animation: none; opacity: 1; transform: translateY(0); }
}

/* Styl dla dokumentow tekstowych (Regulamin / Polityka) */
.legal-doc h3 { font-family: 'Space Grotesk', monospace; font-size: 1.125rem; font-weight: 700; color: #fff; margin-top: 2rem; margin-bottom: 0.75rem; text-transform: uppercase; }
.legal-doc p { margin-bottom: 1rem; color: #d1d5db; line-height: 1.7; font-size: 0.875rem; }
.legal-doc ul { margin-bottom: 1rem; padding-left: 1.5rem; color: #d1d5db; font-size: 0.875rem; list-style-type: disc; }
.legal-doc li { margin-bottom: 0.5rem; }

/* Styl tresci artykulow bloga (Wpisy WP - dane w calosci z edytora) */
.article-content { font-size: 0.95rem; line-height: 1.8; color: #d1d5db; font-family: 'Plus Jakarta Sans', sans-serif; }
.article-content h2 { font-family: 'Space Grotesk', monospace; font-size: 1.5rem; font-weight: 800; color: #fff; margin-top: 2.25rem; margin-bottom: 1rem; line-height: 1.3; }
.article-content h3 { font-family: 'Space Grotesk', monospace; font-size: 1.125rem; font-weight: 700; color: #fff; margin-top: 1.75rem; margin-bottom: 0.75rem; text-transform: uppercase; }
.article-content p { margin-bottom: 1.25rem; }
.article-content a { color: #41D37B; text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: #35c26f; }
.article-content ul, .article-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.article-content ul { list-style-type: disc; }
.article-content ol { list-style-type: decimal; }
.article-content li { margin-bottom: 0.5rem; }
.article-content img { border-radius: 0.375rem; margin: 1.5rem 0; max-width: 100%; height: auto; }
.article-content blockquote { border-left: 3px solid #41D37B; padding-left: 1.25rem; margin: 1.5rem 0; color: #9ca3af; font-style: italic; }
.article-content figure { margin: 1.5rem 0; }
.article-content figcaption { font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; text-align: center; }
.article-content--intro { color: #d1d5db; }
.article-content--intro p { margin-bottom: 0; }

/* Checkbox Custom Styles */
.custom-radio:checked + div { border-color: #41D37B; background-color: rgba(65, 211, 123, 0.05); }
.custom-radio:checked + div .radio-indicator { background-color: #41D37B; border-color: #41D37B; }

.custom-checkbox:checked + div { border-color: #41D37B; background-color: rgba(65, 211, 123, 0.05); }
.custom-checkbox:checked + div .checkbox-indicator { background-color: #41D37B; border-color: #41D37B; }
.custom-checkbox:checked + div .checkbox-indicator svg { opacity: 1; transform: scale(1); }

/* Kafelki portfolio (sekcja 05) - poziomy pasek przewijany w bok, przed FAQ.
   Cienki, dyskretny scrollbar zamiast domyslnego, nie wplywa na reszte strony. */
.portfolio-scroll::-webkit-scrollbar { height: 6px; }
.portfolio-scroll::-webkit-scrollbar-track { background: transparent; }
.portfolio-scroll::-webkit-scrollbar-thumb { background-color: rgba(65, 211, 123, 0.35); border-radius: 999px; }
.portfolio-scroll { scrollbar-width: thin; scrollbar-color: rgba(65, 211, 123, 0.35) transparent; }