/* MESSAGES */

.messages {
	min-height: 4.25rem;
	padding: 18px 26px 16px 26px;
	color: #fff;
	outline: solid 1px transparent;
	background-color: #353641;
	border-left: solid 6px #42a877;
}

.messages__title {
	font-size: 1.3rem;
	color: #42a877;
	margin-left: 24px;
}

.messages--status .messages__header {
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3e%3cpath d='M2 6.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left;
}

.messages-list {
	margin-top: 1.125rem;
	margin-bottom: 1.125rem;
	padding-top: 0;
	padding-bottom: 0;
	list-style: none;
}

.messages__container {
	display: flex;
}

.messages__content .placeholder {
	background: none;
}

.messages__content a {
	color: yellow;
}

.messages__header {
	margin-right: 1.125rem;
}

.messages--status .messages__icon svg {
	fill: #3fa21c;
}

.messages__content {
	overflow: auto;
	flex: 1;
	padding-top: 6px;
}

.messages__button {
	flex-shrink: 0;
	padding-top: 0.1875rem;
}

.messages__close {
	position: relative;
	width: 1.5625rem;
	height: 1.5625rem;
	padding-top: 32px;
	padding-bottom: 0;
	cursor: pointer;
	vertical-align: top;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

.messages__close::before,
.messages__close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 3.063rem;
	height: 0;
	content: "";
	border-top: solid 2px #7e96a7;
}

.messages__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.messages__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

#block-useraccountmenu li {
	float: left;
	list-style: none;
	padding: 8px 8px 14px 8px;
}

.block-local-tasks-block {
	font-family: metropolis, sans-serif;
	margin-bottom: 48px;
}

.block-local-tasks-block ul {
	padding-left: 0;
}

.tabs__tab {
	float: left;
	list-style: none;
	padding: 15px 23px;
	border: solid 1px #e7edf1;
	margin-right: -1px;
	border-bottom: solid 1px #e7edf1;
	background: #f7f9fa;
}

.tabs__tab.is-active {
	border-bottom: solid 5px var(--bgcolor);
	padding-bottom: 11px;
}

.block-local-tasks-block a.is-active {
	font-weight: 600;
}

.header {
	font-family: 'Roboto', sans-serif;
}

.header-top-wrapper {
	background: #f2f3f5;
}

.header-wrapper {
	margin: 24px 0 32px 0;
}

@media (max-width: 768px) {
	.header-wrapper {
		margin: 8px 0 16px 0;
	}

	/* Improve mobile layout for primary menu */
	.dempo.primary-menu {
		position: static;
		background: transparent;
	}

	/* Fix for the hero text on mobile */
	.field--name-field-hero-text {
		position: relative;
		z-index: 5;
		padding: 15px;
		background-color: rgba(255, 255, 255, 0.8);
		margin-top: -30px;
		display: block !important;
		/* Ensure it's always visible */
	}
}

.block-title {
	border-bottom: solid 2px #DDD;
	padding-bottom: 8px;
	margin-bottom: 16px;
}



/* Mobile styling */
@media (min-width: 769px) {
	.menu-reverse ul.sf-menu.sf-style-default li a {
		color: black;
		padding: 10px 40px 0px 10px
	}
}


.header-btm {
	max-width: 1320px;
	margin: 0 auto;
}

/* Mobile header improvements */
@media (max-width: 768px) {

	/* Force the blue header bar items to the right */
	.header-top-wrapper .region-header-top {
		float: right;
	}

	/* Right-align the navigation menu */
	.header-top {
		float: right;
	}

	/* Keep the Contact Us and Donate buttons together */
	.header-top nav {
		float: right;
	}

	/* Ensure the navigation items stay on the right */
	.header-top nav ul {
		float: right;
		display: flex;
		justify-content: flex-end;
	}

	/* Adjust header top section for better alignment */
	.header-top-wrapper {
		position: relative;
		overflow: visible;
	}

	/* Style the Donate button to make room for hamburger */
	.header-top-wrapper a[href*="donate"] {
		margin-right: 0;
		/* No extra margin */
		border-radius: 0;
		background-color: #00659b !important;
		color: white !important;
		font-weight: 500;
		padding: 0 !important;
		height: 40px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
		line-height: 40px !important;
		width: 100% !important;
	}

	/* Adjust the header top section to accommodate the hamburger */
	.header-top {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		height: 40px;
		width: 100%;
	}

	/* Move Contact Us and Donate buttons to the right side */
	.region-header-top {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	.region-header-top nav {
		margin-left: auto;
	}

	/* Ensure all header elements have the same height */
	.header-top-wrapper {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* Create a dedicated space for the hamburger menu */
	.header-top-wrapper {
		position: relative;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
	}

	/* Style Contact Us and Donate buttons consistently */
	.header-top-wrapper a[href*="donate"],
	.header-top-wrapper a[href*="contact"] {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 15px;
		margin: 0;
		text-decoration: none;
	}

	/* Fix spacing between envelope icon and Contact Us text */
	.header-top-wrapper a[href*="contact"] .fa,
	.header-top-wrapper a[href*="contact"] .fas,
	.header-top-wrapper a[href*="contact"] .far,
	.header-top-wrapper a[href*="contact"] i,
	.header-top-wrapper a[href*="contact"] svg,
	.header-top-wrapper a[href*="contact"] img {
		margin-right: 8px;
	}

	/* Target the specific structure of the Contact Us link */
	.header-top-wrapper a[href*="contact"] {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 40px;
		/* Alternative spacing method */
	}

	/* Style the Donate button to match Contact Us */
	.header-top-wrapper a[href*="donate"] {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0 15px;
		margin: 0;
		background-color: #00659b;
		color: white;
		font-weight: 500;
		transition: background-color 0.3s ease;
		box-sizing: border-box;
	}

	.header-top-wrapper a[href*="donate"]:hover {
		background-color: #003d7a;
		/* Even darker on hover */
	}

	/* Ensure proper alignment of header elements */
	.header-inner {
		align-items: center !important;
	}

	/* Fix for the search icon */
	.dempo.search {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Remove any unwanted backgrounds */
	#block-dempo-custom-main-menu,
	.navbar,
	.navbar-toggler {
		background-color: transparent !important;
	}

	/* Make hamburger menu more visible */
	.navbar-toggler {
		padding: 0.25rem;
		border: none;
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 1000;
		background-color: transparent !important;
	}

	/* Ensure the hamburger icon is visible */
	.navbar-toggler-icon {
		display: inline-block;
		width: 1.5em;
		height: 1.5em;
	}

	/* Fix the black bar above hero image */
	.field--name-field-hero-image {
		margin-top: 0;
	}

	/* Remove any black bars or unwanted containers */
	.navbar-collapse,
	.offcanvas,
	.offcanvas-end,
	.text-bg-dark {
		background-color: transparent !important;
	}

	/* Right-align navigation menu items on small screens */
	.navbar-collapse,
	.offcanvas-body {
		text-align: right !important;
	}

	.navbar-collapse ul,
	.offcanvas-body ul,
	.navbar-nav {
		text-align: right !important;
		width: 100% !important;
	}

	.navbar-collapse ul li,
	.offcanvas-body ul li,
	.navbar-nav li {
		justify-content: flex-end !important;
		display: flex !important;
		width: 100% !important;
	}

	.navbar-collapse ul li a,
	.offcanvas-body ul li a,
	.navbar-nav li a {
		justify-content: flex-end !important;
		text-align: right !important;
		width: 100% !important;
		padding-right: 15px !important;
	}

	/* Move hamburger menu to the right of the Donate button */
	.navbar-toggler {
		position: absolute;
		top: 0;
		right: 0;
		margin-right: 10px;
		z-index: 10;
	}

	/* Adjust the header top navigation to make space for hamburger */
	.header-top nav {
		padding-right: 50px;
	}

	/* Fix for the hero container */
	.field--name-field-hero-image img {
		width: 100%;
		height: auto;
	}

	/* Ensure the branding logo is properly positioned */
	.branding {
		z-index: 90;
		position: relative;
	}
}