/* ==========================================================
   TypingTutor.Online
   Stable Header + Navigation Viewport v17.0.37
   File: css/navigation-viewport-fix.css
========================================================== */

/*
 * Keep consistent breathing room around the navigation in every application
 * mode. Dynamic content and active-button classes must not shrink the header.
 */
#header {
    box-sizing: border-box;
    min-height: 78px;
    padding-top:
        max(9px, env(safe-area-inset-top));
    padding-bottom: 9px;
}

#header
.header-inner {
    box-sizing: border-box;
    min-height: 58px;
    align-items: center;
}

#header
.logo,
#header
.primary-mode-navigation,
#header
.header-tools {
    align-self: center;
}

#header
.primary-mode-navigation,
#header
#modeSwitcher {
    min-height: 48px;
    align-items: center;
}

#header
#modeSwitcher {
    display: flex;
}

#header
#modeSwitcher
.mode-button,
#header
.lesson-home-nav-button,
#header
#themeButton {
    box-sizing: border-box;
    min-height: 44px;
    margin-top: 2px;
    margin-bottom: 2px;
}

/*
 * Focus should remain visible without forcing the browser to scroll the
 * navigation against the viewport edge.
 */
#header
button:focus {
    scroll-margin-top: 18px;
}

html {
    scroll-padding-top:
        calc(78px + env(safe-area-inset-top));
}

/* Make the logo's lesson-home behavior visually clear. */
#siteHomeLogo {
    cursor: pointer;
}

/*
 * Preserve a stable content start beneath the header even when a mode panel
 * changes from a tall page to a short page.
 */
#mainContent {
    min-height:
        calc(100vh - 78px);
}

/* Dark theme keeps the same layout dimensions. */
html[data-theme="dark"]
#header,
html[data-theme="system"]
#header {
    min-height: 78px;
}

@media (max-width: 1100px) {
    #header {
        min-height: 72px;
        padding-top:
            max(7px, env(safe-area-inset-top));
        padding-bottom: 7px;
    }

    #header
    .header-inner {
        min-height: 54px;
    }

    #header
    .primary-mode-navigation,
    #header
    #modeSwitcher {
        min-height: 44px;
    }

    #header
    #modeSwitcher
    .mode-button,
    #header
    .lesson-home-nav-button,
    #header
    #themeButton {
        min-height: 40px;
    }

    html {
        scroll-padding-top:
            calc(72px + env(safe-area-inset-top));
    }
}

@media (max-width: 760px) {
    #header {
        min-height: 0;
        padding-top:
            max(6px, env(safe-area-inset-top));
        padding-bottom: 6px;
    }

    #header
    .header-inner {
        min-height: 0;
    }

    #mainContent {
        min-height: 0;
    }
}