/*
	BEM Naming Convention (Block Element Modifier) is used for CSS class names.
	https://getbem.com/naming/

	OKLCH Color Format is used for color values.

	CSS nesting is used to group related styles together and to make the BEM naming convention more obvious.
*/
:root {
	--color-primary: oklch(0% 0 0);
	--color-accent: oklch(59.63% 0.163 41.1);
	--color-accent-darker: oklch(54% 0.163 41.1);
	--color-light-gray: oklch(96% 0 0);

	--color-burvo: oklch(0.5654 0.0694 247.12);
	--color-piggy-plus: oklch(78.94% 0.101 356.3);

	--active-link-thickness: 0.3rem;
}

body {
	color: var(--color-primary);
	font-family: 'Maven Pro', sans-serif;
	line-height: 1.5;
	margin: 0 auto;
	max-width: 768px;
	padding: 1rem;
	font-size: 1.25rem;
}

.font--piggy-plus {
	font-family: 'Comfortaa', sans-serif;
}

.font--status-camp {
	font-family: 'Arsenal', sans-serif;
	letter-spacing: 0.1rem;
}

time {
	color: var(--color-accent-darker);
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.75rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: 0.75rem;
}

.heart svg {
	fill: var(--color-accent);
	height: 1.75rem;
	width: auto;
	vertical-align: middle;
	margin-left: -0.2rem;
	margin-right: -0.2rem;
}

.heart--piggy-plus svg {
	fill: var(--color-piggy-plus);
}

.heart--large svg {
	height: 2rem;
}

header {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: row;
}

.header__logo {
	display: flex;
	align-items: center;

	img {
		width: 4rem;
		height: 4rem;
	}
}

nav menu {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	row-gap: 0.5rem;
	column-gap: 1rem;

	li {
		list-style-type: none;
	}
}

a {
	color: var(--color-primary);
	text-decoration: none;

	/* Only apply the underline appearance to links without the class of 'button' or 'article__topic'. */
	&:not(.button, .article__topic) {
		text-decoration-line: underline;
		text-decoration-color: var(--color-accent);
		text-decoration-thickness: 0.1rem;
		text-underline-offset: 0.4rem;
	}

	/* Only apply this style to active menu links and on link hover for links without the class of 'button' or 'article__topic'. */
	&:not(.button, .article__topic):hover, &.active {
		text-decoration-color: var(--color-primary);
		text-decoration-thickness: var(--active-link-thickness);
	}

	/* If a link has a heart icon, then simulate the "a" link hover decoration using a border so that we account for the heart spacing. */
	&.active:has(svg):has(.heart) {
		text-decoration: none;
		border-bottom: var(--active-link-thickness) solid var(--color-primary);
		padding-bottom: 0.2rem;
	}

}

.button {
	display: block;
	padding: .5rem;
	background-color: var(--color-light-gray);
	color: var(--color-primary);
	border: 0.1rem solid var(--color-primary);
	border-radius: .25rem;
	width: fit-content;
	transition: filter 0.3s ease; 

	&:hover {
		filter: brightness(140%);
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	}

	svg {
		height: 1.5rem;
		position: relative;
		top: 0.3rem;
	}

}

.button--center {
	margin: 0 auto;
}

.button--burvo {
	background-color: var(--color-burvo);
	color: white;
}

.button--piggy-plus {
	background-color: var(--color-piggy-plus);
	color: var(--color-primary);
}

.divider {
	margin-top: 2rem;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 1.5rem;
	font-weight: normal;
	color: var(--color-primary);

	img {
		max-height: 3rem;
	}

	&::before, &::after {
		content: '';
		flex: 1;
		border-bottom: 1px solid var(--color-accent-darker);

	}

	&::before {
		margin-right: .5em;
	}

	&::after {
		margin-left: .5em;
	}

	/* If no content then remove margins so that there isn't a phantom gap in the middle. */
	&:empty::before, &:empty::after {
		margin-right: 0;
		margin-left: 0;
	}
}

#welcome {
	width: 100%;
	margin-top: 1.25rem;
	padding-left: 1rem;
	padding-right: 1rem;

	p {
		margin-bottom: 1rem;
		text-align: justify;
	}

	p:first-child {
		margin-bottom: 1rem;
		text-align: left;

		svg {
			height: 1.5rem;
			width: auto;
			vertical-align: middle;
			margin-top: -0.2rem;
			margin-left: -0.2rem;
			margin-right: -0.2rem;
		}
	}
}

article {
	margin-bottom: 1rem;

	time {
		display: block;
		font-size: 1rem;
		margin-top: 0.5rem;
	}
}

.article__img {
	display: block;
	margin: 0 auto;
	height: 40vh;
	object-fit: contain;
	border-radius: 1rem;
	margin-bottom: 1rem;
}

.article__summary {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	row-gap: 0rem;
	column-gap: 1.5rem;
	border-bottom: 0.1rem solid var(--color-light-gray);
	padding-bottom: 1rem;
	margin-bottom: 2rem;

	/* If there is no article image, then the article summary text will span the entire width. */
	> *:only-child {
		grid-column: 1 / -1;
	}
}

.article__title {
	margin: 0;
	padding-bottom: 0.5rem;
	font-weight: normal;
}

.article__topic {
	padding: 0.4rem;
	background-color: var(--color-accent-darker);
	color: var(--color-light-gray);
	border-radius: 0.25rem;
	font-style: italic;
	font-size: 1rem;
	width: fit-content;
	transition: filter 0.3s ease;
	filter: brightness(95%);

	&:hover {
		filter: brightness(120%);
	}

	&::before {
		content: '#';
	}
}

/* Code highlighting override. */
code {
	overflow-x: auto;
	width: 100%;
	border-radius: 0.25rem;
	padding: 1rem;
	font-size: 1rem;
	display: block;
	background-color: var(--color-primary);
	color: var(--color-light-gray);
}

/* Blockquote override. */
blockquote {
	border-left: 0.5rem solid var(--color-accent);
	padding-left: 1rem;
}

footer {
	margin-top: 1rem;
	align-content: center;
	text-align: center;
	font-size: 1.1rem;

	.footer__logo {
		height: 3rem;
		width: auto;
	}

	menu {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		flex-wrap: wrap;
		padding: 0;
		margin: 0 auto;
		width: fit-content;
	
		li {
			list-style-type: none;
		}
	
		li a svg {
			position: relative;
			top: 0.3rem;
		}
	
		li a:hover svg {
			fill: var(--color-accent);
		}

		/* Social media links contained within. */
		li:last-child {
			border-left: solid thin var(--color-primary);
			margin-left: 0.5rem;
			padding-left: 1rem;
		}
	}
}