/*=============================================

=                   Header                   

=============================================*/

.site-header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: var(--z-index-header);

    background-color: transparent;

    transition: background-color 0.4s ease;

}



.site-header.fixed {

    background-color: var(--neutral-very-dark-blue);

}



.observer-trigger {

    height: 1px;

    background-color: var(--neutral-very-dark-blue);

}



.header-container {

    max-width: var(--max-width-content);

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--spacing-md);

    padding: var(--spacing-sm);

}



.logo img {

    display: block; /* Prevents extra space below the image */

    height: 50px; /* Adjust height as needed */

    width: auto;

}



/*=============================================

=                 Navigation                  =

=============================================*/

.navbar {

    flex-grow: 1;

    display: flex;

    justify-content: center;

}



.nav-menu {

    list-style: none;

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

}



.nav-menu-item a {

    position: relative;

    display: inline-block;

    color: var(--neutral-text-off-white-color);

    text-decoration: none;

    font-size: 1.6rem;

    font-weight: 600;

    padding: 0.5rem 1rem;

    transition: color 0.3s;

}



.nav-menu-item a::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0.3rem;

    width: 0%;

    height: 2px;

    background-color: var(--secondary-color);

    transition: width 0.4s ease;

}



.nav-menu-item a:hover {

    color: var(--secondary-color);

}



.nav-menu-item a:hover::after {

    width: 100%;

}



/* Hide mobile-only items on desktop */

.mobile-only-item {

    display: none;

}



/*=============================================

=               Header Actions                =

=============================================*/

.header-right {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

}



.header-actions {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

}



.button-contact {

    background-color: var(--secondary-color);

    color: var(--neutral-pure-color);

}



.button-contact:hover {

    background-color: var(--secondary-color-dark); /* Darker shade on hover */

    box-shadow: var(--shadow-md);

}



.button-contact:active {

    background-color: var(--secondary-color);

    opacity: 0.8; /* Slightly transparent on click */

    box-shadow: inset var(--shadow-md); /* Inset shadow on click */

}



/* Language Dropdown */

.language-dropdown {

    position: relative;

    font-size: 1.6rem; /* Adjust font size to match image */

    font-family: var(--font-nunito);

    color: var(--neutral-text-color);

}



.language-select {

    background-color: var(--neutral-pure-color);

    display: flex;

    align-items: center;

    gap: var(--spacing-sm); /* Adjust gap to match image */

    border-radius: var(--border-radius-xxl);

    cursor: pointer;

    border: none;

    padding: var(--spacing-xs) var(--spacing-sm);

    box-shadow: var(--shadow-md);

}



#selected-lang-flag {

    width: 25px;

    height: auto;

    border-radius: 2px;

    object-fit: cover;

    border-radius: var(--border-radius-circle);

    box-shadow: var(--shadow-md);

}



.language-select .arrow {

    transition: transform 0.3s;

}



.language-dropdown.open .language-select .arrow {

    transform: rotate(180deg);

}



.language-options {

    display: none;

    position: absolute;

    top: calc(100% + 5px); /* Adjust top spacing */

    right: 0;

    background-color: var(--neutral-pure-color);

    border-radius: var(--border-radius-md);

    box-shadow: var(--shadow-lg);

    list-style: none;

    overflow: hidden;

    z-index: var(--z-index-dropdown);

    width: 100%;

    min-width: 80px;

    border: 1px solid var(--neutral-border-color); /* Add border */

}



.language-dropdown.open .language-options {

    display: block;

}



.language-options li {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: var(--spacing-sm);

    cursor: pointer;

    transition: background-color 0.3s;

    font-size: 1.6rem;

    font-weight: 600;

}



.option-lang-flag {

    max-width: 25px;

    height: auto;

    border-radius: var(--border-radius-circle);

    object-fit: cover;

    box-shadow: var(--shadow-md);

}



.language-options li:hover {

    background-color: var(--neutral-dominant-color);

}



.language-options li.active {

    background-color: var(--neutral-border-color);

    font-weight: bold;

}



/*=============================================

=              Hamburger & Mobile             =

=============================================*/



.hamburger-menu {

    display: none; /* Hidden on desktop */

    cursor: pointer;

    border: none;

    background: none;

    z-index: var(--z-index-header) + 1; /* Ensure it's above other elements */

}



.hamburger-menu .bar {

    display: block;

    width: 25px;

    height: 3px;

    margin: 5px auto;

    background-color: var(--neutral-pure-color);

    transition: all 0.3s ease-in-out;

}



/* Animate hamburger to 'X' */

.hamburger-menu.is-active .bar:nth-child(2) {

    opacity: 0;

}

.hamburger-menu.is-active .bar:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

}

.hamburger-menu.is-active .bar:nth-child(3) {

    transform: translateY(-8px) rotate(-45deg);

}



/*=============================================

=               Responsive Design             =

=============================================*/



@media (max-width: 992px) {

    .navbar {

        position: absolute;

        top: 100%;

        margin-top: var(--spacing-sm);

        width: 100%;

        justify-content: flex-end;

    }

    

    .nav-menu {

        display: none;

        flex-direction: column;

        background-color: var(--neutral-pure-color);

        box-shadow: var(--shadow-lg);

        margin-right: var(--spacing-md);

        border-radius: var(--border-radius-md);

        padding: var(--spacing-sm) 0;

        gap: 0;

        align-items: flex-start;

    }



    .nav-menu.is-active {

        display: flex;

    }

    

    .nav-menu-item {

        text-align: start;

        min-width: 150px;

    }



    .nav-menu-item:not(:last-child) a:hover {

        background-color: rgba(var(--secondary-color-rgb), 0.3);

    }



    .nav-menu-item a{

        display: block;

        margin: var(--spacing-xs) 0;

        font-size: 1.4rem;

    }

    

    .nav-menu-item:not(:last-child) a::after {

        margin: 0 var(--spacing-sm);

        left: 0;

        top: 0;

        width: 3px;

        height: 0%;

        transition: height 0.4s ease;

    }



    .nav-menu-item:not(:last-child) a:hover::after,

    .nav-menu-item:not(:last-child) a:active::after {

        width: 3px;

        height: 100%;

    }



    .nav-menu-item:last-child a::after {

        display: none;

    }



    .nav-menu-item:last-child a:hover::after {

        width: 0%;

    }



    .nav-menu-item a span {

        color: var(--secondary-dark-color);

        margin: var(--spacing-xs) var(--spacing-sm);

        padding: var(--spacing-xs) var(--spacing-sm);

    }

    

    

    /* Show mobile-only items */

    .mobile-only-item {

        display: block;

    }

    

    .mobile-only-item .button-contact {

        color: var(--neutral-pure-color);

        margin: var(--spacing-sm) var(--spacing-sm);

        padding: var(--spacing-xs) var(--spacing-sm);

    }



    .header-actions {

        margin-left: auto;

    }

    

    .desktop-button-contact {

        display: none; /* Hide desktop contact button */

    }



    .hamburger-menu {

        display: block;

    }

    

    .header-container {

        justify-content: space-between;

    }



    .language-select .arrow{

        font-size: 1.4rem;

    }

    

    .logo {

        flex-grow: 1;

    }



    .language-dropdown {

        margin-left: var(--spacing-sm); /* Add some spacing next to hamburger */

    }

}



@media (max-width: 480px) {

    .logo img {

        height: 30px; /* Slightly smaller logo for small screens */

    }

    

    .nav-menu-item {

        text-align: start;

    }



    .nav-menu-item a {

        font-size: 1.2rem; /* Smaller font size for mobile */

        padding: var(--spacing-xs) var(--spacing-sm); /* Adjust padding for mobile */

    }



    

    .language-select {

        padding: var(--spacing-xs) var(--spacing-sm);

        font-size: 1.2rem;

        gap: 0.5rem;

    }



    #selected-lang-flag {

        width: 18px;

    }



    .language-options {

        width: 70px;

        font-size: 1.2rem;

    }



    .language-options li {

        padding: var(--spacing-xs) var(--spacing-sm);

    }

}