/* ===========================================================
   HEADER / NAVBAR
===========================================================*/

.site-header{
    position:sticky;
    top:0;
    z-index:100;

    height:var(--header-height);

    display:flex;
    align-items:center;

    background:rgba(11, 18, 32, 0.92);
    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--color-border);
}

.site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

/* Logo */

.brand{
    display:flex;
    align-items:center;
    gap:var(--space-2);

    font-weight:var(--fw-bold);
    font-size:var(--fs-h3);
    letter-spacing:0.02em;
}

.brand img{
    height:32px;
    width:32px;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.brand-sub{
    font-size:9px;
    font-weight:var(--fw-medium);
    color:var(--color-text-muted);
    letter-spacing:0.06em;
    text-transform:uppercase;
}

/* Nav Links */

.main-nav{
    display:flex;
    align-items:center;
    gap:var(--space-2);
}

.main-nav a{
    display:flex;
    align-items:center;
    gap:4px;

    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    color:var(--color-text-muted);

    padding:8px 14px;
    border-radius:var(--radius-pill);
    border:1px solid transparent;

    transition:all var(--transition-fast);
}

.main-nav a:hover{
    color:var(--color-text);
}

/* Active Tab (gold border pill) */

.main-nav a.active{
    color:var(--color-gold);
    border-color:var(--color-gold);
    background:rgba(232, 170, 61, 0.08);
}

.main-nav a .nav-caret{
    width:10px;
    height:10px;
    opacity:0.7;
}

/* ===========================================================
   NAV DROPDOWNS (Tournament / More) — click-to-toggle so it
   works identically on desktop click and mobile tap (no hover
   dependency, since touch devices don't really "hover").
===========================================================*/

.nav-dropdown{
    position:relative;
}

.nav-dropdown-toggle{
    display:flex;
    align-items:center;
    gap:4px;

    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    color:var(--color-text-muted);
    font-family:inherit;

    background:none;
    border:1px solid transparent;
    padding:8px 14px;
    border-radius:var(--radius-pill);
    cursor:pointer;
    transition:all var(--transition-fast);
}

.nav-dropdown-toggle:hover{
    color:var(--color-text);
}

.nav-dropdown-toggle.active{
    color:var(--color-gold);
    border-color:var(--color-gold);
    background:rgba(232, 170, 61, 0.08);
}

.nav-dropdown-toggle .nav-caret{
    width:10px;
    height:10px;
    opacity:0.7;
    transition:transform var(--transition-fast);
}

.nav-dropdown.open .nav-dropdown-toggle .nav-caret{
    transform:rotate(180deg);
}

.nav-dropdown-menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:190px;

    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    padding:6px;
    z-index:110;
}

.nav-dropdown.open .nav-dropdown-menu{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.nav-dropdown-menu a{
    padding:9px 12px;
    border-radius:var(--radius-sm);
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    white-space:nowrap;
}

.nav-dropdown-menu a:hover{
    color:var(--color-text);
    background:var(--color-surface-hover);
}

.nav-dropdown-menu a.active{
    color:var(--color-gold);
}

/* Right Side Utils */

.header-utils{
    display:flex;
    align-items:center;
    gap:var(--space-4);
}

.icon-btn{
    color:var(--color-text-muted);
    display:flex;
}

.icon-btn:hover{
    color:var(--color-text);
}

.nav-toggle{
    display:none;
    font-size:1.5rem;
    color:var(--color-text);
}