@charset "UTF-8";
header{
    display: flex;
    position: absolute;
    background-color: white;
    z-index: 4;
    top: 0;
    width: 100%;
    height: 11vh;
    justify-content: right;
}
.logo-container{
    position: absolute;
    width: 15vw;
    left: 15vw;
    z-index: 3;
}
.logo{
    width: 100%;
}
nav{
    display: flex;
    position: relative;
    align-self: flex-end;
    z-index: 3;
}
.nav-links-container{
    display: flex;
    list-style: none;
    margin-right: 10vw;
    margin-bottom: 1vw;
    gap: 5vw;
    text-decoration: none;
}
a{
    text-decoration: none;
}
.link{
    font-size: 1.4vw;
    font-weight: 600;
    color: black;
}
.link:hover{
    color: #751b21;
}

/* Mobile portrait */
@media (max-width: 767px) and (orientation: portrait) {
    .logo-container{ 
        width: 150px; 
        left: 10%; 
    }
    .nav-links-container{
        flex-direction: column; 
        gap: 0.5rem; 
        margin-right: 4w; 
        margin-top: 0rem; 
        margin-bottom: 3.5vw;
    }
    .link{ 
        font-size: 4.5vw; 
    }
    header {
        height: 16vh;
    }
}

/* Mobile landscape */
@media (max-width: 767px) and (orientation: landscape) {
    header{
        height: 14vh;
    }
    .logo-container{ 
        width: 125px; 
        left: 8%; 
    }
    .nav-links-container{ 
        flex-direction: row; 
        gap: 1.5rem; 
        margin-right: 4vw; 
        margin-bottom: 0.7vw;
    }
    .link { 
        font-size: 2vw; 
    }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    .logo-container { 
        width: 180px; 
        left: 15%; 
    }
    .nav-links-container { 
        gap: 3rem; 
        margin-right: 3vw; 
    }
    .link { 
        font-size: 1.3vw; 
    }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    .logo-container { 
        width: 180px; 
        left: 5vw; 
    }
    .nav-links-container { 
        gap: 1rem; 
        margin-right: 7vw; 
    }
    .link { 
        font-size: 1.3vw; 
    }
}
@media (min-width: 767px) and (max-width: 768px){
    /* Optional touch-specific adjustments */
    .nav-links-container {
        gap: 1.5rem;
        margin-right: 1vw;
    }
    .logo-container {
        width: 180px;
        left: 5%;
    }
}

/* Desktop & Laptops */
@media (min-width: 1201px) and (max-width: 1680px) and (hover: hover) and (pointer: fine) {
    .logo-container { 
        width: 15vw; 
        left: 15vw; }
    .link { 
        font-size: 1.4vw; 
    }
}