/* Päävalikon tyyli */
.navv2-container {
    background-color: transparent; /* Läpinäkyvä alussa tietokoneella */
    box-shadow: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.50s ease, box-shadow 0.50s ease; /* Remove height transition */
    height: 90px; /* Fixed height */
}

.navv2-container.scrolled {
    background-color: #343a40; /* Tumma tausta scrollatessa */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	transition: height 0.5s ease; /* Remove height transition */
    height: 75px; /* Same height to avoid jumping */
}

.navv2-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.navv2-menu li {
    margin: 0 20px;
}

.navv2-menu a {
    text-decoration: none;
    font-size: 18px;
	font-weight: bold;
    padding: 8px 15px;
    border-radius: 5px;
    color: white !important; /* Force white text */
    transition: color 0.3s ease, background-color 0.3s ease;
    background-color: transparent;
}

.navv2-menu a:hover,
.navv2-menu a:focus {
    color: white !important;
    background-color: #ad4b24;
}

.navv2-menu a.navv2-active {
    background-color: #ad4b24 !important; /* Override styles.css */
    color: white !important;
}

.navv2-menu a:active {
    color: white !important;
    background-color: #ad4b24;
}

/* Burger-ikonin tyyli */
.navbar-toggler {
    border: none;
    transition: transform 0.3s ease;
    height: 100%; /* Täyttää palkin korkeuden */
    display: flex;
    align-items: center; /* Keskittää ikonin pystysuunnassa */
    justify-content: center; /* Varmistaa keskityksen */
    padding: 0; /* Poistaa pehmusteet */
    line-height: 1; /* Varmistaa tasaisen keskityksen */
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none; /* Poistetaan tumma reunus */
}

.navbar-toggler[aria-expanded="true"] {
    transform: rotate(90deg); /* Ikoni kiertää 90 astetta, kun valikko on auki */
}

.navbar-toggler[aria-expanded="false"] {
    transform: rotate(0deg); /* Palaa alkuperäiseen, kun valikko suljetaan */
}

/* Mukautettu burger-ikoni valkoisena */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobiilinäkymän valikko */
@media (max-width: 768px) {
    .navbar-collapse {
        margin: 0;
        padding: 0;
        width: 100%;
        position: absolute; /* Asetetaan absoluuttiseksi */
        top: 75px; /* Align with bottom of header */
        left: 0;
        background-color: #2c3034; /* Match menu background */
        max-height: calc(100vh - 65px); /* Prevent overflow */
        overflow-y: auto; /* Allow scrolling for long menus */
        z-index: 999; /* Ensure visibility */
    }

    .navv2-container {
        background-color: #343a40; /* Aina tumma mobiilissa */
        height: 75px; /* Fixed height */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Varjo aina näkyvissä */
    }

    .navv2-menu {
        background-color: #2c3034; /* Vaalea tausta */
        margin: 0;
        padding: 0;
        width: 100%;
        left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* Hento valkoinen viiva */
        flex-direction: column; /* Stack items vertically */
    }

    .navv2-menu li {
        margin: 5px 0;
        text-align: left;
        justify-content: start;
        width: 100%; /* Full width for touch targets */
    }

    .navv2-menu li:last-child {
        margin-bottom: 10px; /* Lisää rakoa viimeisen linkin ja alareunan väliin */
    }

    .navv2-menu a {
        display: block;
        padding: 8px 10px; /* Symmetriset pehmusteet */
        font-size: 16px;
        text-align: left;
        width: 100%; /* Taustaväri kattaa koko leveyden */
    }

    /* Poistetaan Bootstrapin keskitetty tasaus */
    .navv2-menu.navbar-nav {
        justify-content: start;
        text-align: left;
    }

    .navv2-menu .nav-item {
        text-align: left;
    }

    .navv2-menu .nav-link {
        text-align: left;
        padding: 8px 10px; /* Yhtenäiset pehmusteet */
        width: 100%; /* Taustaväri kattaa koko leveyden */
    }
}

/* Ensure scroll accounts for fixed header height */
html {
    scroll-padding-top: 80px; /* Match header height */
}

/* Main content padding to avoid overlap with fixed header */
.main-container {
    padding-top: 80px; /* Match header height */
}

/* Desktop styles for header */
@media (min-width: 768px) {
    header {
        height: 100px; /* Match navv2-container height */
        position: fixed;
        width: 100%;
        z-index: 1000;
        transition: background-color 0.3s ease;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    header {
        height: 90px; /* Match navv2-container height */
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
}

/* Navigation link styles */
nav ul li a {
    color: white; /* Default link color */
    transition: color 0.3s ease, background-color 0.3s ease;
}

nav ul li a:hover,
nav ul li a:focus {
    color: white; /* Ensure hover/focus stays white */
}

nav ul li a.active {
    background-color: rgba(255, 255, 255, 0.2); /* Highlight active link */
    color: white; /* Ensure active link text stays white */
}

/* Prevent black text on click */
nav ul li a:active {
    color: white; /* Force white text on click */
}