/* ===================================
   SITE MENU (pill that appears on scroll + full-screen link list)
   Shown on phones (any page) and on the home page of desktop. Everywhere else the footer navigation stays as is.
   File and class names keep the "mobile" prefix from when it was phones only.
   =================================== */

:root {
    /* Where the page container's content starts/ends horizontally (max-width 1400px, 32px gutters), so the
       logo and the button line up with the content on wide screens too. Percentages resolve where it is used. */
    --menu-edge: max(var(--spacing-md), env(safe-area-inset-right, 0px), calc(50% - 668px));
    --menu-logo-height: 50px;
}

.mobile-menu-toggle,
.mobile-menu {
    display: none;
}

/* ---------- Component (visibility is decided by the two blocks further down) ---------- */

.mobile-menu-toggle {
    position: fixed;
    /* Vertically centred on the 100px scrolled navbar, on the same line as the logo */
    top: calc((100px - 44px) / 2);
    right: var(--menu-edge);
    z-index: 1600;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 20px;
    border: none;
    /* Square top-right corner, echoing the dot of the "í" in the logo */
    border-radius: 22px 0 22px 22px;
    background: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-main);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1500;
    flex-direction: column;
    justify-content: center;
    padding: 96px var(--menu-edge) var(--spacing-lg);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    /* The panel opens as a circle growing from the button (40px = half of its width) */
    clip-path: circle(0 at calc(100% - var(--menu-edge) - 40px) 50px);
    transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
}

.mobile-menu.is-open {
    visibility: visible;
    clip-path: circle(160% at calc(100% - var(--menu-edge) - 40px) 50px);
    transition-delay: 0s;
}

/* Same logo, same spot as the scrolled navbar, so the header stays composed while the panel is open */
.mobile-menu-home {
    position: absolute;
    top: calc((100px - var(--menu-logo-height)) / 2);
    left: var(--menu-edge);
    display: block;
}

.mobile-menu-logo {
    display: block;
    height: var(--menu-logo-height);
    aspect-ratio: var(--logo-aspect-ratio);
    background-color: var(--project-accent, var(--color-text));
    -webkit-mask: url("/assets/Nuvi Studio.svg") center / contain no-repeat;
    mask: url("/assets/Nuvi Studio.svg") center / contain no-repeat;
}

.mobile-menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mobile-menu-link {
    display: inline-block;
    min-height: 44px;
    color: inherit;
    font-size: clamp(2.5rem, 13vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    text-decoration: none;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.is-open .mobile-menu-link {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.is-open li:nth-child(1) .mobile-menu-link { transition-delay: 0.12s; }
.mobile-menu.is-open li:nth-child(2) .mobile-menu-link { transition-delay: 0.2s; }
.mobile-menu.is-open li:nth-child(3) .mobile-menu-link { transition-delay: 0.28s; }

.mobile-menu-link[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

.mobile-menu-toggle:focus-visible,
.mobile-menu-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Mouse users get the site's usual hover feedback on the links */
@media (hover: hover) {
    .mobile-menu.is-open li .mobile-menu-link:hover {
        opacity: 0.55;
        transition-delay: 0s;
    }
}

html.mobile-menu-open,
html.mobile-menu-open body {
    overflow: hidden;
}

/* Locking the scroll removes the scrollbar on desktop, which would widen the page and make the logo and button
   jump sideways; keeping its gutter reserved leaves everything exactly where it was. */
html.mobile-menu-open {
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle,
    .mobile-menu,
    .mobile-menu-link {
        transition: none;
    }

    .mobile-menu {
        clip-path: none;
    }
}

/* ---------- Phones (any page) ---------- */

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: inline-flex;
    }

    .mobile-menu {
        display: flex;
    }

    /* Header composition: the logo is centred at the top of the page and slides to the left
       (same gutter as the content) once the bar shrinks, leaving room for the menu button. */
    .navbar-content {
        justify-content: flex-start;
        padding-left: max(0px, calc((100% - var(--logo-height-mobile) * var(--logo-aspect-ratio)) / 2));
    }

    .navbar.scrolled .navbar-content {
        padding-left: 0;
    }

    /* Solid bar with a clean edge: content scrolling underneath never shows through the logo and button */
    .navbar.scrolled::before {
        background: var(--color-navbar-bg);
    }
}

/* ---------- Home page on desktop ---------- */

@media (min-width: 769px) {
    .page-home {
        --menu-logo-height: 64px; /* a little larger than the 50px of the phone header */
    }

    .page-home .mobile-menu-toggle {
        display: inline-flex;
    }

    .page-home .mobile-menu {
        display: flex;
    }

    /* Same composition as on phones: centred 160px logo at the top, sliding to the left of the container
       (and growing from 50px to 64px when scrolled) with the menu button on the right. */
    .page-home .navbar-content {
        justify-content: flex-start;
        padding-left: max(0px, calc((100% - 160px * var(--logo-aspect-ratio)) / 2));
    }

    .page-home .navbar.scrolled .navbar-content {
        padding-left: 0;
    }

    .page-home .navbar.scrolled .logo-svg {
        height: var(--menu-logo-height);
    }

    /* Desktop has room for the site's large type */
    .page-home .mobile-menu-link {
        font-size: clamp(3.5rem, 8vw, 7.5rem);
    }
}