/* |--------------------------------------------------------------------------
| HEADER STYLES
|--------------------------------------------------------------------------
| Implements the fixed, responsive header with precise, independent alignment.
|
| FINAL ALIGNMENT STRATEGY (Desktop only, > 64em):
| 1. Top Row: Flex container. Nav is centered with auto margins; Social Icons are pushed right with margin-left: auto.
| 2. Below Top Row: Branding (centered via parent's align-items: center).
*/

/* |--------------------------------------------------------------------------
| SPLASH SCREEN STYLES (NEW)
|--------------------------------------------------------------------------
*/
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use your dark background color for a seamless transition */
    background-color: var(--color-process-black, #020202); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it covers everything */
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-out, visibility 1s ease-out; /* Smooth fade-out transition */
}

/* Class added by JavaScript to initiate the fade-out */
.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    /* Delay visibility hidden until opacity transition is complete */
    transition-delay: 1s; 
}

.splash-content {
    text-align: center;
    /* Optional: A slight movement while fading adds drama */
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.splash-screen.hidden .splash-content {
    /* Optional: Small upward shift as it fades for a subtle effect */
    transform: translateY(-20px); 
    opacity: 0;
}

.splash-logo {
    display: block;
    width: 200px; /* Larger size for full screen */
    height: auto;
    margin: 0 auto 1.5rem;
    /* Reusing header filter for consistency */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

.splash-branding-text {
    /* Reusing your branding text styles for consistency */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.splash-branding-text .title-top-line {
    font-family: var(--font-heading);
    color: var(--color-white); 
    font-size: 2rem; 
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.splash-branding-text .title-bottom-line {
    font-family: var(--font-heading);
    color: var(--color-primary-red); 
    font-size: 2.5rem; 
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}


/* --- BASE HEADER CONTAINER --- */
.header {
    position: fixed; /* Fixed to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    
    background-image: var(--site-background-url);
    background-color: var(--color-process-black); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    
    color: var(--color-white);
    z-index: 1000;
    border-bottom: 4px solid var(--color-primary-red); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    /* CRITICAL: Must be relative to anchor the branding/toggle elements (though they are in flow on desktop) */
    position: relative; 
    
    /* Mobile/Default Layout: Flex for Logo-Text-Toggle flow */
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    
    height: var(--header-height-mobile); 
    padding: var(--padding-sm) var(--padding);
}

/* --- 1. BRANDING LINK --- */
.header-branding-link {
    display: flex;
    align-items: center; 
    flex-shrink: 0; 
    text-decoration: none;
    color: inherit;
    z-index: 25; 
    /* On mobile, auto margin pushes the menu toggle to the far right */
    margin-right: auto; 
    gap: 0.75rem; 
    position: static;
}

.header-logo {
    width: 100px; 
    height: 100px; 
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
}

.header-text-block {
    display: flex;
    flex-direction: column; 
    line-height: 1.1;
    text-align: left; 
    white-space: nowrap;
}

.title-top-line {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem; 
    color: var(--color-white); 
}

.title-bottom-line {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.35rem; 
    color: var(--color-primary-red);
}


/* --- 2. MENU TOGGLE (Mobile Only) --- */
.menu-toggle {
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 0;
    display: block; /* Visible on mobile */
    flex-shrink: 0;
    z-index: 20;
}


/* --- 3. DESKTOP MENU CONTAINER (Nav & Social) --- */

/* Hiding the new desktop elements on mobile/default state */
.header-top-row {
    display: none; 
}

.header-menu-container {
    display: none; /* Hidden by default on mobile */
}

/* Base style for social icons */
.social-icons-header {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.25rem;
}

.social-icons-desktop {
    display: none; /* Hidden by default, shown/positioned on desktop */
}

/* Update this inside @media (min-width: 64em) */
.header-nav ul {
    display: flex;
    /* 1. Prevent the items from ever dropping to a second line */
    flex-wrap: nowrap;
    
    /* 2. Make the text content stay on one line (prevent specific words from wrapping) */
    white-space: nowrap;
    
    /* 3. RESPONSIVE GAP:
       Instead of a fixed 1.25rem, use clamp().
       - Minimum: 0.5rem (very tight space)
       - Preferred: 1.5vw (1.5% of the viewport width - grows with screen)
       - Maximum: 1.5rem (stops growing at wide screens)
    */
    gap: clamp(0.5rem, 1.5vw, 1.5rem);
    
    /* 4. Safety net: If it STILL runs out of room, center it */
    justify-content: center;
    width: 100%;
}

.nav-rune-link {
    font-family: var(--font-heading);
    font-size: 0.85rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
}

.nav-rune-link:hover,
.nav-rune-link.active {
    color: var(--color-primary-red);
    border-color: var(--color-primary-red);
}

.social-icons-header a {
    color: var(--color-white);
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.2s;
}
.social-icons-header a:hover {
    color: var(--color-primary-red);
}


/* --- DESKTOP MEDIA QUERY (PRECISE ALIGNMENT) --- */
@media (min-width: 64em) {
    
    /* 1. HEADER CONTENT (The main centered container) */
    .header-content {
        /* CRITICAL: Use Flex column to stack the top row (Nav/Social) and the branding link */
        display: flex; 
        flex-direction: column; 
        align-items: center; /* Centers the branding horizontally */
        
        height: var(--header-height-desktop);
        padding: var(--padding-sm) var(--padding); 
        position: relative; 
    }
    
    /* 2. TOP ROW: NAVIGATION AND SOCIAL ICONS */
    .header-top-row {
        /* CRITICAL: Must be visible on desktop */
        display: flex;
        width: 100%; /* Spans the entire 1200px width */
        height: 2.5rem; 
        
        /* ALIGNMENT: Uses Flex to position children */
        justify-content: flex-start; /* Important for margin: auto to work effectively */
        align-items: center; 
        
        margin-bottom: 0.5rem; 
    }
    
    /* 2a. NAVIGATION (Perfectly Centered) */
    .header-menu-container {
        display: block; 
        /* CRITICAL FIX 1: Use auto margins to perfectly center the navigation. This uses space equally on the left and right. */
        margin: 0 auto;
        
        /* Ensure no lingering positioning issues */
        position: static;
        transform: none; 
        z-index: 50; 
    }
    
    /* 2b. SOCIAL ICONS (Pinned to the Far Right) */
    .social-icons-header.social-icons-desktop {
        /* CRITICAL FIX 2: This margin pushes the social icons block all the way to the far right edge of the 1200px container. */
        margin-left: auto; 
        
        display: flex; /* Make the icons visible */
        gap: 1rem;
        
        /* Reset any positioning that might interfere with the Flex layout */
        position: static; 
        transform: none; 
        
        z-index: 50; 
    }
    
    /* 3. BRANDING LINK */
    .header-branding-link {
        position: static; 
        transform: none;
        
        display: flex; 
        align-items: center;
        gap: 1rem;
        
        z-index: 15; 
        margin-right: 0; 
    }
    
    .header-logo {
        width: 160px; 
        height: 160px; 
    }
    
    .title-top-line {
        font-size: 1.95rem; 
    }

    .title-bottom-line {
        font-size: 2.6rem; 
    }
    
    /* Hide the mobile toggle on desktop */
    .menu-toggle {
        display: none; 
    }
}
/* --- MOBILE MENU (opened by the ☰ button, see assets/js/index.js) --- */
@media (max-width: 63.99em) {
    /* Let the branding shrink and wrap so the ☰ button always stays on screen */
    .header-branding-link {
        flex-shrink: 1;
        min-width: 0;
    }

    .header-text-block {
        white-space: normal;
    }

    .menu-toggle {
        margin-left: 0.75rem;
    }

    .header.menu-open .header-top-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem var(--padding, 1rem) 1.25rem;
        background-color: var(--color-process-black, #020202);
        border-bottom: 2px solid var(--color-primary-red);
        z-index: 100;
    }

    .header.menu-open .header-menu-container {
        display: block;
        width: 100%;
    }

    .header.menu-open .header-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .header.menu-open .nav-rune-link {
        display: inline-block;
        font-size: 1rem;
        padding: 0.6rem 0;
    }

    .header.menu-open .social-icons-desktop {
        display: flex;
    }
}

@media (max-width: 30em) {
    .header-logo {
        width: 64px;
        height: 64px;
    }

    .title-bottom-line {
        font-size: 1.1rem;
    }
}

/* --- DESKTOP MENU ---
   "•" separators between items (these used to be the default list bullets,
   which overlapped the text). Original text size; the short menu labels
   (Home, Events, ...) fit beside the social icons at every desktop width. */
@media (min-width: 64em) {
    .header-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        gap: clamp(0.5rem, 1vw, 1rem);
    }

    .header-nav li {
        display: flex;
        align-items: center;
    }

    .header-nav li + li::before {
        content: "•";
        color: var(--color-white);
        margin-right: clamp(0.5rem, 1vw, 1rem);
    }
}