:root {
	--logo-width: 140px;
	--logo-offset: calc(var(--logo-width) + 20px);
}

/* Header - Logo */

.header-logo {
	max-height: 100px;
	max-width: var(--logo-width);
	margin-bottom: -60px;
	position: relative;
	z-index: 10;
	object-fit: contain;
}

.header-logo-wrapper {
	margin-top: -33px;
	max-width: var(--logo-width);
}
/* Header - Search */

.header-search {
	min-width: 250px;
	width: 33vw;
	max-width: 550px;
	border: 1px #2B2F36;
	background: #FFFFFF !important;
	height: 38px;
}

.header-search-icon {
	width: 24px;
	height: 24px;
}

.header-search-btn {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 4px 8px;
	cursor: pointer;
}

	.header-search-btn .search-suggestions {
		border-radius: 0 0 20px 20px;
	}

/* Header - Menu Toggle */

[aria-expanded="true"] .nav-toggle-label-open,
[aria-expanded="false"] .nav-toggle-label-close,
[aria-expanded="true"] .nav-toggle-icon-open,
[aria-expanded="false"] .nav-toggle-icon-close {
	display: none;
}

.nav-toggle-icon-open {
	width: 24px;
	height: 24px;
	margin-top: 3px;
}

.nav-toggle-icon-close {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #ffffff26;
	padding: 1px;
	margin-top: 3px;
}

	.nav-toggle-icon-close:hover {
		background-color: #adb5bd;
	}

/* Navigation Panel */

.nav-panel {
	position: absolute;
	right: 0;
	top: 0;
	width: 66%;
	max-width: 500px;
	z-index: 1000;
}

.nav-panel-inner {
	overflow: hidden;
	position: relative;
	background: #3d434d;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Navigation - Slide Transitions */

.nav-menu-main,
.nav-menu-sub {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-menu-main {
	transform: translateX(0);
}

	.nav-menu-main.slide-out {
		transform: translateX(-100%);
		position: absolute;
		opacity: 0;
	}

.nav-menu-sub {
	transform: translateX(100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: none;
}

	.nav-menu-sub.slide-in {
		transform: translateX(0);
		position: relative;
		display: block;
	}

/* Navigation - Menu Items */

.nav-menu-item {
	border-top: 1px solid #ffffff26;
}

	.nav-menu-item:last-child {
		border-bottom: none;
	}

	.nav-menu-item a:hover {
		background-color: #474d56;
	}

.nav-menu-sub .nav-menu-item {
	background-color: #535963;
}

.nav-back-btn {
	background-color: #25292F;
}

/* Navigation - Chevron Circles */

.nav-chevron-circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
}

	.nav-chevron-circle:hover {
		background-color: #adb5bd;
	}

.nav-menu-main .nav-menu-item .nav-chevron-circle {
	background-color: #ffffff14;
}

.nav-back-btn .nav-chevron-circle {
	background-color: #ffffff26;
}

.nav-menu-sub .nav-menu-item .nav-chevron-circle {
	background-color: #25292F;
}

/* Breadcrumbs */

.breadcrumb-bar {
	background-color: #8E9298;
	border: none;
}
	.breadcrumb-bar .container {
		padding-left: var(--logo-offset);
	}

	.breadcrumb-bar .breadcrumb {
		font-weight: 490;
		font-style: normal;
		font-size: 0.90rem;
		line-height: 1.4;
	}

	.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
		display: none;
	}

	.breadcrumb-bar .breadcrumb-item a {
		color: #25292F;
		text-decoration: none;
	}

		.breadcrumb-bar .breadcrumb-item a:hover {
			text-decoration: underline;
		}

	.breadcrumb-bar .breadcrumb-item.active span {
		color: #25292F;
	}

	.breadcrumb-bar .breadcrumb-item .bi-chevron-right {
		color: #FFFFFF;
		font-size: 0.8rem;
	}

/* Footer */

footer p,
footer a,
footer li,
footer div {
	font-size: 0.90rem;
	line-height: 1.4;
}

.footer-link:hover {
	text-decoration: underline !important;
	list-style: none;
	padding-left: 0;
}

.footer-external-icon {
	font-size: 0.75rem;
}

.footer-social-icon {
	width: 24px;
	height: 24px;
}

	.footer-social-icon:hover {
		opacity: 0.7;
	}

/* Search - Suggestions */

.search-input-wrapper {
	position: relative;
}

.search-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #FFFFFF;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1001;
	display: none;
	max-height: 300px;
	overflow-y: auto;
}

	.search-suggestions.active {
		display: block;
	}

.search-suggestion-item {
	padding: 10px 16px;
	cursor: pointer;
	color: #212529;
	text-decoration: none;
	display: block;
	font-size: 0.875rem;
	border-bottom: 1px solid #f0f0f0;
}

	.search-suggestion-item:last-child {
		border-bottom: none;
	}

	.search-suggestion-item:hover {
		background-color: #f8f9fa;
		color: #212529;
	}

.search-suggested-defaults {
	display: none;
}

.search-input-wrapper:focus-within .search-suggestions {
	display: block;
}

.search-input-wrapper:focus-within .search-suggested-defaults {
	display: block;
}

/* Search - Results */

.search-result {
	border-bottom: 1px solid #dee2e6;
}

	.search-result:last-child {
		border-bottom: none;
	}

.search-result-title a {
	color: #212529;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
}

	.search-result-title a:hover {
		text-decoration: underline;
	}

.search-result-blurb {
	color: #495057;
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 12px;
}

.search-result-btn {
	background-color: #6c757d;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 10px 24px;
	border: none;
}

	.search-result-btn:hover {
		background-color: #5a6268;
		color: #FFFFFF;
	}

/* Sitemap */

.sitemap-list {
	list-style: disc;
	padding-left: 20px;
}

	.sitemap-list > .sitemap-item {
		margin-bottom: 8px;
	}

		.sitemap-list > .sitemap-item > a {
			font-weight: 700;
			font-size: 2.2rem;
			color: #212529;
			text-decoration: none;
		}

			.sitemap-list > .sitemap-item > a:hover {
				text-decoration: underline;
			}

.sitemap-sublist {
	list-style: disc;
	padding-left: 20px;
	margin-top: 4px;
}

	.sitemap-sublist .sitemap-item {
		margin-bottom: 4px;
	}

		.sitemap-sublist .sitemap-item a {
			color: #495057;
			text-decoration: none;
			font-size: 1.9rem;
		}

			.sitemap-sublist .sitemap-item a:hover {
				text-decoration: underline;
			}

	.sitemap-sublist .sitemap-sublist {
		padding-left: 20px;
	}

		.sitemap-sublist .sitemap-sublist .sitemap-item a {
			font-size: 1.75rem;
			color: #6c757d;
		}

/* Alert Banner */

.alert-banner {
	font-size: 0.875rem;
}
	.alert-banner .container {
		padding-left: var(--logo-offset);
	}

	.alert-banner strong {
		font-weight: 700;
	}

.alert-banner-high {
	background-color: #DC3545;
	color: #FFFFFF;
}

.alert-banner-medium {
	background-color: #FFC107;
	color: #212529;
}

.alert-banner-low {
	background-color: #FFF3CD;
	color: #212529;
}

.alert-banner-none {
	background-color: #0D6EFD;
	color: #FFFFFF;
}

.accordion-button {
	font-weight: 600;
	border-radius: 0 !important;
}
	.accordion-button::after {
		background-image: none;
		content: "";
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 10px solid #ffffff;
		transition: transform 0.2s ease;
	}

	.accordion-button:focus {
		box-shadow: none;
	}

	.accordion-button.collapsed {
		background-color: #5a6268;
		color: #ffffff;
	}

		.accordion-button.collapsed::after {
			filter: brightness(0) invert(1);
		}

	.accordion-button:not(.collapsed) {
		background-color: #5a6268;
		color: #ffffff;
		box-shadow: none;
	}

		.accordion-button:not(.collapsed)::after {
			transform: rotate(180deg);
		}

.accordion-item {
	margin-bottom: 0.5rem;
	border-radius: 0;
}

.accordion-body {
	font-size: 0.95rem;
	line-height: 1.6;
	background-color: #f8f9fa;
	border: 3px solid #5a6268;
}


.link-card {
	background-color: #3c3c3c;
	transition: opacity 0.2s ease;
	height: 100%;
}

	.link-card:hover {
		opacity: 0.9;
	}

.link-card-body {
	color: #ffffff;
}

.link-card .card-title {
	color: #ffffff;
}

.link-card .card-text {
	color: #d4d4d4;
}

.link-card-grid .umb-block-grid__layout-container {
	gap: 1rem;
}

.skewed-button {
	background-color: #5a6268;
	padding: 1.25rem 2.5rem;
	transform: skewX(-10deg);
	transition: opacity 0.2s ease;
}

	.skewed-button:hover {
		opacity: 0.9;
	}

.skewed-button-text {
	transform: skewX(10deg);
	color: #ffffff;
}

.link-collection-icon {
	width: 32px;
	height: 32px;
	min-width: 32px;
	background-color: #a0a0a0;
	color: #ffffff;
	font-size: 0.85rem;
}

.link-collection-text {
	color: #333333;
	font-size: 0.9rem;
	text-decoration: underline;
}

.link-collection-item:hover .link-collection-text {
	color: #000000;
}

/* =========================================================
   SYPN buttons (Figma: Button component). Shared by the homepage and the
   journey planner results page, so they live here rather than in either.
   ========================================================= */

.sypn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sypn-space-xxs);
	padding: 14px 16px;
	border: 2px solid var(--sypn-grey-50);
	border-radius: var(--sypn-radius-sm);
	background: var(--sypn-white);
	color: var(--sypn-ink-900);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.sypn-btn:hover,
.sypn-btn:focus-visible {
	color: var(--sypn-ink-900);
	text-decoration: underline;
}

.sypn-btn img {
	width: 16px;
	height: 16px;
}

.sypn-btn--primary {
	background: var(--sypn-orange);
	border-color: var(--sypn-ink);
}

/* Link style: no box, so no box padding either - it has to line up with the text above
   it, which the solid button's 16px would push it off. */
.sypn-btn--link {
	padding-right: 0;
	padding-left: 0;
	background: none;
	border-color: transparent;
	text-decoration: underline;
}