/**
 * 🎨 UNIFIED NAVIGATION STYLES
 * Responsive header navigation for all Ask Bob pages
 * Supports light/dark themes, mobile-first design, and accessibility
 */

/* ===================================================
   BASE NAVIGATION STYLES
   =================================================== */

.unified-nav-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    height: 70px;
    /* Publish the current nav height so mega menus can anchor beneath it
       without hard-coding top offsets at every breakpoint. */
    --nav-height: 70px;
    /* --nav-bg comes from theme-tokens.css; .light/.dark theme overrides
       below redefine it locally for the legacy theme classes. */
    background: var(--nav-bg, #ffffff);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.unified-nav {
    background: var(--nav-bg, #ffffff);
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 60px;
}

/* ===================================================
   THEME VARIABLES
   =================================================== */

.unified-nav.light {
    --nav-bg: #ffffff;
    --nav-border: #e5e7eb;
    --nav-text: #374151;
    --nav-text-hover: #111827;
    --nav-text-active: #3b82f6;
    --nav-highlight: #3b82f6;
    --nav-highlight-hover: #2563eb;
    --dropdown-background: #ffffff;
    --dropdown-border: #e5e7eb;
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --mobile-overlay: rgba(0, 0, 0, 0.5);
}

.unified-nav.dark {
    /* Ultra-dark navigation theme */
    --nav-bg: rgba(0, 0, 0, 0.9);
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-text: #e0e0e8;
    --nav-text-hover: #ffffff;
    --nav-text-active: #60a5fa;
    --nav-highlight: #667eea;
    --nav-highlight-hover: #7c8ff0;
    --dropdown-background: rgba(5, 5, 10, 0.98);
    --dropdown-border: rgba(255, 255, 255, 0.1);
    --dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    --mobile-overlay: rgba(0, 0, 0, 0.9);
}

/* Enhanced Dashboard specific dark theme */
.unified-nav[data-user-type="admin"].dark {
    --nav-bg: linear-gradient(135deg, #0c1426 0%, #1a2332 100%);
    --nav-border: #2563eb;
    --nav-highlight: #00d4ff;
    --nav-highlight-hover: #0ea5e9;
}

/* ===================================================
   BRANDING
   =================================================== */

.nav-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--nav-text);
    font-weight: 700;
    font-size: 18px;
    transition: all 0.2s ease;
}

.brand-link:hover {
    color: var(--nav-text-hover);
    transform: scale(1.02);
}

.brand-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    display: inline-block;
    object-fit: contain;
}

.brand-text {
    display: none;
}

/* ===================================================
   NAVIGATION MENU
   =================================================== */

.nav-menu-wrapper {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0; /* allow the menu to actually shrink instead of overflowing */
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: nowrap;
}

.nav-item {
    position: relative;
    flex-shrink: 1;
    min-width: 0;
}

/* The CTA <li> wrapping a .nav-link.highlight must NOT shrink — otherwise
   the parent <li> clips the inner button text ("Join Waitlis..."). */
.nav-item:has(> .nav-link.highlight) {
    flex-shrink: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--nav-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--nav-text-hover);
    background: rgba(59, 130, 246, 0.1);
}

.nav-link.highlight {
    background: var(--nav-highlight);
    color: white;
    font-weight: 600;
}

.nav-link.highlight:hover {
    background: var(--nav-highlight-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-item.active .nav-link {
    color: var(--nav-text-active);
    background: rgba(59, 130, 246, 0.1);
    font-weight: 600;
}

.nav-icon {
    font-size: 16px;
    margin-right: 6px;
}

.nav-text {
    display: none;
}

.dropdown-arrow {
    margin-left: 4px;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* ===================================================
   DROPDOWN MENUS
   =================================================== */

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--dropdown-background);
    border: 1px solid var(--dropdown-border);
    border-radius: 12px;
    box-shadow: var(--dropdown-shadow);
    list-style: none;
    margin: 0;
    padding: 10px;
    min-width: 260px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1001;
    /* Soft backdrop so text is always legible over busy page backgrounds. */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Locale switcher dropdown is right-aligned (not center-aligned like the
   nav-menu dropdowns), so override the centered transform from the base
   .dropdown-menu rule. Without this, translateX(-50%) pushes the menu
   off-screen to the right when it tries to render. */
.dropdown-menu.locale-dropdown {
    left: auto;
    right: 0;
    min-width: 180px;
    transform: translateY(-10px);
}

.dropdown-menu.locale-dropdown.show {
    transform: translateY(0);
}

.locale-dropdown .locale-option {
    display: block;
    padding: 8px 16px;
    color: var(--nav-text);
    text-decoration: none;
    transition: background 0.15s ease;
    font-size: 0.9rem;
    white-space: nowrap;
}

.locale-dropdown .locale-option:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--nav-text-hover);
}

.locale-dropdown .locale-option[data-current="true"] {
    font-weight: 600;
    background: rgba(59, 130, 246, 0.06);
}

.dropdown-item {
    margin: 0;
}

.dropdown-link {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    color: var(--nav-text);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    gap: 10px;
    border-radius: 8px;
}

.dropdown-link .nav-icon {
    font-size: 18px;
    line-height: 1.2;
    margin-right: 0;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    margin-top: 1px;
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
    background: rgba(102, 126, 234, 0.14);
    color: var(--nav-text-hover);
}

.dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dropdown-text .nav-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--nav-text-hover, #ffffff);
    /* Ensure labels are always visible even when the parent .nav-text
       rule in the top bar hides them at narrow widths. */
    white-space: normal;
}

/* Re-enable dropdown labels at every viewport (the top-bar .nav-text
   may be hidden under 1200px, but inside a dropdown we always want them). */
.dropdown-menu .nav-text,
.mobile-dropdown-content .nav-text {
    display: flex !important;
}

.nav-badge {
    font-size: 10px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse 2s infinite;
}

.nav-description {
    font-size: 12px;
    color: var(--nav-text);
    opacity: 0.72;
    line-height: 1.35;
    font-weight: 400;
    margin-top: 2px;
    /* Second line inside a dropdown item — never clipped by nav-text
       white-space rules. */
    display: block;
    white-space: normal;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===================================================
   MEGA MENU (multi-column dropdown with optional featured tile)
   Polished variant — icon tiles, column dividers, smooth reveal.
   =================================================== */

.dropdown-menu.mega-menu {
    /* Mega menus break out of their trigger's positioning and anchor to
       the viewport so they never clip regardless of which nav item opened
       them. They always open centered below the top bar. */
    position: fixed;
    top: calc(var(--nav-height, 68px) + 10px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-6px) scale(0.985);
    padding: 22px;
    border-radius: 16px;
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr;
    grid-template-areas: "cols" "feature";
    max-width: min(94vw, 1040px);
    min-width: 320px;
    /* Denser drop shadow + gentle ring so the mega floats cleanly. */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.25);
    transform-origin: top center;
    transition:
        opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0.22s;
}

.dropdown-menu.mega-menu.show {
    transform: translateX(-50%) translateY(0) scale(1);
}

.mega-menu.mega-wide    { width: min(860px, 94vw); }
.mega-menu.mega-xwide   { width: min(1040px, 95vw); }
.mega-menu.mega-narrow  { width: min(580px, 92vw); }

.mega-menu.mega-has-feature {
    grid-template-areas: "cols feature";
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
}

.mega-menu.mega-no-feature {
    grid-template-areas: "cols";
    grid-template-columns: 1fr;
}

.mega-columns {
    grid-area: cols;
    display: grid;
    gap: 4px 18px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    min-width: 0;
}

/* Subtle vertical divider between mega columns (hidden on wrap rows via
   the last-column trick + the fact that column-gap itself absorbs it). */
.mega-column {
    min-width: 0;
    position: relative;
    padding: 0 2px;
}

.mega-column + .mega-column::before {
    content: '';
    position: absolute;
    top: 26px;
    bottom: 8px;
    left: -9px;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.08) 80%,
        transparent 100%);
    pointer-events: none;
}

.unified-nav.light .mega-column + .mega-column::before {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.06) 20%,
        rgba(0, 0, 0, 0.06) 80%,
        transparent 100%);
}

.mega-heading {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nav-text);
    opacity: 0.5;
    padding: 2px 10px 8px;
    margin: 0;
}

.mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Mega list items: icon tile + label + description, all on one row.
   The icon sits inside a small rounded tile so emoji don't look
   like bare text on a dark background. */
.mega-list .dropdown-link {
    padding: 9px 10px;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.mega-list .dropdown-link:hover,
.mega-list .dropdown-link:focus-visible {
    background: rgba(102, 126, 234, 0.12);
    transform: translateX(1px);
}

.mega-list .dropdown-link .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    border-radius: 8px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mega-list .dropdown-link:hover .nav-icon {
    background: linear-gradient(135deg,
        rgba(102, 126, 234, 0.28) 0%,
        rgba(139, 92, 246, 0.22) 100%);
    border-color: rgba(139, 92, 246, 0.4);
    transform: scale(1.04);
}

.unified-nav.light .mega-list .dropdown-link .nav-icon {
    background: linear-gradient(135deg, #f4f6fb 0%, #eef1f9 100%);
    border-color: rgba(0, 0, 0, 0.06);
}

.mega-list .dropdown-text .nav-text {
    font-size: 13.5px;
    font-weight: 600;
}

.mega-list .nav-description {
    font-size: 11.5px;
    opacity: 0.68;
    margin-top: 1px;
}

/* Featured tile — polished card with arrow cue */
.mega-feature {
    grid-area: feature;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    border-radius: 14px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
        linear-gradient(160deg, rgba(102, 126, 234, 0.18) 0%, rgba(22, 20, 40, 0.35) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    text-decoration: none;
    color: var(--nav-text-hover, #ffffff);
    transition:
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

/* Soft glow that grows on hover */
.mega-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(120% 80% at 100% 0%, rgba(139, 92, 246, 0.35) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.mega-feature:hover {
    transform: translateY(-3px);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.25);
}

.mega-feature:hover::after {
    opacity: 1;
}

.mega-feature > * {
    position: relative;
    z-index: 1;
}

.mega-feature-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
    color: #c4b5fd;
}

.unified-nav.light .mega-feature-eyebrow {
    color: #6366f1;
}

.mega-feature-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.mega-feature-body {
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0.82;
}

.mega-feature-cta {
    font-size: 13px;
    font-weight: 600;
    margin-top: auto;
    color: var(--nav-text-hover, #ffffff);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.2s ease;
}

.mega-feature:hover .mega-feature-cta {
    transform: translateX(3px);
}

/* Light-theme tuning for the feature tile */
.unified-nav.light .mega-feature {
    color: var(--nav-text-hover, #111827);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 55%),
        linear-gradient(160deg, rgba(59, 130, 246, 0.06) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-color: rgba(99, 102, 241, 0.22);
}

/* Stack columns into a single flow when screen gets tight. */
@media (max-width: 960px) {
    .dropdown-menu.mega-menu.mega-has-feature,
    .dropdown-menu.mega-menu.mega-no-feature {
        grid-template-areas: "cols" "feature";
        grid-template-columns: 1fr;
    }
    .mega-column + .mega-column::before {
        display: none;
    }
}

/* Mobile drawer: column headings become subtle section labels. */
.mobile-mega-heading {
    list-style: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-text);
    opacity: 0.55;
    padding: 10px 16px 4px 40px;
    margin-top: 4px;
}

.mobile-mega-feature .dropdown-link {
    background: rgba(102, 126, 234, 0.14);
    border-radius: 8px;
    margin-top: 6px;
}

/* ===================================================
   USER INFO
   =================================================== */

.nav-user {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Smart login slot: Login link when anonymous */
.nav-auth-login:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.user-dropdown {
    position: relative;
}

.user-button {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--nav-border);
    border-radius: 6px;
    color: var(--nav-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.user-button:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--nav-highlight);
    color: var(--nav-text-hover);
}

.user-icon {
    font-size: 16px;
    margin-right: 6px;
}

.user-name {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu {
    right: 0;
    left: auto;
    transform: translateX(0);
}

.user-menu.show {
    transform: translateX(0);
}

/* ===================================================
   MOBILE MENU
   =================================================== */

.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background: var(--nav-text);
    margin: 2px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.mobile-menu-toggle.open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-nav-drawer {
    position: fixed;
    top: var(--nav-height, 60px);
    right: -100%;
    width: min(320px, 92vw);
    height: calc(100vh - var(--nav-height, 60px));
    background: var(--dropdown-background);
    border-left: 1px solid var(--dropdown-border);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1004; /* Above marketing header dropdowns */
}

.mobile-nav-drawer.open {
    right: 0;
}

.mobile-nav-content {
    padding: 20px;
}

.mobile-menu .nav-item {
    margin-bottom: 8px;
}

.mobile-menu .nav-link {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
}

.mobile-dropdown-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--nav-text);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.mobile-dropdown-header:hover {
    background: rgba(59, 130, 246, 0.1);
}

.mobile-dropdown-header.open {
    color: var(--nav-text-active);
}

.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-dropdown-content.open {
    max-height: 320px;
}

/* Flattened mega menu inside the mobile drawer can be long — give it
   enough room for ~9 items + column headings + a feature CTA. */
.mobile-dropdown-content.mobile-mega-content.open {
    max-height: 900px;
}

.mobile-dropdown-content .dropdown-link {
    padding: 10px 16px 10px 40px;
    font-size: 14px;
    gap: 8px;
}

.mobile-dropdown-content .nav-description {
    font-size: 10px;
}

/* Mobile locale switcher — sits at the bottom of the drawer, separated from
   the main nav by a subtle divider. The locale list (9 items) needs more
   vertical room than the default 300px collapsed height. */
.mobile-locale-menu {
    list-style: none;
    margin: 16px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-locale-switcher .mobile-dropdown-header {
    font-weight: 500;
}

.mobile-locale-switcher .mobile-dropdown-content.open {
    max-height: 600px;
}

.mobile-locale-option[data-current="true"] {
    background: rgba(59, 130, 246, 0.08);
    font-weight: 600;
}

.mobile-locale-option .nav-description {
    opacity: 0.7;
}

.mobile-user-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--nav-border);
}

.mobile-user-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    margin-bottom: 12px;
}

.mobile-user-header .user-name {
    font-weight: 600;
    margin-left: 8px;
    flex: 1;
}

.mobile-user-header .user-type {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--nav-text-active);
    font-weight: 600;
}

.mobile-user-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-user-link {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--nav-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.mobile-user-link:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* ===================================================
   RESPONSIVE BREAKPOINTS
   =================================================== */

/* Mobile First - Default styles above are for mobile */

/* ----------------------------------------------------------------
   RESPONSIVE STRATEGY (WordPress-style clean transition)
   - Below 1100px → hamburger drawer. Single clean breakpoint; no
     awkward icon-only middle state that still overflowed at 1024px.
   - 1100px–1279px → full text desktop nav, tight spacing.
   - 1280px+      → generous desktop nav with roomy spacing.
   - Right-side cluster (.nav-user, .nav-tenant-switcher, language
     selector) AND the highlighted CTA are flex-shrink:0 so the
     Login button / Join Waitlist CTA / language picker are NEVER
     pushed off-screen or cropped.
   - Mega menus are position:fixed and viewport-anchored so they can
     never overflow, regardless of where their trigger sits.
   ---------------------------------------------------------------- */

/* Always-on rules that apply regardless of viewport size */
.nav-link.highlight {
    /* CTA must not shrink, or it visually clips ("Join Wai..."). */
    flex-shrink: 0;
}

.nav-text,
.brand-text {
    white-space: nowrap;
}

/* Desktop (1100px and up) — full text labels, hide hamburger */
@media (min-width: 1100px) {
    .nav-container {
        padding: 0 1.5rem;
        height: 68px;
        max-width: 1320px;
    }

    .unified-nav-container {
        --nav-height: 68px;
    }

    .brand-text {
        display: inline;
    }

    .nav-text,
    .nav-link .dropdown-arrow {
        display: inline;
    }

    .nav-menu {
        gap: 0.35rem;
    }

    .nav-link {
        padding: 8px 12px;
        font-size: 14.5px;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .desktop-menu {
        display: flex;
    }

    .mobile-nav-drawer {
        display: none;
    }

    /* Right-side cluster: never let it shrink, never let menu push it off. */
    .nav-user,
    .nav-tenant-switcher,
    .nav-language-selector,
    .nav-locale-switcher {
        flex-shrink: 0;
    }

    /* Icons in the top bar are smaller at mid desktop widths so labels
       stay legible without eating horizontal space. */
    .nav-link .nav-icon {
        font-size: 14px;
        margin-right: 5px;
    }
}

/* Roomy desktop (1280px and up) — generous spacing */
@media (min-width: 1280px) {
    .nav-container {
        padding: 0 2rem;
        height: 70px;
        max-width: 1400px;
    }

    .unified-nav-container {
        --nav-height: 70px;
    }

    .nav-menu {
        gap: 0.75rem;
    }

    .nav-link {
        padding: 10px 14px;
        font-size: 15px;
    }

    .brand-link {
        font-size: 20px;
    }

    .nav-link .nav-icon {
        font-size: 15px;
        margin-right: 6px;
    }
}

/* Extra-large Desktop (1440px and up) — original generous spacing */
@media (min-width: 1440px) {
    .nav-menu {
        gap: 1rem;
    }

    .nav-link {
        padding: 10px 16px;
    }
}

/* ===================================================
   ACCESSIBILITY
   =================================================== */

/* Focus indicators */
.nav-link:focus,
.dropdown-link:focus,
.user-button:focus,
.mobile-menu-toggle:focus {
    outline: 2px solid var(--nav-highlight);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .unified-nav {
        --nav-border: currentColor;
    }
    
    .nav-link,
    .dropdown-link {
        border: 1px solid transparent;
    }
    
    .nav-link:hover,
    .dropdown-link:hover {
        border-color: currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .nav-link,
    .dropdown-menu,
    .mobile-nav-drawer,
    .hamburger-line,
    .dropdown-arrow {
        transition: none;
    }
}

/* ===================================================
   MOBILE / TABLET / NARROW-LAPTOP OVERRIDES
   Applies to every width where we show the hamburger drawer
   instead of a horizontal desktop menu.
   =================================================== */

@media (max-width: 1099px) {
    .desktop-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-menu-wrapper {
        justify-content: flex-end;
    }

    /* Keep the right-side cluster compact on hamburger widths so the
       brand and the hamburger button never collide with Login / lang. */
    .nav-user .user-name {
        display: none;
    }

    .user-button {
        padding: 6px 8px;
    }

    /* Hide the desktop mega menu entirely at hamburger widths — it's
       available via the mobile drawer's flattened accordion instead. */
    .dropdown-menu.mega-menu {
        display: none !important;
    }

    /* Brand text stays visible on tablet+, collapses on true mobile. */
    .brand-text {
        display: inline;
    }

    /* Prevent scroll when mobile menu is open */
    body.mobile-nav-open {
        overflow: hidden;
    }

    /* Mobile overlay */
    body.mobile-nav-open::before {
        content: '';
        position: fixed;
        top: var(--nav-height, 60px);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--mobile-overlay);
        z-index: 998;
    }
}

/* True mobile: phone-only tweaks */
@media (max-width: 600px) {
    .brand-text {
        /* On small phones collapse to icon-only brand so the hamburger
           and language picker have room. */
        display: none;
    }

    .nav-container {
        padding: 0 0.75rem;
    }
}

/* ===================================================
   SPECIAL PAGE INTEGRATIONS
   =================================================== */

/* Enhanced Dashboard specific styles */
.unified-nav[data-user-type="admin"] {
    background: linear-gradient(135deg, #0c1426 0%, #1a2332 100%);
    border-bottom: 1px solid #2563eb;
}

.unified-nav[data-user-type="admin"] .nav-link.highlight {
    background: linear-gradient(135deg, #00d4ff 0%, #0ea5e9 100%);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* UnityXpressions specific styles */
.unified-nav[data-user-type="unityxpressions"] .nav-link.highlight {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Print styles */
@media print {
    .unified-nav-container,
    .mobile-nav-drawer {
        display: none;
    }
}

/* ===================================================
   UNIFIED FOOTER STYLES
   =================================================== */

.unified-footer {
    background: var(--bg-secondary, #121a2a);
    border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
    padding: 60px 0 30px;
    color: var(--text-primary, #f3f4f6);
}

.unified-footer .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.unified-footer .footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.unified-footer .footer-brand {
    padding-right: 40px;
}

.unified-footer .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary, #ffffff);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.unified-footer .footer-logo .logo-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    object-fit: contain;
}

.unified-footer .footer-tagline {
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.unified-footer .footer-column h4 {
    color: var(--text-primary, #ffffff);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 20px 0;
}

.unified-footer .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.unified-footer .footer-column li {
    margin-bottom: 12px;
}

.unified-footer .footer-column a {
    color: var(--text-muted, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.unified-footer .footer-column a:hover {
    color: var(--brand-primary, #667eea);
}

.unified-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
    font-size: 13px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

.unified-footer .footer-bottom-links {
    display: flex;
    gap: 20px;
}

.unified-footer .footer-bottom-links a {
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    text-decoration: none;
    transition: color 0.2s ease;
}

.unified-footer .footer-bottom-links a:hover {
    color: var(--brand-primary, #667eea);
}

/* ===================================================
   ASK BOB BRAND ICON (shared B logo classes)
   =================================================== */

.askbob-icon {
    display: inline-block;
    object-fit: contain;
    vertical-align: -0.2em;
}

.askbob-icon--xs { width: 16px; height: 16px; }
.askbob-icon--sm { width: 1em; height: 1em; }
.askbob-icon--md { width: 1.2em; height: 1.2em; }
.askbob-icon--lg { width: 24px; height: 24px; }
.askbob-icon--xl { width: 32px; height: 32px; }
.askbob-icon--2xl { width: 48px; height: 48px; }

.askbob-icon + * {
    margin-left: 0.25em;
}

/* Footer Responsive */
@media (max-width: 900px) {
    .unified-footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .unified-footer .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}

@media (max-width: 600px) {
    .unified-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .unified-footer .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}