.site-header {
    padding: 10px max(24px, calc((100vw - 1640px) / 2)); 
    gap: 40px; 
    border-bottom: 1px solid transparent; 
    transition: box-shadow .2s; 
}

.site-header.is-scrolled { 
    box-shadow: 0 3px 14px #182c3e12; 
    border-bottom-color: var(--page-border); 
}

.site-navigation { 
    display: flex; 
    -items: center; 
    flex: 1; 
    gap: 24px; 
}

.nav-course { 
    padding: 14px 2px; 
    color: var(--page-ink); 
    font-size: 16px; 
    font-weight: 600; 
    border-bottom: 3px solid transparent; 
}

.nav-course { 
    white-space: nowrap; 
}

.nav-course.active { 
    color: #b30707; 
    border-bottom-color: #b30707; 
}

.site-actions { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-left: auto; 
}

.header-theme { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    min-height: 44px; 
    padding: 8px; 
    border: 0; 
    border-radius: 8px; 
    color: var(--page-ink); 
    background: transparent; 
    font-size: 14px; 
}

.header-theme:hover { 
    background: #b307070b; 
}

.header-theme svg, .menu-toggle svg {
     width: 22px; 
     height: 22px; 
     fill: none; 
     stroke: currentColor; 
     stroke-width: 1.7; 
     stroke-linecap: round; 
     stroke-linejoin: round;
}
.header-signin { 
    width: 44px; 
    height: 44px; 
    padding: 0; 
    flex-shrink: 0; 
}

.menu-toggle { 
    display: none; 
}

.dark-theme .nav-course.active { 
    color: #ff9fa3; 
    border-color: #ff9fa3; 
}

.dark-theme .header-theme:hover { 
    background: #ffffff12; 
}

@media (min-width: 701px) and (max-width: 900px) {
 .site-header { 
    gap: 20px; 
    padding-inline: 20px; 
}
 .site-navigation { 
    gap: 16px; 
}

 .site-actions { 
    gap: 10px; 
}
 .header-theme span { 
    display: none; 
}

}

@media (max-width: 700px) {
 .site-header { 
    padding: 5px 20px; 
    gap: 12px; 
    flex-wrap: wrap; 
}

 .menu-toggle { 
    display: grid; 
    place-items: center; 
    margin-left: auto; 
    background: transparent; 
    border: 1px solid var(--page-border); 
    border-radius: 8px; 
    width: 44px; 
    height: 44px; 
    color: var(--page-ink); 
}

 .site-navigation { 
    display: none; flex: 0 0 100%; 
    flex-direction: column; 
    align-items: stretch; 
    gap: 12px; 
    padding: 4px 0 16px; 
}

 .site-navigation.is-open { 
    display: flex; 
}

 .nav-course { 
    align-self: flex-start; 
    padding: 8px 2px; 
}

 .site-actions { 
    margin-left: 0; 
    justify-content: space-between; 
}

 .site-actions .header-signin { 
    width: 44px; 
}
}

/* Primary learning links belong to the page content. */
.body-course-tabs { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
    margin: 0 0 26px; 
}

.body-course-tabs a { 
    display: inline-flex; 
    align-items: center; 
    min-height: 48px; 
    padding: 8px 3px 14px; 
    border-bottom: 3px solid transparent; 
    color: var(--page-ink, #142c42); 
    font-size: 18px; 
    font-weight: 600; 
    text-decoration: none; 
}

.body-course-tabs a[aria-current="page"] { 
    color: #b30707; 
    border-bottom-color: #b30707; 
}

.body-course-tabs a:hover { 
    color: #b30707; 
}

.body-course-tabs a:focus-visible { 
    outline: 3px solid #386eaa; 
    outline-offset: 4px; 
}

.dark-theme .body-course-tabs a { 
    color: #dbe5ef; 
}

.dark-theme .body-course-tabs a[aria-current="page"] { 
    color: #ffa3aa; 
    border-bottom-color: #ffa3aa; 
}

@media(max-width:700px) { 
    .body-course-tabs { 
        gap: 24px; 
        margin-bottom: 22px; 
    } 
    .body-course-tabs a { 
        font-size: 16px; 
    } 
}

.demo-signin-form { display: grid; gap: 10px; }
.demo-signin-form input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--page-border); border-radius: 8px; background: var(--page-surface); color: var(--page-ink); font: inherit; }
.demo-account-label { font-size: 13px; font-weight: 600; color: var(--page-ink); }

/* Keep the course navigation at the same distance from the shared header. */
.academy-page .course-content,
.academy-page .learning-main:not(.player-main){padding-top:14px}