/*
Theme Name: Kadence Child
Theme URI: https://kadencewp.com/
Description: Kadence Child Theme dla CM Pracownia
Author: Antigravity
Author URI: 
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* Wygląd paska kategorii */
ul.category-bar,
.woocommerce ul.category-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
}

ul.category-bar li,
.woocommerce ul.category-bar li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Usuwamy punktor w Kadence */
ul.category-bar li::before,
.woocommerce ul.category-bar li::before {
    display: none !important;
}

ul.category-bar li a,
.woocommerce ul.category-bar li a {
    text-decoration: none !important;
    box-shadow: none !important; /* Kadence czasami robi podkreślenia w formie box-shadow */
    color: var(--global-palette4) !important; /* domyślny kolor tekstu bazy */
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    transition: color 0.2s ease !important;
}

/* Podświetlenie po najechaniu - główny kolor marki (palette1) */
ul.category-bar li a:hover,
.woocommerce ul.category-bar li a:hover {
    color: var(--global-palette1) !important;
}

/* Aktywna kategoria - główny kolor marki (dla obu typów menu) */
ul.category-bar li.current-cat > a,
.woocommerce ul.category-bar li.current-cat > a,
ul.category-bar li.current-menu-item > a,
.woocommerce ul.category-bar li.current-menu-item > a,
ul.category-bar li.current-product_cat-ancestor > a {
    color: var(--global-palette1) !important;
    font-weight: 700 !important;
}

/* =========================================
   STYLIZACJA PODKATEGORII (DROPDOWN TOOLTIP)
   ========================================= */

ul.category-bar li {
    position: relative; /* Wymagane, aby tooltip pozycjonował się względem rodzica */
}

/* Ukrywamy podmenu domyślnie */
ul.category-bar ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: none !important;
    flex-direction: column !important;
    background-color: var(--global-palette9, #ffffff);
    padding: 15px !important;
    border-radius: 8px;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.08);
    min-width: 200px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    gap: 12px !important;
    margin: 0 !important; /* Usunięty margines tworzący przerwę */
}

/* Niewidzialny "most" pomiędzy linkiem głównym a tooltipem, zapobiegający znikaniu menu przy przesuwaniu myszki */
ul.category-bar ul.sub-menu::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

/* Strzałka na górze tooltipa */
ul.category-bar ul.sub-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: var(--global-palette9, #ffffff);
    box-shadow: -2px -2px 5px rgba(0,0,0,0.03);
    z-index: -1;
}

/* =========================================
   EFEKTY DLA OBRAZÓW KATEGORII (ZOOM + KURSOR)
   ========================================= */

/* Jeśli klasa .category-cover lub .instagram-cover jest przypisana do kontenera/kolumny, blokujemy wylewanie i ukrywamy kursor */
.category-cover,
.category-cover *,
.instagram-cover,
.instagram-cover * {
    overflow: hidden !important;
    cursor: none !important; 
}

/* Skalujemy TYLKO samo zdjęcie wewnątrz kontenera (lub samo zdjęcie jeśli klasa jest bezpośrednio na nim) */
.category-cover img,
img.category-cover,
.instagram-cover img,
img.instagram-cover {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
    display: block; /* Zapobiega pojawianiu się pustych pixeli pod obrazkiem */
    width: 100%; /* Upewniamy się, że obraz wypełnia ramy przed skalowaniem */
    height: 100%;
    object-fit: cover; /* Gwarantuje, że proporcje się nie zepsują */
}

/* Po najechaniu na kontener skalujemy TYLKO zdjęcie w nim zawarte */
.category-cover:hover img,
img.category-cover:hover,
.instagram-cover:hover img,
img.instagram-cover:hover {
    transform: scale(1.05) !important;
}

/* Własny kursor-oko stworzony w JS (efekt inwersji) */
.custom-eye-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    pointer-events: none; /* Kliknięcie przechodzi "przez" kursor do obrazka */
    z-index: 999999;
    mix-blend-mode: difference; /* Magia: biały kolor stanie się czarny na jasnym tle, a biały na ciemnym */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3); /* Wyśrodkowanie grota i startowy rozmiar */
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; 
}

.custom-eye-cursor.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.custom-eye-cursor svg {
    width: 45px; /* Zmniejszono o 25% */
    height: auto;
    fill: currentColor !important;
}

.custom-eye-cursor svg path,
.custom-eye-cursor svg * {
    fill: currentColor !important;
}

/* Pokaż podmenu po najechaniu */
ul.category-bar li:hover > ul.sub-menu {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Wygląd linków w podmenu */
ul.category-bar ul.sub-menu li {
    width: 100%;
    text-align: center;
}

ul.category-bar ul.sub-menu li a {
    font-size: 1rem !important; /* Mniejszy font w podmenu */
    font-weight: 400 !important;
    color: var(--global-palette4) !important;
    display: block;
    padding: 5px 0;
}

ul.category-bar ul.sub-menu li a:hover {
    color: var(--global-palette1) !important;
}

/* Wyrównanie przycisków koszyka na kartach produktów */
.woocommerce ul.products li.product .add_to_cart_button {
    float: left;
}

.woocommerce ul.products li.product .added_to_cart {
    float: right;
    display: inline-flex;
    align-items: center;
    /* Przycisk 'Dodaj do koszyka' nie ma tła (jest stylem tekstowym), więc usuwamy margines, żeby zrównać oba teksty do jednej linii */
    margin-top: 0; 
    font-weight: 400; /* Lżejsza waga fontu */
    color: var(--global-palette5); /* Szary, jaśniejszy kolor bazowy */
    opacity: 0.8; /* Delikatnie przezroczysty, żeby jeszcze bardziej wtopił się w tło */
    transition: opacity 0.2s ease, color 0.2s ease;
}

.woocommerce ul.products li.product .added_to_cart:hover {
    opacity: 1;
    color: var(--global-palette1); /* Po najechaniu podświetla się na kolor marki */
}

/* Clearfix - naprawia layout w przypadku użycia 'float' */
.woocommerce ul.products li.product::after,
.woocommerce ul.products li.product > div::after {
    content: "";
    display: table;
    clear: both;
}

/* =========================================
   WYGLĄD ZAKŁADKI OPIS NA STRONIE PRODUKTU (UKŁAD 2-KOLUMNOWY)
   ========================================= */

/* Ukrycie paska zakładek (tabs) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: none !important;
}

/* Główny kontener opisu - Flexbox */
.product-description-2col-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 20px;
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Lewa kolumna (tekst + tabele) */
.product-desc-left {
    flex: 1 1 50%;
    min-width: 300px;
}

/* Prawa kolumna (zdjęcie) */
.product-desc-right {
    flex: 1 1 40%;
    min-width: 300px;
    /* Sticky zachowanie */
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Odstęp od góry ekranu */
    align-self: flex-start; /* Zapobiega rozciąganiu kolumny w pionie */
}

/* Obrazek w prawej kolumnie */
.product-desc-right img.sticky-desc-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Miękkie rogi */
}

/* Sekcja informacji dodatkowych pod głównym opisem */
.merged-additional-information {
    margin-top: 40px;
    border-top: 1px solid var(--global-palette8, #eeeeee);
    padding-top: 20px;
}

/* Zmniejszony nagłówek dla Informacji dodatkowych oraz "O formie" */
.merged-additional-information h4,
.product-desc-left h4.custom-desc-heading {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--global-palette3, #333333);
}

/* Ukrywanie prawej kolumny ze zdjęciem na tabletach i telefonach (poniżej 800px) */
@media (max-width: 800px) {
    .product-desc-right {
        display: none !important;
    }
}

/* Custom Sticky Class */
.custom-sticky {
    position: -webkit-sticky;
    position: sticky !important;
    top: 20px;
    z-index: 10;
    align-self: flex-start;
    height: max-content;
}

/* Poziome menu kategorii w stopce */
.site-footer .widget_nav_menu ul,
.site-footer .widget_product_categories ul,
.site-footer .widget_categories ul,
.site-footer .wp-block-navigation__container,
.site-footer .wp-block-categories-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end !important; /* Wyrównanie do prawej */
    gap: 20px;
    padding: 0;
    list-style: none;
}

.site-footer .widget_nav_menu ul li,
.site-footer .widget_product_categories ul li,
.site-footer .widget_categories ul li,
.site-footer .wp-block-navigation-item,
.site-footer .wp-block-categories-list li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; /* usuwa domyślne kreski/oddzielenia Kadence jeśli są */
}

/* Płynne zmniejszanie logo w przyklejonym nagłówku (Sticky Header) */
.site-header .site-branding img {
    transition: transform 0.3s ease !important;
    transform-origin: left center; /* Trzyma logo przy lewej krawędzi podczas skalowania */
}

/* Klasa .item-is-stuck jest dodawana przez Kadence do paska dopiero po przewinięciu */
.site-header .item-is-stuck .site-branding img,
.site-header .item-is-fixed:not(.item-at-start) .site-branding img {
    transform: scale(0.75) !important; /* Zmniejsza do 75%, czyli o 25% */
}

/* Zapobieganie "skakaniu" i drganiom podczas scrollowania w trybie sticky */
.site-header-row-container,
.site-header-row,
.kadence-sticky-header,
.site-header .primary-menu-container > ul > li > a {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}