@charset "UTF-8";

@property --page-num {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

body.single-post .site-message ~ a.for-scrolling {
	margin-top: var(--header-height);
}

@keyframes postsFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@property --side-by-side-space {
	syntax: "<length>";
	inherits: true;
	initial-value: 20px;
}

:root {
	interpolate-size: allow-keywords;
}

/*-----------------------------------------*\
  Blog List page
\*-----------------------------------------*/
section.blog-post-list {
	position: relative;
	
	.content {
		margin: 0 auto;
		max-width: 1416px;
		padding-inline: var(--gutter-width);
		
		a.scroll-pos {
			display: inline-block;
			position: relative;
			top: calc(0px - var(--header-height));
			padding-block-start: var(--header-height);
			margin-block-end: calc(0px - var(--header-height));
		}

		.border {
			display: grid;
			gap: 30px;
			grid-template-areas: 
			  "categories posts";
			grid-template-columns: var(--250px) 1fr;
			grid-template-rows: auto;
			overflow: hidden;
			
			@media (width < 1024px) {
				grid-template-areas: 
				  "categories"
					"posts";
				grid-template-columns: 1fr;
				grid-template-rows: auto auto;
			}

			.navbar {
				grid-area: categories;
				z-index: 1;

				nav {
					font-size: var(--16px);
					font-weight: bold;
					line-height: normal;
					overflow: auto;
					
					form {
						display: none;
						padding: 1px 0 0 0;
						
						button[type="submit"] {
							display: none;
							white-space: nowrap;
						}
						html.no-js & button[type="submit"],
						button[type="submit"].no-js {
							display: initial !important;
						}
						
						
						@media (width < 1024px) {
							display: flex;
							flex-wrap: wrap;
							gap: 20px;
							max-width: 100%;
							overflow: clip;
						}
						
						label {
							align-items: center;
							column-gap: 20px;
							display: flex;
							flex-wrap: wrap;
							margin: 0;
							width: 100%;
							
							> span {
								display: block;
								font-family: 'Libre Baskerville', serif;
								font-size: var(--20px);
								font-weight: 300;
								padding: 0;
								width: auto;
							}
							
							> select {
								background-color: transparent;
								background-image: url('../img/dropdown-arrow-green.png');
								background-position: right 12px center;
								background-repeat: no-repeat;
								background-size: 13px 6px;
								border: 1px solid var(--parent-highlight-color);
								border-radius: 8px;
								color: var(--parent-highlight-color);
								font-weight: 700;
								line-height: normal;
								margin-top: 10px;
								outline: none !important;
								padding: 11px 8px 9px;
								width: 100%;
							}

							> select option,
							> select:focus option:checked {
								color: var(--parent-secondary-highlight-color) !important;
								font-family: 'Libre Baskerville', serif;
								font-size: var(--20px);
								font-weight: 300;
								line-height: normal;
							}
						}
					}

					ul {
						list-style: none;
						margin: 0 0 10px;
						padding-left: 0;
						
						@media (width < 1024px) {
							display: none;
						}

						> li {
							list-style: none;
							
							&::before {
								display: none;
							}
							
							a {
								background-color: transparent;
								border-block-start: 1px solid var(--parent-border-color);
								color: var(--parent-main-text-color);
								display: flex;
								justify-content: space-between;
								font-family: 'Libre Baskerville', serif;
								font-size: var(--18px);
								font-weight: 300;
								padding-block: 11px;
								text-decoration: none;
								
								&.selected {
									color: var(--parent-secondary-highlight-color);
								}
								
								&:is(:hover, :focus-visible) {
									color: var(--parent-secondary-highlight-color);
									outline: none;
								}
								&:focus-visible::after {
									content: "<";
								}
							}

							&:last-child a {
								border-block-end: 1px solid var(--parent-border-color);
							}
						}
					}
				}
			}
			
			.right-column {
				grid-area: posts;
				
				.posts {
					border-block-end: 1px solid var(--parent-border-color);
					display: grid;
					gap: 0;
					
					article {
						overflow: clip;
						transition: display 0.3s allow-discrete, opacity 0.3s ease-in-out, height 0.3s ease-in-out, transform 0.3s ease-in-out;

						@supports not (interpolate-size: allow-keywords) {
							transform: translateY(0);
						}

						@starting-style {
							height: 0px;
							opacity: 0;
							
							@supports not (interpolate-size: allow-keywords) {
								transform: translateY(35px);
							}
						}

						&:is(.initially-hidden, .hide):has(~ :not(.initially-hidden, .hide)) { /* previous pages */
							display: none;
							height: 0px;
							opacity: 0;
						}
						&:not(.initially-hidden, .hide) ~ :is(.initially-hidden, .hide) { /* next pages */
							display: none;
							height: 0px;
							opacity: 0;
						}

						.padding {
							border-block-start: 1px solid var(--parent-border-color);
							display: grid;
							gap: 30px;
							grid-template-columns: 260px 1fr;
							padding-block: 20px;
							
							@media (width < 640px) {
								grid-template-columns: 1fr;
							}
							
							a:is(.image-link, .title) {
								display: block;
								overflow: clip;
								padding: 0;
								text-decoration: none;
							}
	
							a.image-link {
								aspect-ratio: 375 / 240;
								overflow: clip;
								max-width: 260px;
								width: 100%;
								
								img {
									aspect-ratio: 375 / 240;
									height: auto;
									max-width: 100%;
									transition: scale 0.2s ease;
									width: 100%;
								}
							}
	
							.text {
								align-self: center;
								font-family: 'Libre Baskerville', serif;
								
								> ul {
									color: var(--parent-secondary-highlight-color);
									font-family: 'Libre Baskerville', serif;
									font-size: var(--14px);
									font-weight: 700;
									line-height: normal;
									list-style: none;
									margin-block: 0;
									padding: 0;
									text-transform: capitalize;
									
									li {
										display: inline;
										text-transform: uppercase;
										
										&::before {
											display: none;
										}
										
										a {
											color: var(--parent-secondary-highlight-color);
											text-decoration: none;
											
											&:hover {
												text-decoration: underline;
											}
										}
									}
										
									span[aria-hidden] {
										display: inline-block;
										font-size: var(--25px);
										margin-inline: 6px;
										position: relative;
										top: 2px;
									}
								}
								
								.date {
									color: var(--parent-meta-text-color);
									font-family: 'Libre Baskerville', serif;
									font-size: var(--14px);
									font-weight: 600;
									margin-block: 3px 0;
									text-transform: uppercase;
								}
								
								.title {
									color: var(--parent-main-text-color);
									display: block;
									font-family: 'Libre Baskerville', serif;
									font-size: var(--22px);
									font-weight: 400;
									margin-block: 0.5em 0;
								}
							}
						}
												
						&:has(a:is(.image-link,.title):is(:hover,:focus-visible)) {
							img {
								scale: 1.05;
							}
						}
					}
					
					&.fade-in {
						animation: postsFadeIn 0.5s;
					}
				}
				
				.paginator {
					column-gap: 10px;
					display: grid;
					grid-template-columns: var(--170px) 1fr var(--170px);
					margin-block: 21px;
					
					@media (width < 860px) {
						grid-template-columns: auto 1fr auto;
					}
					
					&.hidden {
						display: none;
					}
					
					aside.cta.button,
					input.cta.button {
						border: 1px solid var(--parent-main-text-color);
						border-radius: 5px;
						font-size: var(--14px);
						letter-spacing: var(--1p5px);
						line-height: 3;
						overflow: hidden;
						text-align: center;
						text-transform: uppercase;
					}

					input.cta.button {
						background-color: transparent;
						cursor: pointer;
						padding: 0 60px;
					}
					
					button.cta {
						appearance: none;
						background-color: var(--parent-highlight-color);
						border: none;
						border-radius: 5px;
						color: #fff;
						cursor: pointer;
						display: inline-block;
						font-size: var(--14px);
						font-weight: 400;
						letter-spacing: var(--1p5px);
						line-height: 3;
						min-width: initial;
						overflow: hidden;
						padding: 0 10px;
						text-align: center;
						text-transform: uppercase;
						user-select: none;
						
						&:hover {
							box-shadow: 1px 1px 2px 0 var(--parent-highlight-color);
							opacity: 0.8;
						}
						
						@media (width < 860px) {
							.wide {
								display: none;
							}
						}
						@media (width >= 860px) {
							.narrow {
								display: none;
							}
						}
						
						&[disabled="disabled"] {
							opacity: 0.7;
							
							&::before, &::after {
								opacity: 0.7;
							}
						}
					}
					
					.pages {
						align-items: center;
						column-gap: 20px;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						row-gap: 10px;

						@media (width < 640px) {
							column-gap: 12.5px;
						}
						
						.pagenum {
							color: var(--parent-main-text-color);
							font-family: 'Libre Baskerville', serif;
							font-size: var(--16px);
							font-weight: 700;
							text-decoration: none;
							
							&.selected {
								color: var(--parent-secondary-highlight-color);
								pointer-events: none;
							}
						}
					}
				}
			}
		}
	}
}

/*-----------------------------------------*\
  Blog Post page
\*-----------------------------------------*/
section.post-content {
	.content {
		margin-inline: auto;
		max-width: calc(900px + (2 * var(--gutter-width)));
		padding-inline: var(--gutter-width);
		overflow: visible;
		
		a.all-posts {
			align-items: center;
			appearance: none;
			background-color: var(--parent-highlight-color);
			border: none;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
			display: inline-flex;
			font-family: 'Libre Baskerville', serif;
			font-size: var(--14px);
			font-weight: 400;
			gap: 10px;
			letter-spacing: var(--1p5px);
			line-height: 3;
			margin-block: var(--20px);
			min-width: initial;
			overflow: hidden;
			padding: 0 25px;
			text-align: center;
			text-decoration: none;
			user-select: none;

			&:is(:hover, :focus-visible) {
				box-shadow: 1px 1px 2px 0 var(--parent-highlight-color);
				opacity: 0.8;
			}
		}
			
		.border {
			.post-header {
				font-family: 'Libre Baskerville', serif;
				
				> ul {
					color: var(--parent-secondary-highlight-color);
					font-family: 'Libre Baskerville', serif;
					font-size: var(--14px);
					font-weight: 700;
					list-style: none;
					margin-block: 20px 7px;
					padding: 0;
					text-transform: capitalize;
					
					li {
						display: inline;
						text-transform: uppercase;
						
						&::before {
							display: none;
						}
						
						a {
							color: var(--parent-secondary-highlight-color);
							text-decoration: none;
							
							&:hover {
								text-decoration: underline;
							}
						}
					}
						
					span[aria-hidden] {
						display: inline-block;
						font-size: var(--25px);
						margin-inline: 6px;
						position: relative;
						top: 2px;
					}
				}
				
				.date {
					color: var(--parent-meta-text-color);
					font-family: 'Libre Baskerville', serif;
					font-size: var(--14px);
					font-weight: 600;
					margin-block: 7px 20px;
					text-transform: uppercase;
				}
				
				.title {
					color: var(--parent-main-text-color);
					display: block;
					font-family: 'Libre Baskerville', serif;
					font-size: var(--60px);
					margin-block: 0 0.5em;
				}
			}
	
			.post-content {
				color: var(--parent-main-text-color);
				font-family: 'Libre Baskerville', serif;
				font-size: var(--15px);
				font-weight: 400;
				line-height: 1.7333;
	
				> :first-child {
					margin-block-start: 0;
				}
				:is(h1,h2,h3,h4,h5,h6) {
					color: var(--parent-secondary-highlight-color);
					font-family: 'Libre Baskerville', serif;
					font-size: var(--24px);
					font-weight: 500;
					margin-block-end: 0;
					line-height: 1.0833;
					
					&:first-child {
						margin-block-start: 0;
					}
				}
				h3 {
					font-size: var(--20px);
					line-height: 1.3;
				}
				:is(h4,h5,h6) {
					color: var(--parent-main-text-color);
					font-size: var(--18px);
					line-height: 1.4444;
				}
				:is(h5,h6) {
					font-size: var(--16px);
					line-height: 1.625;
				}
				:is(h1,h2,h3,h4,h5,h6) + :is(p,ul,ol) {
					margin-block-start: 0;
				}
				
				img {
					height: auto;
				}
				@media only screen and (min-width:480px) {
					img.half-width {
						max-width: calc(50% - (var(--side-by-side-space) / 2));
						width: calc(50% - (var(--side-by-side-space) / 2));
					}
				}
				
				@media only screen and (min-width:640px) {
					:is(p, figure):has(img.side-by-side):not(:has(img.side-by-side+img.side-by-side)),
					:is(p, figure):has(img.side-by-side):not(:has(img.side-by-side+img.side-by-side)) + :is(p:has(img.side-by-side):not(:has(img.side-by-side+img.side-by-side)), figure:has(img.side-by-side):not(:has(img.side-by-side+img.side-by-side))) {
						float: left;
						height: auto;
						width: calc(50% - (var(--side-by-side-space) / 2)) !important;
					}
					:is(p, figure):has(img.side-by-side):not(:has(img.side-by-side+img.side-by-side)) + :is(p:has(img.side-by-side):not(:has(img.side-by-side+img.side-by-side)), figure:has(img.side-by-side):not(:has(img.side-by-side+img.side-by-side))) {
						margin-inline-start: var(--side-by-side-space);
					}
					/* for two images in the same paragraph */
					p:has(img.side-by-side+img.side-by-side) img.side-by-side {
						float: left;
						height: auto;
						margin-block-end: 10px;
						margin-inline: 0;
						width: calc(50% - (var(--side-by-side-space) / 2)) !important;
					}
					p:has(img.side-by-side+img.side-by-side) img.side-by-side + img.side-by-side {
						margin-inline-start: var(--side-by-side-space);
					}
					@supports not selector(:has(img.side-by-side + img.side-by-side)) {
						p img.side-by-side + img.side-by-side {
							margin-block-start: 10px;
						}
					}
				}
			}
		}
	}
}