/* -- hide technical buttons -- */
input[type="radio"] {
    display: none;
}

/* -- navbar styling -- */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}

.nav-btn {
    padding: 5px 20px;
    transition: background 0.2s ease;
    cursor: pointer;
    border-bottom: 2px solid #767676;
    gap: 8px;
}

.nav-btn:hover {
    border-bottom: 2px solid #000000;
}

/* -- Toggle button -- */
/* -- hide all carousels first -- */
.carousel-wrapper {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* -- When a radio is checked, find the matching carousel and display it -- */
#show-carousel-1:checked ~ .content-area #carousel-1,
#show-carousel-2:checked ~ .content-area #carousel-2,
#show-carousel-3:checked ~ .content-area #carousel-3,
#show-carousel-4:checked ~ .content-area #carousel-4 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.cacontainer:has(input[type="radio"]:checked) ~ .content-area #carousel-1,
.cacontainer:has(#show-carousel-1:checked) .content-area #carousel-1 {
    opacity: 1;
    visibility: visible;
    height: auto;
}
.cacontainer:has(input[type="radio"]:checked) ~ .content-area #carousel-2,
.cacontainer:has(#show-carousel-2:checked) .content-area #carousel-2 {
    opacity: 1;
    visibility: visible;
    height: auto;
}
.cacontainer:has(input[type="radio"]:checked) ~ .content-area #carousel-3,
.cacontainer:has(#show-carousel-3:checked) .content-area #carousel-3 {
    opacity: 1;
    visibility: visible;
    height: auto;
}\.cacontainer:has(input[type="radio"]:checked) ~ .content-area #carousel-4,
.cacontainer:has(#show-carousel-4:checked) .content-area #carousel-4 {
    opacity: 1;
    visibility: visible;
    height: auto;
}