/*
Theme Name: TwojMotyw
Theme URI: https://twojastrona.pl/
Author: Ty
Author URI: https://twojastrona.pl/
Description: Daniel Tabis Motyw
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: danieltabis.pl
*/

/* ========== ZMIENNE ========== */
:root {
  --container-max: 1280px;
  --site-pad: clamp(12px, 3.2vw, 32px);
  --card-radius: 12px;
  --bg-body: #fafafa;
  --bg-card: #ffffff;
  --text: #222;
}

/* ========== RESETY BAZOWE ========== */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: var(--bg-body);
  color: var(--text);
  overflow-x: hidden;
}
body.menu-open {
    overflow: hidden; /* Blokada scrolla, gdy menu mobilne jest otwarte */
}
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========== UKŁAD NAGŁÓWKA ========== */
.site-header {
  /* Kluczowe zmiany dla "sticky" */
  position: sticky;
  top: 0;
  width: 100%;

  /* Pozostałe style */
  z-index: 100; /* Zwiększamy z-index, by mieć pewność, że jest nad wszystkim */
  background: #fff;
  
  /* Cień będzie teraz dodawany dynamicznie przez JS, więc tu go modyfikujemy */
  box-shadow: none; /* Domyślnie brak cienia, gdy jest na samej górze */
  transition: padding 0.3s ease, box-shadow 0.3s ease; /* Płynne przejście dla efektu */
}

/* Nowa klasa, która będzie dodawana przez JS po przewinięciu strony */
.site-header.is-scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Wyraźniejszy cień, gdy menu "pływa" */
  /* Opcjonalnie: możemy lekko zmniejszyć padding, by zaoszczędzić miejsce */
  /* padding-top: 8px; */
  /* padding-bottom: 8px; */
}
.site-header .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 24px);
  max-width: var(--container-max);
  padding: 12px var(--site-pad);
  margin: 0 auto;
}
.site-header .site-logo {
  flex-shrink: 0; /* Logo nie będzie się kurczyć */
}

/* ========== GŁÓWNA NAWIGACJA (STYLE BAZOWE/DESKTOPOWE) ========== */
.main-navigation-wrapper {
  /* Style responsywne dla tego kontenera są teraz w functions.php */
}
.main-navigation .menu {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 0;
  margin: 0;
  list-style: none;
}
.main-navigation .menu > li {
  position: relative;
}
.main-navigation a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 16px);
  padding: 10px 12px;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s;
}
.main-navigation a:hover {
  background-color: #f2f6ff;
  color: #333;
}
.main-navigation .current-menu-item > a {
    background-color: #0073e6;
    color: #fff;
}

/* ===== PODMENU (DROPDOWN) - STYLE BAZOWE/DESKTOPOWE ===== */
.main-navigation .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  list-style: none;
  margin: 0;
  padding: 8px;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 200;

  /* --- ZMIANY ZACZYNAJĄ SIĘ TUTAJ --- */
  
  /* 1. Domyślnie ukryte */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);

  /* 2. Definiujemy przejście Z OPÓŹNIENIEM DLA CHOWANIA SIĘ */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* 3. Dodajemy nową regułę dla stanu :hover */
.main-navigation li.menu-item-has-children:hover > .sub-menu {
    /* Natychmiastowe pojawienie się bez opóźnienia */
    transition-delay: 0s;
}

.main-navigation .sub-menu a {
  display: block;
  white-space: normal;
  line-height: 1.3;
  font-size: 14px;
}

/* PRZYCISK ROZWIJANIA PODMENU NA MOBILE */
.dropdown-toggle {
  display: flex; /* Zmienione na flex dla łatwiejszego centrowania */
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
}
.dropdown-toggle::after {
  content: '▼';
  font-size: 10px;
  transition: transform 0.2s ease-in-out;
}
li.is-open > .dropdown-toggle::after {
  transform: rotate(180deg);
}


/* ========== PRZYCISK HAMBURGERA ========== */
.menu-toggle {
  /* display jest zarządzany przez dynamiczny CSS w functions.php */
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  display: none; /* Domyślnie ukryty, pokazywany przez dynamiczny CSS */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 1001;
}
.menu-toggle .icon-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #111;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Animacja hamburgera do X */
body.menu-open .menu-toggle .icon-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.menu-open .menu-toggle .icon-bar:nth-child(2) {
  opacity: 0;
}
body.menu-open .menu-toggle .icon-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ========== POZOSTAŁE STYLE (STOPKA, KONTENT) ========== */
footer {
  background: #ececec;
  padding: 16px 0;
  text-align: center;
}
main {
  max-width: var(--container-max);
  margin: clamp(16px, 3vw, 32px) auto;
  background: var(--bg-card);
  padding: var(--site-pad);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ========== POPRAWKI DLA LOGO I PRZYCISKU CTA ========== */

/* 1. Poprawka dla Logo */
.site-header .custom-logo {
  max-height: 48px;  /* Ustawia maksymalną wysokość logo. Dostosuj tę wartość, jeśli potrzebujesz. */
  width: auto;       /* Automatycznie dopasowuje szerokość, by zachować proporcje. */
  display: block;    /* Usuwa ewentualne dodatkowe miejsce pod obrazkiem. */
}

/* 2. Poprawka dla Przycisku CTA */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0073e6;    /* Domyślny, wyraźny kolor tła */
  color: #ffffff !important;   /* Biały kolor tekstu. Używamy !important, by mieć pewność, że nadpisze inne style. */
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;         /* Zapobiega łamaniu się tekstu w przycisku */
  transition: opacity 0.2s ease;
}

.cta-button:hover {
  opacity: 0.85;
  color: #ffffff !important; /* Zapewnia, że kolor tekstu nie zmieni się po najechaniu */
}

/* 3. Wyrównanie elementów w nagłówku */
.site-header .header-container {
    align-items: center; /* To jest kluczowe, aby niższe logo było wyśrodkowane w pionie z menu */
}



/* 4. Poprawka dla pozycji przycisku CTA */
.main-navigation {
  display: flex;         /* Zmieniamy nav na kontener flex */
  align-items: center;   /* Wyrównujemy elementy w pionie */
  width: 100%;           /* Zapewniamy, że nav rozciąga się na całą dostępną przestrzeń */
}

.main-navigation .menu {
  margin-right: auto; /* To jest magia: wypycha wszystko co jest PO menu (czyli nasz przycisk) na prawą stronę. */
}

/* Dostosowanie wyglądu przycisku CTA w menu */
.menu-cta-button {
  margin-left: 24px; /* Dodaje trochę oddechu między menu a przyciskiem */
  flex-shrink: 0;    /* Zapobiega kurczeniu się przycisku, gdy brakuje miejsca */
}


/* 5. Poprawka dla "szybkiego" znikania menu (budowa mostka) */

.main-navigation .menu > li.menu-item-has-children {
  /* Upewniamy się, że rodzic jest punktem odniesienia dla naszego mostka.
     Ta reguła już prawdopodobnie istnieje, ale dodajemy ją dla pewności. */
  position: relative;
}

.main-navigation .menu > li.menu-item-has-children::after {
  /* To jest nasz niewidzialny mostek */
  content: '';
  position: absolute;
  top: 100%; /* Zaczyna się dokładnie tam, gdzie kończy się przycisk menu */
  left: 0;
  right: 0;
  height: 8px; /* Wysokość mostka = wysokość przerwy między menu a podmenu */
  background: transparent; /* Mostek jest całkowicie przezroczysty */
}

/* Delikatne zwiększenie opóźnienia znikania dla większego komfortu */
.main-navigation .sub-menu {
    /* Wcześniej opóźnienie wynosiło 0.2s, zwiększamy je do 0.3s */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.3s;
}

/* Natychmiastowe pojawianie się menu (nadpisanie opóźnienia przy wejściu) */
.main-navigation li.menu-item-has-children:hover > .sub-menu {
    transition-delay: 0s;
}

.site-header {
    position: relative; /* Kluczowe, by 'z-index' zadziałał poprawnie */
    z-index: 1001;     /* Ustawiamy go wyżej niż overlay (999) i menu (1000) */
}

/* 2. Upewniamy się, że w trybie mobilnym wysuwane menu jest 'fixed' */
@media (max-width: 700px) {
    .main-navigation-wrapper {
        position: fixed;
        /* Reszta stylów (top, left, width, etc.) jest już poprawna w Twoim CSS */
    }
}

/* --- OSTATECZNA I NIEZAWODNA WERSJA MENU MOBILNEGO --- */

@media (max-width: 700px) {

    /* 1. Główny kontener nawigacji (<nav>) staje się elastycznym pudełkiem */
    .main-navigation-wrapper .main-navigation {
        display: flex;
        flex-direction: column; /* Układamy elementy w kolumnie */
        height: 100%; /* Zajmuje 100% wysokości wysuwanego panelu */
    }

    /* 2. KLUCZOWA ZMIANA: Lista linków jest teraz elastyczna i przewijalna */
    .main-navigation-wrapper .menu {
        /* Ta kombinacja to sedno rozwiązania: */
        flex: 1; /* Każe liście zająć CAŁĄ dostępną wolną przestrzeń */
        overflow-y: auto; /* Jeśli zawartość (z otwartym podmenu) jest za długa, POKAŻ SCROLLBAR */
        
        /* Dodatkowe czyszczenie stylów */
        margin-bottom: 0;
        border: none;
    }

    /* 3. Style dla wszystkich linków w menu */
    .main-navigation-wrapper .menu a {
        display: block;
        padding: 16px 25px;
        border-bottom: 1px solid #e2e8f0;
        color: #334155;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.2s ease-in-out;
    }

    .main-navigation-wrapper .menu a:hover {
        background-color: #f8fafc;
    }
    
    /* 4. Przycisk CTA jest teraz normalnym elementem na dole */
    .main-navigation-wrapper .menu-cta-button {
        display: block;
        text-align: center;
        width: auto;
        padding: 14px 20px;
        font-size: 1rem;
        background-color: var(--primary-color);
        color: var(--white);
        border-radius: 8px;
        
        /* Zwykłe marginesy dla odstępu, bez żadnej magii */
        margin: 20px 25px; 
    }
    
    /* 5. Style dla podmenu (bez zmian) */
    .main-navigation-wrapper .sub-menu {
        display: none; /* Upewniamy się, że jest ukryte domyślnie */
        position: static;
        background-color: #f8fafc;
        border-top: 1px solid #e2e8f0;
        box-shadow: none;
        padding-left: 0;
    }

    /* Pokazujemy podmenu, gdy rodzic ma klasę .is-open (dodawaną przez JS) */
    .main-navigation li.menu-item-has-children.is-open > .sub-menu {
        display: block;
    }
    
    .main-navigation-wrapper .sub-menu a {
        padding-left: 40px; /* Wcięcie dla czytelności */
        border-bottom-color: #f1f5f9;
    }
}