/**
 * Mobile Menu Component
 * Full-screen menu for mobile devices, appears under header
 */

.mobile-menu {
    position: fixed;
    top: 39px; /* Header height (38px) + scroll indicator (1px) */
    left: 0;
    width: 100%;
    height: calc(100vh - 39px);
    background-color: var(--color-background);
    z-index: 9999; /* Below header (10000) */
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-menu.mobile-menu--open {
    display: flex;
}

/* Menu Navigation */
.mobile-menu__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align to top, not center */
    align-items: flex-start;
    padding-top: 36px; /* 36px from header */
    padding-left: 24px; /* 24px from left edge */
    padding-right: 24px;
    padding-bottom: 0;
    gap: 0; /* No gap, spacing handled by line-height */
}

.mobile-menu__nav-link {
    font-family: var(--font-display);
    font-size: var(--font-size-display-3-desktop); /* Desktop size (60px) for all screens */
    font-weight: 400;
    line-height: var(--line-height-display-3-desktop); /* 100% */
    color: var(--color-content);
    text-decoration: none;
    transition: color 0.5s ease;
}

.mobile-menu__nav-link:not(:last-child) {
    margin-bottom: calc((var(--line-height-display-3-desktop) - 1) * 1em); /* Spacing equals line-height minus font-size */
}

.mobile-menu__nav-link:hover {
    color: var(--color-subaccent);
    transition: color 0s ease;
}

/* Menu Footer CTA */
.mobile-menu__footer {
    width: 100%;
    background-color: var(--color-accent);
    padding: 0; /* No padding, link will handle it */
    transition: background-color 0.5s ease;
}

.mobile-menu__footer:hover {
    background-color: var(--color-subaccent); /* Change to subaccent on hover */
    transition: background-color 0s ease;
}

.mobile-menu__cta {
    font-family: var(--font-display);
    font-size: var(--font-size-display-3-desktop); /* Desktop size (60px) for all screens */
    font-weight: 400;
    line-height: var(--line-height-display-3-desktop); /* 100% */
    color: var(--color-solid-light);
    text-decoration: none;
    display: block; /* Block element to fill entire footer area */
    padding: 24px 24px; /* 24px padding, matching nav links */
    width: 100%;
    box-sizing: border-box;
    transition: color 0.5s ease;
}

.mobile-menu__footer:hover .mobile-menu__cta {
    color: var(--color-invert); /* Change text color to invert on hover */
    transition: color 0s ease;
}

/* Desktop: Hide mobile menu */
@media (min-width: 769px) {
    .mobile-menu {
        display: none !important;
    }
}