/* Mobile Navigation Menu */

body > nav,
nav.site-nav {
    background: var(--navy, #141B2D) !important;
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
}

body > nav .nav-center .nav-link,
nav.site-nav .nav-center .nav-link {
    border-radius: 6px !important;
}

body > nav .nav-right .btn,
nav.site-nav .nav-right .btn {
    border-radius: 8px !important;
}

body > nav .nav-right .btn-primary,
nav.site-nav .nav-right .btn-primary {
    background: var(--teal, #10B981) !important;
    color: var(--white, #fff) !important;
}

body > nav .nav-right .btn-primary:hover,
nav.site-nav .nav-right .btn-primary:hover {
    background: #0D9668 !important;
    color: var(--white, #fff) !important;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 1002;
}

.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    margin: 5px 0;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Translate first so the top + bottom lines converge to the middle line's
 * center, then rotate to cross. Spans are 2px tall with 5px top/bottom
 * margin → 12px between consecutive centers, so the outer lines need to
 * move 7px (height + margin) to overlap the middle. The previous order
 * (rotate, then translate) rendered as a ">" arrow because the translates
 * were applied along the rotated axes. */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
    transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
    transform-origin: center;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-dropdown > .nav-link::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    opacity: 0.72;
}

.nav-dropdown::after {
    content: "";
    position: absolute;
    left: -0.75rem;
    right: -0.75rem;
    top: 100%;
    height: 1rem;
}

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    width: min(680px, calc(100vw - 32px));
    padding: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    background: rgba(20, 27, 45, 0.98);
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 1003;
}

.nav-dropdown-panel-compact {
    width: min(380px, calc(100vw - 32px));
    grid-template-columns: minmax(0, 1fr);
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav-profile-link,
.mobile-nav-profile-link {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    min-width: 0;
    color: var(--text-light, rgba(255, 255, 255, 0.72));
    text-decoration: none;
}

.nav-profile-link {
    padding: 0.75rem;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-profile-link:hover,
.nav-profile-link:focus-visible {
    color: var(--white, #fff);
    background: var(--navy-light, #1E2A45);
    outline: none;
}

.nav-profile-link.is-disabled,
.mobile-nav-profile-link.is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.nav-profile-link.is-disabled:hover,
.nav-profile-link.is-disabled:focus-visible {
    color: var(--text-light, rgba(255, 255, 255, 0.72));
    background: transparent;
    outline: none;
}

.nav-profile-link.is-disabled .nav-profile-title,
.mobile-nav-profile-link.is-disabled .nav-profile-title {
    color: rgba(255, 255, 255, 0.82);
}

.nav-profile-link-wide {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.035);
}

.nav-profile-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    line-height: 1;
}

.nav-profile-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-profile-title {
    color: var(--white, #fff);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.nav-profile-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex-wrap: wrap;
}

.nav-profile-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.15rem;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #93C5FD;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

html[data-theme="light"] .nav-profile-link.is-disabled,
html[data-theme="light"] .mobile-nav-profile-link.is-disabled {
    color: #667085;
}

html[data-theme="light"] .nav-profile-link.is-disabled:hover,
html[data-theme="light"] .nav-profile-link.is-disabled:focus-visible {
    color: #667085;
    background: transparent;
}

html[data-theme="light"] .nav-profile-link.is-disabled .nav-profile-title,
html[data-theme="light"] .mobile-nav-profile-link.is-disabled .nav-profile-title {
    color: #344054;
}

html[data-theme="light"] .nav-profile-badge {
    background: #EEF4FF;
    color: #3E64E0;
}

.nav-profile-description {
    margin-top: 0.25rem;
    color: var(--text-lighter, rgba(255, 255, 255, 0.56));
    font-size: 0.75rem;
    line-height: 1.35;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(20, 27, 45, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
    padding: 0.5rem 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    z-index: 999;
}

/* Adjust for pages with announcement banner */
.has-banner .mobile-nav {
    top: 104px;
    max-height: calc(100vh - 104px);
}

.mobile-nav.active,
.mobile-nav.open {
    transform: translateY(0);
    opacity: 1;
}

.mobile-nav-link {
    display: block;
    padding: 1rem 2rem;
    color: var(--text-light, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    color: var(--white, #fff);
    background: var(--navy-light, #1E2A45);
    border-left-color: var(--blue, #3B82F6);
}

.mobile-nav-profiles {
    padding: 0.25rem 1.25rem 0.75rem 1.75rem;
}

.mobile-nav-profile-link {
    padding: 0.625rem 0;
    grid-template-columns: 1.75rem minmax(0, 1fr);
}

.mobile-nav-profile-link-wide {
    margin-top: 0.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
}

.mobile-nav-profile-link .nav-profile-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

.mobile-nav-profile-link .nav-profile-title {
    font-size: 0.8125rem;
}

.mobile-nav-profile-link .nav-profile-description {
    font-size: 0.75rem;
}

/* Mobile CTA button in dropdown */
.mobile-nav-cta {
    display: block;
    margin: 0.75rem 1.5rem 1rem;
    padding: 0.875rem 1.5rem;
    background: var(--teal, #10B981);
    color: var(--white, #fff);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.mobile-nav-cta:hover,
.mobile-nav-cta:active {
    background: #0D9668;
}

/* Theme control, for phones where the bar has no room for it (see the 480 tier
   below). Built by ensureMenuToggle() in js/dealroom-theme-3da7d8e.js; the
   button itself is a plain .theme-toggle and takes its styling from the theme
   sheet, so only the row around it is described here. Hidden by default — on
   anything wider the toggle is still in the bar and a second one would just be
   two controls for one setting. */
.mobile-nav-theme {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 1.5rem 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.1)); /* theme-guardrail-allow: token + literal fallback, the pattern every rule in this file uses — the mobile nav also renders on pages that never load the theme sheet */
}

.mobile-nav-theme-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-light, rgba(255, 255, 255, 0.72)); /* theme-guardrail-allow: token + literal fallback, same as .mobile-nav-link above */
}

/* Responsive text helpers for nav buttons */
.nav-right .short-text {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        order: 3;
        margin-left: 0.5rem;
    }

    .mobile-nav {
        display: block;
    }

    .nav-inner {
        position: relative;
    }

    .nav-center {
        display: none;
    }

    .nav-dropdown,
    .nav-dropdown-panel {
        display: none;
    }

    .logo {
        flex: 1;
    }

    /* Scoped to the nav instead of left as a bare `.logo img` / `.nav-right`.
       Every page chassis declares those same two selectors at the same
       specificity — `.logo img { height: 28px }` in both css/nav.css and
       css/company-profile.css, `.nav-right { gap: 0.75rem }` in the latter —
       and on the entity index pages (/sectors/, /companies/, /investors/,
       /universities/, /people/, /countries/, /profiles/) the chassis sheet is
       linked AFTER this one, so the desktop logo and the wide gap won. That
       made the bar ~33px fatter than intended and pushed the hamburger off a
       375px screen entirely, where it could not be tapped. The homepage only
       escaped because its copy of those rules is an inline <style> above the
       <link>. Two elements plus a class beats them wherever they load. */
    body > nav .logo img,
    nav.site-nav .logo img {
        height: 22px;
        width: auto;
    }

    .nav-right {
        display: flex !important;
        align-items: center;
        order: 2;
    }

    body > nav .nav-right,
    nav.site-nav .nav-right {
        gap: 0.5rem;
    }

    .nav-right .btn-ghost {
        display: none;
    }

    .nav-right .btn-primary {
        padding: 0.4375rem 0.875rem;
        font-size: 0.8125rem;
    }

    .nav-right .full-text {
        display: none;
    }

    .nav-right .short-text {
        display: inline;
    }
}

/* Phones. Between 361 and 1024 the bar had no tier of its own: it was laid out
   with the tablet spacing and simply overflowed to the right, eating the nav's
   own 2rem of padding and then the screen edge. Nothing in the row can shrink
   — logo, two icon buttons, the two-line trial CTA and the hamburger are all at
   their content width, and a flex item's `min-width: auto` refuses to go below
   that — so the only thing left to give is the space between them. Spacing
   only: the icon buttons keep their 32px tap target and the nav keeps its 2rem
   padding, so the logo still lines up with the headline underneath. The 360
   tier below is where both of those finally give way. */
@media (max-width: 480px) {
    body > nav .nav-right,
    nav.site-nav .nav-right {
        gap: 0.375rem;
    }

    body > nav .nav-right .btn-primary,
    nav.site-nav .nav-right .btn-primary {
        padding-inline: 0.75rem;
    }

    .mobile-menu-toggle {
        margin-left: 0.25rem;
    }

    /* Search out of the bar, theme into the menu.
       Even with the spacing above, the row still runs edge to edge at 375: logo,
       search, theme toggle and the two-line trial CTA come to more than the bar
       holds, so the wordmark ended up flush against the search icon with no gap
       between them and the icon read as missing. Nothing here can shrink, so one
       control has to leave, and search is the one people go looking for. The
       theme toggle moves to .mobile-nav-theme in the menu — it is not dropped.
       Freeing it also lets `.logo { flex: 1 }` do its job again: the logo box
       takes up the slack and the gap reappears on its own. */
    body > nav .nav-right .theme-toggle,
    nav.site-nav .nav-right .theme-toggle {
        display: none;
    }

    .mobile-nav-theme {
        display: flex;
    }
}

@media (max-width: 360px) {
    body > nav,
    nav.site-nav {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    .nav-inner {
        gap: 0.25rem;
    }

    .logo {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    /* Scoped for the same reason as the 1024 tier above, and now also so this
       narrower rule still outranks it — a bare `.logo img` here would lose to
       the scoped 22px one and the smallest screens would silently get the
       bigger logo back. */
    body > nav .logo img,
    nav.site-nav .logo img {
        max-width: 96px;
        height: 20px;
        object-fit: contain;
        object-position: left center;
    }

    body > nav .nav-right,
    nav.site-nav .nav-right {
        flex: 0 0 auto;
        gap: 0.375rem;
    }

    .nav-search-toggle,
    .theme-toggle {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px;
    }

    .nav-right .btn-primary {
        min-width: 0;
        padding: 0.375rem 0.75rem;
    }

    .mobile-menu-toggle {
        flex: 0 0 auto;
        margin-left: 0.125rem;
        padding: 0.375rem;
    }

    .mobile-menu-toggle span {
        width: 20px;
    }
}