/* ── Site navigation styles ── Extracted from _SiteLayout.cshtml ──────────── */
/* Browser-cacheable static file. Dynamic vars (--nav-bg etc.) stay inline.  */

        /* ── Base nav ── */
        .site-header     { background: var(--nav-bg); border-bottom: 0.5px solid color-mix(in srgb, var(--nav-text) 15%, transparent); position: sticky; top: 0; z-index: 200; }
        .site-header-inner { display: flex; align-items: center; padding: 0 28px; gap: 0; }
        .site-brand      { color: var(--nav-accent); font-weight: 700; font-size: 16px; text-decoration: none; margin-right: 32px; padding: 14px 0; white-space: nowrap; flex-shrink: 0; }
        .site-nav        { display: flex; align-items: center; flex: 1; gap: 0; }
        .site-nav a      { color: var(--nav-text); text-decoration: none; font-size: 14px; padding: 16px 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
        .site-nav a:hover, .site-nav a.active { color: var(--nav-accent); }
        .site-nav a.active { border-bottom-color: var(--nav-accent); font-weight: 600; }
        /* ── Desktop: Dropdown ── */
        [data-subnav-desktop="Dropdown"] .nav-has-sub { position: relative; }
        [data-subnav-desktop="Dropdown"] .nav-has-sub > a::after {
            content: ' ▾'; font-size: 10px; opacity: .6;
        }
        [data-subnav-desktop="Dropdown"] .nav-dropdown {
            display: none; position: absolute; top: 100%; left: 0;
            background: var(--surface, #fff);
            border: 0.5px solid var(--border-md, #ccc);
            border-radius: 0 0 8px 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,.12);
            min-width: 180px; z-index: 300; padding: 4px 0;
        }
        [data-subnav-desktop="Dropdown"] .nav-has-sub:hover .nav-dropdown,
        [data-subnav-desktop="Dropdown"] .nav-has-sub:focus-within .nav-dropdown { display: block; }
        [data-subnav-desktop="Dropdown"] .nav-dropdown a {
            display: block; padding: 10px 16px; font-size: 13px;
            border-bottom: none !important;
            color: var(--text-muted, #666);
        }
        [data-subnav-desktop="Dropdown"] .nav-dropdown a:hover,
        [data-subnav-desktop="Dropdown"] .nav-dropdown a.active {
            background: var(--surface2, #f5f5f5); color: var(--nav-accent);
            border-left: 2px solid var(--nav-accent) !important;
            padding-left: 14px;
        }
        /* ── Desktop: Secondary bar ── */
        .subnav-secondary-bar {
            background: color-mix(in srgb, var(--nav-bg) 70%, #fff);
            border-bottom: 0.5px solid color-mix(in srgb, var(--nav-text) 12%, transparent);
            display: flex; align-items: center; padding: 0 28px;
            height: 0; overflow: hidden; transition: height .2s ease;
        }
        .subnav-secondary-bar.has-sub { height: 44px; }
        [data-subnav-desktop="SecondaryBar"] .subnav-secondary-bar { display: flex; }
        [data-subnav-desktop="Dropdown"]     .subnav-secondary-bar,
        [data-subnav-desktop="LeftSidebar"]  .subnav-secondary-bar { display: none; }
        .subnav-secondary-bar .sub-section-label {
            font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--nav-text) 60%, transparent);
            text-transform: uppercase; letter-spacing: .08em; margin-right: 16px; white-space: nowrap;
        }
        .subnav-secondary-bar a {
            font-size: 13px; padding: 0 13px; height: 44px; line-height: 44px;
            color: color-mix(in srgb, var(--nav-text) 70%, transparent);
            text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
        }
        .subnav-secondary-bar a:hover { color: var(--nav-text); }
        .subnav-secondary-bar a.active { color: var(--nav-accent); border-bottom-color: var(--nav-accent); font-weight: 600; }
        /* ── Desktop: Left sidebar ── */
        [data-subnav-desktop="LeftSidebar"] .site-main { display: flex; }
        [data-subnav-desktop="LeftSidebar"] .subnav-left-sidebar {
            width: 200px; min-height: 100%; background: var(--surface, #f7f8fa);
            border-right: 0.5px solid var(--border-md, #ccc);
            padding: 20px 0; flex-shrink: 0;
        }
        [data-subnav-desktop="LeftSidebar"] .subnav-left-sidebar .sub-section-label {
            font-size: 11px; font-weight: 700; color: #9aa0aa;
            text-transform: uppercase; letter-spacing: .08em;
            padding: 0 16px; margin-bottom: 6px; display: block;
        }
        [data-subnav-desktop="LeftSidebar"] .subnav-left-sidebar a {
            display: block; padding: 10px 16px; font-size: 14px;
            color: var(--text-muted, #555); text-decoration: none;
            border-left: 3px solid transparent;
        }
        [data-subnav-desktop="LeftSidebar"] .subnav-left-sidebar a:hover { background: var(--surface2); }
        [data-subnav-desktop="LeftSidebar"] .subnav-left-sidebar a.active {
            color: var(--nav-accent); border-left-color: var(--nav-accent); font-weight: 600;
            background: color-mix(in srgb, var(--nav-accent) 8%, transparent);
        }
        [data-subnav-desktop="LeftSidebar"] .subnav-left-sidebar:empty { display: none; }
        [data-subnav-desktop="SecondaryBar"] .subnav-left-sidebar,
        [data-subnav-desktop="Dropdown"]     .subnav-left-sidebar { display: none; }
        [data-subnav-desktop="LeftSidebar"] .site-body { flex: 1; min-width: 0; }
        /* ── Mobile hamburger ── */
        .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
        .hamburger span { display: block; width: 22px; height: 2px; background: var(--nav-text); border-radius: 2px; }
        .mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 400; }
        .mobile-backdrop.open { display: block; }
        .mobile-drawer {
            position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 85vw);
            background: #fff; z-index: 500;
            transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
            display: flex; flex-direction: column; overflow-y: auto;
            box-shadow: -4px 0 32px rgba(0,0,0,.18);
        }
        .mobile-drawer.open { transform: translateX(0); }
        .mobile-drawer-header {
            background: var(--nav-bg); padding: 16px 20px;
            display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
        }
        .mobile-drawer-header span { color: var(--nav-text); font-weight: 700; font-size: 14px; }
        .mobile-drawer-close { background: none; border: none; color: color-mix(in srgb, var(--nav-text) 60%, transparent); cursor: pointer; font-size: 18px; padding: 0; }
        .mobile-drawer-body { flex: 1; padding: 8px 0; overflow-y: auto; }
        .mobile-drawer-footer { padding: 12px 16px 20px; flex-shrink: 0; }
        .mobile-drawer-footer button { width: 100%; padding: 13px; background: var(--nav-bg); color: var(--nav-text); border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
        /* Mobile simple link */
        .mob-link {
            display: block; padding: 13px 20px; font-size: 15px; font-weight: 400;
            color: #1a1a18; text-decoration: none; border-left: 3px solid transparent;
            border-bottom: 1px solid #f2f4f7;
        }
        .mob-link.active { color: var(--nav-accent); font-weight: 600; border-left-color: var(--nav-accent); background: #f0f4fa; }
        /* Mobile section label (used by AlwaysOpen + Accordion header) */
        .mob-section-label {
            display: block; padding: 14px 20px 6px; font-size: 11px; font-weight: 700;
            color: #9aa8be; text-transform: uppercase; letter-spacing: .09em;
        }
        .mob-sub-link {
            display: flex; align-items: center; justify-content: space-between;
            padding: 11px 20px 11px 28px; font-size: 14px; font-weight: 400;
            color: #2a3a50; text-decoration: none; border-left: 3px solid transparent;
            border-bottom: 1px solid #f2f4f7; background: none;
        }
        .mob-sub-link.active { color: var(--nav-accent); font-weight: 600; border-left-color: var(--nav-accent); background: #eef2fa; }
        .mob-sub-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nav-accent); flex-shrink: 0; }
        /* ── Mobile: Accordion ── */
        .mob-accordion-btn {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; padding: 13px 20px; font-size: 15px; font-weight: 400;
            color: #1a1a18; background: none; border: none; border-bottom: 1px solid #f2f4f7;
            cursor: pointer; text-align: left; font-family: inherit; border-left: 3px solid transparent;
        }
        .mob-accordion-btn.active { color: var(--nav-accent); font-weight: 600; border-left-color: var(--nav-accent); }
        .mob-accordion-arrow { font-size: 11px; color: #9aa0aa; transition: transform .2s; }
        .mob-accordion-arrow.open { transform: rotate(90deg); }
        .mob-accordion-children { display: none; background: #f7f8fa; }
        .mob-accordion-children.open { display: block; }
        /* ── Mobile: Push/slide ── */
        .mob-push-parent-btn {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; padding: 15px 20px; font-size: 15px; font-weight: 400;
            color: #1a1a18; background: none; border: none; border-bottom: 1px solid #f2f4f7;
            cursor: pointer; text-align: left; font-family: inherit;
        }
        .mob-push-panel {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: #fff; transform: translateX(100%);
            transition: transform .25s ease; overflow-y: auto;
        }
        .mob-push-panel.open { transform: translateX(0); }
        .mob-push-back {
            display: flex; align-items: center; gap: 8px;
            padding: 14px 20px; background: #f7f8fa; border-bottom: 1px solid #f0f2f5;
            font-size: 14px; font-weight: 600; color: var(--nav-accent);
            cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit;
        }
        .mob-push-section-title { font-size: 15px; font-weight: 700; color: #0f1f3d; margin-left: 8px; }
        .mob-push-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 15px 20px; font-size: 14px; font-weight: 400;
            color: #1a1a18; text-decoration: none; border-bottom: 1px solid #f2f4f7;
        }
        .mob-push-item.active { color: var(--nav-accent); font-weight: 600; }
        /* ── Responsive ── */
        /* ── Mobile bottom bar (NavStyle.MobileBottomBar) ── */
        .site-bottom-nav {
            display: none; /* shown via JS class on body when navStyle==MobileBottomBar */
            position: fixed; bottom: 0; left: 0; right: 0;
            height: 56px; background: var(--nav-bg);
            border-top: 0.5px solid color-mix(in srgb, var(--nav-text) 20%, transparent);
            z-index: 200; grid-template-columns: repeat(var(--sbn-cols,5), 1fr);
            box-shadow: 0 -2px 8px rgba(0,0,0,.06);
        }
        .sbn-item {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 3px; padding: 6px 4px;
            text-decoration: none; color: var(--nav-text);
            font-size: 10px; font-weight: 500; background: none; border: none;
            cursor: pointer; font-family: inherit; white-space: nowrap; overflow: hidden;
        }
        .sbn-item.active { color: var(--nav-accent); font-weight: 700; }
        .sbn-dot {
            width: 22px; height: 22px;
            background-color: var(--nav-text);
            opacity: 0.5;
            border-radius: 4px;
            flex-shrink: 0;
        }
        .sbn-item.active .sbn-dot { background-color: var(--nav-accent); opacity: 1; }
        body.has-bottom-nav .site-main { padding-bottom: 64px; }
        body.has-bottom-nav .hamburger { display: none !important; }
        @media (max-width: 720px) {
            body.has-bottom-nav .site-bottom-nav { display: grid; }
        }
        @media (max-width: 900px) and (orientation: landscape) {
            .site-bottom-nav { height: 44px; }
            .sbn-item { flex-direction: row; gap: 8px; font-size: 12px; }
            .sbn-dot { width: 18px; height: 18px; }
        }
        @media (max-width: 720px) {
            .site-nav { display: none; }
            .hamburger { display: flex; margin-left: auto; }
            [data-subnav-desktop="LeftSidebar"] .subnav-left-sidebar { display: none !important; }
            [data-subnav-desktop="SecondaryBar"] .subnav-secondary-bar { display: none !important; }
        }
        @media (min-width: 721px) {
            .mobile-drawer, .mobile-backdrop, .hamburger { display: none !important; }
        }
        /* Member indicator */
        .member-indicator { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; cursor: pointer; }
        .member-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface, #fff); border: 0.5px solid var(--border-md, #ccc); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 180px; z-index: 300; padding: 6px 0; }
        .member-indicator:hover .member-dropdown, .member-indicator:focus-within .member-dropdown { display: block; }
        .member-dropdown a, .member-dropdown button { display: block; width: 100%; text-align: left; padding: 9px 14px; font-size: 13px; color: var(--text-muted, #666); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }
        .member-dropdown a:hover, .member-dropdown button:hover { background: var(--surface2, #f5f5f5); }
        .member-dropdown hr { border: none; border-top: 0.5px solid var(--border, #eee); margin: 4px 0; }