/* Tools-site additions to the shared WizBrand bar (assets/css/wizbrand-navbar.css, copied from the
   main site and kept unedited so it can be re-synced): the "Tools" mega-menu built from ToolCatalog.
   Desktop: a full-width light panel under the bar (hover, focus or click).
   Drawer (≤1040px): an accordion inside the slide-in menu. Behaviour: assets/js/wz-chrome.js. */

/* The item stays the positioning box for the gold "current page" underline (Tools is
   this whole site), so the full-width panel is pinned to the viewport instead: the bar is
   sticky at top:0 and always the first thing on the page, so the panel sits right under it. */

.wznav-mega__trigger { display: inline-flex !important; align-items: center; gap: 5px; }
.wznav-mega__trigger svg { transition: transform .2s; }
.wznav-mega.is-open .wznav-mega__trigger svg { transform: rotate(180deg); }

.wznav-mega__panel {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--wznav-h) + 1px);
    z-index: 1100;
    max-height: calc(100vh - var(--wznav-h) - 1px);
    overflow-y: auto;
    background: var(--wznav-pop);
    border-top: 1px solid var(--wznav-pop-line);
    box-shadow: 0 30px 60px rgba(11, 31, 68, .22);
    padding: 26px 0 18px;
    font-family: var(--wznav-font);
}

@media (min-width: 1041px) and (hover: hover) {
    .wznav-mega:hover .wznav-mega__panel { display: block; }
}
.wznav-mega:focus-within .wznav-mega__panel,
.wznav-mega.is-open .wznav-mega__panel { display: block; }

.wznav-mega__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.wznav-mega__col { min-width: 0; }

.wznav .wznav-mega__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 9px;
    margin-bottom: 6px;
    border-radius: 0;
    border-bottom: 2px solid #eef2f8;
    color: var(--wznav-pop-ink);
    font-size: 14px;
    font-weight: 800;
    background: none;
}
.wznav .wznav-mega__head i { color: var(--wznav-pop-brand); width: 16px; text-align: center; }
.wznav .wznav-mega__head:hover { color: var(--wznav-pop-brand); background: none; }

.wznav .wznav-mega__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 6px;
    border-radius: 7px;
    color: var(--wznav-pop-ink-2);
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
}
.wznav .wznav-mega__item i { width: 18px; text-align: center; color: #8aa0c4; flex: 0 0 auto; }
.wznav .wznav-mega__item:hover,
.wznav .wznav-mega__item:focus-visible { color: var(--wznav-pop-brand); background: var(--wznav-pop-tint); }
.wznav .wznav-mega__item:hover i { color: var(--wznav-pop-brand); }

.wznav .wznav-mega__more {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 6px;
    color: var(--wznav-pop-brand);
    font-size: 12px;
    font-weight: 700;
    background: none;
}
.wznav .wznav-mega__more:hover { text-decoration: underline; background: none; color: var(--wznav-pop-brand); }

.wznav-mega__foot {
    max-width: 1180px;
    margin: 18px auto 0;
    padding: 14px 24px 0;
    border-top: 1px solid #eef2f8;
    text-align: center;
}
.wznav .wznav-mega__foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wznav-pop-brand);
    font-size: 14px;
    font-weight: 800;
    background: none;
}
.wznav .wznav-mega__foot a:hover { text-decoration: underline; background: none; color: var(--wznav-pop-brand); }

/* Old pages styled a bare #navbar or .navbar; the new bar is .wznav, so nothing here
   depends on them. Old global link colours must not leak into the light panel. */
.wznav-mega__panel a:hover { text-decoration: none; }

@media (max-width: 1180px) {
    .wznav-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- inside the slide-in drawer ---- */
@media (max-width: 1040px) {
    .wznav__links > li.wznav-mega { display: block; }
    .wznav-mega__trigger { width: 100%; justify-content: space-between; }
    .wznav-mega:focus-within .wznav-mega__panel { display: none; }
    .wznav-mega.is-open .wznav-mega__panel { display: block; }
    .wznav-mega__panel {
        position: static;
        max-height: none;
        padding: 4px 0 10px;
        background: rgba(255, 255, 255, .04);
        border: 0;
        border-radius: 10px;
        box-shadow: none;
    }
    .wznav-mega__grid { grid-template-columns: 1fr; gap: 0; padding: 0 6px; }
    .wznav-mega__col { padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
    .wznav .wznav-mega__head { color: #fff; border-bottom-color: rgba(255, 255, 255, .12); font-size: 14px; padding: 6px 4px 8px; }
    .wznav .wznav-mega__head i { color: var(--wznav-gold); }
    .wznav .wznav-mega__item { color: var(--wznav-ink); font-size: 14px; padding: 8px 6px; }
    .wznav .wznav-mega__item:hover { color: #fff; background: rgba(255, 255, 255, .07); }
    .wznav .wznav-mega__more { color: #9ec2ff; }
    .wznav-mega__foot { margin: 6px 0 0; padding: 10px 10px 0; border-top-color: rgba(255, 255, 255, .12); text-align: left; }
    .wznav .wznav-mega__foot a { color: #9ec2ff; }
}