/* ========================================= */
/* HOME PAGE STYLES ONLY                     */
/* Header, nav, projects, blog, about        */
/* ========================================= */

:root {
	--maxWidth-project: 375px;
	--gap-project: 2rem;
	--gap-section: 4rem;
	--border: 1.5px solid var(--clr-dark);
	/* Max content width: 2 project cards + 1 gap (middle) */
	--max-width-content: calc(2 * var(--maxWidth-project) + var(--gap-project));
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*     CARD STYLES                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.card {
	background-color: var(--clr-light);
	border: var(--border);
	border-radius: 18px;
	text-decoration: none;
}

.card-hover {
	transition:
		transform 0.2s ease-out,
		box-shadow 0.2s ease-out;
}

.card-hover:hover,
.card-hover:focus-visible {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* :active after :hover so it wins at equal specificity when both apply */
.card:active {
	transform: scale(99%);
	transition: transform 0.1s ease;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*     HEADER                                               */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header {
	width: 100%;
	padding-block: 3.75rem 2.75rem;
	background-color: var(--clr-dark);
	border-bottom: none;
	color: var(--clr-bg);

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 2.375rem;
}

header h1 {
	color: var(--clr-bg);
}

header .nav-link {
	color: var(--clr-bg);
	transition: color 0.2s ease;
}

header .nav-link:hover,
header .nav-link:focus-visible {
	color: var(--clr-light);
}

nav {
	display: flex;
	flex-flow: row wrap;
	gap: 2rem;
	justify-content: center;
}

.nav-link {
	font-size: 1.05rem;
	font-weight: 500;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*     MAIN CONTENT                                         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
main {
	width: 100%;
	padding: var(--gap-section) 3rem;
	background-color: var(--clr-bg);

	display: flex;
	flex-flow: column nowrap;
	gap: var(--gap-section);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*     PROJECT SECTION                                      */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#projects-section,
#blog-section,
#about-section {
	width: 100%;
	max-width: var(--max-width-content);
	margin: 0 auto;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 2rem;
}

#projects-section .section-content {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: var(--gap-project);
	width: 100%;
}

.section-header {
	font-size: 1.75rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0;
}

.project {
	width: calc(50% - var(--gap-project) / 2);
	background-color: transparent;
	border-radius: 18px;
	overflow: hidden;
	border: var(--border);
	cursor: pointer;
}

.project-thumbnail {
	width: 100%;
	aspect-ratio: 40/21;
	background-color: #e2d7d4;
	border-radius: 0;
}

.project img {
	border-radius: 0;
	display: block;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;

	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*     BLOG SECTION                                         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#blog-section .section-content {
	display: flex;
	flex-flow: column nowrap;
	gap: 2rem;
	width: 100%;
}

.blog-post {
	display: block;
	padding: 1.5rem;
	color: var(--clr-text);
}

.blog-post-title {
	font-family: var(--font-accent);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--clr-text);
	margin-bottom: 0.65rem;
	/* Truncate to 2 lines with ellipsis */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.blog-post-description {
	font-size: 1rem;
	line-height: 1.55;
	color: #666;
	/* Truncate to 3 lines with ellipsis */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*     ABOUT SECTION                                        */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.about-content {
	max-width: 510px;
	line-height: 1.7;
	display: flex;
	flex-flow: column nowrap;
	gap: 1.25rem;
}

.about-content p {
	text-align: center;
}

#support {
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

#coffeeLink {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.5rem 1.2rem;
	color: var(--clr-dark);
	font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*     MEDIA QUERIES                                        */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 700px) {
	header {
		gap: 1.5rem;
	}

	h1 {
		font-size: 2.675rem;
	}

	main {
		padding-inline: 2rem;
	}

	.project {
		width: 100%;
	}

	.blog-post {
		padding: 1.25rem;
	}

	.blog-post-title {
		font-size: 1.35rem;
	}
}