/* =========================
   OPERULA — HEADER (FINAL)
   ========================= */

.site-header{
    width:100%;
    background-color:var(--bg-card);
    border-bottom:1px solid var(--border);
    position: static; /* Static invece di relative per essere completamente nel flusso */
    z-index: 10;
    margin-bottom: 0;
    /* Rimuovi qualsiasi posizionamento che possa interferire */
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

/* layout */
.header-inner{
    max-width:1200px;
    margin:0 auto;
    padding:1.6rem 2rem;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:2rem;
}

.header-logo{
    grid-column:1;
}

.header-nav{
    grid-column:2;
    justify-self:center;
}

.user-menu-wrapper,
.header-login-button{
    grid-column:3;
    justify-self:end;
}

/* LOGO */
.header-logo{
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:0.22em;
    color:var(--text);
    text-decoration:none;
    white-space:nowrap;
    display: flex;
    align-items: center;
}

.header-logo-img{
    height: auto;
    max-height: 48px;
    width: auto;
    max-width: 240px;
    display: block;
}

.header-logo .brand-logo{
    display: block;
    width: auto;
    height: 48px;
    color: var(--text);
}

.header-logo-light{
    display: none; /* Default: hidden */
}

.header-logo-dark{
    display: none; /* Default: hidden */
}

.header-logo-text{
    display: none;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--text);
}

/* Light theme: show light logo, hide dark logo and text */
:root[data-theme="light"] .header-logo-light,
:root:not([data-theme]) .header-logo-light {
    display: block !important;
}

:root[data-theme="light"] .header-logo-dark,
:root:not([data-theme]) .header-logo-dark {
    display: none !important;
}

:root[data-theme="light"] .header-logo-text,
:root:not([data-theme]) .header-logo-text {
    display: none !important;
}

/* Dark theme: hide light logo, show dark logo if exists, otherwise show text */
:root[data-theme="dark"] .header-logo-light {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

:root[data-theme="dark"] .header-logo-dark {
    display: block !important;
}

/* If dark logo doesn't exist, show text instead */
:root[data-theme="dark"] .header-logo-text {
    display: inline-block !important;
}

/* Hide text if dark logo exists */
:root[data-theme="dark"] .header-logo:has(.header-logo-dark) .header-logo-text {
    display: none !important;
}

/* MENU */
.header-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.8rem;

    font-family:'Inter', sans-serif;
    font-size:0.95rem;        /* leggermente più grande */
    font-weight:600;          /* SemiBold */
    letter-spacing:0.12em;
    text-transform:uppercase;
}

/* menu links */
.site-header .header-nav a,
.site-header .header-nav a:link,
.site-header .header-nav a:visited{
    color:var(--text);
    text-decoration:none;
}

.site-header .header-nav a:hover{
    color:var(--accent);
}

/* GOLD SEPARATOR */
.menu-separator{
    width:1px;
    height:18px;
    background:var(--accent);
}

/* LOGIN BUTTON — Stile uniformato con pulsante ricerca */
.site-header .header-login-button,
.site-header .header-login-button:link,
.site-header .header-login-button:visited,
.site-header .header-login-button:hover,
.site-header .header-login-button:active{
    font-family:'Inter', sans-serif;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;

    padding:0.9rem 1.8rem;
    border-radius:999px;
    border:none;
    background:var(--accent);
    color:#fff !important;
    text-decoration:none !important;
    cursor:pointer;
    transition:background 0.2s ease;
    display:inline-block;
}

.site-header .header-login-button:hover{
    background:#3a3a3a;
}

/* USER MENU */
.user-menu-wrapper {
    position: relative;
}

.user-avatar-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.user-avatar-btn:hover {
    transform: scale(1.05);
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50%;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
    display: none;
    z-index: var(--z-dropdown, 1000);
    overflow: hidden;
}

.user-menu-dropdown.show {
    display: block;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.user-menu-item:hover {
    background: #f8f9fa;
}

.user-menu-item span {
    font-size: 1rem;
}

.user-menu-logout {
    border-top: 1px solid var(--border);
    color: #dc3545;
}

.user-menu-logout:hover {
    background: #fee;
}

/* RESPONSIVE */
@media (max-width:768px){
    .header-inner{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        row-gap:1.2rem;
        text-align:center;
    }

    .header-logo{
        grid-column:1;
        grid-row:1;
        justify-self:center;
    }

    .header-nav{
        grid-column:1;
        grid-row:2;
        justify-self:center;
        flex-wrap:wrap;
        gap:1.2rem;
    }

    .user-menu-wrapper,
    .header-login-button{
        grid-column:1;
        grid-row:3;
        justify-self:center;
    }
}