/* ============================================
   INDEX PAGE ONLY - Full background with parallax
   ============================================ */

/* Apply background to entire page on index only */
body:has(.index-hero) {
    background-image: url('../assets/index_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Parallax effect */
}

/* Make main container transparent to show background */
body:has(.index-hero) .md-main {
    background: transparent;
}

body:has(.index-hero) .md-content {
    background: transparent;
}

body:has(.index-hero) .md-content__inner {
    background: transparent;
}

/* ============================================
   LEFT SIDEBAR - Transparent with left-aligned text
   ============================================ */

body:has(.index-hero) .md-sidebar--primary {
    background: rgba(30, 30, 30, 0.85); /* Semi-transparent dark */
    backdrop-filter: blur(10px); /* Frosted glass effect */
}

body:has(.index-hero) .md-sidebar--primary .md-sidebar__scrollwrap {
    background: transparent;
}

/* Ensure navigation text is left-aligned */
body:has(.index-hero) .md-nav {
    text-align: left;
}

body:has(.index-hero) .md-nav__item {
    text-align: left;
}

body:has(.index-hero) .md-nav__link {
    text-align: left;
}
/* Remove active/selected state background on index page */
body:has(.index-hero) .md-nav__item--active {
    background: transparent !important;
}

body:has(.index-hero) .md-nav__item--active > .md-nav__link {
    background: transparent !important;
}

body:has(.index-hero) .md-nav__link--active {
    background: transparent !important;
}

/* ============================================
   HIDE RIGHT SIDEBAR (TOC) on index page
   ============================================ */

body:has(.index-hero) .md-sidebar--secondary {
    display: none;
}

/* Adjust content width when right sidebar is hidden */
body:has(.index-hero) .md-content {
    max-width: 100%;
}

/* ============================================
   HERO TITLE - Centered in content area
   ============================================ */

.index-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 4rem); /* Full height minus header */
    margin: 0;
    padding: 2rem;
    transform: translateX(-121px); /* Shift left by half the sidebar width (242px / 2) */
}

.hero-title-container {
    text-align: center;
}

.hero-title-line1,
.hero-title-line2 {
    color: white !important;
    font-size: 4rem !important;
    font-weight: 500 !important; /* Maximum boldness */
    margin: 0;
    line-height: 0.2 !important;
    text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.8);
    letter-spacing: 3px;
}

.hero-version {
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly transparent white */
    font-size: 1.2rem !important;
    font-weight: 300 !important; /* Light weight */
    letter-spacing: 2px !important;
    margin-top: 1rem !important;
    text-align: center !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media screen and (max-width: 76.1875em) {
    .hero-title-line1,
    .hero-title-line2 {
        font-size: 4rem;
    }
    
    .index-hero {
        transform: translateX(0); /* Reset transform on mobile */
    }
    
    body:has(.index-hero) .md-sidebar--primary {
        background: rgba(30, 30, 30, 0.95); /* More opaque on mobile */
    }
}

@media screen and (max-width: 60em) {
    .hero-title-line1,
    .hero-title-line2 {
        font-size: 2.5rem;
    }
    
    .index-hero {
        min-height: calc(100vh - 3rem);
    }
}