/**
 * Header Sticky and Transparent Styles
 *
 * Handles two modes:
 * 1. Sticky header - stays fixed at top while content scrolls
 * 2. Transparent header - overlays on first section with semi-transparent background
 * 3. Combined - sticky transparent header with content scrolling underneath
 */

/* ============================================
   STICKY HEADER
   ============================================ */

/* CRITICAL FIX 2025-10-20: Higher specificity + !important to beat theme CSS that loads after */
/* ARCHITECTURE: Themes should NEVER override structural positioning (position, display, overflow) */
/* Only colors/fonts/decorations belong in theme files */
nav.site-header.sticky {
    position: -webkit-sticky !important;  /* Safari support */
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;  /* Higher than theme decorative elements (e.g., borders) */
    will-change: transform;
    backface-visibility: hidden;
}

/* ============================================
   TRANSPARENT HEADER
   ============================================ */

.site-header.transparent-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 9, 24, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Text shadows for better readability on transparent headers */
.site-header.transparent-header a,
.site-header.transparent-header .logo-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   COMBINED: STICKY + TRANSPARENT
   ============================================ */

.site-header.sticky.transparent-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* ============================================
   LAYOUT ADJUSTMENTS
   ============================================ */

/* When header is transparent, first section should start at top */
body.has-transparent-header .page-sections > .section-container:first-child {
    margin-top: 0 !important;
    padding-top: 120px !important; /* Add padding equal to header height */
}

/* Ensure first section content accounts for header height if needed */
body.has-transparent-header .page-sections > .section-container:first-child .section-content {
    position: relative;
    z-index: 1;
}
