/**
 * LC Site Navigation — global header (v2.5.0)
 *
 * Loaded on every front-end page when the global nav is enabled (option
 * `lc_nav_enabled`). NOT loaded on the plugin-driven front page itself,
 * because front-page.css already contains identical nav rules and would
 * double-load them. Cascade is identical either way.
 */

:root {
    --lc-nav-h:    52px;
    --lc-nav-bg:   rgba(0,0,0,0.82);
    --lc-nav-bg2:  rgba(0,0,0,0.96);
    --lc-nav-amber: #ff9500;
    --lc-nav-amber2:#ffb340;
    --lc-nav-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Push body content down so it isn't hidden under the fixed nav. Only on
 * pages that actually received the injected nav (excludes the plugin-
 * driven front page which sets its own hero offsets). */
body.lc-nav-injected { padding-top: var(--lc-nav-h); }
body.lc-nav-injected.admin-bar { padding-top: calc(var(--lc-nav-h) + 32px); }
@media(max-width:782px) {
    body.lc-nav-injected.admin-bar { padding-top: calc(var(--lc-nav-h) + 46px); }
}

/* ── NAV BAR ──────────────────────────────────────────────────────────── */
.lc-fp-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
    height: var(--lc-nav-h);
    background: var(--lc-nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center;
    padding: 0 24px;
    font-family: var(--lc-nav-font);
    transition: background 0.3s, box-shadow 0.3s;
}
.lc-fp-nav.scrolled {
    background: var(--lc-nav-bg2);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* ── v2.5.1: INSTA360-STYLE TRANSPARENT-AT-TOP ──────────────────────────
 * When the body opts in (server-side decision via post meta or site
 * default), the nav has NO background and NO border at scroll position 0.
 * As soon as the user scrolls past 20px, JS adds .scrolled and the
 * specificity of `.lc-fp-nav.scrolled` (above) restores the solid bar.
 * The transition on `.lc-fp-nav` itself fades the change smoothly. */
body.lc-nav-trans-top .lc-fp-nav:not(.scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
/* Soften the items text-shadow so light text stays readable when the
 * underlying hero is light. (Subtle — only kicks in when transparent.) */
body.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-items a,
body.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-dd-trigger,
body.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-firstname,
body.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-signin,
body.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-badge {
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
body.admin-bar .lc-fp-nav { top: 32px; }
@media(max-width:782px){ body.admin-bar .lc-fp-nav { top: 46px; } }
body.admin-bar .lc-fp-mobile-menu { top: calc(32px + var(--lc-nav-h)); }

.lc-fp-nav-logo {
    display: flex; align-items: center; gap: 9px;
    flex-shrink: 0; margin-right: 24px;
    color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
    text-decoration: none;
}
.lc-fp-nav-logo:hover { color: #fff; text-decoration: none; }
.lc-fp-nav-monogram {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, var(--lc-nav-amber) 0%, #e07b00 100%);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #000; letter-spacing: -0.5px;
    flex-shrink: 0;
}
.lc-fp-nav-logo-img { height: 30px; width: auto; max-width: 160px; display: block; }
.lc-fp-nav-items {
    display: flex; align-items: center; gap: 2px; flex: 1;
    list-style: none; margin: 0; padding: 0;
}
.lc-fp-nav-items li { list-style: none; margin: 0; padding: 0; }
.lc-fp-nav-items a {
    display: block; padding: 6px 10px;
    font-size: 13px; color: rgba(255,255,255,0.82); font-weight: 400;
    border-radius: 6px; transition: color 0.15s, background 0.15s;
    white-space: nowrap; text-decoration: none;
}
.lc-fp-nav-items a:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }
.lc-fp-nav-utils {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 12px;
}
.lc-fp-nav-icon {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: rgba(255,255,255,0.8) !important; font-size: 16px;
    transition: background 0.15s; cursor: pointer; text-decoration: none;
}
.lc-fp-nav-icon:hover { background: rgba(255,255,255,0.1); color: #fff !important; }
.lc-fp-nav-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
    border-radius: 18px; color: rgba(255,255,255,0.85) !important; font-size: 12px; font-weight: 500;
    background: transparent; transition: background 0.15s; text-decoration: none; position: relative;
}
.lc-fp-nav-badge:hover { background: rgba(255,255,255,0.08); color: #fff !important; }
.lc-fp-nav-signin {
    padding: 6px 12px; border-radius: 18px;
    color: rgba(255,255,255,0.85) !important; font-size: 13px; font-weight: 500;
    transition: background 0.15s; text-decoration: none;
}
.lc-fp-nav-signin:hover { background: rgba(255,255,255,0.08); color: #fff !important; text-decoration: none; }
.lc-fp-nav-cta {
    padding: 7px 16px; border-radius: 18px;
    background: var(--lc-nav-amber); color: #000 !important; font-size: 12px; font-weight: 600;
    text-decoration: none; transition: background 0.2s, transform 0.2s; white-space: nowrap;
}
.lc-fp-nav-cta:hover { background: var(--lc-nav-amber2); transform: scale(1.03); color: #000 !important; }

/* ── DISCOVER DROPDOWN ────────────────────────────────────────────────── */
.lc-fp-nav-has-dd { position: relative; }
.lc-fp-nav-dd-trigger {
    cursor: pointer; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.82);
    padding: 6px 10px; border-radius: 6px; transition: color 0.15s, background 0.15s;
    user-select: none; white-space: nowrap; display: block;
}
.lc-fp-nav-dd-trigger:hover { color: #fff; background: rgba(255,255,255,0.08); }
.lc-fp-nav-dd {
    position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    background: rgba(20,20,20,0.95); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
    min-width: 220px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
    opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1000;
}
/* hover bridge — same pattern as the user dropdown fix in v2.4.26 */
.lc-fp-nav-dd::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.lc-fp-nav-has-dd:hover .lc-fp-nav-dd {
    opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.lc-fp-nav-dd a {
    display: block; padding: 9px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.75);
    transition: background 0.15s, color 0.15s; text-decoration: none;
}
.lc-fp-nav-dd a:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* ── USER AVATAR + DROPDOWN ───────────────────────────────────────────── */
.lc-fp-nav-user {
    position: relative; display: flex; align-items: center; gap: 8px;
    cursor: pointer; padding: 4px 0;
}
.lc-fp-nav-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; border: 2px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.lc-fp-nav-firstname {
    font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85);
    max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lc-fp-nav-user-caret { color: rgba(255,255,255,0.5); flex-shrink: 0; }
.lc-fp-nav-user-dd {
    position: absolute; top: calc(100% + 12px); right: 0;
    background: rgba(20,20,20,0.95); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    min-width: 160px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
    opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1000;
}
.lc-fp-nav-user-dd::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.lc-fp-nav-user:hover .lc-fp-nav-user-dd {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.lc-fp-nav-user-dd a {
    display: block; padding: 8px 12px; border-radius: 8px;
    font-size: 13px; color: rgba(255,255,255,0.75); transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.lc-fp-nav-user-dd a:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* ── HAMBURGER + MOBILE MENU ──────────────────────────────────────────── */
.lc-fp-hamburger { display: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 8px; margin-left: auto; }
.lc-fp-hamburger span { display: block; width: 22px; height: 2px; background: #fff; transition: transform 0.2s, opacity 0.2s; }
.lc-fp-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lc-fp-hamburger.active span:nth-child(2) { opacity: 0; }
.lc-fp-hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.lc-fp-mobile-menu {
    position: fixed; top: var(--lc-nav-h); left: 0; right: 0;
    background: rgba(0,0,0,0.96); backdrop-filter: blur(20px);
    padding: 18px 24px; display: none; flex-direction: column; gap: 4px; z-index: 8999;
    max-height: calc(100vh - var(--lc-nav-h)); overflow-y: auto;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lc-fp-mobile-menu.active { display: flex; }
.lc-fp-mobile-menu a { color: rgba(255,255,255,0.85); padding: 12px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); text-decoration: none; }
.lc-fp-mobile-menu a:hover { color: #fff; }
.lc-fp-mobile-menu .lc-fp-mobile-cta { background: var(--lc-nav-amber); color: #000; padding: 12px 16px; border-radius: 22px; text-align: center; font-weight: 600; margin-top: 12px; border-bottom: 0; }

@media (max-width: 980px) {
    .lc-fp-nav-items, .lc-fp-nav-utils { display: none; }
    .lc-fp-hamburger { display: flex; }
}

/* ── v2.5.2.18: LIGHT NAV VARIANT ───────────────────────────────────────
 * White background with dark text — restores the legacy Enfold/Insha
 * header look on content pages (Award, Publications, individual posts)
 * that were laid out assuming a white bar above. Opt-in via per-page
 * meta box ("Light") or site-wide via option `lc_nav_light_default`.
 *
 * Combines cleanly with `body.lc-nav-trans-top`: the nav still goes
 * fully transparent at scroll position 0 (rule above wins via the
 * `:not(.scrolled)` specificity), then fades to SOLID-LIGHT after
 * scrolling instead of the default solid-dark.
 *
 * The plugin-driven front page never sets `lc-nav-light` (is_nav_light()
 * hard-returns false on the FP template), so its dark hero look is
 * unchanged. Hamburger lines and mobile menu also flip to dark-on-white. */
body.lc-nav-light {
    --lc-nav-bg:  rgba(255,255,255,0.92);
    --lc-nav-bg2: rgba(255,255,255,0.98);
}
body.lc-nav-light .lc-fp-nav {
    border-bottom-color: rgba(0,0,0,0.08);
}
body.lc-nav-light .lc-fp-nav.scrolled {
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
body.lc-nav-light .lc-fp-nav-logo,
body.lc-nav-light .lc-fp-nav-logo:hover {
    color: #111;
}
body.lc-nav-light .lc-fp-nav-items a {
    color: rgba(0,0,0,0.78);
}
body.lc-nav-light .lc-fp-nav-items a:hover {
    color: #000; background: rgba(0,0,0,0.06);
}
body.lc-nav-light .lc-fp-nav-icon {
    color: rgba(0,0,0,0.7) !important;
}
body.lc-nav-light .lc-fp-nav-icon:hover {
    background: rgba(0,0,0,0.08); color: #000 !important;
}
body.lc-nav-light .lc-fp-nav-badge {
    color: rgba(0,0,0,0.78) !important;
}
body.lc-nav-light .lc-fp-nav-badge:hover {
    background: rgba(0,0,0,0.06); color: #000 !important;
}
body.lc-nav-light .lc-fp-nav-signin {
    color: rgba(0,0,0,0.78) !important;
}
body.lc-nav-light .lc-fp-nav-signin:hover {
    background: rgba(0,0,0,0.06); color: #000 !important;
}
/* CTA button: amber stays amber (it's a brand colour); only ensure text
 * contrast remains correct against the now-light surrounding bar. */
body.lc-nav-light .lc-fp-nav-cta { color: #000 !important; }
body.lc-nav-light .lc-fp-nav-cta:hover { color: #000 !important; }
/* Discover dropdown */
body.lc-nav-light .lc-fp-nav-dd-trigger {
    color: rgba(0,0,0,0.78);
}
body.lc-nav-light .lc-fp-nav-dd-trigger:hover {
    color: #000; background: rgba(0,0,0,0.06);
}
body.lc-nav-light .lc-fp-nav-dd {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
body.lc-nav-light .lc-fp-nav-dd a {
    color: rgba(0,0,0,0.72);
}
body.lc-nav-light .lc-fp-nav-dd a:hover {
    background: rgba(0,0,0,0.05); color: #000;
}
/* User avatar dropdown */
body.lc-nav-light .lc-fp-nav-avatar {
    border-color: rgba(0,0,0,0.12);
}
body.lc-nav-light .lc-fp-nav-firstname {
    color: rgba(0,0,0,0.82);
}
body.lc-nav-light .lc-fp-nav-user-caret {
    color: rgba(0,0,0,0.5);
}
body.lc-nav-light .lc-fp-nav-user-dd {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
body.lc-nav-light .lc-fp-nav-user-dd a {
    color: rgba(0,0,0,0.72);
}
body.lc-nav-light .lc-fp-nav-user-dd a:hover {
    background: rgba(0,0,0,0.05); color: #000;
}
/* Hamburger lines + mobile menu */
body.lc-nav-light .lc-fp-hamburger span { background: #111; }
body.lc-nav-light .lc-fp-mobile-menu {
    background: rgba(255,255,255,0.98);
    border-bottom-color: rgba(0,0,0,0.08);
}
body.lc-nav-light .lc-fp-mobile-menu a {
    color: rgba(0,0,0,0.82);
    border-bottom-color: rgba(0,0,0,0.06);
}
body.lc-nav-light .lc-fp-mobile-menu a:hover { color: #000; }
body.lc-nav-light .lc-fp-mobile-menu .lc-fp-mobile-cta { color: #000; }
/* When transparent-at-top is ALSO active on a light-style page, the
 * darker text-shadow we applied for dark-on-light readability would
 * actually hurt the now-already-dark text. Strip it. */
body.lc-nav-light.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-items a,
body.lc-nav-light.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-dd-trigger,
body.lc-nav-light.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-firstname,
body.lc-nav-light.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-signin,
body.lc-nav-light.lc-nav-trans-top .lc-fp-nav:not(.scrolled) .lc-fp-nav-badge {
    text-shadow: none;
}