/*
 Theme Name: Rezanac Restaurant
 Author: Ilya
 Description: A restaurant theme built with Bootstrap
 Version: 1.0
*/

/* Hero Video Sekcija sa Pozadinom */
.hero-video {
    margin-top: 20px; /* Razmak između navbar-a i sekcije */
    margin-bottom: 20px; /* Razmak ispod sekcije */
    position: relative; /* Potrebno za apsolutno pozicioniranje teksta preko videa */
    background-image: url('images/hero-image.webp'); /* Postavi pozadinu */
    background-size: cover; /* Pokrij celu sekciju */
    background-position: center; /* Centriraj sliku */
    background-repeat: no-repeat; /* Bez ponavljanja */
    min-height: 600px; /* Minimalna visina sekcije */
    padding: 60px 0; /* Povećaj padding za prozračniji izgled */
}

/* Dodaj zamućenje pozadine preko pseudo-elementa */
.hero-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Tamniji sloj za bolji kontrast */
    backdrop-filter: blur(8px); /* Jače zamućenje za "bolji" izgled */
    z-index: 1; /* Ispod sadržaja */
}

/* Osiguraj da sadržaj bude iznad zamućenja */
.hero-video .container {
    position: relative;
    z-index: 2; /* Iznad zamućenja */
}

/* Smanji veličinu videa */
.hero-video-player {
    width: 100%; /* Video popunjava svoju kolonu */
    max-width: 450px; /* Smanji maksimalnu širinu videa za prozračniji izgled */
    height: auto; /* Održava proporcije */
    border-radius: 15px; /* Veći zaobljeni uglovi */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Jača senka za 3D efekat */
}

/* Prilagodi veličinu videa na manjim ekranima */
@media (max-width: 768px) {
    .hero-video-player {
        max-width: 90%; /* Povećaj širinu na manjim ekranima */
        margin: 0 auto; /* Centriraj video */
    }
    .hero-video {
        min-height: 900px; /* Povećaj visinu sekcije na manjim ekranima jer su elementi složeni vertikalno */
        padding: 40px 0; /* Smanji padding na mobilnim uređajima */
    }
}

/* Text Overlay Styling */
.hero-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Jača senka za bolju čitljivost */
}

.hero-caption h1 {
    font-size: 2.5rem; /* Veliki naslov */
    font-weight: bold;
    margin-bottom: 15px;
}

.hero-caption p {
    font-size: 1.2rem; /* Veći paragraf */
    font-weight: 300; /* Lakši font za kontrast */
}

/* Prilagodi tekst na manjim ekranima */
@media (max-width: 576px) {
    .hero-caption h1 {
        font-size: 1.8rem; /* Smanji naslov na mobilnim uređajima */
    }
    .hero-caption p {
        font-size: 1rem; /* Smanji paragraf */
    }
}

/* Stilizovanje tekstualnih informacija */
.restaurant-info {
    background-color: rgba(255, 255, 255, 0.5); /* Veća providnost (samo 50% neprozirnosti) */
    padding: 25px;
    border-radius: 15px; /* Veći zaobljeni uglovi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Suptilna senka */
    max-width: 450px; /* Smanji širinu za prozračniji izgled */
    margin: 0 auto; /* Centriraj unutar svoje kolone */
}

/* Prilagodi tekstualni deo na manjim ekranima */
@media (max-width: 768px) {
    .restaurant-info {
        margin-top: 30px; /* Dodaj veći razmak između videa i teksta na mobilnim uređajima */
        max-width: 90%; /* Povećaj širinu na mobilnim uređajima */
    }
}

.restaurant-info p {
    margin-bottom: 12px; /* Veći razmak između paragrafa */
    font-size: 1rem;
    color: #333;
    line-height: 1.6; /* Poboljšaj čitljivost */
}

.restaurant-info .highlight-text {
    color: #d9534f; /* Crvena boja za istaknuti tekst */
    font-weight: 500;
}

.restaurant-info .emoji {
    font-size: 1.5rem; /* Veći emoji */
}

.restaurant-info .footer-text {
    font-size: 0.9rem;
    color: #555; /* Tamnija siva za bolji kontrast */
    margin-top: 15px;
}

/* Adjust navbar background and padding */
.restaurant-header .navbar {
    background-color: rgba(255, 255, 255, 0.5); /* Veća providnost za navbar */
    padding: 15px 0; /* Vertical padding for better spacing */
    backdrop-filter: blur(8px); /* Jače zamućenje za navbar */
}

/* Style the navigation links */
.navbar-nav .nav-link {
    color: #d9534f; /* Crvena boja za linkove */
    font-weight: 500; /* Slightly bold for emphasis */
    padding: 10px 15px; /* Better spacing for links */
}

.navbar-nav .nav-link:hover {
    color: #c9302c; /* Darker shade on hover */
}

/* Ensure the container has proper spacing */
.container.mt-4 {
    margin-top: 2rem; /* Space above the main content */
}