/* assets/css/style.css */



/* Base header */

.site-header {

    background: rgba(255, 255, 255, 0);

    /* border-bottom: 1px solid #ddd; */

    position: sticky;

    z-index: 100;

    top: 0;

    padding: 1rem;

    margin-bottom: 20px;

    /* background-image: url(./bureau.jpg); */

}



.site-logo {

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

    text-decoration: none;

    color: #000000;

    font-size: 1.9em;
    line-height:0;
    font-weight: 600;

}



/* Transparent header variant */

.site-header.transparent {

    background: transparent;

    border-bottom: none;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 100;

}



.site-header.transparent .logo,

.site-header.transparent .nav-menu a {

    color: white;

}



/* Project header variant */

.site-header.project-header {

    position: sticky;

    top: 0;

    z-index: 100;

}



/* Page-specific body classes */

body.template-home .site-header {

    /* Home-specific styles */

}



body.template-project .site-header {

    /* Project-specific styles */

}



body.template-about .site-header {

    /* About-specific styles */

}



.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Menu Toggle Button */

.menu-toggle {

    display: flex;

    position: absolute;

    flex-direction: column;

    gap: 6px;

    background: none;

    border: none;

    padding: 0.5rem;

    z-index: 3000;

    position: relative;

    transition: all 0.3s ease;

    right: 0;

}



.menu-toggle span {

    display: block;

    width: 30px;

    height: 2px;

    background: #333;

    transition: all 0.3s ease;

    border-radius: 2px;

}



.menu-toggle:hover span {

    background: #666;

}



/* Menu Toggle Active State (X) */

.menu-toggle.active span:nth-child(1) {

    transform: rotate(45deg) translate(7px, 7px);

}



.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}



.menu-toggle.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -7px);

}



/* Fullscreen Menu Overlay */

.menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(10px);

    z-index: 1500;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.menu-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Menu Navigation */

.menu-nav {

    text-align: center;

}



.menu-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.menu-item {

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.5s ease;

}



/* Stagger animation for menu items */

.menu-overlay.active .menu-item:nth-child(1) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.1s;

}



.menu-overlay.active .menu-item:nth-child(2) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.2s;

}



.menu-overlay.active .menu-item:nth-child(3) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.3s;

}



.menu-overlay.active .menu-item:nth-child(4) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.4s;

}



.menu-link {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    color: #333;

    font-size: clamp(2rem, 5vw, 4rem);

    font-weight: 400;

    font-family: 'Averia Serif Libre', serif;

    transition: all 0.3s ease;

    position: relative;

    padding: 0.5rem 1rem;

}



.menu-link:hover {

    color: #666;

    transform: scale(1.05);

}



.menu-link.active {

    color: #000;

    font-weight: 600;

}



.menu-link.active::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 60%;

    height: 3px;

    background: #333;

    border-radius: 2px;

}



/* Disabled Link */

.menu-link.disabled {

    color: #ccc;

    cursor: not-allowed;

}



.menu-link.disabled:hover {

    transform: none;

}



.wip-label {

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    font-weight: 600;

    color: #999;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

}



/* Body scroll lock when menu is open */

body.menu-open {

    overflow: hidden;

}



/* Responsive */

@media (max-width: 768px) {

    .site-header {

        padding: 1rem 1.5rem;

        background: white;

        z-index: 0;

    }

    

    .menu-link {

        font-size: clamp(1.5rem, 8vw, 3rem);

    }

}



@media (max-width: 480px) {

    .site-logo {

        font-size: 1.2rem;

    }

    

    .menu-toggle span {

        width: 25px;

    }

}