/* Energy Flow — replicates the site's GeneratePress look (extracted from its
   customizer CSS: Lora/Heebo/Khand type, red accents, 800px grid). */

* { box-sizing: border-box; }

body {
	background-color: #ffffff;
	color: #000000;
	font-family: "Lora", serif;
	font-size: 18px;
	line-height: 1.8;
	margin: 0;
}

a { color: #bf1f1f; }
a:hover, a:focus, a:active { color: #000000; }

img { max-width: 100%; height: auto; border: 0; }
iframe { max-width: 100%; }

h1 { font-family: "Lora", serif; font-weight: bold; font-size: 55px; line-height: 1.2; }
h2 { font-family: "Heebo", sans-serif; font-weight: bold; font-size: 45px; line-height: 1.3; }
h2.entry-title { font-family: "Lora", serif; font-size: 30px; }
h3 { font-family: "Heebo", sans-serif; font-size: 20px; }
h4, h5, h6 { font-size: inherit; font-family: "Heebo", sans-serif; }

.entry-title a { color: #000000; text-decoration: none; }
.entry-title a:hover { color: #515151; }

.blockquote, blockquote {
	border-left: 5px solid rgba(0,0,0,0.05);
	padding: 20px;
	font-style: italic;
	margin-left: 0;
}

.grid-container { max-width: 800px; margin-left: auto; margin-right: auto; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}

.skip-link {
	background-color: #f1f1f1;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
	color: #21759b;
	display: block;
	font-weight: 700;
	left: -9999em;
	padding: 15px 23px 14px;
	position: absolute;
	top: -9999em;
	z-index: 100000;
}
.skip-link:focus { left: 6px; top: 7px; }

/* Navigation */
.main-navigation { background-color: #ffffff; }
.main-navigation .inside-navigation {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

.main-navigation a, .menu-toggle {
	font-family: "Lora", serif;
	font-size: 30px;
	color: #000000;
}
.main-navigation .main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}
.main-navigation .main-nav ul li a {
	display: block;
	padding: 0 20px;
	line-height: 96px;
	text-decoration: none;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: #8f919e;
	background-color: #ffffff;
}

.site-logo img { height: 64px; width: auto; display: block; }
.mobile-logo img { height: 44px; }

/* Sticky nav fade (replicates sticky-menu-fade) */
#site-navigation.is-stuck {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	animation: gpFadeIn 0.3s ease;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
@keyframes gpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Mobile header + slide-out menu */
.mobile-header-navigation { display: none; position: relative; }
.mobile-header-navigation .inside-navigation { justify-content: space-between; }

.menu-toggle {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 20px;
	line-height: 0;
}
.menu-toggle:hover { color: #000000; }
#site-navigation .menu-toggle { display: none; }
.mobile-header-navigation .menu-toggle { margin-left: auto; }

.slideout-navigation {
	position: fixed;
	top: 0; left: -280px;
	width: 280px; max-width: 90%;
	height: 100%;
	background: #ffffff;
	z-index: 1001;
	transition: left 0.3s ease;
	padding: 20px;
	overflow-y: auto;
}
body.slide-opened .slideout-navigation { left: 0; }
.slideout-navigation .main-nav ul { list-style: none; margin: 0; padding: 0; }
.slideout-navigation .main-nav ul li a {
	display: block;
	padding: 15px 10px;
	line-height: 1.4;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.05);
}
.slideout-close { float: right; margin-bottom: 20px; }

#slideout-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.2);
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 1000;
}
body.slide-opened #slideout-overlay { opacity: 1; visibility: visible; }
body.slide-opened { overflow: hidden; }

/* Content containers */
.site-content { margin-top: 60px; margin-bottom: 60px; }
.inside-article { background-color: #ffffff; padding: 0 60px 60px; }

.featured-image, .post-image { margin-bottom: 2em; }
.featured-image img, .post-image img { display: block; width: 100%; height: auto; }

.entry-content > [class*="wp-block-"]:not(:last-child):not(.wp-block-heading) { margin-bottom: 1.5em; }

/* Archive grid */
.posts-container.generate-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}
.generate-columns > article.post { width: calc(50% - 15px); }
.generate-columns .inside-article { padding: 0 0 30px; }
.entry-summary p { margin-top: 0; }

.read-more-container .read-more.button,
button, a.button {
	color: #ffffff;
	background-color: #000000;
	padding: 10px 20px;
	display: inline-block;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}
.read-more.button:hover, button:hover, a.button:hover {
	color: #ffffff;
	background-color: #3f3f3f;
}

/* Pagination */
.paging-navigation {
	background-color: #ffffff;
	padding: 20px 60px;
	margin-bottom: 60px;
}
.paging-navigation .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.page-numbers {
	display: inline-block;
	padding: 8px 14px;
	text-decoration: none;
}
.page-numbers.current { color: #000000; font-weight: bold; }

/* Single post navigation */
.post-navigation { padding: 0 60px 60px; overflow: hidden; }
.post-navigation .nav-previous { float: left; }
.post-navigation .nav-next { float: right; }

/* Footer */
.site-info {
	color: #9e9e9e;
	text-align: center;
}
.site-info .inside-site-info { max-width: 840px; margin: 0 auto; padding: 20px; }
.site-info a { color: #9e9e9e; }
.site-info a:hover { color: #303030; }
.content-copyright { font-size: 14px; margin-top: 0.5em; }

@media (max-width: 768px) {
	h1 { font-size: 30px; }
	h2 { font-size: 25px; }
	h2.entry-title { font-size: 24px; }
	.main-title { font-size: 20px; }

	#site-navigation { display: none; }
	.mobile-header-navigation { display: block; }

	.site-content { margin-top: 30px; margin-bottom: 30px; }
	.inside-article { padding: 0 30px 30px; }
	.paging-navigation { padding: 20px 30px; }
	.post-navigation { padding: 0 30px 30px; }

	.generate-columns > article.post { width: 100%; }
}