/* ==== Varijable ==== */
:root {
    --boja-pozadine-gradijent: linear-gradient(270deg, #e0f7fa, #fefefe, #b2f2dd, #e0f7fa);
    --boja-tekst: #333;
    --boja-logo-pozadina: #004400;
    --boja-logo-hover: #006600;
    --boja-footer: #444;
    --font-glavni: Arial, sans-serif;
    --velicina-fonta-osnovna: 1rem;
    --velicina-logo-max: 400px;
    --radius-kontejner: 12px;
    --radius-dugme: 6px;
}

/* ==== Osnovni stilovi ==== */
html {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-glavni);
    color: var(--boja-tekst);
    text-align: center;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 2rem;
    background: var(--boja-pozadine-gradijent);
    background-size: 800% 800%;
    animation: pomjeriGradijent 30s ease infinite;
    background-attachment: scroll;
}

@keyframes pomjeriGradijent {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==== Pozadinski oblici ==== */
.blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.3;
    z-index: 0;
    filter: blur(60px);
    animation: plutaj 20s ease-in-out infinite;
    pointer-events: none;
}

.blob1 {
    width: 300px;
    height: 300px;
    background: #a0e9f7;
    top: -100px;
    left: -100px;
}

.blob2 {
    width: 250px;
    height: 250px;
    background: #b2f2dd;
    bottom: -80px;
    right: -80px;
}

@keyframes plutaj {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(30px); }
}

/* ==== Glavni kontejner ==== */
.welcome-container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: var(--velicina-logo-max);
    margin: 1.9rem auto 2rem auto;
    background: rgba(255, 255, 255, 0.85);
    padding: 2rem;
    border-radius: var(--radius-kontejner);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    animation: fadeIn 1.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==== Linkovi ==== */
.links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    max-width: var(--velicina-logo-max);
    margin: 0 auto;
}

.links a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 0;
    color: white;
    text-decoration: none;
    border-radius: var(--radius-dugme);
    font-weight: bold;
    font-size: var(--velicina-fonta-osnovna);
    transition: all 0.3s ease;
}

.links a.portal { background: #122855; }
.links a.nastava { background: #122855; }
.links a.forum { background: #6288a7; }
.links a.e-ucenje { background: #f27f22; }
.links a.youtube { background: #ff0033; }
.links a.viber { background: #7360f2; }
.links a.facebook { background: #0866ff; }
.links a.instagram { background: #E1306C; }
.links a.github { background: #333333; }
.links a.pomoc { background: #636363; }

.links a:hover {
    transform: scale(1.03);
    opacity: 0.92;
}

/* ==== Logo ==== */
.logo-image {
    width: 100%;
    max-width: var(--velicina-logo-max);
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem; /* razmak između loga i sadržaja */
}

/* ==== Footer ==== */
.copyright {
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
    color: var(--boja-footer);
    text-align: center;
    margin-top: -1rem;
    padding: 1rem 0;
}

/* ==== Responsivnost ==== */
@media (max-width: 420px) {
    .welcome-container {
        padding: 1rem;
        max-width: 300px;
    }

    .logo-image {
        max-width: 300px;
    }

    .links {
        grid-template-columns: 1fr 1fr;
    }

    .links a {
        font-size: 0.95rem;
        padding: 0.8rem 0;
    }
}

/* ==== Animacija ocjena ==== */
.rating {
    position: absolute;
    top: -30px;
    font-size: 22px;
    font-weight: bold;
    opacity: 0.85;
    animation: podigniOcjenu 7s linear forwards;
    user-select: none;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

@keyframes podigniOcjenu {
    0% {
        transform: translateY(-100vh) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) scale(0.8);
        opacity: 0;
    }
}

/* ==== Forma za odabir nastavnog sadržaja ==== */
.nastava-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* razmak između stavki forme (naslov, combobox, dugme) */
}

/* ComboBox */
.nastava-form select {
    width: 100%;
    max-width: 300px;
    padding: 0.8rem;
    font-size: var(--velicina-fonta-osnovna);
    border-radius: var(--radius-dugme);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background: #f8f9fa;
    color: var(--boja-tekst);
    border: 2px solid var(--boja-logo-pozadina);
}

.nastava-form select:focus {
    outline: none;
    border-color: var(--boja-logo-hover);
    box-shadow: 0 0 5px rgba(0, 100, 0, 0.4);
}

/* Dugme "Otvori nastavni sadržaj" */
.nastava-form button {
    background: var(--boja-logo-pozadina);
    color: white;
    font-weight: bold;
    border: 2px solid var(--boja-logo-pozadina);
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    padding: 0.8rem;
    border-radius: var(--radius-dugme);
    transition: all 0.3s ease;
}

.nastava-form button:hover {
    background: var(--boja-logo-hover);
    transform: scale(1.03);
}

/* ==== Usklađivanje visine boxa na stranici nastava.html ==== */
body.nastava-stranica .welcome-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2rem; /* razmak između loga i gornjeg ruba boxa (isto kao index.html) */
}

/* ==== Mobilni prikaz ==== */
@media (max-width: 768px) {
    /* Padding isti za obje stranice */
    .welcome-container {
        padding: 1rem;
    }

    /* Naslov unutar forme */
    body.nastava-stranica h2 {
        margin-top: 0.5rem;  /* razmak između loga i naslova */
        margin-bottom: 0.5rem; /* razmak između naslova i prvog select-a */
    }

    /* Gap u formi */
    body.nastava-stranica .nastava-form {
        gap: 0.5rem;
    }
}

/* Stil za h2 na stranici nastava.html */
.nastava-stranica h2 {
    margin-bottom: 1.25rem;
    color: #122855;
}

/* ==== Stil za onemogućene (disabled) ComboBox elemente dok razred nije izabran ==== */
.nastava-form select:disabled {
    background-color: #eee;
    color: #888;
    cursor: not-allowed;
    border-color: #ccc;
}