/* =====================================================
   NamoLock — "Products" nav dropdown
   Loaded site-wide (every page, same file). Reuses existing
   design tokens from styles.css — no new palette introduced.
   Populated at runtime by products-nav.js from
   products/data/products.json + the taxonomy list it carries.
   ===================================================== */

/* position:relative only — NOT a flex container. Sibling <li> elements in
   .nav-menu are plain (non-flex) boxes; making only this one li a flex
   container with align-items:center made its content vertically align
   differently once the flex ul.nav-menu (default align-items:stretch)
   stretched every li to a shared row height, producing a visible
   "Products sits lower than its siblings" offset. The caret button is
   instead absolutely positioned against this li (see .nav-dropdown-toggle
   below), so the li's own box behaves exactly like its siblings. */
.nav-item.has-dropdown { position: relative; }
.nav-item.has-dropdown .nav-link { padding-right: 26px; }
.nav-dropdown-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: 0;
    transform: translateY(-50%);
    width: 22px; height: 22px; /* kept small — the desktop nav row is already tight down to ~900px */
    color: var(--text-soft);
    border-radius: 50%;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-dropdown-toggle:hover { background: var(--surface-2); color: var(--accent-dark); }
.nav-dropdown-toggle svg { width: 14px; height: 14px; }
.nav-item.has-dropdown.is-open .nav-dropdown-toggle { transform: translateY(-50%) rotate(180deg); color: var(--accent-dark); }

.nav-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    padding: var(--s-4);
}

.nav-dropdown-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-5); }
.nav-dropdown-heading {
    font-size: var(--fs-xs); font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: var(--s-2);
}
.nav-dropdown-links { display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown-link {
    display: flex; flex-direction: column;
    padding: var(--s-2);
    border-radius: var(--r-xs);
    color: var(--text); font-weight: 600; font-size: var(--fs-sm);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-dropdown-link span { font-weight: 400; color: var(--text-dim); font-size: var(--fs-xs); margin-top: 1px; }
.nav-dropdown-link:hover { background: var(--accent-soft); color: var(--accent-dark); }
.nav-dropdown-empty { font-size: var(--fs-sm); color: var(--text-dim); font-style: italic; padding: var(--s-2); }

.nav-dropdown-pills { display: flex; flex-direction: column; gap: 4px; }
.nav-dropdown-pill {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-2);
    border-radius: var(--r-xs);
    color: var(--text); font-weight: 500; font-size: var(--fs-sm);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-dropdown-pill span { color: var(--text-dim); font-size: var(--fs-xs); }
.nav-dropdown-pill:hover { background: var(--accent-soft); color: var(--accent-dark); }

.nav-dropdown-viewall {
    display: block; margin-top: var(--s-3); padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    color: var(--accent-dark); font-weight: 700; font-size: var(--fs-sm);
}
.nav-dropdown-viewall:hover { text-decoration: underline; }

/* --- Desktop: floating panel below the nav item --- */
@media (min-width: 769px) {
    .nav-dropdown {
        position: absolute; top: calc(100% + 14px); left: 50%;
        transform: translateX(-38%);
        width: 460px;
        z-index: 1001;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .nav-item.has-dropdown.is-open .nav-dropdown {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateX(-38%) translateY(0);
    }
}

/* --- Mobile: inline expandable panel inside the off-canvas menu --- */
@media (max-width: 768px) {
    /* .nav-item.has-dropdown is a plain (non-flex) box here too — the
       .nav-dropdown panel below just stacks under the link in normal
       block flow, so no flex-wrap/order/flex-basis tricks are needed. */
    .nav-dropdown {
        margin-top: var(--s-2);
        box-shadow: none;
        max-height: 0; padding: 0 var(--s-3); border-width: 0;
        overflow: hidden;
        transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease);
    }
    .nav-dropdown-inner { grid-template-columns: 1fr; gap: var(--s-4); }
    .nav-item.has-dropdown.is-open .nav-dropdown {
        max-height: 600px; padding: var(--s-3); border-width: 1px;
        margin-bottom: var(--s-2);
    }
    /* Off-canvas mobile menu has room to spare — restore a full 44px touch
       target for the caret here (it's shrunk on desktop to keep the tight
       769–1100px row on one line, see styles.css). The li is position:relative
       (not flex) on mobile too, so this still anchors correctly against it;
       give the link a bit more right padding to match the bigger target. */
    .nav-dropdown-toggle { width: 44px; height: 44px; }
    .nav-item.has-dropdown .nav-link { padding-right: 48px; }
}