.venue-navigation {
    --nav-text-mobile: var(--asm-ftw-semi-bold) var(--asm-fts-sm)/var(--asm-ftl-open) var(--asm-font-family);
	--nav-item-desktop: var(--asm-ftw-semi-bold) var(--asm-fts-xs)/var(--asm-ftl-open) var(--asm-font-family);
	--nav-item-desktop-large: var(--asm-ftw-semi-bold) var(--asm-fts-sm)/var(--asm-ftl-open) var(--asm-font-family);
	--caption: var(--asm-ftw-semi-bold) 12px/var(--asm-ftl-open) var(--asm-font-family);

    padding-block-end: var(--space-5);
}

@media (min-width: 64em) {
    .venue-navigation {
        padding-block-end: 0;
    }
}

.venue-navigation a {
    color: var(--asm-sw-black);
}

@media (min-width: 64em) {
    .venue-navigation a {
        color: var(--asm-text-on-primary);
    }

    .theme_2 .venue-navigation a {
        color: var(--asm-sw-white);
    }

    .panel-header:not(.theme_2) .venue-navigation a {
        color: var(--asm-text-on-primary);
    }
}

.venue-navigation .nav .caption {
    padding-block-end: var(--space-3);
    font: var(--caption);
    color: var(--asm-sw-grey);
}

@media (min-width: 64em) {
    .venue-navigation .nav .caption {
        display: none;
    }
}

.venue-navigation .nav .nav-links {
    display: flex;
    flex-direction: column;
}

@media (min-width: 64em) {
    .venue-navigation .nav .nav-links {
        flex-direction: row;
        gap: var(--space-6);
    }
}

.venue-navigation .nav .nav-links .nav-links__item {
    position: relative;
	display: flex;
	align-items: center;
    padding-block: var(--space-3);
    font: var(--nav-text-mobile);
	text-decoration: none;
}

.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) {
	font-weight: var(--asm-ftw-medium);
}

.venue-navigation .nav .nav-links .nav-links__item.currentVenue {
	font-weight: var(--asm-ftw-bold);
}

/* The `font` shorthand resets `font-weight`. Repeat medium/bold after each breakpoint that sets `font:` so wide viewports keep the current vs other venue distinction. */
@media (min-width: 64em) {
	.venue-navigation .nav .nav-links .nav-links__item {
		align-items: stretch;
		padding-block: 0;
		font: var(--nav-item-desktop);
	}

	.venue-navigation .nav .nav-links .nav-links__item > a {
		display: flex;
		align-items: center;
		padding-block-start: var(--space-5);
		padding-block-end: var(--space-1);
	}

	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) {
		font-weight: var(--asm-ftw-medium);
	}

	.venue-navigation .nav .nav-links .nav-links__item.currentVenue {
		font-weight: var(--asm-ftw-bold);
	}
}

@media (min-width: 1200px) {
    .venue-navigation .nav .nav-links .nav-links__item {
		font: var(--nav-item-desktop-large);
	}

	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) {
		font-weight: var(--asm-ftw-medium);
	}

	.venue-navigation .nav .nav-links .nav-links__item.currentVenue {
		font-weight: var(--asm-ftw-bold);
	}
}

.venue-navigation .nav .nav-links .nav-links__item {
	white-space: nowrap;
}

.venue-navigation .nav .nav-links .nav-links__item > a {
	text-decoration: none;
}

.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a:hover,
.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a:focus {
	text-underline-offset: 2px;
	text-decoration-line: underline;
	text-decoration-color: var(--asm-sw-black);
	outline: none;
}

@media (min-width: 64em) {
	/* Desktop: single bar from ::after only; reset base text underline so it does not stack under the bar. */
	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a:hover,
	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a:focus {
		text-decoration: none;
		outline: none;
	}

	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a {
		position: relative;
	}

	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: var(--space-1);
		width: 0;
		height: 2px;
		background-color: var(--asm-text-on-primary);
	}

	.theme_2 .venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a::after {
		background-color: var(--asm-sw-white);
	}

	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a:hover::after,
	.venue-navigation .nav .nav-links .nav-links__item:not(.currentVenue) > a:focus::after {
		left: -10px;
		width: calc(100% + var(--space-5));
	}
}

.venue-navigation .nav .nav-links .nav-links__item.currentVenue {
    pointer-events: none;
}

/* More dropdown */
.venue-navigation .nav .nav-links .nav-links__item.more {
    position: relative;
    display: none;
}

.venue-navigation .nav .nav-links .nav-links__item.more:hover {
    background-image: url(/includes/client_public/assets/shared/dropdown-polygon.svg);
    background-position: 50% 153%;
    background-repeat: no-repeat;
}

.venue-navigation .nav .nav-links .nav-links__item.more .dropdown {
    display: none;
	position: absolute;
    top: 100%;
    left: 50%;
    max-width: 190px;
    padding-block: var(--space-6);
	background-color: var(--asm-sw-white);
	transform: translateX(-50%);
    border-radius: 8px;
    box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.10);
}

.venue-navigation .nav .nav-links .nav-links__item.more:hover .dropdown {
    display: block;
}

.venue-navigation .nav .nav-links .nav-links__item.more .dropdown .nav-links__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
}

.venue-navigation .nav .nav-links .nav-links__item.more .dropdown .nav-links__item a {
    padding-inline: var(--space-6);
    padding-block: var(--space-1);
    font: var(--nav-item-desktop);
    text-decoration: none;
    color: var(--asm-sw-black);
    overflow: hidden;
    white-space: normal;
    width: max-content;
}

.venue-navigation .nav .nav-links .nav-links__item.more .dropdown .nav-links__item a:hover,
.venue-navigation .nav .nav-links .nav-links__item.more .dropdown .nav-links__item a:focus,
.venue-navigation .nav .nav-links .nav-links__item.more .dropdown .nav-links__item a:focus-visible {
    text-underline-offset: 2px;
    text-decoration-line: underline;
    text-decoration-color: var(--asm-sw-black);
}

.venue-navigation .nav .nav-links .nav-links__item.more .dropdown :first-child {
    padding-block-start: var(--space-1);
}

.mobile-venue-nav .venue-navigation .nav .nav-links .nav-links__item {
    white-space: normal;
}