/* Shared structural navigation styles. Site branding remains local. */

/* Local custom.css supplies these tokens; fallbacks preserve existing sites. */
.site-primary-nav {
    background-color: var(--site-nav-background, #f8f9fa);
    color: var(--site-nav-color, #666);
    border-bottom: var(--site-nav-border, 0);
    box-shadow: var(--site-nav-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.site-primary-nav .navbar {
    --bs-navbar-color: var(--site-nav-color, #666);
    --bs-navbar-hover-color: var(--site-nav-hover-color, #000);
    --bs-navbar-active-color: var(--site-nav-active-color, #000);
    --bs-navbar-brand-color: var(--site-nav-brand-color, #000);
    --bs-navbar-brand-hover-color: var(--site-nav-hover-color, #000);
}

.site-primary-nav .navbar-brand {
    color: var(--site-nav-brand-color, #000);
}

.site-primary-nav .navbar-brand:hover,
.site-primary-nav .navbar-brand:focus-visible {
    color: var(--site-nav-hover-color, #000);
}

.site-primary-nav .navprimary-header,
.site-primary-nav .navprimary-header:visited {
    color: var(--site-nav-color, #666);
    font-size: var(--site-nav-font-size, 14px);
    font-weight: var(--site-nav-font-weight, 400);
    font-family: var(--site-nav-font-family, var(--bs-default-font, var(--bs-font-sans-serif)));
    text-transform: var(--site-nav-text-transform, uppercase);
}

.site-primary-nav .navprimary-header:hover,
.site-primary-nav .navprimary-header:focus-visible {
    color: var(--site-nav-hover-color, #000);
}

.site-primary-nav .navprimary-header:active,
.site-primary-nav .navprimary-header.active,
.site-primary-nav .navprimary-header.show {
    color: var(--site-nav-active-color, #000);
}

.site-primary-nav.primarynav-shell .primarynav-mobile-actions .dropdown-toggle {
    color: var(--site-nav-toggle-color, #555) !important;
}

.primarynav-brand-text {
    display: inline-block;
    max-width: min(65vw, 24rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.25rem;
    font-weight: 600;
}

.setprimarynavheight {
	height: 95px;
	position: relative;
	z-index: 500;
}

.fixed-header > .setprimarynavheight.primarynav-sticky-compact {
	height: 34px;
}

.primarynav-shell {
	height: 95px;
	width: 100%;
	max-width: 100vw;
	transition: height 160ms ease, box-shadow 160ms ease;
}

.primarynav-shell .navbar.setprimarynavheight {
	height: 95px;
	width: 100%;
	max-width: 100vw;
	transition: height 160ms ease;
}

.primarynav-desktop-bar {
	display: flex;
}

.primarynav-mobile-bar {
	display: none;
}

.topbar .primarynav-reduced-menu-shell {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	max-width: none;
}

.topbar .primarynav-reduced-menu-shell .primarynav-mobile-actions {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	position: static;
	white-space: nowrap;
}

.topbar .primarynav-reduced-menu-shell .primarynav-mobile-menu-host {
	display: inline-flex !important;
	position: static !important;
}

.topbar .primarynav-reduced-menu-shell .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	color: var(--site-utility-color, #555) !important;
}

.topbar .primarynav-reduced-menu-shell .primarynav-mobile-menu-button::after {
	display: none;
}

.topbar .primarynav-reduced-menu-shell .primarynav-mobile-menu-icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 20px;
	height: 20px;
}

.topbar .primarynav-reduced-menu-shell .primarynav-mobile-menu-icon span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

.topbar .primarynav-reduced-menu-shell .mobile-nav-menu {
	right: 0.5rem !important;
	left: auto !important;
	margin-right: 0.5rem !important;
	width: max-content;
	min-width: 300px;
	max-width: calc(100vw - 1rem);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

@media (min-width: 768px) {
	.topbar .primarynav-reduced-menu-shell {
		transform: translateY(-4px);
	}
}

.primarynav-shell.primarynav-compact,
.primarynav-shell.primarynav-compact .navbar.setprimarynavheight {
	height: 34px;
}

.primarynav-logo {
	max-height: 76px;
	width: var(--primarynav-logo-width, auto);
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	transition: opacity 120ms ease;
}

.primarynav-logo-compact {
	display: none;
	max-height: 26px;
}

.primarynav-shell.primarynav-compact .primarynav-logo-full {
	display: none;
}

.primarynav-shell.primarynav-compact .primarynav-logo-compact {
	display: inline-block;
}

.primarynav-shell.primarynav-compact .nav-link {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 34px;
}

@media (max-width: 1200px) {
	.setprimarynavheight {
		height: 46px;
	}

	.primarynav-shell,
	.primarynav-shell .navbar.setprimarynavheight {
		height: 46px;
		width: 100%;
		max-width: 100vw;
	}

	.primarynav-logo {
		max-height: 48px;
	}
}

@media (max-width: 1200px) {
	.primarynav-desktop-bar {
		display: none !important;
	}

	.primarynav-mobile-bar {
		display: flex !important;
	}

	.fixed-header > .setprimarynavheight.primarynav-sticky-compact,
	.primarynav-shell.primarynav-compact,
	.primarynav-shell.primarynav-compact .navbar.setprimarynavheight {
		height: 60px;
	}

	.primarynav-shell.primarynav-compact .primarynav-logo-full {
		display: inline-block;
	}

	.primarynav-shell.primarynav-compact .primarynav-logo-compact {
		display: none;
	}

	.primarynav-shell .primarynav-mobile-bar {
		position: relative;
		flex-wrap: nowrap;
		width: 100%;
		max-width: 100vw;
		min-height: 46px;
		padding-right: 0.5rem !important;
		overflow: visible;
	}

	.primarynav-shell .primarynav-mobile-actions {
		position: static;
		z-index: 30;
		display: inline-flex !important;
		flex: 0 0 auto;
		margin-left: auto;
		padding-right: 0;
		white-space: nowrap;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.primarynav-shell .primarynav-mobile-menu-host {
		position: static !important;
		z-index: 1000;
		display: inline-flex !important;
		transform: none;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.primarynav-shell .primarynav-mobile-menu-host > .mobile-nav-menu {
		right: 0.5rem !important;
		left: auto !important;
		width: max-content;
		min-width: 300px;
		max-width: calc(100vw - 1rem);
		max-height: calc(100vh - var(--primarynav-height, 64px) - 1rem);
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
	}

	.primarynav-shell .primarynav-mobile-actions .mobile-nav-menu {
		width: max-content;
		min-width: 300px;
		max-width: calc(100vw - 1rem);
	}

	.primarynav-shell .primarynav-mobile-actions .dropdown-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 28px;
		min-height: 28px;
		color: #555 !important;
	}

	.primarynav-shell .primarynav-mobile-menu-button::after {
		display: none;
	}

	.primarynav-shell .primarynav-mobile-menu-icon {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 20px;
		height: 20px;
	}

	.primarynav-shell .primarynav-mobile-menu-icon span {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
	}

	.primarynav-shell .primarynav-mobile-bar .navbar-brand,
	.primarynav-shell .primarynav-mobile-brand {
		display: inline-flex;
		align-items: center;
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	.primarynav-shell .primarynav-mobile-bar .navbar-brand img,
	.primarynav-shell .primarynav-mobile-brand img {
		display: block;
		width: var(--primarynav-logo-width, auto);
		height: auto;
		max-width: 100%;
		max-height: 48px;
		object-fit: contain;
	}
}

.lessonplayer-limited-header > .lessonplayer-primarynav-host,
.lessonplayer-limited-header .primarynav-shell,
.lessonplayer-limited-header .primarynav-shell .navbar.setprimarynavheight,
.lessonplayer-limited-header .primarynav-shell.primarynav-compact,
.lessonplayer-limited-header .primarynav-shell.primarynav-compact .navbar.setprimarynavheight {
	height: 34px;
	min-height: 34px;
}

.primarynav-fixed-header.reduced-layout-mobile-only-header > .setprimarynavheight {
	height: 34px;
	min-height: 34px;
}

.lessonplayer-limited-header .primarynav-shell.primarynav-compact .nav-link {
	line-height: 34px;
}

@media (max-width: 1200px) {
	.lessonplayer-limited-header > .lessonplayer-primarynav-host,
	.lessonplayer-limited-header .primarynav-shell,
	.lessonplayer-limited-header .primarynav-shell .navbar.setprimarynavheight,
	.lessonplayer-limited-header .primarynav-shell.primarynav-compact,
	.lessonplayer-limited-header .primarynav-shell.primarynav-compact .navbar.setprimarynavheight {
		height: 60px;
		min-height: 60px;
	}

	.primarynav-fixed-header.reduced-layout-mobile-only-header > .setprimarynavheight {
		height: 60px;
		min-height: 60px;
	}

	.lessonplayer-limited-header .primarynav-shell .primarynav-mobile-bar {
		padding-left: .5rem !important;
		padding-right: .5rem !important;
	}

	.lessonplayer-limited-header .navbar-brand {
		min-width: 0;
		max-width: calc(100vw - 88px);
		overflow: hidden;
	}

	.lessonplayer-limited-header .navbar-brand img {
		max-width: 100%;
		height: auto;
	}

	.lessonplayer-limited-header .mobile-nav-menu {
		max-width: calc(100vw - 16px);
	}
}

.primarynav-shell a.dropdown-header.primarynav-admin-header-link,
.primarynav-shell button.dropdown-header.primarynav-admin-header-link,
.primarynav-shell a.dropdown-header.primarynav-admin-header-link:active,
.primarynav-shell button.dropdown-header.primarynav-admin-header-link:active,
.primarynav-shell a.dropdown-header.primarynav-admin-header-link:visited {
	color: black;
	background-color: var(--bs-alternate-color);
	text-decoration: none;
	cursor: pointer;
}

.primarynav-shell a.dropdown-header.primarynav-admin-header-link,
.primarynav-shell button.dropdown-header.primarynav-admin-header-link {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-bottom: 0;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.primarynav-shell .mobile-nav-menu .dropdown-item,
.primarynav-shell .mobile-nav-menu .dropdown-header,
.primarynav-shell .mobile-nav-menu .primarynav-mobile-accordion-label {
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
}

.primarynav-shell .mobile-nav-menu .primarynav-style-bold {
	font-weight: 700 !important;
}

.primarynav-shell .mobile-nav-menu .bk-secondary,
.primarynav-shell .mobile-nav-menu .primarynav-admin-header-link.bk-secondary,
.primarynav-shell .mobile-nav-menu .bk-secondary:active,
.primarynav-shell .mobile-nav-menu .bk-secondary:visited {
	background-color: var(--bs-secondary-color) !important;
	color: #fff !important;
}

.primarynav-shell .mobile-nav-menu .bk-secondary:hover,
.primarynav-shell .mobile-nav-menu .primarynav-admin-header-link.bk-secondary:hover,
.primarynav-shell .mobile-nav-menu .bk-secondary:focus {
	background-color: var(--bs-secondary-color) !important;
	color: #fff !important;
	filter: brightness(0.95);
}

.primarynav-shell .mobile-nav-menu .bk-secondary *,
.primarynav-shell .mobile-nav-menu .primarynav-admin-header-link.bk-secondary * {
	color: #fff !important;
}

.primarynav-shell li:first-child > a.dropdown-header.primarynav-admin-header-link,
.primarynav-shell li:first-child > .primarynav-mobile-accordion-group > button.dropdown-header.primarynav-admin-header-link {
	border-top: 0;
}

.primarynav-shell a.dropdown-header.primarynav-admin-header-link:hover,
.primarynav-shell button.dropdown-header.primarynav-admin-header-link:hover,
.primarynav-shell a.dropdown-header.primarynav-admin-header-link:focus,
.primarynav-shell button.dropdown-header.primarynav-admin-header-link:focus {
	color: #000;
	background-color: color-mix(in srgb, var(--bs-alternate-color) 82%, #000 18%);
	text-decoration: none;
}

.primarynav-mobile-accordion-menu {
	position: fixed !important;
	top: calc(var(--primarynav-height, 64px) + 0.25rem) !important;
	right: 0.5rem !important;
	left: 0.5rem !important;
	width: auto;
	min-width: 0;
	max-width: none;
	max-height: calc(100vh - var(--primarynav-height, 64px) - 1rem);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

.primarynav-mobile-accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border-left: 0;
	border-right: 0;
	text-align: left;
}

.primarynav-mobile-accordion-label {
	min-width: 0;
	white-space: normal;
}

.primarynav-admin-header-link-alternate {
	color: black;
	background-color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.primarynav-mobile-accordion-caret::before {
	content: "+";
	display: inline-block;
	min-width: 1rem;
	text-align: center;
	font-weight: 700;
}

.primarynav-mobile-accordion-toggle:not(.collapsed) .primarynav-mobile-accordion-caret::before {
	content: "-";
}

.primarynav-mobile-accordion-panel {
	padding: 0.25rem 0;
}

.primarynav-shell .primarynav-mobile-actions .navprimary-header,
.primarynav-shell .primarynav-mobile-actions .topbar-link {
	letter-spacing: 0;
	text-transform: none;
}

.navprimary-header {
	font-size: 14px;
	font-weight: normal;
	font-family: var(--bs-default-font);
	color: #666;
	text-transform: uppercase;
}

	.navprimary-header:hover {
		color: #000;
		text-decoration: none;
	}

	.navprimary-header:visited,
	.navprimary-header:active {
		color: inherit;
		text-decoration: none;
	}

.custom-delay-dropdown {
	position: relative;
}

	/* Right-align the dropdown PANEL to the toggle */
	.custom-delay-dropdown > .dropdown-menu {
		right: 0;
		left: auto;
		display: block;
		/* hidden */
		visibility: hidden;
		opacity: 0;
		transform-origin: top;
		transform: translateY(-6px) scaleY(0.96);
		pointer-events: none;
		transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms;
		will-change: opacity, transform;
		padding: 0; /* cleaner panel look */
		width: max-content;
		min-width: 300px;
		max-width: calc(100vw - 1rem);
		border-radius: 6px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	}

		.custom-delay-dropdown > .dropdown-menu.primarynav-open {
			visibility: visible;
			opacity: 1;
			transform: translateY(0) scaleY(1);
			pointer-events: auto;
			transition: opacity 260ms ease, transform 260ms ease, visibility 0s;
		}

	/* Style each dropdown link */
	.custom-delay-dropdown .dropdown-menu .dropdown-item {
		font-size: 0.9rem; /* smaller font */
		color: #444; /* dark grey */
		padding: 0.55rem 1.2rem;
		border-bottom: 1px solid #e9e9e9; /* light grey divider */
		transition: background-color 160ms ease, color 160ms ease;
	}

	.custom-delay-dropdown .dropdown-menu li:last-child .dropdown-item {
		border-bottom: none;
	}

	.custom-delay-dropdown .dropdown-menu .dropdown-item:hover,
	.custom-delay-dropdown .dropdown-menu .dropdown-item:focus {
		background-color: #f5f5f5; /* light grey */
		color: #000; /* slightly darker text on hover */
		text-decoration: none;
	}

/* LC sizing lives on the nav; its layout host follows the resulting height. */
.site-primary-nav {
    --primarynav-current-height: var(--site-nav-height, 95px);
    --primarynav-current-padding-y: var(--site-nav-padding-y, 0.5rem);
}

.site-primary-nav.primarynav-compact,
.lessonplayer-limited-header .site-primary-nav {
    --primarynav-current-height: var(--site-nav-compact-height, 34px);
    --primarynav-current-padding-y: var(--site-nav-compact-padding-y, 0);
}

@media (max-width: 1200px) {
    .site-primary-nav {
        --primarynav-current-height: var(--site-nav-mobile-height, 46px);
        --primarynav-current-padding-y: var(--site-nav-mobile-padding-y, 0);
    }

    .site-primary-nav.primarynav-compact,
    .lessonplayer-limited-header .site-primary-nav {
        --primarynav-current-height: var(--site-nav-mobile-compact-height, 60px);
        --primarynav-current-padding-y: var(--site-nav-mobile-compact-padding-y, var(--site-nav-mobile-padding-y, 0));
    }
}

.primarynav-fixed-header .setprimarynavheight:has(> .site-primary-nav),
.lessonplayer-primarynav-host:has(> .site-primary-nav) {
    height: auto;
    min-height: 0;
}

.site-primary-nav.primarynav-shell,
.site-primary-nav.primarynav-shell .navbar.setprimarynavheight,
.site-primary-nav.primarynav-shell > .setprimarynavheight,
.lessonplayer-limited-header .site-primary-nav.primarynav-shell,
.lessonplayer-limited-header .site-primary-nav.primarynav-shell .navbar.setprimarynavheight {
    height: var(--primarynav-current-height);
    min-height: 0;
    box-sizing: border-box;
}

.site-primary-nav.primarynav-shell .navbar.setprimarynavheight {
    padding-top: var(--primarynav-current-padding-y);
    padding-bottom: var(--primarynav-current-padding-y);
}

.site-primary-nav .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.site-primary-nav .primarynav-desktop-bar {
    padding-left: var(--site-nav-padding-x, 2rem);
    padding-right: var(--site-nav-padding-x, 2rem);
}

.site-primary-nav .primarynav-desktop-bar .navbar-toolbar > .navbar-nav {
    column-gap: var(--site-nav-item-gap, 0.75rem);
}

.site-primary-nav.primarynav-shell .primarynav-mobile-bar {
    min-height: 0;
    padding-left: var(--site-nav-mobile-padding-x, 0.5rem) !important;
    padding-right: var(--site-nav-mobile-padding-x, 0.5rem) !important;
}

.site-primary-nav .primarynav-logo,
.site-primary-nav.primarynav-shell .primarynav-mobile-brand img {
    /* LearningCenter logo width determines height through the image aspect ratio. */
    width: var(--primarynav-logo-width, auto);
    height: auto;
    max-height: none;
}

.site-primary-nav.primarynav-compact .nav-link,
.lessonplayer-limited-header .site-primary-nav.primarynav-compact .nav-link {
    line-height: max(0px, calc(var(--primarynav-current-height) - 2 * var(--primarynav-current-padding-y)));
}
