/* ==========================================================================
   Site navigation (WebWidgets/SiteNav.ascx): Bootstrap 5 dropdown markup, this
   site's own styles.

   WARNING BOOTSTRAP'S CSS IS NOT LOADED, ON PURPOSE. Its Reboot would restyle every
   page. Bootstrap's script (js/plugins.min.js) only toggles .show and aria-expanded;
   every visual rule, including the ones Bootstrap would normally supply for
   .dropdown-menu and .show, is here.

   Look: the top level keeps the old asp:Menu's (Marcellus, white, soft shadow, gold
   for hover and the current page), and the dropdowns use the same Marcellus, as the old ones did. They wear the account panel's colours,
   which are the site's own .DynamicMenuStyle: #4828a2 fading to #30145b, gold on hover.
   ========================================================================== */

.lcg-nav { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 22px;
    font-family:Marcellus, 'Segoe UI', sans-serif; font-size:min(1.2em, 2.5vw); }
.lcg-nav-item { position:relative; margin:0; padding:0; list-style:none; }

.lcg-nav-link { display:inline-flex; align-items:center; gap:6px; padding:3px 0; color:#fff !important; text-decoration:none !important;
    text-shadow:rgba(15,29,40,.5) 5px 5px 10px; background:none; border:0; cursor:pointer; transition:color .25s; white-space:nowrap; }
.lcg-nav-link:hover, .lcg-nav-link:focus-visible,
.lcg-nav-item.active > .lcg-nav-link, .lcg-nav-link.show { color:#ffd700 !important; }
.lcg-nav-link:focus-visible { outline:2px solid #ffd700; outline-offset:3px; border-radius:3px; }

.lcg-nav-avatar { width:22px; height:22px; border-radius:50%; flex:none; }
.lcg-nav-avatar-lg { width:40px; height:40px; border-radius:50%; flex:none; }

/* ---- dropdown panel (what bootstrap.css would supply, in this site's colours) ---- */
.lcg-nav .dropdown-menu { display:none; position:absolute; top:100%; left:-12px; z-index:62000; min-width:230px; margin:8px 0 0; padding:8px 0;
    list-style:none; text-align:left; text-shadow:none; font-family:Marcellus, 'Segoe UI', sans-serif; font-size:.9em; line-height:1.3; font-weight:normal;
    background:linear-gradient(to bottom, #4828a2 0%, #30145b 100%); border:1px solid #6848c2; border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.45); }
.lcg-nav .dropdown-menu.show { display:block; }
.lcg-nav .dropdown-menu-end { left:auto; right:-8px; }
.lcg-nav .dropdown-menu li { list-style:none; margin:0; padding:0; }

.lcg-nav .dropdown-item { display:flex; box-sizing:border-box; align-items:center; gap:10px; padding:8px 18px; color:#fff !important; text-decoration:none !important;
    white-space:nowrap; font-weight:normal; background:transparent; transition:none; }
.lcg-nav .dropdown-item:hover, .lcg-nav .dropdown-item:focus-visible { background:rgba(255,255,255,.12); color:#ffd700 !important; outline:none; }
.lcg-nav .dropdown-item.active { color:#ffd700 !important; }
.lcg-nav .lcg-nav-sub { padding-left:34px; font-size:.93em; }
.lcg-nav .dropdown-header { margin:0; padding:8px 18px 4px; color:#d9cbf2; font-size:.72em; font-weight:normal; letter-spacing:.1em; text-transform:uppercase; font-family:inherit; }
.lcg-nav .dropdown-divider { height:0; margin:6px 0; border:0; border-top:1px solid rgba(255,255,255,.15); opacity:1; }
.lcg-nav-icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.lcg-nav .dropdown-menu .lcg-nav-who { display:flex; align-items:center; gap:10px; padding:6px 18px 12px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.15); }
.lcg-nav-who strong { display:block; color:#fff; font-size:1.05em; font-weight:normal; }
.lcg-nav-who span { display:block; color:#d9cbf2; font-size:12px; margin-top:2px; }

/* Menus open on click (Steven's call, 2026-09-23), not hover: Bootstrap's script handles
   click, keyboard and outside-click closing. No hover rules, so none to fight on touch screens. */
/* Items meant for phones only (the compact header's Account item). */
@media (min-width:769px) { .lcg-nav .lcg-nav-mobile-only { display:none; } }

/* ---- phones: the same list becomes an accordion inside the Menu panel ---- */
@media (max-width:768px) {
    .lcg-nav { display:block; font-size:1.05rem; }
    .lcg-nav-item { display:block; border-top:1px solid rgba(255,255,255,.15); }
    .lcg-nav-link { display:flex; width:100%; box-sizing:border-box; min-height:48px; padding:12px 16px; text-shadow:none; }
    .lcg-nav .dropdown-toggle::after { content:""; margin-left:auto; width:8px; height:8px; border:solid currentColor; border-width:0 2px 2px 0;
        transform:rotate(45deg) translateY(-3px); transition:transform .2s; }
    .lcg-nav .dropdown-toggle.show::after { transform:rotate(225deg) translateY(-2px); }
    .lcg-nav .dropdown-menu, .lcg-nav .dropdown-menu-end { position:static; left:auto; right:auto; min-width:0; margin:0; padding:0; border:0; border-radius:0;
        box-shadow:none; background:rgba(0,0,0,.22); font-size:.95em; }
    .lcg-nav .dropdown-item { min-height:46px; padding:12px 16px 12px 32px; border-top:1px solid rgba(255,255,255,.10); white-space:normal; }
    .lcg-nav .lcg-nav-sub { padding-left:48px; }
    .lcg-nav .dropdown-header { padding:12px 16px 4px 32px; }
    .lcg-nav .dropdown-menu .lcg-nav-who { padding:12px 16px 12px 32px; margin:0; }
}