/* ============================================================
   SPIS TREŚCI - components.css (style komponentów JS; front + edytor)
   1. AKORDEON (hooki [data-accordion], [accordion-button], [accordion-panel])
   2. ZAKŁADKI (tabs)
   3. MENU MOBILNE (panel rozwijany pod headerem + animacja hamburgera)
   4. POPUP
   5. GALERIA (lightbox - kropki paginacji)
   6. MEGAMENU (dropdown)
   7. CUSTOM SCROLL (pasek przewijania)
   8. SMOOTH SCROLL
   9. CONTACT FORM 7
   ------------------------------------------------------------
   Plik ładuje inc/enqueue.php (enqueue_block_assets), więc te same style
   działają na froncie i w edytorze bloków. Kolory bierzemy z tokenów palety
   albo z currentColor - nie hardkodujemy tu barw projektu.
   Keyframes fadeIn jest jedno, wspólne dla akordeonu i zakładek.
   ============================================================ */

/* === 1. AKORDEON === */
    .accordion_margin:before {
        content: "";
        margin-top: 0;
        float: left;
        width: 100%;
    }
    .accordion_margin:after {
        content: "";
        margin-bottom: 20px;
        float: left;
        width: 100%;
    }

    [accordion-button].active {
        /* Active accordion styles go here */
    }

    [accordion-button].active .rotate_bar {
        rotate: -90deg;
        transition: rotate .3s ease-in-out;
    }

    [accordion-panel].active {
        display: block;
    }

    [accordion-button] {
        cursor: pointer;
    }

    [accordion-panel] {
        display: none;
        overflow: hidden;
        height: 0;
        transition: height .3s ease-in-out;
    }

    /* Show more FAQ button */
    @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
    }

    .hide-accordion {
        max-height: 0;
        display: none;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .show-more-btn {
        margin: 20px auto 0 auto;
        display: block;
        font-family: 'Inter', sans-serif;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        padding: 18px 0 18px 0;
        background-color: #000;   /* TODO kolor projektu (przycisk „Pokaż więcej") */
        transition: transform 300ms;
        border: none;
        cursor: pointer;
        border-radius: 24px;
    }

    .show-more-btn:hover {
        transform: scale(1.05);
    }

/* === 2. ZAKŁADKI === */
    [tab-button].active {
        /* Active tab styles go here */
    }

    [tab-panel].active {
        display: block;
        animation: fadeIn .5s ease-in-out;
    }

    [tab-button] {
        cursor: pointer;
    }

    [tab-panel] {
        display: none;
    }


/* === 3. MENU MOBILNE === */
/* Menu mobilne w tym projekcie to panel rozwijany pod headerem, nie off-canvas.
   Hooki modułu mobilemenu.js: .hamburger, .nav-menu, .nav-link.

   Hamburger: trzy kreski o skoku 8px (2px wysokości + 6px gapa na przycisku). Skrajne przy
   otwarciu jadą do środka i obracają się w X. Kolejność transformacji ma znaczenie:
   translateY MUSI być przed rotate, bo translate po obrocie liczy się w obróconym
   układzie i zamiast X wychodzi strzałka.

   Panel: zamiast display:none trzymamy go w drzewie i chowamy widocznością, więc
   rozwijanie da się animować. Panel jest pozycjonowany absolutnie, więc opacity razem z lekkim
   przesunięciem i scaleY wystarczą - nic się nie przelicza, nie trzeba mierzyć wysokości w JS. */
    .bar{
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background-color: currentColor;
        transition: transform .3s ease, opacity .2s ease;
    }

    @media(max-width:1023px){

        .nav-menu{
            visibility: hidden;
            opacity: 0;
            transform: translateY(-10px) scaleY(0.96);
            transform-origin: top center;
            pointer-events: none;
            transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.3,1),
                        visibility 0s linear .3s;
        }

        .nav-menu.active{
            visibility: visible;
            opacity: 1;
            transform: translateY(0) scaleY(1);
            pointer-events: auto;
            transition: opacity .2s ease, transform .3s cubic-bezier(.2,.7,.3,1),
                        visibility 0s;
        }

        .hamburger.active .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.active .bar:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .hamburger.active .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bar,
        .nav-menu {
            transition-duration: 0.01ms;
        }
    }

/* === 4. POPUP === */
            /* Popup specyfic styles */


/* === 5. GALERIA (lightbox - kropki paginacji) === */
    .gallery-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background-color: #fff;
        opacity: 0.2;
        transition: opacity .2s ease;
    }

    .gallery-dot-active {
        opacity: 1;
    }


/* === 6. MEGAMENU (dropdown) === */
    [megamenu-panel] {
        display: none;
    }

    [megamenu-panel].active {
        display: flex;
    }

    .megamenu-item svg.active{
        rotate: 180deg;
    }

/* === 7. CUSTOM SCROLL === */
    .hide-scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scroll::-webkit-scrollbar {
        display: none;
    }

    .scroller {
        scrollbar-width: auto;
        scrollbar-color: #1E1E1E #E2E2E2;
    }

    .scroller::-webkit-scrollbar {
        height: 5px;
    }

    .scroller::-webkit-scrollbar-track {
        background: #E2E2E2;
        border-radius: 20px;
    }

    .scroller::-webkit-scrollbar-thumb {
        background-color: #1E1E1E;
        border-radius: 20px;
    }


/* === 8. SMOOTH SCROLL === */
    html {
        scroll-behavior: smooth;
    }


/* === 9. CONTACT FORM 7 === */
    /* Układ formularza robimy klasami Tailwinda w shortcode (class:...), a <p>/<br>
       wyłącza filtr w inc/custom.php. Przez class: przechodzą TYLKO proste klasy
       (litery/cyfry/dywiz); warianty (focus:), arbitrary ([..]) i kroki .5 psują
       parser form-tagów - takie style siedzą tutaj. Wartości ramki/promienia
       podmień pod design projektu, kolory przez tokeny palety. */

    /* Ramka pól: to, czego nie da się podać przez class: (border z kryciem itd.). */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="number"],
    .wpcf7-form select,
    .wpcf7-form textarea {
        width: 100%;
        border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
        border-radius: 0.625rem;
        background-color: transparent;
    }

    .wpcf7-form input:focus,
    .wpcf7-form select:focus,
    .wpcf7-form textarea:focus {
        outline: none;
        border-color: var(--color-pinkPrimary-500);
    }

    /* Select: bez natywnej strzałki (dubluje się z własnym SVG chevron w wrapperze .relative). */
    .wpcf7-form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: none;
    }

    /* Checkbox zgody: własny wygląd zamiast systemowego. Scope pod .wpcf7-acceptance,
       żeby wygrać z globalnymi regułami startera dla input[type=checkbox]. */
    .wpcf7-acceptance input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1.125rem;
        height: 1.125rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
        border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
        border-radius: 0.25rem;
        background-color: transparent;
        cursor: pointer;
    }

    .wpcf7-acceptance input[type="checkbox"]:checked {
        border-color: var(--color-greenPrimary-500);
        background-color: var(--color-greenPrimary-500);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
        background-size: 0.75rem;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Zerowanie marginesów wrapperów CF7 - bez tego akceptacja ma wcięcie z lewej
       i za duży odstęp od pola powyżej (odstęp reguluje klasa mt-* na kontenerze w shortcode). */
    .wpcf7-list-item,
    .wpcf7-form-control-wrap {
        margin: 0;
    }

    /* Wyrównanie checkboxa zgody z wieloliniowym tekstem zgody. */
    .wpcf7-acceptance .wpcf7-list-item label {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin: 0;
    }

    /* Komunikat walidacji pod polem. */
    .wpcf7-not-valid-tip {
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: #dc2626;
    }

    .wpcf7-not-valid {
        border-color: #dc2626 !important;
    }

    /* Zbiorczy komunikat CF7 (sukces/błąd) pod formularzem. */
    .wpcf7-response-output {
        margin: 1rem 0 0;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

    .wpcf7-spinner {
        margin-left: 0.5rem;
    }