/* =========================================================
   Učionica CSS — full file
   Mobile menu fix, consistent overlay, submenus above header
   ========================================================= */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html, body { height:100%; width:100%; }

/* body: no hardcoded image here — PHP + JS will set background-image */
body {
    margin: 0;
    font-family: sans-serif;
    background-color:#000 no-repeat center center fixed; ; /* fallback */
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-image 0.8s ease-in-out; /* smooth bg change */
    color: #fff;
}
.page-wrapper { min-height:100vh; display:flex; flex-direction:column; }

/* ===== Header ===== */
header {
    width:100%; background: rgba(0,0,0,0.6); color:#fff;
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; position:relative; z-index:1000;
}

header .logo { display:flex; align-items:center; gap:10px; }
header .logo img { height:72px; width:auto; display:block; max-width:300px; }
header .logo span { font-size:1.4rem; font-weight:bold; letter-spacing:.3px; }

/* Header logo link color fix */
header .logo a,
header .logo a:visited,
header .logo a:hover,
header .logo a:active {
    color: #fff; /* or any color you want */
    text-decoration: none; /* remove underline */
}

/* Logo text styling */
.logo-text a {
    color: inherit;
    font-weight: bold;
    text-decoration: none;
}

/* ===== Links styling ===== */
a {
    color: #b9d7ff;       /* light blue that fits your theme */
    text-decoration: none; /* remove underline */
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: #ffffff;        /* highlight on hover/focus */
    text-decoration: underline; /* optional underline on hover */
}

/* ===== Hamburger (mobile) ===== */
.hamburger, #hamburger {
    display:none; width:30px; height:22px; position:relative; cursor:pointer;
}
.hamburger div,#hamburger div { position:absolute; left:0; width:100%; height:3px; background:#fff; border-radius:2px; transition: transform .3s, top .3s, opacity .3s; }
.hamburger div:nth-child(1),#hamburger div:nth-child(1) { top:0; }
.hamburger div:nth-child(2),#hamburger div:nth-child(2) { top:9px; }
.hamburger div:nth-child(3),#hamburger div:nth-child(3) { top:18px; }
.hamburger.open div:nth-child(1),#hamburger.open div:nth-child(1) { transform: rotate(45deg); top:9px; }
.hamburger.open div:nth-child(2),#hamburger.open div:nth-child(2) { opacity:0; }
.hamburger.open div:nth-child(3),#hamburger.open div:nth-child(3) { transform: rotate(-45deg); top:9px; }

/* ===== Navigation ===== */
nav { z-index:1100; }
nav ul { list-style:none; display:flex; gap:20px; }
nav ul li { position:relative; }
nav ul li a { color:#fff; text-decoration:none; padding:6px 10px; display:flex; align-items:center; justify-content:space-between; white-space:nowrap; transition: color .2s, background .2s; }
nav ul li a:hover { color:#b9d7ff; }
nav ul li.has-dropdown > a::after { content:''; border: solid currentColor; border-width:0 2px 2px 0; display:inline-block; padding:3px; margin-left:6px; transform:rotate(-45deg); transition:transform .2s; }

/* Desktop hover dropdowns */
@media (min-width:769px) {
    nav > ul { display:flex; position:static; background:transparent; }
    nav ul li ul { display:none; position:absolute; top:100%; left:0; background: rgba(0,0,0,0.85); min-width:200px; flex-direction:column; border-radius:8px; padding:8px 0; box-shadow:0 8px 20px rgba(0,0,0,0.35); }
    nav ul li:hover>ul { display:flex; }
    nav ul li ul li a { padding:8px 12px; width:100%; }
    nav ul li ul li a:hover { background: rgba(255,255,255,0.08); }
    nav ul li ul li.has-dropdown:hover>ul { display:flex; top:0; left:100%; }
    nav ul li.has-dropdown:hover>a::after { transform:rotate(-45deg); }
}

/* Mobile slide-down menu */
@media (max-width:768px) {
    .hamburger,#hamburger { display:block; }
    nav>ul { display:none; flex-direction:column; position:absolute; top:60px; left:0; right:0; background: rgba(0,0,0,0.92); padding:12px; border-radius:0 0 12px 12px; backdrop-filter:blur(2px); }
    nav>ul.active, body.nav-open nav>ul { display:flex; }

    nav li a { color:#fff; padding:10px 8px; }

    nav ul li ul {
        display:none !important;
        position: relative;
        background: rgba(0,0,0,0.85);
        margin:6px 0 6px 12px;
        padding:6px 0;
        border-left:2px solid rgba(255,255,255,0.15);
        border-radius:6px;
        z-index:1200;
    }

    nav ul li.open>ul { display:flex !important; flex-direction:column; }
    nav ul li.open>a::after { transform:rotate(45deg); }
}

/* ===== Content Wrapper ===== */
.content-wrapper { max-width:1000px; margin:20px auto; padding:20px 24px; background:rgba(0,0,0,0.6); border-radius:12px; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.35); }
@media (max-width:768px){.content-wrapper{margin:16px;padding:16px;}}
.content-wrapper h1,h2,h3{margin-bottom:10px;line-height:1.25;}
.content-wrapper p{margin:10px 0;}

/* ===== Footer ===== */
footer{background:rgba(0,0,0,0.65);color:#fff;text-align:center;padding:14px 10px;margin-top:auto;border-top:1px solid rgba(255,255,255,0.12);}
footer .footer-content{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.95rem;}
footer .penguin-icon{font-size:1.1rem;}

/* ====== Contact Form Styling ====== */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px;
    margin-top: 20px;
}

.contact-form label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    font-size: 14px;
    color: white; /* match content wrapper */
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 5px;
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #0077cc;
    outline: none;
}

.contact-form button {
    background: #0077cc;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.contact-form button:hover {
    background: #005fa3;
}

.success {
    color: limegreen;
    font-weight: bold;
}

.error {
    color: red;
    font-weight: bold;
}