/* Style współdzielone przez wszystkie podstrony ELCOM (linkowane obok assets/css/tailwind.css) */

body {
    background-color: #f8fafc;
    margin: 0;
    overflow-x: hidden;
}

/* DYNAMICZNY HEADER (SCROLL & HOVER) */
#main-header {
    background-color: transparent;
    border-bottom-color: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-header.scrolled, #main-header:hover {
    background-color: rgba(28, 37, 65, 0.95);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
#main-header .nav-logo, #main-header .nav-link, #main-header .nav-icon {
    transition: color 0.4s ease;
}
/* Domyślny stan (transparent) -> Granatowy tekst na jasnym tle */
#main-header .nav-logo { color: #0B132B; }
#main-header .nav-link { color: #0B132B; }
#main-header .nav-icon { color: #0B132B; }

/* Stan aktywny (hover/scroll) -> Jasny tekst na granatowym tle */
#main-header.scrolled .nav-logo, #main-header:hover .nav-logo { color: #ffffff; }
#main-header.scrolled .nav-link, #main-header:hover .nav-link { color: #e2e8f0; }
#main-header.scrolled .nav-icon, #main-header:hover .nav-icon { color: #ffffff; }

/* Złoty Hover na linkach */
#main-header .nav-link:hover { color: #F59E0B !important; }

/* EFEKTY WEKTOROWE W HERO (mapa D3 na stronie głównej) */
.line-glow {
    filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6));
}
.hub-glow {
    animation: pulse-glow 3s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pulse-glow {
    0% { filter: drop-shadow(0 0 15px rgba(234, 179, 8, 0.4)); transform: scale(0.95); transform-origin: center; }
    100% { filter: drop-shadow(0 0 35px rgba(234, 179, 8, 0.9)); transform: scale(1.05); transform-origin: center; }
}

.cargo-box {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* ANIMACJA KINETYCZNA LINII */
@keyframes streamFlow {
    0% { stroke-dashoffset: 50; opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { stroke-dashoffset: 0; opacity: 0.3; }
}
.animate-stream {
    stroke-dasharray: 10, 20;
    animation: streamFlow 4s linear infinite;
}

/* Dostępność: ograniczenie animacji dla osób wrażliwych na ruch */
@media (prefers-reduced-motion: reduce) {
    .hub-glow, .animate-stream, .animate-bounce {
        animation: none !important;
    }
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }
}

/* ---- Google Translate: ukrycie natywnego paska/gadżetu (używamy własnych flag w nawigacji) ---- */
body {
    top: 0 !important;
}
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
#google_translate_element {
    display: none !important;
}
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
iframe.skiptranslate {
    display: none !important;
}

/* ---- Pasek certyfikatów (AEO, Miejsce Uznane) - płynne, nieskończone przewijanie ---- */
.certs-track {
    width: max-content;
    animation: certsScroll 28s linear infinite;
}
@keyframes certsScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.certs-fade {
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.certs-track:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .certs-track {
        animation: none;
    }
}

/* ---- Ikona tarczy przy linku Polityka prywatności / RODO - delikatna, ciągła rotacja ---- */
.rodo-icon-spin {
    display: inline-block;
    animation: rodoSpin 3.6s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes rodoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
a:hover .rodo-icon-spin,
a:focus-visible .rodo-icon-spin {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .rodo-icon-spin {
        animation: none;
    }
}

/* ---- Ostry tekst na zdjęciu w tle (np. nagłówek strony Oferta) - biała poświata wyostrzająca kontury liter ---- */
.hero-text-pop {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.75), 0 0 22px rgba(255, 255, 255, 0.45);
}