/* ==========================================================================
   APR • NAVBAR + OVERLAY  (28-05-2025)
   ========================================================================== */

/* ===== PASEK U GÓRY ====================================================== */
.apr-navbar{
    position:fixed; top:0; left:0;
    width:100%; height:94px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 24px;
    background:#0b0d3c;
    z-index:1000;
    font-family:"Montserrat",sans-serif;
}
.apr-navbar a,
.apr-navbar button{
    color:#fff; text-decoration:none; font-size:14px;
}

/* ===== SOCIAL ICONS W NAVBAR =========================================== */
.apr-socials{
    display:flex; align-items:center; gap:12px;
    width:0; flex-basis:0; overflow:hidden;     /* ⇠ nie zabierają miejsca */
    opacity:0; pointer-events:none;
    transition:opacity .35s, width .35s;
}
body.overlay-open .apr-socials{
    width:auto; flex-basis:auto;
    opacity:1; pointer-events:auto;             /* pojawiają się po otwarciu */
}
.apr-socials a i,
.apr-overlay-footer i {
    display: block;
    width: 20px;
    height: 20px;
    background: #fff; /* ← tu kolor ikony */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* usuń filter: invert... */
}

/* Footer – większe ikony */
.apr-overlay-footer i {
    width: 24px;
    height: 24px;
}

/* ===== LOGO ============================================================== */
.apr-logo-img{
    height:64px;                 /* lub dowolna docelowa wysokość           */
    width:auto;                  /* szerokość wynikowa                     */
    object-fit:contain;          /* zawsze prawidłowe proporcje            */
}
@media(max-width:480px){         /* wariant “wąski” (ten z 56 px navbara)  */
    .apr-logo-img{
        height:32px;             /* identycznie jak dotychczas             */
        width:auto;
    }
}
.logo-txt{
    font-size:11px; line-height:1.1; text-transform:uppercase;
    letter-spacing:.05em; color:#fff;
}

/* — MOBILE: logo przy lewej krawędzi; na środek po otwarciu — */
@media (max-width:640px){
    .apr-logo{margin:0}                       /* zamknięte menu → lewa strona */
    body.overlay-open .apr-logo{margin:0 auto}/* otwarte menu → środek       */
}

/* — DESKTOP: logo płynie do środka po otwarciu — */
@media (min-width:641px){
    body.overlay-open .apr-logo{
        position:absolute; left:50%;
        transform:translateX(-50%) scale(.82);
    }
}

/* ===== CTA W NAVBAR ===================================================== */
.apr-cta{
    background:#e67500; padding:10px 22px;
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; border-radius:2px;
    color:#fff;
    transition:background .25s;
}
.apr-cta:hover{background:#f68c1c;  color: white !important;}
@media (max-width:640px){
    .apr-cta{display:none;}                    /* chowamy w pasku na mobile   */
}

/* ===== KOPIA CTA W OVERLAY (MOBILE) ==================================== */
.apr-overlay-cta{display:none; text-align:center}
@media (max-width:640px){
    .apr-overlay-cta{display:block}
}
@media (max-width:640px){
    .apr-overlay-cta{
        position:fixed; left:0; right:0; bottom:32px;
        z-index:1002;
    }
    .apr-cta--overlay{display:inline-block}
}

/* ===== HAMBURGER ======================================================= */
.apr-burger{
    width:26px; height:18px; border:none; background:none;
    padding:0; cursor:pointer; position:relative; z-index:1001;
}
.apr-burger span{
    position:absolute; left:0; width:100%; height:2px; background:#fff;
    transition:transform .35s, opacity .35s;
}
.apr-burger span:nth-child(1){top:0}
.apr-burger span:nth-child(2){top:8px}
.apr-burger span:nth-child(3){top:16px}
.apr-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.apr-burger.open span:nth-child(2){opacity:0}
.apr-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== “FUTBOL Z CHARAKTEREM” ========================================= */
.apr-tagline{
    font-size:11px; line-height:1.1; text-transform:uppercase;
    letter-spacing:.05em; color:#fff;
    display:flex; gap:2px;
}
.apr-tagline__part{position:relative}
.apr-tagline__part::after{
    content:''; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
}
.apr-tagline__part--left::after {background:#e67500}
.apr-tagline__part--right::after{background:#00b6f1}

/* ===== PRAWA STRONA (CTA + BURGER) ==================================== */
.apr-right{
    display:flex; align-items:center; gap:24px; margin-left:auto;
}

/* ===== KOLEJNOŚĆ ELEMENTÓW NA MOBILE ================================= */
@media (max-width:640px){
    .apr-socials{order:1}
    .apr-logo   {order:2}
    .apr-right  {order:3; margin-left:auto}
}

/* ===== OVERLAY ======================================================== */
.apr-overlay{
    position:fixed; inset:0;
    background:#fff; color:#111;
    transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; z-index:999;
    padding:96px 24px 48px;
}
.apr-overlay.open{transform:translateY(0)}
body.overlay-open{height:100vh; overflow:hidden}

/* ===== MENU GRID (DESKTOP) =========================================== */
.apr-menu-grid{
    display:grid; gap:48px 64px;
    grid-template-columns:repeat(3,1fr);
    max-width:1200px; margin:0 auto; padding-top:10px;
}

/* ===== ACCORDION (MOBILE) =========================================== */
@media (max-width:640px){

    .apr-menu-grid{grid-template-columns:1fr}

    .apr-group{
        border-bottom:1px solid #ddd;
        padding-bottom:8px; margin-bottom:8px;
    }

    .apr-group h3{
        cursor:pointer; position:relative; padding-right:28px;
        margin:0 0 12px;
        font-size:14px; font-weight:700; text-transform:uppercase;
        letter-spacing:.04em;
    }
    .apr-group h3::before{
        content:'+'; position:absolute; right:0; top:-2px;
        font-size:20px; line-height:1; font-weight:700;
        transition:transform .25s;
    }

    .apr-group ul{
        list-style:none; padding:0; margin:0;
        overflow:hidden;
        max-height:0; opacity:0;
        transition:max-height .35s ease, opacity .35s ease;
    }

    .apr-group.open h3::before{transform:rotate(45deg)}
}

/* ===== NAGŁÓWKI GRUP – podkreślenie ================================= */
.apr-group h3{
    margin:0 0 12px;
    font-size:14px; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em;
    position:relative; padding-bottom:6px; border:none;
}
.apr-group h3::after{
    content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
    background:linear-gradient(to right,
                #e67500 0 25%,
                #c3c3c3 25% 100%);
}

/* ===== LINKI W GRUPACH ============================================== */
.apr-group a{
    display:block; margin:0 0 8px;
    color:#111; font-size:14px;
    transition:color .25s;
}
.apr-group a:hover{color:#e67500}

/* ===== FOOTER SOCIALS W OVERLAY ===================================== */
.apr-overlay-footer{
    margin-top:64px;
    display:flex; justify-content:center; gap:24px;
}
.apr-overlay-footer i{
    width:24px; height:24px;
    background-size:contain; background-repeat:no-repeat;
}

/* ===== BODY OFFSET POD NAVBAR ======================================= */
body{margin:0; padding-top:64px}
@media (max-width:480px){
    .apr-navbar{height:65px; padding:0 16px}
    .apr-logo-img{width:95px; height:32px}
    .logo-txt{display:none}
    body{padding-top:56px}
}
/* ► MOBILE: logo startuje po lewej, płynnie przesuwa się do środka */
@media (max-width:640px){
    .apr-logo{
        position:absolute; left:24px;          /* bazowa pozycja przy lewej */
        transform:translateX(0);               /* zerowy offset            */
        flex-wrap:nowrap;                      /* nie zawija dzieci        */
        transition:left .45s ease, transform .45s ease;
    }
    body.overlay-open .apr-logo{
        left:50%;                              /* środek ekranu            */
        transform:translateX(-50%) scale(.82); /* lekko pomniejszone       */
    }

    /* tagline zawsze obok logotypu */
    .apr-tagline{white-space:nowrap}
}

/* ► CZARNE LINKI W PODKATEGORIACH (niezależnie od dziedziczenia) */
.apr-overlay .apr-group a,
.apr-overlay .apr-group li a{
    color:#111 !important;
}
.apr-overlay .apr-group a:hover{color:#e67500}

/* ► LOGO – proporcje bez rozciągania (korekta desktop + mobile) */
.apr-logo-img{
    height:64px; width:auto; object-fit:contain;
}
@media(max-width:480px){
    .apr-logo-img{height:50px}
}

/* === TAGLINE PO PRAWEJ STRONIE LOGO =============================== */
.apr-logo{
    display:flex;           /* logo + tagline w jednym wierszu       */
    align-items:center;     /* pionowe wyrównanie obrazka i tekstu   */
    gap:8px;                /* odstęp między logotypem a hasłem      */
}

/* delikatnie mniejsza przerwa na wąskich ekranach */
@media (max-width:480px){
    .apr-logo{ gap:4px; }
}

    .apr-logo{
        position:absolute; left:24px;          /* bazowa pozycja przy lewej */
        transform:translateX(0);               /* zerowy offset            */
        flex-wrap:nowrap;                      /* nie zawija dzieci        */
        transition:left .45s ease, transform .45s ease;
    }
    body.overlay-open .apr-logo{
        left:50%;                              /* środek ekranu            */
        transform:translateX(-50%) scale(.82); /* lekko pomniejszone       */
    }

    /* tagline zawsze obok logotypu */
    .apr-tagline{white-space:nowrap}

/* ===  HOVER: wszystkie linki na pomarańczowo  ========================= */
.apr-navbar a:hover,
.apr-overlay .apr-group a:hover{
    transition:color .25s;
}

/* ===  CTA (mobile) – przyklejony dół ⇄ w razie kolizji schodzi niżej  == */
.apr-overlay-cta{
    position:fixed;               /* domyślnie tuż nad bottom:32px        */
    left:0; right:0; bottom:32px;
    transition:transform .35s, margin .35s;
}

.apr-overlay-cta.apr-cta--push{   /* klasa dodawana JS-em, gdy brak miejsca */
    position:static;              /* wraca do normalnego „flow”           */
    margin:32px auto 0;           /* odstęp od rozwiniętej listy          */
}

/* === CTA – domyślnie jak było  ===================================== */
.apr-overlay-cta{                       /* już istniejąca reguła          */
    position:fixed; left:0; right:0; bottom:32px;
    transition:transform .35s;
}

/* — gdy JS doda klasę .apr-cta--push, CTA zjedzie w dół  — */
.apr-cta--push{
    /* JS podmienia transform na np. translateY(120px)       */
}

/* --- BAZA ------------------------------------------------------------ */
.apr-socials a i,
.apr-overlay-footer i{
    display:block; width:20px; height:20px;           /* footer ma 24 px, nadpisujemy niżej */
    background:#fff;                                  /* kolor ikony */
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    -webkit-mask-position:center;
            mask-position:center;
    -webkit-mask-size:contain;
            mask-size:contain;
}

/* --- KONKRETNE MASKI ------------------------------------------------- */
i.icons-social-fb{
    -webkit-mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/facebook.svg');
            mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/facebook.svg');
}
i.icons-social-insta{
    -webkit-mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/instagram.svg');
            mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/instagram.svg');
}
i.icons-social-yt{
    -webkit-mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/youtube.svg');
            mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/youtube.svg');
}
i.icons-social-tiktok{
    -webkit-mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/tiktok.svg');
            mask-image:url('https://cdn.jsdelivr.net/npm/simple-icons@11/tiktok.svg');
}

/* footer – większe ikony */
.apr-overlay-footer i{ width:24px; height:24px; }