/* ── Top navigation dropdowns ──
   Catalogue, Community and Learn: the word goes to its page, the caret (or a hover on
   desktop) opens a short menu of key places. On phones they become expandable sections. */

.nav { align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { padding-right: 6px; }
.nav-caret {
    display: grid; place-items: center; width: 24px; height: 32px; margin-left: -2px; padding: 0;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--sumi-3); cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.nav-caret svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.nav-caret:hover, .nav-item.open .nav-caret { color: var(--ai-700); background: rgba(38, 58, 104, 0.06); }
.nav-item.open .nav-caret svg { transform: rotate(180deg); }

/* The panel: unbleached cotton with a stitched border */
.nav-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; z-index: 50;
    width: max-content; min-width: 300px; max-width: 520px;
    padding: 18px 20px 14px; border-radius: 6px;
    background-color: var(--ecru); background-image: var(--fibre);
    box-shadow: 0 1px 0 rgba(29, 27, 24, 0.05), 0 22px 44px -18px rgba(18, 28, 54, 0.45), inset 0 0 0 1px var(--line-strong);
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
    transition: opacity 0.16s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav-menu::before { content: ''; position: absolute; inset: 6px; border: 1.2px dashed rgba(201, 143, 54, 0.45); border-radius: 4px; pointer-events: none; }
/* A small bridge so the pointer can travel from the word to the panel without it closing */
.nav-menu::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item.open .nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.16s ease, transform 0.18s ease, visibility 0s; }

.nm-groups { display: flex; gap: 28px; position: relative; }
.nm-group { min-width: 0; }
.nm-title { margin: 0 0 6px; font-family: var(--work); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aka); }
.nm-group ul { list-style: none; margin: 0; padding: 0; }
/* Reset the top-level link styles for links inside the panel */
.nav .nav-menu a {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 4px; margin: 0 -4px;
    font-family: var(--sans); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; text-transform: none;
    color: var(--sumi); border-radius: 4px; white-space: nowrap; border-bottom: 0;
}
.nav .nav-menu a::after { display: none; }
.nav .nav-menu a i { font-style: normal; font-family: var(--serif); font-weight: 800; font-size: 0.8rem; width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--canvas-2); color: var(--sumi-2); transition: background-color 0.15s, color 0.15s; }
.nav .nav-menu a:hover, .nav .nav-menu a:focus-visible { background: rgba(38, 58, 104, 0.07); color: var(--ai-800); }
.nav .nav-menu a:hover i, .nav .nav-menu a:focus-visible i { background: var(--ai-800); color: var(--ecru); }
.nav .nav-menu a.nm-all {
    position: relative; margin: 12px 0 0; padding: 10px 4px 2px; border-top: 1px dashed var(--line-strong); border-radius: 0;
    font-family: var(--work); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-700);
}
.nav .nav-menu a.nm-all:hover { background: none; color: var(--aka); }

@media (prefers-reduced-motion: reduce) {
    .nav-menu, .nav-item.open .nav-menu, .nav-caret svg { transition: none; }
}

/* Phones and small tablets: sections inside the slide-down menu */
@media (max-width: 1020px) {
    .nav { max-height: calc(100dvh - var(--header)); overflow-y: auto; align-items: stretch; }
    .nav-item { flex-wrap: wrap; border-bottom: 1px dashed var(--line-strong); }
    .nav-item > a { flex: 1; border-bottom: 0 !important; padding-right: 4px; }
    .nav-caret { width: 48px; height: 48px; margin: 0; }
    .nav-caret svg { width: 14px; height: 8px; }
    .nav-menu {
        position: static; width: 100%; min-width: 0; max-width: none; transform: none; opacity: 1; visibility: visible;
        padding: 0 0 12px 4px; background: none; box-shadow: none; display: none; transition: none;
    }
    .nav-menu::before, .nav-menu::after { display: none; }
    .nav-item.open .nav-menu { display: block; transform: none; }
    .nm-groups { flex-direction: column; gap: 10px; }
    .nav .nav-menu a { font-size: 1rem; padding: 8px 6px; white-space: normal; }
    .nav .nav-menu a.nm-all { margin-top: 6px; }
}