/* General Styles */
body {
	background-color: #fffffd;
	margin: 0;
	padding: 0;
	font-family: "Courier New", Courier, monospace;
}

/* Header */
.static-header {
	display: flex;
	align-items: center;
	justify-content: center; /* Spreads items across the full width */
	width: 100%;
	background-color: #1e4718;
	color: white;
}

.header-text {
	flex: 5; /* Allows text to take available space */
	text-align: center;
}

.header-buttons {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto; /* Pushes buttons to the far right */
	margin-right: 20px;
}

.header-buttons img {
	width: 40px;
	height: 40px;
	filter: invert(100%);
}

.header-text {
	flex: 2;
	text-align: center;
}

.header-text h1 {
	font-size: 375%;
}

.header-text h2 {
	font-size: 150%;
}

.header-buttons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	margin-left: auto; /* Pushes it to the far right */
}

.about h1 {
	font-weight: bold;
}
.areas h1 {
	font-weight: bold;
}
.certs h1 {
	font-weight: bold;
}

.header-buttons img {
	width: 40px;
	height: 40px;
	filter: invert(100%);
}

/* Layout */
.column {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.logo-filled {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 20px;
	justify-content: center;
}

.logo-filled p {
	text-align: center;
	color: white;
	font-size: 0.9em;
}

.round-logo {
	border-radius: 50%;
	width: 100px;
	height: auto;
}

.profile-pic {
	border-radius: 50%;
	max-width: 80%;
}

.general-text {
	color: black;
	font-style: normal;
	font-weight: normal;
}
.general-text-inverted {
	color: white;
	font-style: normal;
	font-weight: normal;
}

.header-grid {
	display: grid;
	grid-template-columns: 40px auto;
	grid-auto-rows: auto;
	align-items: center;
	gap: 8px 12px;
	margin-left: auto; /* push to right in header */
	margin-right: 20px;
}

.header-grid .contact-icon img {
	width: 40px;
	height: 40px;
	filter: invert(100%);
}

.header-grid .contact-text {
	color: white;
	margin: 0;
}
/* Testimonials */
.anecdotes {
	max-width: 100%;
	margin: 20px;
}

.anecdotes img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin-bottom: 10px;
}

.anecdotes p {
	color: black;
	font-size: 1.2em;
	margin: 20px;
}
.column li {
	text-align: start;
	margin-bottom: 10px;
}
.cta-button {
	display: inline-block;
	padding: 12px 20px;
	background-color: #1e4718; /* match header brand */
	color: #ffffff;
	text-decoration: none;
	border-radius: 9999px;
	font-weight: 600;
	border: 2px solid transparent;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s ease, transform 0.05s ease,
		box-shadow 0.2s ease;
}
.cta-button:hover {
	background-color: #163712;
}
.cta-button:active {
	transform: translateY(1px);
}
.cta-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 71, 24, 0.35);
}

/* Responsive Design */
@media (max-width: 768px) {
	.row {
		flex-direction: column;
		text-align: center;
	}
	.cta-button {
		width: min(80dvw, 420px);
		text-align: center;
	}
	.below-header {
		flex-direction: column-reverse;
	}
	.header-grid {
		/* center the grid container horizontally */
		margin-inline: auto; /* overrides desktop margin-left: auto; */
		width: max-content; /* shrink to content so centering works */
		grid-template-columns: 32px auto;
		justify-items: center; /* center items within their cells */
		align-items: center;
		text-align: center;
	}

	.static-header {
		flex-direction: column;
		padding: 15px 0;
		align-items: center;
	}

	.header-text h1 {
		font-size: 300%;
	}

	.header-text h2 {
		font-size: 130%;
	}

	.header-buttons {
		gap: 10px;
		margin-left: 20px;
	}

	.profile-pic {
		width: 50dvw;
		height: 50dvw;
	}

	.anecdotes div {
		flex-direction: column;
		/* align-items: center; */
		text-align: left;
	}

	.anecdotes img {
		width: 60px;
		height: 60px;
	}

	.round-logo {
		width: 25%;
	}
	.logo-filled {
		margin-left: 0;
	}
}

@media (max-width: 480px) {
	.header-text h1 {
		font-size: 250%;
	}

	.header-text h2 {
		font-size: 120%;
	}

	.profile-pic {
		width: 50dvw;
		height: 50dvw;
	}

	.round-logo {
		width: 25%;
	}
	.header-grid {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 6px 0;
	}
	.header-grid .contact-text {
		text-align: center;
	}
}