/*
 * Full-screen menu: never clip on small screens, scale with viewport height.
 * Loaded after main.css (which is a CodeKit build we can no longer rebuild).
 */

/* 1. Long menus scroll instead of being clipped top and bottom. */
.main-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.main-menu .flex-center {
    /* "safe center" keeps short menus centred but aligns long ones to the top. */
    align-items: safe center;
    min-height: 100%;
    height: auto;
    padding: 1.5rem 1rem;
}

/* Fallback for browsers without "safe" alignment: auto margins behave the same. */
.main-menu .skew-menu {
    margin: auto 0;
    width: 100%;
}

/* 2. Type scales with the viewport height between the old phone and desktop sizes. */
.main-menu .nav .nav-item a.nav-link {
    font-size: clamp(22px, 4.5vh, 40px);
    padding: clamp(2px, 0.6vh, 10px) 0;
    line-height: 1.2;
}

.main-menu .nav .nav-item a.dropdown-item {
    font-size: clamp(14px, 2.4vh, 20px);
    padding: clamp(2px, 0.4vh, 5px) 15px;
}

@media (min-width: 768px) {
    .main-menu .flex-center {
        padding: 3rem;
    }
}