/* Header dropdown menus («حسابي» and the grouped sections) + the grouped drawer. Header & Navigation Reorganization (owner direction 2026-10-21).
   New file: the official CSS files are not changed. Behaviour: wwwroot/js/nav-menus.js. The portal (white header) overrides are scoped to .bs-developer-portal. */

.nm { position: static; display: inline-flex; align-items: center; min-width: 0; }

/* the button looks like the neighbouring header links */
.nm__btn {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .95rem; border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: .92rem; font-weight: 600; color: var(--st-ink-70); white-space: nowrap; cursor: pointer; transition: color 250ms var(--st-ease), background 250ms var(--st-ease);
}
.nm__btn:hover, .nm__btn[aria-expanded="true"] { color: var(--st-ink); background: rgba(120, 160, 220, .14); }
.nm__btn:focus-visible { outline: 2px solid var(--st-cyan); outline-offset: 2px; }
.nm.is-active > .nm__btn { color: var(--st-ink); }
.nm.is-active > .nm__btn::after {
    content: ''; position: absolute; inset-inline: .95rem; bottom: .2rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--st-electric), var(--st-cyan));
}
.nm__caret { flex: none; transition: transform 150ms; }
.nm__btn[aria-expanded="true"] .nm__caret { transform: rotate(180deg); }
.nm__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 999px; background: #d6336c; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; }

/* «حسابي»: an outlined pill, compact (the name is inside the panel, never on the button) */
.nm__btn--account { border: 1px solid var(--st-line); padding: .45rem .85rem; font-size: .88rem; font-weight: 700; color: var(--st-ink); }
.nm__btn--account:hover, .nm__btn--account[aria-expanded="true"] { border-color: var(--st-electric); }

/* the panel: absolute inside the header (positions come from nav-menus.js), never wider than the viewport, scrolls inside when tall */
.nm__panel {
    position: absolute; z-index: 120; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain;
    background: #0a1426; color: var(--st-ink); border: 1px solid var(--st-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); padding: .4rem;
}
.nm__panel[hidden] { display: none; }
.nm__item {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .6rem .8rem; border: 0; border-radius: 10px; background: none;
    font: inherit; font-size: .9rem; font-weight: 600; color: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.nm__item:hover, .nm__item:focus-visible { background: rgba(120, 160, 220, .16); outline: 0; color: inherit; }
.nm__item.is-current { color: var(--st-cyan); }
.nm__panel form { margin: 0; }
.nm__sep { border: 0; border-top: 1px solid var(--st-line); margin: .3rem .2rem; }
.nm__who { padding: .5rem .8rem .35rem; font-size: .78rem; font-weight: 600; color: var(--st-ink-70); overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* portal: the white header */
.bs-developer-portal .nm__btn { color: var(--bs-navy-950); }
.bs-developer-portal .nm__btn:hover, .bs-developer-portal .nm__btn[aria-expanded="true"] { color: var(--bs-blue-600); background: rgba(22, 102, 212, .08); }
.bs-developer-portal .nm.is-active > .nm__btn { color: var(--bs-blue-600); }
.bs-developer-portal .nm__btn--account { border-color: #cfdced; background: #fff; }
.bs-developer-portal .nm__panel { background: #fff; color: var(--bs-navy-950); border-color: #dbe5f1; box-shadow: 0 18px 40px rgba(10, 30, 70, .18); }
.bs-developer-portal .nm__item:hover, .bs-developer-portal .nm__item:focus-visible { background: rgba(22, 102, 212, .09); }
.bs-developer-portal .nm__item.is-current { color: var(--bs-blue-600); }
.bs-developer-portal .nm__sep { border-top-color: #dbe5f1; }
.bs-developer-portal .nm__who { color: #4a5d78; }

/* the main row never wraps: sections replaced the 15 loose links */
.st-nav__links { flex-wrap: nowrap; }
.st-nav__links > a, .st-nav__links .nm__btn { white-space: nowrap; }
.st-nav__side { flex-wrap: nowrap; }
.st-nav__side > a:not(.st-cta) { white-space: nowrap; }

/* the buyer section stays in the header down to 600 px (it used to vanish at 901–1279); below that it lives in the drawer */
@media (max-width: 599.98px) {
    .st-nav__side .nm--buyer { display: none; }
}

/* public header: the five site links + the account side (portal / admin link, «مشترياتي», «حسابي», login, call-to-action) need ≈1110 px at the widest, and the
   official breakpoint (900 px) left 901–1100 px overflowing (I-PUB-1100). The drawer takes over below 1200 px, for visitors and signed-in accounts alike. */
@media (min-width: 901px) and (max-width: 1199.98px) {
    .st-nav--pub .st-nav__links { display: none; }
    .st-nav--pub .st-nav__side > a { display: none; }
    .st-nav--pub .st-burger { display: grid; }
}

/* ---- grouped drawer: sections with headings, scrollable from the top (the base drawer centres its body, which would cut a tall list) ---- */
.st-menu__body--grouped { justify-content: flex-start; padding-top: .4rem; }
.st-menu__group { display: flex; flex-direction: column; margin-top: .6rem; }
.st-menu__title { margin: .6rem 0 .1rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--st-cyan); }
.st-menu__group .st-menu__link--sm { font-size: 1.15rem; font-weight: 700; padding: .65rem 0; }
.st-menu__login { padding: .55rem .9rem; border-radius: 999px; font-size: .95rem; font-weight: 700; color: var(--st-ink); border: 1px solid var(--st-line); }