:root{
	--color-main: #00a85a;
	--color-dark: #00643b;
	--color-accent: #28aa1e;
	--text-color: #222222;
	--muted: #6c757d;
	--bg: #ffffff;
	--max-content-width: 60vw;
}

/* Base layout */
body { padding-bottom: 40px; color: var(--text-color); background: var(--bg); font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
#calendar { max-width: 900px; margin: 0 auto; overflow-x: auto; }

/* Headings use display font */
h1,h2,h3,h4,h5,h6 { font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.03em; color: var(--color-dark); }

/* Primary brand styling */
.navbar { background-color: var(--color-main) !important; }
.navbar { padding-top: .5rem; padding-bottom: .5rem; }
.navbar-brand { color: #ffffff !important; font-family: 'Bebas Neue', sans-serif; }
.nav-link { color: #ffffff !important; }
.nav-link:hover, .nav-link:focus { color: #e9f7ee !important; }

/* Ensure navbar links have sufficient contrast and focus outlines for accessibility */
.navbar .nav-link:focus, .navbar .nav-link:hover { outline: none; }
.navbar .nav-link { padding-left: .5rem; padding-right: .5rem; }
.navbar-toggler { border-color: rgba(255,255,255,0.55); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,0.35); }

/* Buttons */
.btn-primary { background: var(--color-dark); border-color: rgba(0,0,0,0.12); color: #ffffff; }
.btn-primary:hover, .btn-primary:focus { background: #00502f; color: #fff; }
.btn:focus { outline: 3px solid rgba(40,170,30,0.18); outline-offset: 2px; }

/* Links: use dark main for good contrast and underline for clarity */
a { color: var(--color-dark); text-decoration: underline; }
a:hover, a:focus { color: var(--color-main); text-decoration: underline; }

/* Scale post cover images to full width of content box and center */
.post-cover {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.lead { max-width: var(--max-content-width); margin-left: 0; margin-right: auto; }

/* Ensure images embedded inside markdown content fill the content box */
.post-content img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* Make tables and other block content in posts constrained to readable width */
.post-content table, .post-content pre, .post-content blockquote {
	max-width: var(--max-content-width);
	margin-left: 0;
	margin-right: auto;
}

/* Event detail styling */
.event-datetime {
	background: #f8f9fa;
	padding: 12px 16px;
	border-left: 4px solid #0d6efd;
	border-radius: 4px;
	max-width: 60vw;
	margin-left: 0;
	margin-right: auto;
}
.event-datetime .event-date { font-size: 1.05rem; color: #0b5ed7; }
.event-datetime .event-times { font-size: 0.98rem; color: #333; }

.cover-image-picker {
	display: flex;
	align-items: center;
	gap: 32px;
}
.cover-image-select {
	max-width: 420px;
	width: 420px;
	flex: 0 0 420px;
}
.cover-image-preview {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: 64px !important;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	flex: 0 0 auto;
}
.cover-image-help {
	margin-top: .5rem;
	margin-bottom: 0;
	color: var(--text-color);
}
.markdown-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: .5rem;
}
.markdown-toolbar .form-label {
	margin-right: 8px;
}
.markdown-image-select {
	max-width: 420px;
	width: 420px;
	flex: 0 0 420px;
}
.markdown-image-picker {
	display: flex;
	align-items: center;
	gap: 32px;
}
.admin-actions {
	white-space: nowrap;
}
.admin-action-buttons {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.admin-action-buttons form {
	margin: 0;
}
.admin-action-buttons .btn {
	min-width: 58px;
}
.email-copy-row {
	display: flex;
	gap: .5rem;
}
.email-copy-row .form-control {
	flex: 1 1 auto;
}
.email-draft-box {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.email-preview {
	background: #ffffff;
	color: #222222;
	overflow-x: auto;
	max-width: 700px;
	margin: 0 auto;
}

.post-article {
	max-width: 700px;
	margin: 0 auto;
}

/* News list: text on the left, image on the right, separators between items */
.news-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid #e6e6e6;
}
.news-item:last-child { border-bottom: none; }
.news-item .news-text { flex: 1; }
.news-item .news-image { flex: 0 0 220px; }
.news-item .news-image .post-cover { width: 220px; max-width: 220px; }

@media (max-width: 768px) {
	body { padding-bottom: 24px; }
	.container { max-width: 100%; padding-left: 16px; padding-right: 16px; }
	h1 { font-size: 2rem; }
	h2 { font-size: 1.6rem; }
	.lead, .event-datetime, .post-content table, .post-content pre, .post-content blockquote {
		max-width: 100%;
	}
	.news-item { flex-direction: column; }
	.news-item .news-image { flex: none; }
	.news-item .news-image .post-cover { width: 100%; max-width: 100%; margin-left: 0; }
	.post-content img, .post-cover { width: 100% !important; max-width: 100% !important; }
	.cover-image-picker, .markdown-image-picker, .markdown-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}
	.cover-image-select, .markdown-image-select {
		max-width: 100%;
		width: 100%;
		flex: 1 1 auto;
	}
	.cover-image-preview {
		max-width: 100% !important;
		align-self: flex-start;
	}
	.table-responsive {
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.admin-actions {
		white-space: nowrap;
	}
	.admin-action-buttons {
		display: flex;
		width: max-content;
	}
	.email-copy-row {
		flex-direction: column;
	}
	.fc .fc-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: .5rem;
	}
	.fc .fc-toolbar-title {
		font-size: 1.35rem;
		text-align: center;
	}
	.fc .fc-toolbar-chunk {
		display: flex;
		justify-content: center;
	}
	.fc .fc-button {
		padding: .35rem .55rem;
		font-size: .85rem;
	}
	.fc .fc-list-event-title,
	.fc .fc-list-event-time {
		font-size: .95rem;
	}
	#calendar,
	#calendar .fc,
	#calendar .fc-view-harness,
	#calendar .fc-view-harness-active,
	#calendar .fc-scroller,
	#calendar .fc-list {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}
	#calendar .fc-list-table {
		height: auto !important;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #f1f5f3;
		--muted: #b8c2bd;
		--bg: #1f1f1f;
	}

	body {
		background: #1f1f1f;
		color: var(--text-color);
	}

	.navbar {
		background-color: var(--color-dark) !important;
	}

	.navbar-brand, .nav-link {
		color: #ffffff !important;
	}

	.navbar-toggler {
		border-color: rgba(255,255,255,0.65);
	}

	.navbar-toggler-icon {
		filter: invert(1) grayscale(100%) brightness(200%);
	}

	h1,h2,h3,h4,h5,h6 {
		color: #79e2ad;
	}

	a {
		color: #5ee0a0;
	}

	a:hover, a:focus {
		color: #8af0bc;
	}

	.text-muted {
		color: var(--muted) !important;
	}

	.event-datetime {
		background: #2b2b2b;
		border-left-color: var(--color-dark);
	}

	.event-datetime .event-date {
		color: #79e2ad;
	}

	.event-datetime .event-times {
		color: var(--muted);
	}

	.card, .list-group-item, .modal-content {
		background: #2b2b2b;
		color: var(--text-color);
		border-color: #3a3a3a;
	}

	.form-control, .form-select {
		background: #2b2b2b;
		color: var(--text-color);
		border-color: #4a4a4a;
	}

	.form-control:focus, .form-select:focus {
		background: #303030;
		color: var(--text-color);
		border-color: var(--color-main);
		box-shadow: 0 0 0 .25rem rgba(0, 168, 90, .25);
	}

	.form-control::placeholder {
		color: #9ca3af;
		opacity: 1;
	}

	.form-control::-webkit-input-placeholder {
		color: #9ca3af;
	}

	.form-control::-moz-placeholder {
		color: #9ca3af;
	}

	.form-control:-ms-input-placeholder {
		color: #9ca3af;
	}

	/* Comments section in admin volunteer detail */
	.bg-body-tertiary {
		background-color: #2b2b2b !important;
	}

	.table {
		--bs-table-color: var(--text-color);
		--bs-table-bg: #2b2b2b;
		--bs-table-border-color: #3a3a3a;
		--bs-table-striped-bg: #303030;
		--bs-table-striped-color: var(--text-color);
	}

	.table-responsive {
		background: #1f1f1f;
	}

	.table thead th {
		color: #79e2ad;
	}

	.cover-image-preview {
		border-color: #4a4a4a;
	}

	.email-preview {
		border-color: #3a3a3a !important;
	}

	.fc {
		--fc-page-bg-color: #1f1f1f;
		--fc-neutral-bg-color: #2b2b2b;
		--fc-neutral-text-color: var(--text-color);
		--fc-border-color: #3a3a3a;
		--fc-list-event-hover-bg-color: #303030;
		color: var(--text-color);
	}

	.fc .fc-toolbar-title {
		color: #79e2ad;
	}

	.fc .fc-button-primary {
		background-color: var(--color-dark);
		border-color: #4a4a4a;
		color: #ffffff;
	}

	.fc .fc-button-primary:hover,
	.fc .fc-button-primary:focus {
		background-color: var(--color-main);
		border-color: var(--color-main);
		color: #ffffff;
	}

	.fc .fc-list,
	.fc .fc-list-day-cushion,
	.fc .fc-list-table td,
	.fc .fc-scrollgrid,
	.fc .fc-daygrid-day,
	.fc .fc-col-header-cell {
		background: #2b2b2b;
		border-color: #3a3a3a;
	}

	.fc .fc-list-day-text,
	.fc .fc-list-day-side-text,
	.fc .fc-col-header-cell-cushion,
	.fc .fc-daygrid-day-number {
		color: #79e2ad;
	}

	.fc .fc-list-event-title,
	.fc .fc-list-event-time {
		color: var(--text-color);
	}

	.news-item {
		border-bottom-color: #3a3a3a;
	}

	.breadcrumb-item + .breadcrumb-item::before {
		color: #9ca3af;
	}

	.breadcrumb-item a {
		color: #5ee0a0;
	}

	.breadcrumb-item.active {
		color: var(--muted);
	}
}

.btn-primary img {
	filter: brightness(0) invert(1);
}

.btn-outline-success img {
	filter: brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(942%) hue-rotate(88deg) brightness(92%) contrast(88%);
}

.btn-outline-secondary img {
	filter: brightness(0) saturate(100%) invert(51%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(89%);
}