/* ============================================================
   1. CZCIONKI
   ============================================================ */
@font-face { font-family: 'skaknazwy3'; src: url('../fonts/skaknazwy3.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'skaktekst'; src: url('../fonts/skaktekst.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'skaktekst2'; src: url('../fonts/skaktekst2.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'skakart2'; src: url('../fonts/skakart2.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'skakart3'; src: url('../fonts/skakart3.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }

/* ============================================================
   2. TYPOGRAFIA I TREŚĆ
   ============================================================ */
.specjalne-tytuly .page-header h2 a, .specjalne-tytuly .page-header h2, .page-header h1, .com-content-article__title {
    font-family: 'skaktekst', sans-serif !important;
}

.breadcrumb {
    background-color: #d3f7f4; margin-bottom: 0; font-family: 'skaktekst', sans-serif !important; font-size: larger;
    text-shadow: -0.5px -0.5px 0 white, 0.5px -0.5px 0 white, -0.5px 0.5px 0 white, 0.5px 0.5px 0 white;
}

:root {
    --cassiopeia-color-primary: #49a2a7; 
    --cassiopeia-color-hover: #49a2a7;   
}

.category-desc { font-family: 'skakart2', sans-serif; font-size: 1.4rem; line-height: 1.6; color: #333333; font-weight: 200; margin-bottom: 2rem; }
.com-content-article, .com-content-article p, .com-content-article section { font-family: 'skakart3', sans-serif !important; line-height: 1.6 !important; }
div[itemprop="description"] img, .category-desc img, .image-category img, .category-image img { max-width: 500px !important; height: auto !important; }

/* ============================================================
   3. KAFELKI BLOGA
   ============================================================ */
.com-content-category-blog__item { background-color: #49A2A7 !important; padding: 10px; border-radius: 8px; margin-bottom: 20px; }
.com-content-category-blog__item .page-header h2 a, .com-content-category-blog__item .page-header h2 {
    color: white !important; text-shadow: -2px -2px 0 #2B6568, 2px -2px 0 #2B6568, -2px 2px 0 #2B6568, 2px 2px 0 #2B6568;
}
.blog-items .blog-item { position: relative; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1; }
.blog-items .blog-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important; background-color: #fdfdfd; }
.blog-items .blog-item .item-image a::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; cursor: pointer; }
.item-image { overflow: hidden; border-radius: 8px; }
.item-image img { transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
.com-content-category-blog__item:hover .item-image img { transform: scale(1.15) rotate(-3deg); filter: brightness(1.1); }

/* ============================================================
   4. INTRO Z PULSOWANIEM (2.8s)
   ============================================================ */
body.itemid-110::before { 
    content: ""; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background-color: #008b8b; 
    z-index: 999999; 
    pointer-events: none; 
    animation: fadeOutFinal 2.8s forwards; 
}

body.itemid-110::after { 
    content: ""; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 90vw; 
    height: 80vh; 
    background-image: url('/images/logokrolskakunow.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    z-index: 1000000; 
    pointer-events: none; 
    transform: translate(-50%, -50%) perspective(1000px) rotateY(-180deg) scale(0); 
    animation: logoFlipAndJump 2.8s ease-in-out forwards; 
}

@keyframes logoFlipAndJump { 
    0% { transform: translate(-50%, -50%) perspective(1000px) rotateY(-180deg) scale(0); opacity: 0; } 
    20% { transform: translate(-50%, -50%) perspective(1000px) rotateY(0deg) scale(1.1); opacity: 1; } 
    30% { transform: translate(-50%, -50%) perspective(1000px) rotateY(0deg) scale(1); }
    45% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.1); }
    50% { transform: translate(-50%, -50%) scale(1); }
    55% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.1); }
    60% { transform: translate(-50%, -50%) scale(1); }
    65% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.1); }
    70% { transform: translate(-50%, -50%) scale(1); }
    80% { transform: translate(-50%, -50%) perspective(1000px) rotateY(0deg) scale(1); opacity: 1; } 
    100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; visibility: hidden; } 
}

@keyframes fadeOutFinal { 
    0% { opacity: 1; } 
    85% { opacity: 1; } 
    100% { opacity: 0; visibility: hidden; } 
}

/* ============================================================
    5. MENU - PAJĄCZKI (PEŁNA LISTA DLA 8 ELEMENTÓW: +IG i +YT)
   ============================================================ */
.mod-menu .nav-item a { position: relative !important; }
.mod-menu .nav-item a::before {
    content: ""; 
    display: block; 
    width: 42px; /* Zmniejszone, by pajączki nie zderzały się w ciasnym menu */
    height: 42px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 99; 
    opacity: 0; 
    bottom: -20px; 
    pointer-events: none; 
    backface-visibility: hidden;
}

/* PRZYPISANIE OBRAZKÓW DO KAŻDEJ POZYCJI (1-8) */
.mod-menu .nav-item:nth-child(1) a::before { background-image: url('/images/nadmenu.png'); }
.mod-menu .nav-item:nth-child(2) a::before { background-image: url('/images/nadmenu2.png'); }
.mod-menu .nav-item:nth-child(3) a::before { background-image: url('/images/nadmenu3.png'); }
.mod-menu .nav-item:nth-child(4) a::before { background-image: url('/images/nadmenu4.png'); }
.mod-menu .nav-item:nth-child(5) a::before { background-image: url('/images/nadmenu5.png'); }
.mod-menu .nav-item:nth-child(6) a::before { background-image: url('/images/nadmenu6.png'); } /* FB */
.mod-menu .nav-item:nth-child(7) a::before { background-image: url('/images/nadmenu7.png'); } /* INSTAGRAM */
.mod-menu .nav-item:nth-child(8) a::before { background-image: url('/images/nadmenu8.png'); } /* YOUTUBE */

/* STAN AKTYWNY (Pajączek siedzi na stałe) */
.mod-menu .nav-item.active a::before, 
.mod-menu .nav-item.current a::before { 
    opacity: 1 !important; 
    bottom: 18px !important; 
}

/* ANIMACJA SKOKU NA HOVER */
.mod-menu .nav-item:not(.active):not(.current) a:hover::before { 
    animation: skokSkakuna 0.5s ease-out forwards; 
}

@keyframes skokSkakuna { 
    0% { bottom: -20px; opacity: 0; transform: translateX(-50%) scale(0.8); } 
    50% { bottom: 45px; opacity: 1; transform: translateX(-50%) scale(1.1); } 
    100% { bottom: 18px; opacity: 1; transform: translateX(-50%) scale(1); } 
}
/* ============================================================
    6. MENU - IKONY SOCIAL I CIENIE (WERSJA PRO - MOCNA I ZWARTA)
   ============================================================ */
.container-header .mod-menu li.nav-item a, 
.container-header .mod-menu li.nav-item a *,
.navbar-nav .nav-link {
    font-family: 'skaktekst', Arial, sans-serif !important;
    font-weight: bold !important; 
    font-size: 1.7rem !important; /* Idealna wielkość dla 8 elementów */
    letter-spacing: -0.5px !important; /* Delikatne zsuwanie liter oszczędza miejsce */
    color: white !important; 
    text-transform: uppercase !important;
    display: inline-flex !important; 
    align-items: center !important; 
    position: relative;
    padding: 0 4px !important; /* Minimalne przerwy między przyciskami */
    
    /* Powrót do grubego, solidnego cienia 2px */
    text-shadow: -2px -2px 0 #2B6568, 2px -2px 0 #2B6568, -2px 2px 0 #2B6568, 2px 2px 0 #2B6568, 0px 2px 0 #2B6568, 0px -2px 0 #2B6568, 2px 0px 0 #2B6568, -2px 0px 0 #2B6568 !important;
}

/* --- FACEBOOK - POZYCJA 6 --- */
.container-header .mod-menu li.nav-item:nth-child(6) a {
    padding-left: 32px !important; /* Ikonka blisko tekstu */
    background-image: url('/images/fb-icon.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 26px auto !important; 
    text-shadow: -2px -2px 0 #0a3d91, 2px -2px 0 #0a3d91, -2px 2px 0 #0a3d91, 2px 2px 0 #0a3d91 !important;
}

/* --- INSTAGRAM - POZYCJA 7 --- */
.container-header .mod-menu li.nav-item:nth-child(7) a {
    padding-left: 32px !important;
    background-image: url('/images/insta-icon.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 26px auto !important;
    text-shadow: -2px -2px 0 #833ab4, 0px -2px 0 #c13584, 2px -2px 0 #e1306c, 2px 0px 0 #fd1d1d, 2px 2px 0 #f56040, 0px 2px 0 #f77737, -2px 2px 0 #fcaf45, -2px 0px 0 #5851db !important;
}

/* --- YOUTUBE - POZYCJA 8 --- */
.container-header .mod-menu li.nav-item:nth-child(8) a {
    padding-left: 32px !important; 
    background-image: url('/images/yt-icon.png') !important;
    background-repeat: no-repeat !important; 
    background-position: left center !important; 
    background-size: 26px auto !important;
    /* Mocny czerwony cień YouTube */
    text-shadow: -2px -2px 0 #FF0000, 2px -2px 0 #FF0000, -2px 2px 0 #FF0000, 2px 2px 0 #FF0000, 0px 2px 0 #FF0000, 0px -2px 0 #FF0000 !important;
}

/* Wymuszenie czystego cienia dla elementów wewnątrz linków */
.container-header .mod-menu li.nav-item:nth-child(6) a *,
.container-header .mod-menu li.nav-item:nth-child(7) a *,
.container-header .mod-menu li.nav-item:nth-child(8) a * {
    text-shadow: inherit !important;
}

/* ============================================================
   7. ROZDZIELENIE ROZMIARÓW: TYTUŁ STRONY VS KAFELKI
   ============================================================ */
h1, .page-header h1 {
    font-family: 'skaktekst', Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 4.5rem !important;
    letter-spacing: 3px !important;
    color: white !important;
    text-transform: uppercase !important;
    text-shadow: -2px -2px 0 #2B6568, 2px -2px 0 #2B6568, -2px 2px 0 #2B6568, 2px 2px 0 #2B6568, 0px 2px 0 #2B6568, 0px -2px 0 #2B6568, 2px 0px 0 #2B6568, -2px 0px 0 #2B6568 !important;
}

.com-content-category-blog__item h2, 
.com-content-category-blog__item h2 a {
    font-family: 'skaktekst', Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 2.2rem !important;
    letter-spacing: 2px !important;
    color: white !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    text-shadow: -2px -2px 0 #2B6568, 2px -2px 0 #2B6568, -2px 2px 0 #2B6568, 2px 2px 0 #2B6568, 0px 2px 0 #2B6568, 0px -2px 0 #2B6568, 2px 0px 0 #2B6568, -2px 0px 0 #2B6568 !important;
}

/* Pajęcza nić */
.container-header .mod-menu li.nav-item a::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px;
    background: rgba(255,255,255,0.7); box-shadow: 0 0 5px white; transition: width 0.4s ease;
}
.container-header .mod-menu li.nav-item a:hover::after { width: 100%; }

/* Pasek przewijania */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #2B6568; }
::-webkit-scrollbar-thumb { background: #49A2A7; border-radius: 10px; border: 3px solid #2B6568; }
::-webkit-scrollbar-thumb:hover { background: #d3f7f4; }

/* Pulsowanie aktywnego menu */
.mod-menu .nav-item.active a::before, 
.mod-menu .nav-item.current a::before,
.mod-menu .nav-item.active.current a::before {
    opacity: 1 !important; bottom: 20px !important;
    animation: spiderGlow 3.0s infinite ease-in-out !important;
}

@keyframes spiderGlow {
    0% { transform: translateX(-50%) scale(1); filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0)); }
    50% { transform: translateX(-50%) scale(1.15); filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
    100% { transform: translateX(-50%) scale(1); filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0)); }
}

::selection { background: #49A2A7; color: white; }

/* ============================================================
   8. STYLIZACJA ZDJĘĆ I LINKÓW W ARTYKUŁACH
   ============================================================ */
div[itemprop="articleBody"] img, .com-content-article img {
    display: block !important; margin-left: auto !important; margin-right: auto !important;
    margin-top: 20px !important; margin-bottom: 20px !important;
    border-radius: 8px !important; box-shadow: 0 4px 15px rgba(43, 101, 104, 0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
div[itemprop="articleBody"] img:hover, .com-content-article img:hover { transform: scale(1.03) !important; box-shadow: 0 10px 25px rgba(73, 162, 167, 0.7) !important; }

.com-content-article a {
    color: #2B6568 !important; text-decoration: none !important; font-weight: bold;
    border-bottom: 1px solid #49A2A7; transition: all 0.3s ease;
}
.com-content-article a:hover { color: #49A2A7 !important; background-color: rgba(211, 247, 244, 0.3); border-bottom: 2px solid #2B6568; }

#main-content, .container-component { animation: fadeInPage 0.8s ease-in-out; }
@keyframes fadeInPage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   9. RAMKA SPECJALNA
   ============================================================ */

.skakun-info {
    background-color: #d3f7f4 !important; border-left: 5px solid #2B6568 !important;
    padding: 15px 20px !important; margin: 20px 0 !important; border-radius: 4px;
    font-family: 'skakart3', sans-serif !important; color: #2B6568 !important;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
}
.skakun-info strong { color: #49A2A7 !important; text-transform: uppercase; letter-spacing: 1px; }

/* --- BREADCRUMB Z PAJĄCZKIEM (WYRÓWNANY DO MENU) --- */
.breadcrumb {
    background-color: #d3f7f4 !important; 
    margin-bottom: 0 !important; 
    font-family: 'skaktekst', sans-serif !important; 
    font-size: larger;
    text-shadow: -0.5px -0.5px 0 white, 0.5px -0.5px 0 white, -0.5px 0.5px 0 white, 0.5px 0.5px 0 white;
    
    display: flex;
    align-items: center;
    /* Zmniejszyłem z 14% na 10% - powinno być w punkt */
    padding: 10px 0 10px 7% !important; 
}

.breadcrumb::before {
    content: ""; display: inline-block; width: 35px; height: 35px; background-image: url('/images/bread.png');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    margin-right: 15px; animation: spiderJump 5s infinite ease-in-out;
}
@keyframes spiderJump {
    0%, 90%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); }
    93% { transform: translateY(-7px) scale(1.1); filter: drop-shadow(0 10px 5px rgba(0,0,0,0.2)); }
    96% { transform: translateY(0) scale(0.95); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); }
}
.com-content-category-blog__item { background: linear-gradient(135deg, #49A2A7 0%, #2B6568 100%) !important; border: 1px solid rgba(255,255,255,0.1); }

/* ============================================================
   10. POPUP VIDEO
   ============================================================ */
.video-popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: 2000000; display: flex; align-items: center; justify-content: center; animation: fadeInPage 0.5s ease-out; }
.video-popup-content { background-color: #2B6568 !important; border: 2px solid #49A2A7 !important; border-radius: 12px; box-shadow: 0 0 30px rgba(73, 162, 167, 0.5) !important; padding: 0 !important; width: 90% !important; max-width: 800px !important; position: relative; }
.video-popup-title { background-color: #49A2A7 !important; color: white !important; font-family: 'skaktekst', sans-serif !important; font-size: 1.8rem !important; text-transform: uppercase; text-align: center; padding: 15px 20px !important; border-radius: 10px 10px 0 0; letter-spacing: 2px !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; margin: 0 !important; }
.video-responsive { overflow: hidden !important; padding-bottom: 56.25%; position: relative; height: 0; }
.video-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; border-radius: 0 0 10px 10px; border: none !important; }
.video-popup-close { position: absolute !important; top: -65px !important; right: 0 !important; color: white !important; font-size: 60px !important; line-height: 1; font-weight: bold; cursor: pointer !important; z-index: 9999999 !important; text-shadow: 0 0 10px rgba(0,0,0,0.8); transition: transform 0.3s ease; }
.video-popup-close:hover { color: #d3f7f4 !important; transform: scale(1.2); }

@media (max-width: 768px) { .video-popup-title { font-size: 1.2rem !important; padding: 10px 15px !important; } .video-popup-close { top: -55px !important; right: 5px !important; } }

/* ============================================================
    11. PASEK NEWSÓW (TICKER) - FIX: STABILNA PRĘDKOŚĆ STARTOWA
   ============================================================ */

.news-ticker-container {
    background: rgba(43, 101, 104, 0.45) !important; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    width: 100%;
    position: relative;
    z-index: 1000;
}

.news-ticker-wrapper {
    display: inline-block;
    padding-left: 100%; /* To zapewniało dobrą prędkość wcześniej */
    
    /* ANIMACJA Z UJEMNYM OPÓŹNIENIEM */
    /* -290s sprawia, że animacja startuje tak, jakby trwała już od połowy czasu */
    animation: marquee-news 580s linear -290s infinite;
    
    will-change: transform;
    transform: translateZ(0);
}

.news-ticker-text {
    display: inline-block;
    font-family: 'skaktekst', sans-serif !important; 
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    backface-visibility: hidden;
}

.news-ticker-text span {
    display: inline-block;
    padding-right: 80px; 
}

/* Klucz do pętli, który działał u Ciebie dobrze */
@keyframes marquee-news {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Zatrzymanie po najechaniu myszką */
.news-ticker-container:hover .news-ticker-wrapper {
    animation-play-state: paused;
}