.lc-nav-overlay {

    --lc-no-bg:        #ffffff;
    --lc-no-fg:        #0a0a0a;
    --lc-no-muted:     rgba(10, 10, 10, 0.55);
    --lc-no-faint:     rgba(10, 10, 10, 0.35);
    --lc-no-divider:   rgba(10, 10, 10, 0.10);
    --lc-no-search-bg: rgba(10, 10, 10, 0.04);
    --lc-no-btn-bg:    #0a0a0a;
    --lc-no-btn-fg:    #ffffff;
    --lc-no-shadow:    0 -1px 0 rgba(10, 10, 10, 0.08);
}

[data-bs-theme="dark"] .lc-nav-overlay,
.lc-nav-overlay[data-theme="dark"] {
    --lc-no-bg:        #0a0a0a;
    --lc-no-fg:        #f5f5f5;
    --lc-no-muted:     rgba(245, 245, 245, 0.55);
    --lc-no-faint:     rgba(245, 245, 245, 0.32);
    --lc-no-divider:   rgba(245, 245, 245, 0.10);
    --lc-no-search-bg: rgba(245, 245, 245, 0.05);
    --lc-no-btn-bg:    #f5f5f5;
    --lc-no-btn-fg:    #0a0a0a;
    --lc-no-shadow:    0 -1px 0 rgba(245, 245, 245, 0.08);
}

.lc-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--lc-no-bg);
    color: var(--lc-no-fg);
    display: flex;
    flex-direction: column;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Slide in from the right, Bell-style. translateX 100% → 0 over
       500ms matches .g-connector-nav-wrap { transition: transform 0.5s }
       observed on bell.ca. Eased toward the end so the panel doesn't
       overshoot. Opacity stays at 1 throughout — the slide does the
       reveal, no crossfade needed. */
    opacity: 1;
    transform: translateX(100%);
    transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.lc-nav-overlay.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.lc-nav-overlay[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .lc-nav-overlay { transition: none; transform: none; }
}

.lc-nav-overlay__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0.75rem;
    min-height: 64px;
}

.lc-nav-overlay__brand {
    color: var(--lc-no-fg);
    text-decoration: none;
    font-family: var(--lifecur-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.03em;
}
.lc-nav-overlay__brand em {
    font-style: normal;
    color: var(--lc-no-faint);
    margin-left: 0.15em;
}

.lc-nav-overlay__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lc-nav-overlay__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--lc-no-fg);
    line-height: 1;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;

    font-size: 0;
}
.lc-nav-overlay__close::before,
.lc-nav-overlay__close::after {
    content: '×';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lifecur-serif, Georgia, serif);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--lc-no-fg);
    transition: opacity .15s ease;
}
.lc-nav-overlay__close::after {

    transform: translate(2px, 1px);
    opacity: 0.35;
}
.lc-nav-overlay__close:hover::before,
.lc-nav-overlay__close:active::before { opacity: 0.6; }
.lc-nav-overlay__close:hover::after,
.lc-nav-overlay__close:active::after  { opacity: 0.2; }
.lc-nav-overlay__close:focus-visible {
    outline: 1px solid var(--lc-no-fg);
    outline-offset: 4px;
}

.lc-nav-overlay__theme {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--lc-no-fg);
    line-height: 1;
    padding: 0.5rem 0.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.lc-nav-overlay__theme svg {
    width: 1.25rem;
    height: 1.25rem;
}
.lc-nav-overlay__theme:hover,
.lc-nav-overlay__theme:active {
    opacity: 0.6;
}
.lc-nav-overlay__theme:focus-visible {
    outline: 1px solid var(--lc-no-fg);
    outline-offset: 4px;
}
[data-bs-theme="light"] .lc-nav-overlay__theme .lc-icon-sun  { display: none; }
[data-bs-theme="dark"]  .lc-nav-overlay__theme .lc-icon-moon { display: none; }

/* Pin hide is centrally handled in radiance.css via opacity transition
   on html.lc-nav-overlay-open — fades in time with the 500ms overlay
   slide. A display:none rule here would short-circuit that fade. */

.lc-nav-overlay__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0 1rem;
    -webkit-overflow-scrolling: touch;
}

.lc-nav-overlay__search {
    margin: 0.75rem 1.5rem 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
}

.lc-nav-overlay__search input {
    flex: 1;
    width: 100%;
    appearance: none;
    background: var(--lc-no-search-bg);
    border: 1px solid var(--lc-no-divider);
    border-radius: 0;
    padding: 0.85rem 3.25rem 0.85rem 1.25rem;
    color: var(--lc-no-fg);
    font-size: 1rem;
    outline: none;
}
.lc-nav-overlay__search input::placeholder { color: var(--lc-no-muted); }
.lc-nav-overlay__search input:focus { border-color: var(--lc-no-fg); }

.lc-nav-overlay__search button {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0;
    background: var(--lc-no-btn-bg);
    color: var(--lc-no-btn-fg);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lc-nav-overlay__search button svg { width: 1.05rem; height: 1.05rem; }

.lc-nav-overlay__primary,
.lc-nav-overlay__secondary {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 1.5rem 0;
}

.lc-nav-overlay__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--lc-no-fg);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.25rem 0;
    border-top: 1px solid var(--lc-no-divider);

    /* Resting state for the staggered reveal — slightly dropped + faded.
       The .is-open ancestor flips both back to natural. Bell uses an
       explicit per-item delay on each row; we get the same effect via
       nth-child below. */
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity   300ms ease-out,
        transform 300ms ease-out,
        background-color 150ms ease;

    /* Suppress iOS / Android default tap-highlight. We render our own
       :active feedback below — competing highlights produce a flicker
       on touch-down. */
    -webkit-tap-highlight-color: transparent;
}
.lc-nav-overlay__row:first-child { border-top: 0; }

/* Cascade — only fires on rows in the ROOT panel. Sub-panels skip the
   stagger entirely (see rule below) because the drill-down already
   animates the whole panel in via 400ms transform slide; layering a
   per-row cascade on top of that reads as "panel arrives, then rows
   still loading" — janky, especially on mobile where the user just
   tapped and expects immediate content.

   Per-row delay grows by 80ms; capped at the 8th child so very long
   menus still finish revealing within ~1s. Bell uses 100ms steps;
   80ms reads as the same motion family while keeping long lists
   snappy. */

/* Slot the live-search bar into the same staggered reveal as the nav
   rows. Without this, the search bar sits at opacity 1 from frame
   zero while .__row's fade/translate in starting at 220ms — the
   search bar reads as "appearing before the menu is ready" and the
   gap between it and the not-yet-arrived rows looks like jank.

   Match the row transition shape exactly (opacity + 8px translateY,
   300ms ease-out) and slot before the first row's 220ms delay so the
   reveal order is: panel → search → row-1 → row-2 → … */
.lc-nav-overlay__search--live {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.lc-nav-overlay.is-open .lc-nav-overlay__search--live {
    opacity: 1;
    transform: none;
    transition-delay: 140ms;
}
@media (prefers-reduced-motion: reduce) {
    .lc-nav-overlay__search--live {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.lc-nav-overlay.is-open .lc-nav-overlay__row {
    opacity: 1;
    transform: none;
}
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(1) { transition-delay: 220ms, 220ms, 0s; }
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(2) { transition-delay: 300ms, 300ms, 0s; }
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(3) { transition-delay: 380ms, 380ms, 0s; }
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(4) { transition-delay: 460ms, 460ms, 0s; }
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(5) { transition-delay: 540ms, 540ms, 0s; }
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(6) { transition-delay: 620ms, 620ms, 0s; }
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(7) { transition-delay: 700ms, 700ms, 0s; }
.lc-nav-overlay.is-open [data-panel="root"] .lc-nav-overlay__row:nth-child(n+8) { transition-delay: 780ms, 780ms, 0s; }

/* Sub-panel rows have NO cascade delay — they appear in-place as the
   panel slides in. Transition itself stays so the resting state still
   flips smoothly when the panel becomes .is-open. */
.lc-nav-overlay.is-open [data-panel]:not([data-panel="root"]) .lc-nav-overlay__row {
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .lc-nav-overlay__row {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .lc-nav-overlay.is-open .lc-nav-overlay__row { transition-delay: 0s !important; }
}

/* Hover: pointer devices only. Touch devices skip :hover entirely
   because mobile browsers don't reliably clear :hover after a tap —
   the highlight lingers on the just-tapped drill button until the
   user taps elsewhere, which reads as "stuck" or janky. */
@media (hover: hover) {
    .lc-nav-overlay__row:hover {
        background-color: color-mix(in srgb, var(--lc-no-fg) 4%, transparent);
    }
}

/* :active — quick press-down acknowledgment. Triggers on every device
   (mouse-down, touch-down) the moment the user presses. Released the
   moment they let go. Gives the immediate "I felt that" feedback that
   touch UIs need; replaces the iOS gray flash we suppressed above. */
.lc-nav-overlay__row:active {
    background-color: color-mix(in srgb, var(--lc-no-fg) 8%, transparent);
}

.lc-nav-overlay__row:focus-visible {
    outline: 2px solid var(--lc-no-fg);
    outline-offset: -2px;
}

.lc-nav-overlay__arrow {
    color: var(--lc-no-faint);
    font-size: 1rem;
    line-height: 1;
}

.lc-nav-overlay__secondary {
    border-top: 1px solid var(--lc-no-divider);
    margin-top: 0;
}
.lc-nav-overlay__secondary .lc-nav-overlay__row:first-child { border-top: 0; }

.lc-nav-overlay__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.lc-nav-overlay__panel[hidden] { display: none; }

/* Drill-down sub-panel swap — slides in from the right when entering
   a child panel, from the left when going back. Bell uses `left 0.4s`
   on its UL holding the items; we use transform for GPU acceleration.
   Full 100% slide reads as a true sub-page swap. */
@keyframes lc-nav-overlay-slide-in-forward {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);    }
}
@keyframes lc-nav-overlay-slide-in-back {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0);     }
}
.lc-nav-overlay__panel.is-active {
    animation: lc-nav-overlay-slide-in-forward 400ms cubic-bezier(.22, .61, .36, 1);
}
.lc-nav-overlay__panel.is-active.is-back {
    animation: lc-nav-overlay-slide-in-back 400ms cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .lc-nav-overlay__panel.is-active { animation: none; }
}

button.lc-nav-overlay__row {
    appearance: none;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--lc-no-divider);
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    color: var(--lc-no-fg);
}
button.lc-nav-overlay__row:first-child { border-top: 0; }

.lc-nav-overlay__back-row {
    appearance: none;
    background: transparent;
    border: 0;
    width: calc(100% - 3rem);
    margin: 0.5rem 1.5rem 0.25rem;
    padding: 0.75rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--lc-no-fg);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    font-family: inherit;
    transition: opacity 150ms ease, background-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .lc-nav-overlay__back-row:hover { opacity: 0.7; }
}
.lc-nav-overlay__back-row:active { opacity: 0.5; }
.lc-nav-overlay__back-arrow {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--lc-no-faint);
}

.lc-nav-overlay__footer {
    display: flex;
    align-items: stretch;
    box-shadow: var(--lc-no-shadow);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.lc-nav-overlay__footer-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 1rem 0.5rem;
    color: var(--lc-no-muted);
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 1px solid var(--lc-no-divider);
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
}
.lc-nav-overlay__footer-cell:first-child { border-left: 0; }
.lc-nav-overlay__footer-cell:hover { color: var(--lc-no-fg); }

.lc-nav-overlay__footer-cell--wide { flex: 2; }

.lc-nav-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lc-nav-trigger svg { width: 1.5rem; height: 1.5rem; }

@media (max-width: 767.98px) {
    .lifecur-nav .lifecur-burger      { display: inline-flex; }
    .lifecur-nav .lifecur-nav-collapse { display: none; }

    .lifecur-nav .lifecur-nav-right   { gap: 0.5rem; }
    .lifecur-nav .lifecur-nav-right .nav-item.dropdown { display: none; }
}

@media (min-width: 768px) {
    .lc-nav-overlay__scroll      { padding-inline: 0.5rem; }
    .lc-nav-overlay__topbar      { padding-inline: 2.5rem; }
    .lc-nav-overlay__search,
    .lc-nav-overlay__primary,
    .lc-nav-overlay__secondary   { margin-inline: 2.5rem; }
    .lc-nav-overlay__row         { font-size: 1.2rem; padding: 1.5rem 0; }
}