/* ==========================================================================
   Reset & design tokens
   ========================================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary: #7dd0a4;
	--primary-dark: #25382e;
	--white: #FFFFFF;
	--gray-light: #F8F8F8;
	--gray: #9E9E9E;
	--gray-dark: #424242;
	--shadow: 0 2px 8px rgba(0,0,0,0.2);
	--nav-height: 60px;
}

/* ==========================================================================
   Base & layout
   ========================================================================== */

html, body {
	height: 100%;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	background: var(--white);
}

body {
	display: flex;
	flex-direction: column;

	&.map-page {
		display: block;
		overflow: hidden;
	}
}

h1, h2, h3 {
	font-family: 'Playfair Display', serif;
}

p a, li a {
	color: var(--primary-dark);
	text-decoration: underline;

	&:hover, &:focus {
		text-decoration: none;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
	background: var(--primary-dark);
	color: var(--white);
	position: relative;
	padding: 0 100px;

	@media (min-width: 768px) {
		padding-right: 0;
		padding-left: 0;
	}

	& .container {
		padding: 10px 20px;
		display: flex;
		align-items: center;
		justify-content: center;

		@media (min-width: 768px) {
			max-width: 1140px;
			margin: 0 auto;
			justify-content: space-between;
		}
	}
}

.map-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	padding: 0;

	& .event-date {
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	& .burger-btn {
		bottom: 38px;
	}
}

.event-date {
	font-size: 14px;
	background-color: var(--primary);
	text-align: center;
	padding: 10px 15px;
	font-weight: bold;
	color: var(--primary-dark);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	@media (min-width: 768px) {
		padding: 15px;
		gap: 15px;
	}
	> div {
		display: flex;
		align-items: center;
		gap: 5px;
		&.sep {
			opacity: 0.3;
		}
	}

	@media (max-width: 767px) {
		> div.not-mob {
			display: none;
		}
	}
}

/* ==========================================================================
   Burger & mobile menu
   ========================================================================== */

.burger-btn {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	padding: 10px 15px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10;

	& svg {
		width: 24px;
		height: 24px;
		fill: var(--white);
	}

	@media (min-width: 768px) {
		display: none;
	}
}

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;

	&.open {
		opacity: 1;
		pointer-events: auto;
	}
}

.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 280px;
	max-width: 80vw;
	background: var(--white);
	z-index: 9999;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;

	&.open {
		transform: translateX(0);
	}
}

.mobile-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--primary-dark);

	& img {
		height: 36px;
		width: auto;
	}
}

.mobile-menu-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;

	& svg {
		width: 24px;
		height: 24px;
		fill: var(--white);
	}
}

.mobile-menu-links {
	padding: 0 0 15px;
	flex: 1;
}

.mobile-menu-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	color: var(--gray-dark);
	text-decoration: none;
	font-size: 16px;
	transition: background 0.2s;

	&:hover, &:active {
		background: var(--gray-light);
	}

	&.active {
		color: var(--primary-dark);
		font-weight: 700;
		background: var(--gray-light);
	}

	& svg {
		width: 22px;
		height: 22px;
		fill: var(--gray-dark);
		flex-shrink: 0;
	}

	&.active svg {
		fill: var(--primary-dark);
	}
}

.mobile-menu-divider {
	height: 1px;
	background: #E0E0E0;
	margin: 8px 24px;
}

.mobile-menu-social {
	display: flex;
	gap: 8px;
	padding: 12px 24px;

	& a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--gray-light);
		transition: background 0.2s;

		&:hover {
			background: #E0E0E0;
		}
	}

	& svg {
		width: 22px;
		height: 22px;
		fill: var(--gray-dark);
	}
}

/* ==========================================================================
   Desktop navigation
   ========================================================================== */

.desktop-nav {
	display: none;

	@media (min-width: 768px) {
		display: flex;
		gap: 10px;
	}
}

.desktop-nav-btn {
	@media (min-width: 768px) {
		background: transparent;
		border: none;
		color: var(--white);
		font-size: 14px;
		padding: 10px 20px;
		margin: 0;
		cursor: pointer;
		transition: all 0.2s, color 0.2s;
		border-bottom: solid 2px transparent;
		text-decoration: none;
		display: flex;
		align-items: center;
		font-family: inherit;

		&:hover {
			background: rgba(255,255,255,0.1);
		}

		&.active {
			border-bottom-color: var(--primary);
		}
	}
}

.desktop-nav-link {
	@media (min-width: 768px) {
		padding: 10px;
		transition: all 0.2s ease-in-out;

		&:hover {
			opacity: 0.6;
		}
	}
}

/* ==========================================================================
   Map toggle bar (map.html)
   ========================================================================== */

.map-toggle-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--nav-height);
	background: transparent;
	display: flex;
	align-items: center;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
	z-index: 1000;

	@media (min-width: 768px) {
		position: fixed;
		bottom: 15px;
		left: 15px;
		right: auto;
		width: auto;
		height: auto;
		border-radius: 5px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	}
}

.map-toggle-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border: none;
	background: var(--primary-dark);
	color: var(--white);
	font-size: 12px;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
	height: 100%;

	&:first-child {
		border-right: 1px solid #2d4b3ce6;
	}

	&.active {
		color: var(--primary-dark);
		background: var(--primary);
	}

	& svg {
		width: 24px;
		height: 24px;
		margin-bottom: 4px;
	}

	@media (min-width: 768px) {
		padding: 10px 25px;
		font-size: 13px;

		& svg {
			width: 18px;
			height: 18px;
		}
	}
}

/* ==========================================================================
   Map & controls
   ========================================================================== */

#map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: var(--nav-height);
	z-index: 1;
	transition: top 0.3s ease;
}

body.map-page #map,
body.map-page .list-panel {
	@media (min-width: 768px) {
		bottom: 0;
	}
}

.filter-panel {
	position: fixed;
	top: 125px;
	left: 15px;
	z-index: 500;
	@media (min-width: 768px) {
		top: 135px;
	}
}

.filter-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 15px 20px;
	background: var(--white);
	border: none;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	cursor: pointer;
	font-size: 14px;
	color: var(--gray-dark);
	font-family: inherit;

	& svg {
		width: 20px;
		height: 20px;
	}

	&:active {
		background: var(--gray-light);
	}
}

.filter-badge {
	display: none;
	background: var(--primary-dark);
	color: var(--white);
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 10px;
	padding: 0 5px;

	&.active {
		display: inline-block;
	}
}

.filter-options {
	display: none;
	flex-direction: column;
	background: var(--white);
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
	margin-top: 8px;
	padding: 8px 0;
	min-width: 220px;

	&.open {
		display: flex;
	}

	& label {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		font-size: 14px;
		color: var(--gray-dark);
		cursor: pointer;
		min-height: 44px;
		user-select: none;

		&:active {
			background: var(--gray-light);
		}
	}

	& input[type="checkbox"] {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		accent-color: var(--primary-dark);
	}
}

.filter-clear {
	margin: 4px 16px 8px;
	padding: 10px;
	background: none;
	border: 1px solid var(--gray);
	border-radius: 6px;
	font-size: 13px;
	color: var(--gray-dark);
	cursor: pointer;
	font-family: inherit;

	&:active {
		background: var(--gray-light);
	}
}

.locate-btn {
	position: fixed;
	bottom: calc(var(--nav-height) + 30px);
	right: 15px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--white);
	border: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
	cursor: pointer;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, background 0.2s;

	&:active {
		transform: scale(0.95);
		background: var(--gray-light);
	}

	& svg {
		width: 24px;
		height: 24px;
		fill: var(--black);
	}

	&.locating svg {
		animation: pulse 1s infinite;
	}

	@media (min-width: 768px) {
		bottom: 30px;
	}
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ==========================================================================
   Map markers
   ========================================================================== */

.garden-marker,
.amenity-marker {
	display: flex;
	align-items: center;
	justify-content: center;
}

.marker-icon {
	width: 36px;
	height: 44px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.amenity-marker .amenity-icon {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

.user-marker {
	width: 20px;
	height: 20px;
	background: #4285F4;
	border: 3px solid var(--white);
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
	animation: userPulse 2s infinite;
}

@keyframes userPulse {
	0% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.4); }
	70% { box-shadow: 0 0 0 15px rgba(66, 133, 244, 0); }
	100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
}

/* ==========================================================================
   Map popups
   ========================================================================== */

.leaflet-popup-content-wrapper {
	border-radius: 12px;
	padding: 0;
}

.leaflet-popup-content {
	margin: 0;
	min-width: 250px;
}

.garden-popup {
	padding: 16px;

	& h3 {
		color: var(--primary-dark);
		font-size: 18px;
		margin-bottom: 4px;
	}

	& .address {
		color: var(--gray);
		font-size: 13px;
		margin-bottom: 12px;
	}

	& .description {
		color: var(--gray-dark);
		font-size: 14px;
		line-height: 1.4;
		margin-bottom: 12px;
	}

	& .features {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 12px;
	}

	& .feature-tag {
		background: var(--gray-light);
		color: var(--gray-dark);
		padding: 4px 10px;
		border-radius: 12px;
		font-size: 12px;
	}

	& .times {
		color: var(--gray);
		font-size: 13px;
		margin-bottom: 12px;
	}

	& .distance {
		color: var(--primary);
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 16px;
	}
}

.amenity-popup {
	padding: 16px;

	& h3 {
		color: var(--primary-dark);
		font-size: 18px;
		margin: 0 0 8px 0;
	}

	& p {
		color: var(--gray-dark);
		font-size: 14px;
		margin: 0;
	}
}

.visit-btn {
	width: 100%;
	padding: 12px 18px;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;

	&[disabled] {
		cursor: not-allowed;
		background-color: var(--primary) !important;
		color: var(--primary-dark) !important;
		opacity: 0.8;
	}

	&.unvisited {
		background: var(--primary);
		color: var(--primary-dark);

		&:active, &:hover {
			background: var(--primary-dark);
			color: var(--white);
		}
	}

	&.visited {
		background: var(--primary-dark);
		color: var(--white);

		&:active {
			background: var(--primary);
			color: var(--primary-dark);
		}
	}
}

/* ==========================================================================
   List panel
   ========================================================================== */

.list-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: var(--nav-height);
	background: var(--white);
	z-index: 400;
	display: none;
	flex-direction: column;

	&.active {
		display: flex;
	}
}

.progress-section {
	padding: 16px 20px;
	background: var(--gray-light);
	border-bottom: 1px solid #E0E0E0;
}

.progress-text {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--gray-dark);
}

.progress-bar {
	height: 8px;
	background: #E0E0E0;
	border-radius: 4px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--primary);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.sort-controls {
	padding: 12px 20px;
	display: flex;
	gap: 8px;
	border-bottom: 1px solid #E0E0E0;
}

.sort-btn {
	padding: 8px 16px;
	border: 1px solid var(--gray);
	border-radius: 20px;
	background: var(--white);
	color: var(--gray-dark);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;

	&.active {
		background: var(--primary-dark);
		border-color: var(--primary-dark);
		color: var(--white);
	}
}

.garden-list {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.garden-item {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #E0E0E0;
	cursor: pointer;
	transition: background 0.2s;

	&:active {
		background: var(--gray-light);
	}

	& .status-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16px;
		flex-shrink: 0;

		&.unvisited {
			background: var(--primary-dark);
		}

		&.visited {
			background: var(--primary);
		}

		& svg {
			width: 18px;
			height: 18px;
			fill: var(--white);
		}
	}

	& .info {
		flex: 1;
		min-width: 0;
	}

	& .name {
		font-size: 16px;
		font-weight: 500;
		color: var(--gray-dark);
		margin-bottom: 2px;
	}

	& .address {
		font-size: 13px;
		color: var(--gray);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	& .distance {
		font-size: 14px;
		color: var(--primary);
		font-weight: 500;
		margin-left: 12px;
		flex-shrink: 0;
	}
}

/* ==========================================================================
   Overlays & feedback
   ========================================================================== */

.celebration {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2000;
	pointer-events: none;

	& .checkmark {
		width: 80px;
		height: 80px;
		background: var(--primary);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: celebratePop 0.6s ease-out forwards;

		& svg {
			width: 40px;
			height: 40px;
			fill: var(--white);
		}
	}
}

@keyframes celebratePop {
	0% { transform: scale(0); opacity: 0; }
	50% { transform: scale(1.2); }
	70% { transform: scale(0.9); }
	100% { transform: scale(1); opacity: 1; }
}

.loading-overlay {
	position: fixed;
	inset: 0;
	background: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 3000;
	transition: opacity 0.3s;

	&.hidden {
		opacity: 0;
		pointer-events: none;
	}
}

.loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid var(--gray-light);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.loading-text {
	margin-top: 16px;
	color: var(--gray-dark);
	font-size: 16px;
}

.toast {
	position: fixed;
	bottom: calc(var(--nav-height) + 80px);
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: var(--gray-dark);
	color: var(--white);
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 2000;
	opacity: 0;
	transition: all 0.3s;
	text-align: center;
	max-width: 90%;

	&.show {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}

.location-warning {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--white);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	z-index: 500;
	max-width: 320px;
	text-align: center;
	display: none;

	&.show {
		display: block;
	}

	& .location-warning-icon {
		width: 48px;
		height: 48px;
		background: var(--primary-light);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 16px;

		& svg {
			width: 24px;
			height: 24px;
			fill: var(--primary-dark);
		}
	}

	& h3 {
		margin: 0 0 8px;
		font-size: 18px;
		color: var(--gray-dark);
	}

	& p {
		margin: 0 0 16px;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}
}

.location-warning-btn {
	background: var(--primary);
	color: var(--primary-dark);
	border: none;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;

	&:active {
		background: var(--primary-dark);
		color: var(--white);
	}
}

/* Holding modal */
.holding-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 2500;
	display: none;

	&.show {
		display: block;
	}
}

.holding-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--white);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	z-index: 2501;
	max-width: 320px;
	width: calc(100% - 32px);
	text-align: center;
	display: none;

	&.show {
		display: block;
	}

	& h3 {
		margin: 0 0 8px;
		font-size: 18px;
		color: var(--gray-dark);
	}

	& p {
		margin: 0 0 16px;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}
}

.holding-modal-btn {
	background: var(--primary);
	color: var(--primary-dark);
	border: none;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;

	&:active {
		background: var(--primary-dark);
		color: var(--white);
	}
}

/* ==========================================================================
   Home / info content
   ========================================================================== */

.home-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	color: var(--gray-dark);

	& h1, & h2 {
		color: var(--primary-dark);
		font-size: 24px;
		margin-bottom: 15px;
	}

	& h2 {
		font-size: 20px;
	}

	& p {
		color: var(--gray-dark);
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 20px;
		&.lead {
			font-size: 20px;
			font-weight: bold;
		}
		&.m-0 {
			margin: 0;
		}
	}

	& hr {
		content: "";
		display: block;
		height: 1px;
		width: 80px;
		margin: 20px auto;
		border: none;
		background-color: #ddd;

		&.wide {
			width: 160px;
		}

		&.full-width {
			width: 100%;
		}
	}

	& small {
		margin-bottom: 10px;
		opacity: 0.5;
	}

	& .home-content-inner-left p {
		max-width: 100%;
	}

	& .img {
		border: solid 1px #ddd;
		padding: 10px;
		border-radius: 10px;
		margin-bottom: auto;
	}

	& .visit-btn {
		width: auto;
		display: inline-flex;
		align-items: center;
		gap: 5px;

		& svg {
			width: 16px;
			height: 16px;
		}
	}

	& ul {
		margin: 15px 0 30px 0;
		padding-left: 20px;

		& li {
			margin-bottom: 15px;
			line-height: 1.5;

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		&.event-info-list {
			list-style: none;
			margin: 15px 0 30px 0;
			padding: 0;
			width: 100%;
			text-align: left;
			background-color: var(--gray-light);
			border-radius: 8px;
			color: var(--gray-dark);
			margin-bottom: 15px;
			border: solid 1px #eee;

			& li {
				padding: 12px 20px;
				margin-bottom: 0;
			}

			& li:first-of-type {
				@media (min-width: 768px) {
					border-top: none;
				}
			}

			& li:last-of-type {
				@media (min-width: 768px) {
					border-bottom: none;
					margin-bottom: 0;
				}
			}

			& li {
				@media (min-width: 768px) {
					padding: 15px 20px;
				}
			}

			& small {
				display: block;
				padding-top: 15px;
				margin-bottom: 0;
			}
		}
	}

	@media (min-width: 600px) {
		& p {
			max-width: 720px;
		}
	}

	@media (min-width: 768px) {
		& h1, & .h1 {
			font-size: 32px;
		}
		& h2 {
			font-size: 24px;
		}
		& h1, & h2 {
			margin-bottom: 20px;
		}
	}
}

.home-content-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	width: 100%;
	text-align: center;

	&.home-content-inner-left {
		align-items: flex-start;
		text-align: left;

		& .sponsor-logos {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20px;
			gap: 15px;
			justify-content: center;
			& a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-decoration: none;
				position: relative;
				color: var(--gray-dark);
				border-radius: 5px;
				background-color: #fafafa;
				border: solid 1px #eee;
				& img {
					opacity: 1;
					transition: all 0.2s ease-in-out;
					display: block;
					margin-bottom: 10px;
					height: auto;
					width: auto;
					max-height: 150px;
					margin: 15px;
				}
				&:hover img {
					opacity: 0.8;
				}
				& .gold,
				& .silver,
				& .bronze {
					position: absolute;
					top: 10px;
					right: 10px;
					width: 32px;
					max-width: 32px;
					height: 32px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10px;
					width: 100%;
					& svg {
						width: 18px;
						height: 18px;
					}
				}
				& .gold {
					background-color: #ffd700;
				}
				& .silver {
					background-color: #c0c0c0;
				}
				& .bronze {
					background-color: #cd7f32;
				}
				& .caption {
					display: block;
					background-color: #eee;
					padding: 10px 15px;
					border-top: solid 1px #eee;
				}
			}
		}

		& p {
			max-width: 100%;
		}
	}

	@media (min-width: 768px) {
		max-width: 1140px;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	@media (min-width: 1140px) {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

.home-content-inner-grid {
	@media (min-width: 768px) {
		text-align: left;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		&.home-content-sidebar {
			grid-template-columns: 1fr 350px;
		}
	}

	@media (min-width: 1140px) {
		gap: 60px;
	}
}

.home-banner {
	display: block;
	width: 100%;
	height: 120px;
	min-height: 120px;
	overflow: hidden;
	position: relative;

	&:before {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.2);
	}

	h1 {
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		color: white;
		text-align: center;
		text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
		font-size: 32px;
		width: 100%;
		max-width: 1140px;
		margin: 0 auto;
		padding: 0 20px;
		@media (min-width: 768px) {
			letter-spacing: 2px;
		}
		@media (min-width: 1140px) {
			font-size: 42px;
		}
	}

	& img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (min-width: 768px) {
		height: 250px;
		min-height: 250px;
	}
}

.home-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding-top: 10px;
	margin-bottom: 25px;

	@media (max-width: 600px) {
		& .map-btn {
			display: none;
		}
	}

	@media (min-width: 768px) {
		justify-content: flex-start;
	}
}

.home-icon {
	width: 80px;
	height: 80px;
	min-height: 80px;
	background: var(--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	margin-bottom: 24px;

	& svg {
		width: 48px;
		height: 48px;
		fill: var(--primary-dark);
	}
}

.info-content-lower {
	text-align: center;

	& .home-buttons {
		justify-content: center;
	}
}

.event-info-item {
	display: flex;
	align-items: center;
	gap: 15px;
	border-bottom: 1px solid #eee;
}

.event-info-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: var(--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-dark);

	& svg {
		width: 20px;
		height: 20px;
	}

	@media (min-width: 768px) {
		width: 40px;
		height: 40px;
	}
}

.event-info-text {
	flex: 1;
	color: var(--gray-dark);
	line-height: 1.4;

	& strong {
		color: var(--primary-dark);
	}
}

.hc-desktop {
	display: none;

	@media (min-width: 768px) {
		display: block;
	}
}

.hc-mobile {
	display: block;

	@media (min-width: 768px) {
		display: none;
	}
}

.home-page {
	.home-banner {
		position: relative;
		height: 220px;
		min-height: 220px;
		@media (min-width: 768px) {
			height: 350px;
			min-height: 350px;
		}
		@media (min-width: 1140px) {
			height: 450px;
			min-height: 450px;
		}
	}
}

/* ==========================================================================
   Home CTAs
   ========================================================================== */

.home-ctas {
	padding: 0 0 30px 0;
	width: 100%;
	& .home-ctas-grid {
		width: 100%;
		max-width: 1140px;
		margin: 0 auto;
		padding: 0 20px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 30px;
		@media (min-width: 768px) {
			grid-template-columns: 1fr 1fr 1fr;
		}
		& .home-cta {
			position: relative;
			border-radius: 8px;
			overflow: hidden;
			& h2 {
				position: absolute;
				z-index: 1;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0;
				padding: 10px 20px;
				font-size: 22px;
				background-color: var(--primary);
				display: flex;
				align-items: center;
				gap: 8px;
				& svg {
					width: 24px;
					height: 24px;
					transform: translateY(2px)
				}
			}
			& .cta-image {
				aspect-ratio: 6/4;
				width: 100%;
				& img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
					transform: scale(1);
					transition: all 0.2s ease-in-out;
				}
			}
			& a {
				position: absolute;
				z-index: 2;
				inset: 0;
			}

			&:hover .cta-image img {
				transform: scale(1.1);
			}
		}
	}

	@media (min-width: 768px) {
		padding: 0 0 50px 0;
	}

	@media (min-width: 1140px) {
		padding: 0 0 70px 0;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.pre-footer {
	background-color: var(--gray-light);
	padding: 20px 0;
	border-top: solid 1px #eee;
	margin-top: auto;

	& img {
		background-color: white;
		padding: 10px;
		display: block;
		border-radius: 5px;
		margin: 0 auto;
		border: solid 1px #eee;
	}

	@media (min-width: 768px) {
		padding: 30px 0;
	}
}

.site-footer {
	background-color: var(--primary-dark);
	color: rgba(255,255,255,0.6);
	text-align: center;
	padding: 20px 0;
	font-size: 14px;
}

.site-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.site-footer a {
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.site-footer a:hover {
	color: var(--white);
}

.site-footer-social {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-footer-social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* ==========================================================================
   FAQ accordions
   ========================================================================== */

.faq-section {
	width: 100%;
	margin-top: 2rem;
}

.faq-section-title {
	font-size: 20px;
	margin-bottom: 1rem;
	color: var(--primary-dark);
}

@media (min-width: 768px) {
	.faq-section {
		margin-top: 4rem;
	}
	.faq-section-title {
		font-size: 24px;
	}
}

.faq-item {
	border-bottom: 1px solid #E0E0E0;
}

.faq-item:first-of-type {
	border-top: 1px solid #E0E0E0;
}

.faq-question {
	list-style: none;
	cursor: pointer;
	padding: 16px 0;
	font-weight: 600;
	font-size: 16px;
	color: var(--primary-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325382e'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
	transform: rotate(180deg);
}

.faq-answer {
	padding: 0 0 16px;
}

.faq-answer p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--gray-dark);
	font-weight: 400;
}