/* Mega menu navigation (desktop, md and up).
   Built by js/mega-menu.js. Hover or focus Projects / About to open. */

.mm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(226, 226, 226, 0.62);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

html.dark .mm-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.mm-is-open .mm-backdrop {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* White background of the menu. It lives on <body> at z-index 9995 so the page's real
   dotted strip (.dots-background) can be lifted above it and never has to move. */
.mm-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--mm-h, 0px);
    z-index: 9995;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
    display: none;
}

html.dark .mm-bg {
    background: #0b0b0b;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid #262626;
}

.mm-is-open .mm-bg {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* The panel holds the links. It sits inside #main-header (z-index 10000), above the
   dots and the white background, and has no background of its own. */
.mm-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--mm-top, -2rem);
    z-index: -1;
    padding: var(--mm-pad, 8.5rem) 4rem 3.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
    display: none;
}

@media (min-width: 768px) {
    .mm-panel, .mm-bg { display: block; }
}

@media (min-width: 1024px) {
    .mm-panel { padding-left: 8rem; padding-right: 8rem; }
}

.mm-is-open .mm-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* The dotted strip: same height on every page (matches the home page; each page keeps
   its own top offset so the strip lands at the same spot on screen), and lifted above
   the menu's white background while the menu is open. */
@media (min-width: 768px) {
    .dots-background,
    body.project-page .dots-background,
    body.test-transactions-page .dots-background {
        height: 100px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .dots-background,
    body.project-page .dots-background,
    body.test-transactions-page .dots-background {
        height: 110px !important;
    }
}

/* style.css resets the header's z-index to auto between 768px and 1023px. While the menu
   is open (and fading out) keep the header above the blurred backdrop at every desktop width. */
@media (min-width: 768px) {
    html.mm-dots-up #main-header {
        z-index: 10000 !important;
    }
}

html.mm-dots-up .dots-background {
    z-index: 9996 !important;
    /* Show exactly the part that is visible when the menu is closed (the page's content
       area normally covers the bottom of the strip). */
    clip-path: inset(0 0 var(--mm-dots-clip, 0px) 0);
}

/* All menus share one grid cell so the panel keeps the height of the tallest. */
.mm-stack {
    display: grid;
}

.mm-content {
    grid-area: 1 / 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 4.5rem;
    justify-content: start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mm-content.mm-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.mm-col-primary { min-width: 15rem; }

.mm-eyebrow {
    margin: 0 0 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.33;
    letter-spacing: 0.005em;
    color: #6e6e73;
}

html.dark .mm-eyebrow { color: #8a8a8a; }

.mm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-list li {
    display: flex;
}

.mm-primary .mm-link {
    display: inline-block;
    margin-bottom: 0.875rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    color: #0d0d0d;
    text-decoration: none;
    transition: opacity 0.18s ease;
}

.mm-secondary .mm-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.4;
    color: #0d0d0d;
    text-decoration: none;
    transition: opacity 0.18s ease;
}

/* Greyed-out entries that are not links yet. */
.mm-soon-item {
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    cursor: default;
}

.mm-soon-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    color: #b3b3b8;
}

html.dark .mm-soon-name { color: #5f5f64; }

html.dark .mm-link { color: #f5f5f5; }

/* Focus the hovered item, quiet the rest. */
.mm-list:hover .mm-link:not(:hover):not(:focus-visible) { opacity: 0.38; }

.mm-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.mm-arrow {
    display: inline-block;
    margin-left: 0.4em;
    font-size: 0.68em;
    font-weight: 400;
    line-height: 1;
    vertical-align: 0.14em;
    opacity: 0.6;
}

/* Top-level nav pills: the open one stays solid, the others keep their white pill
   (background and border) and only their text turns grey. */
html.mm-is-open #main-header .hidden > a:not(.mm-nav-active) {
    color: #8a8a8a;
}

html.dark.mm-is-open #main-header .hidden > a:not(.mm-nav-active) {
    color: #737373;
}

@media (prefers-reduced-motion: reduce) {
    .mm-backdrop, .mm-bg, .mm-panel, .mm-content, .mm-link { transition: none !important; }
}