/**
 * nav.css — Motyw T (trenerzy.org.pl)
 * Header, nawigacja, okruszki, stopka.
 * TYLKO frontend — NIE ładowany do edytora Gutenberga.
 */

/* ============================================
   WCAG: Skip link — pomiń nawigację
   Wizualnie ukryty, pojawia się po focusie (Tab)
   ============================================ */

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 999999;
    padding: .75rem 1.5rem;
    background-color: var(--kide-primary);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0 0 .25rem .25rem;
    text-decoration: none;
    transition: top .2s;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--kide-dark);
    outline-offset: 2px;
}

/* ============================================
   MOBILE (≤1023px)
   Nawigacja wysuwa się z lewej, checkbox trick.
   t-hamburger--filter = niewidoczna nakładka
   zamykająca menu po kliknięciu poza nim.
   ============================================ */

@media screen and (max-width: 1023px) {

    header {
        display: block;
        position: sticky;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 8rem;
        background-color: var(--kide-white);
        padding: 1dvw;
        z-index: 100000;
    }

    header > .t-header__bar { display: flex; align-items: center; height: 6rem}
    header > .t-header__bar > .kide_container { padding: 0; }

    header .t-logo { display: block; height: 5rem; width: fit-content; }
    header .t-logo > img { width: auto; height: 100%; }

    header .t-hamburger {
        position: absolute;
        padding: 0;
        margin: 0;
        background: none;
        display: flex;
        align-items: center;
        top: 1.5rem;
        right: .75rem;
        border: none;
        color: #3A3A3C;
    }
    header .t-hamburger > svg { width: 3rem; height: 3rem; transition: all .5s; }

    #t-nav-toggle { display: none; }

    #t-nav-toggle ~ .t-hamburger--close  { width: 0;    height: 0; }
    #t-nav-toggle ~ .t-hamburger--open   { width: 3rem; height: 3rem; }
    #t-nav-toggle ~ .t-hamburger--filter { width: 0; height: 0; top: 0; left: 0; display: none; }

    #t-nav-toggle:checked ~ .t-hamburger--filter { width: 100dvw; height: 85vh; top: 4rem; left: 0; display: block; background: none; }
    #t-nav-toggle:checked ~ .t-hamburger--close  { width: 3rem; height: 3rem; }
    #t-nav-toggle:checked ~ .t-hamburger--open   { width: 0;    height: 0; }

    /* Nawigacja */
    header .t-nav {
        display: block;
        position: absolute;
        top: 7rem;
        left: -150dvw;
        max-height: calc(100dvh - 4rem);
        width: 100dvw;
        overflow-y: scroll;
        background-color: var(--kide-white);
        transition: .5s;
        z-index: 100000;
        border-bottom: solid 1px var(--kide-primary);
    }
    header .t-nav a { display: block; padding: 3dvw;}
    #t-nav-toggle:checked ~ .t-nav { left: 0; }

    header .t-nav :where(ul, li, a) { margin: 0; padding: 0; }
    header .t-nav ul { font-weight: 600; }
    header .t-nav > ul > li:not(:last-of-type),
    header .t-nav > ul > li li:not(:last-of-type) { border-bottom: solid 1px var(--kide-light); }
    

    /* Submenu mobilne — hover/tap */
    header .t-nav ul ul {
        background-color: var(--kide-white);
        
        width: 0;
        height: 0;
        overflow: hidden;
    }
    header .t-nav ul li:hover ul { width: 100dvw; height: fit-content; 
        border-left: solid 4px var(--kide-dark);
        background-color: #ccc;
    }
    header .t-nav ul ul > li { padding-left: 4dvw; font-weight: 400; }

    /* Okruszki */
    .t-breadcrumbs-bar{margin-left: .75rem; margin-top: -.5rem}
    .t-breadcrumbs-bar .kide_container { padding: 0; }
}

/* ============================================
   DESKTOP (≥1024px)
   Submenu przez width:0/height:0 zamiast
   display:none — element zawsze w DOM,
   hover nie ginie przy przejściu mysz.
   ============================================ */

@media screen and (min-width: 1024px) {

    header {
        display: block;
        position: sticky;
        top: 0;
        left: 0;
        width: 100dvw;
        height: auto;
        background-color: var(--kide-white);
        padding: 0;
        z-index: 100000;
        padding-bottom: .5rem
    }

    header .kide_container { display: flex; align-items: center; }
    header > .t-header__bar { display: flex; align-items: center; }

    header .t-logo { display: block; height: 6rem; width: fit-content; margin-top: .5rem; }
    header .t-logo > img { width: auto; height: 100%; }

    .t-hamburger,
    #t-nav-toggle { display: none; }

    /* Nawigacja */
    header .t-nav {
        display: flex;
        position: absolute;
        top: 2rem;
        right: .5rem;
        left: auto;
        width: 80%;
        margin: 0;
        justify-content: end;
    }
    header .t-nav :where(ul, li, a) { margin: 0; padding: 0; }
    header .t-nav ul { display: inline-flex; justify-content: end; position: relative; }
    header .t-nav li { display: inline-flex; justify-content: end; position: relative; }
    header .t-nav li a {
        padding: .25rem .5rem;
        margin-top: .25rem;
        font-size: 1rem;
        font-weight: 600;
        transition: .5s;
        text-decoration: none;
    }
    header .t-nav li a:hover { background-color: var(--kide-gray); color: var(--kide-light); }

    /* Submenu */
    header .t-nav ul li > ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 0;
        height: 0;
        overflow: hidden;
        border: solid 1px var(--kide-gray);
        transition: .5s;
        background-color: var(--kide-white);
        box-shadow: var(--wp--preset--shadow--natural);
        margin: 0;
        padding: 0;
    }
    header .t-nav ul li:hover > ul { width: fit-content; height: fit-content; }
    header .t-nav ul li > ul > li { display: block; width: 100%; }
    header .t-nav ul li > ul > li > a {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        font-weight: 400;
        margin: 0;
        padding: 1rem;
    }

}

/* Strzałka przy pozycjach z submenu — desktop i mobile */
.t-nav > ul > li:has(> .sub-menu) > a::after {
    content: '▾';
    margin-left: 0;
    font-size: 1rem;
}

/* ============================================
   OKRUSZKI
   pointer-events: none — nie przerywa hover
   submenu gdy mysz przelatuje przez pasek.
   Linki okruszków są klikalne (auto).
   ============================================ */

.t-breadcrumbs-bar {
/*     border-bottom: 1px solid #f0f0f0; */
    background-color: var(--kide-white);
    pointer-events: none;
}
.t-breadcrumbs-bar a {
    pointer-events: auto;
}

.ps-breadcrumbs { margin: 0; padding: 0; }
.ps-breadcrumbs ul,
.ps-breadcrumbs ol {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ps-breadcrumbs li { display: flex; align-items: center; margin: 0; }
.ps-breadcrumbs li:not(:last-of-type)::after {
    content: '>';
    margin: 0 0.35rem;
    color: var(--kide-gray);
    font-size: 0.75rem;
}
.ps-breadcrumbs * { font-size: 0.8rem; }

/* ============================================
   FOOTER
   ============================================ */

.kide_footer {
    background-color: #222;
    color: var(--kide-white);
    padding: 3rem 0 0;
}
.kide_footer * { color: #dedede; }

.t-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    width: max-content;
}
.t-footer-col { width: fit-content; }

.t-footer-widget-title {
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    margin: 0 0 1rem 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.t-footer-widget p,
.t-footer-widget li,
.t-footer-widget a { font-size: 0.9rem; color: #9ca3af; }
.t-footer-widget a:hover { color: var(--kide-primary); }
.t-footer-widget ul { list-style: none; margin: 0; padding: 0; }
.t-footer-widget ul li { margin-bottom: 0.4rem; }
.t-footer-widget .menu { list-style: none; margin: 0; padding: 0; }
.t-footer-widget .menu li { margin-bottom: 0.4rem; }
.t-footer-widget .menu a { color: #9ca3af; font-size: 0.9rem; }
.t-footer-widget .menu a:hover { color: var(--kide-primary); }

.t-footer-bottom {
/*     border-top: 1px solid #374151; */
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
}
.t-footer-bottom .kide_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

.t-footer-legal { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.t-footer-legal a { color: #9ca3af; font-size: 0.85rem; }
.t-footer-legal a:hover { color: var(--kide-primary); }

.t-footer-fallback { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding-bottom: 2rem; color: #9ca3af; }
.t-footer-menu { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.t-footer-menu a { color: #9ca3af; font-size: 0.9rem; }
.t-footer-menu a:hover { color: var(--kide-primary); }

@media screen and (max-width: 1023px) {
    .t-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 639px) {
    .t-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .t-footer-bottom .kide_container { flex-direction: column; text-align: center; }
    .t-footer-legal { justify-content: center; }
}

/* ============================================
   STOPKA — treść Gutenberga (.t-footer-content)
   ============================================ */

.t-footer-content { padding: 2.5rem 0; }

.t-footer-content,
.t-footer-content p,
.t-footer-content li,
.t-footer-content a,
.t-footer-content span,
.t-footer-content small { color: #9ca3af; font-size: 0.9rem; margin-bottom: 0.4rem; }
.t-footer-content a:hover { color: var(--kide-primary); text-decoration: underline; }

.t-footer-content h1,
.t-footer-content h2,
.t-footer-content h3,
.t-footer-content h4,
.t-footer-content .wp-block-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
    text-align: left;
}

.t-footer-content ul,
.t-footer-content ol { list-style: none; margin: 0; padding: 0; }
.t-footer-content ul li,
.t-footer-content ol li { margin-bottom: 0.4rem; color: #9ca3af; }

.t-footer-content .wp-block-columns { margin: 0; gap: 2.5rem; flex-wrap: nowrap; }
.t-footer-content .wp-block-column { min-width: 0; }

@media screen and (max-width: 1023px) {
    .t-footer-content .wp-block-columns { flex-wrap: wrap; }
    .t-footer-content .wp-block-column { flex-basis: calc(50% - 1.25rem) !important; }
}
@media screen and (max-width: 639px) {
    .t-footer-content .wp-block-column { flex-basis: 100% !important; }
}

.t-footer-content .wp-block-separator {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    margin: 1.5rem 0;
}

.t-footer-content .wp-block-button__link {
    background-color: transparent;
    border: 1px solid #9ca3af;
    color: #9ca3af !important;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}
.t-footer-content .wp-block-button__link:hover {
    border-color: var(--kide-primary);
    color: var(--kide-primary) !important;
    background-color: transparent;
    transform: none;
}

.t-footer-content .wp-block-image img { max-height: 60px; width: auto; height: auto; }
.t-footer-content .wp-block-paragraph { margin-bottom: 0.5rem; }
.t-footer-content .wp-block-group { padding: 0; }

.t-footer-map-menu { list-style: none; margin: 0; padding: 0; }
.t-footer-map-menu li { margin-bottom: 0.4rem; }
.t-footer-map-menu a {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: color 0.2s;
}
.t-footer-map-menu a:hover { color: var(--kide-primary); }

/* Latest Posts w stopce — wygląd identyczny jak .t-footer-map-menu */
.t-footer-content .wp-block-latest-posts,
.t-footer-content .wp-block-latest-posts__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.t-footer-content .wp-block-latest-posts__list li {
    margin-bottom: 0.4rem;
    padding: 0;
    border: none; /* reset domyślnych separatorów WP */
}
.t-footer-content .wp-block-latest-posts__list .wp-block-latest-posts__post-title {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: color 0.2s;
}
.t-footer-content .wp-block-latest-posts__list .wp-block-latest-posts__post-title:hover {
    color: var(--kide-primary);
}

/* ============================================
   COOKIE CONSENT
   ============================================ */

.cookie-consent-banner {
    background-color: #fefefe;
    font-size: 1rem;
    box-shadow: -1px 0 2px #222;
    display: block;
    position: fixed;
    bottom: 0; left: 0;
    width: 100dvw;
    height: fit-content;
    z-index: 1;
    text-align: center;
    padding: 1rem;
}
.cookie-consent-banner :where(p) { text-align: left; font-size: .5rem !important; }
.cookie-consent-buttons button {
    padding: .5rem 2rem;
    background-color: var(--kide-background-blue);
    border: solid 1px var(--kide-background-blue);
    border-radius: .15rem;
    color: #fff;
    margin: .5rem;
}

footer h3{color: var(--kide-dark) !important;}

#cmplz-manage-consent .cmplz-manage-consent { right: 120px !important; }

/* ============================================
   SOCIAL MEDIA + SCROLL TO TOP — pływająca grupa
   Wrapper .ps-social-fixed trzyma przyciski social
   i scroll-to-top w jednej kolumnie (bottom-right).
   ============================================ */

.ps-social-fixed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
}

/* Grupa przycisków social wewnątrz wrappera */
.ps-social-fixed .ps-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Pojedynczy przycisk social */
.ps-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #3a3a3c;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.ps-social-btn svg { width: 1.25rem; height: 1.25rem; }
.ps-social-btn:hover { transform: translateY(-3px); color: #fff; }

/* Hover — jednolity kolor marki */
.ps-social-btn:hover { background-color: var(--kide-primary); }

/* ============================================
   SCROLL TO TOP — pływający przycisk
   Prosta struktura: <button class="kide_control_center"><span>∆</span></button>
   ============================================ */

#t_to_top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--kide-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background-color 0.2s, transform 0.2s;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
}
#t_to_top:hover {
    background-color: var(--kide-primary-dark);
    transform: translateY(-3px);
}
#t_to_top span {
    display: block;
    font-size: 1.25rem;
    color: #fff;
    line-height: 1;
}