/**
 * --------------------------------------------------
 * 1. OPŠTI I OSNOVNI STILOVI
 * --------------------------------------------------
 */
body {
    padding-top: 0 !important;
    margin: 0 !important;
    line-height: 1.6;
    font-size: 1rem;
}

/* Resetovanje za w3- klase (kao što ste definisali, vraća na default browser stil) */
[class^="w3-"], [class*=" w3-"] {
    all: unset;
    display: revert;
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 0;
}

.text-shadow {
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

.card {
    border-radius: 0.6rem;
}

/**
 * --------------------------------------------------
 * 2. NAVIGACIJA (NAVBAR)
 * --------------------------------------------------
 */
.bg-navy-blue {
    /* Duboka, tamno plava boja. Popularan navy kod je #000080 */
    background-color: #000080 !important;
    /* Zaobljeni uglovi */
    border-radius: 10px;
    /* Osigurava da uglovi budu zaobljeni */
    overflow: hidden;
}

/* Stilizacija za hover dropdown (Vidljivost na hover) */
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block; /* Ključno za prikaz na hover */
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}



/* Opcionalno: Stil za link (parent) kada se pređe mišem */
.navbar-nav .dropdown:hover > .nav-link {
    color: rgba(255, 255, 255, 0.75); /* Svetlija boja teksta */
}


/**
 * --------------------------------------------------
 * 3. HEADERI I BANNERI (Pozadinske slike)
 * --------------------------------------------------
 */
header img {
    object-fit: cover;
    max-height: 400px;
}

header h1, header p {
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

.calculator-header {
    background-image: url('/images/page-images/koturovi.jpg');
    background-size: cover;
    background-position: center;
    min-height: 250px;
}
.vessel-header {
    background-image: url('/images/page-images/sud_pod_pritiskom.jpg');
    background-size: cover;
    background-position: center;
    min-height: 250px;
}
.cone-header {
    background-image: url('/images/page-images/konus11.jpg');
    background-size: cover;
    background-position: center;
    min-height: 250px;
}
.gear-header {
    /* Koristi se za zupčanike i BB header. Ostavljam obe definicije da ne bi nestale slike: */
    background-image: url('/images/page-images/zupcanici2.jpg');
    background-size: cover;
    background-position: center;
    min-height: 250px;
}
.personality-header {
    background-image: url('/images/page-images/licnost.jpg');
    background-size: cover;
    background-position: center;
    min-height: 250px;
}
.bb-header {
    background-image: url('/images/page-images/bb.jpg');
    background-size: cover;
    background-position: center;
    min-height: 250px;
}

/**
 * --------------------------------------------------
 * 4. KARUSEL I BLOG SADRŽAJ
 * --------------------------------------------------
 */
.post-content p {
    margin-bottom: 1.2rem;
}

.post-content img {
    margin: 1rem 0;
}

.carousel-img {
    min-height: 350px;
    max-height: 600px;
    object-fit: cover;
    width: 100%;
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    /* Dodatno za W3.CSS 'bottommiddle' efekat */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 80%;
}

.carousel-caption.text-black {
    color: #000;
}

.carousel-caption.bg-white {
    background-color: rgba(255, 255, 255, 0.75);
}

/* Sakrij caption na malim ekranima */
@media (max-width: 767.98px) {
    .carousel-caption.d-none.d-md-block {
        display: none !important;
    }
}

/**
 * --------------------------------------------------
 * 5. SPECIJALNI ELEMENTI (PERIODIC TABLE, TOOLTIP)
 * --------------------------------------------------
 */

/* Stilovi za element-box, kombinovani i ispravljeni */
.element-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    margin: 5px 0.25rem; /* Ispravljena i unificirana margina */
    border: 2px solid #28a745;
    border-radius: 0.5rem;
    background-color: #e9f7ef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 60px;
    text-align: center;
}

.element-symbol {
    font-size: 2.5rem;
    font-weight: bold;
    color: #28a745;
    line-height: 1;
}

.element-name {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: capitalize;
}

/* Stilovi za tooltip */
.tooltip {
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Stilovi za blinkanje */
.blinking-text {
    font-weight: bold;
    color: red;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* Dodatni font stilovi */
.fs-1 {
    font-size: 2.5rem !important;
    font-weight: bold;
}

/* Primorava linkove unutar navbar-dark da budu potpuno beli (umesto blago transparentnih) */
.navbar-dark .navbar-nav .nav-link {
    color: #FFFFFF !important; /* Puna bela boja */
    opacity: 1 !important;     /* Uklanja blagu transparentnost */
}
/* Takođe primorajte i brend logo da bude potpuno beo */
.navbar-dark .navbar-brand {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
/* Boja za dugme za login da ne bude bleda */
.navbar-dark .btn-outline-success {
    color: #fff !important;
    border-color: #fff !important;
}
.equal-img {
    height: 220px;       /* ili 200, 250 – po želji */
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}