/**
 * Section nav above Pro invitation layouts (.evt-inv-nav) — pushed by
 * events/invitations/renderer.blade.php when InvitationSectionNav returns links.
 * Colours come from the invitation theme set on .evt-invitation. It sits in normal
 * document flow and scrolls away with the page.
 */

.evt-invitation {
    --inv-nav-bg: var(--evt-background, #ffffff);
    --inv-nav-fg: var(--evt-primary, #1a1a1a);
    --inv-nav-accent: var(--evt-accent, #b8965a);
    --inv-nav-font: var(--evt-font-body, system-ui, sans-serif);
}

/* Theme primary here is the page's deep purple, not its text colour. */
.evt-layout-beauty-for-ashes.evt-invitation {
    --inv-nav-bg: var(--bfa-deep, #0e0020);
    --inv-nav-fg: var(--bfa-off, #f5f0ff);
    --inv-nav-accent: var(--bfa-gold, #f5c518);
    --inv-nav-font: var(--bfa-font-display, "Cinzel", Georgia, serif);
}

/* global.css has a bare nav {} rule (sticky, navy, fixed height) — reset it here,
   the same way .dash-nav and nav.set-tabs do. */
nav.evt-inv-nav {
    position: static;
    z-index: auto;
    display: block;
    height: auto;
    padding: 0;
    background: var(--inv-nav-bg);
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    border-bottom: 1px solid color-mix(in srgb, var(--inv-nav-fg) 14%, transparent);
}

.evt-inv-nav-list {
    display: flex;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    gap: 0.25rem clamp(0.75rem, 3vw, 2.25rem);
    margin: 0 auto;
    padding: 0 1.25rem;
    list-style: none;
    max-width: 1100px;
    overflow-x: auto;
    scrollbar-width: none;
}

.evt-inv-nav-list::-webkit-scrollbar {
    display: none;
}

.evt-inv-nav-list li {
    flex-shrink: 0;
}

.evt-inv-nav-link {
    display: block;
    padding: 1.05rem 0.15rem 0.95rem;
    border-bottom: 1px solid transparent;
    color: var(--inv-nav-fg);
    color: color-mix(in srgb, var(--inv-nav-fg) 78%, var(--inv-nav-bg));
    font-family: var(--inv-nav-font);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.evt-inv-nav-link:hover,
.evt-inv-nav-link:focus-visible {
    color: var(--inv-nav-fg);
    border-bottom-color: var(--inv-nav-accent);
}

.evt-inv-nav-link:focus-visible {
    outline: 2px solid var(--inv-nav-accent);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .evt-inv-nav-list {
        justify-content: flex-start;
    }
}

/* Each section is wrapped in .evt-inv-anchor, so sibling rules written against the
   bare sections need the wrapper form too. */
.evt-layout-modern-minimal .evt-inv-anchor:has(> .mm-section:last-child) + .evt-inv-anchor > .mm-section:first-child {
    border-top: 1px solid var(--mm-border);
}