@charset "utf-8";

/* AUTHOR */
.blog-author-bio-description {
	--image-size: 7.5rem;
	display: grid;
	grid-template-columns: var(--image-size) 1fr;
	gap: var(--gap);
	margin-block: var(--margin-small) var(--margin-block);
	}
.blog-author-bio-image {
	border: 1px solid var(--background-divider);
	border-radius: var(--radius);
	display: block;
	padding: var(--space-5);
	}
.blog-author-bio-image > img {
	border-radius: var(--radius);
	}
.blog-author-bio-text > .textlight {
	font-size: var(--font-size-sm);
	}

/* BLOGS */
.blog-footer {
	display: grid;
	gap: var(--gap-flow);
	}
.blog-footer .header-inline {
	font: var(--typography-h5);
	margin-block-end: var(--space-10);
	}
@media (min-width: 60em) {
	.blog-footer {
		grid-template-columns: 1fr 1fr;
		}
	.blog-footer-content {
		margin-block: var(--margin-block);
		}
}

/* BLOGS */
.blogs-interest {
	--image-size: 4.5rem;
	display: grid;
	gap: var(--gap-small);
	margin-block: var(--margin-small);
	}
.blogs-interest-item {
	display: grid;
	gap: var(--gap-small);
	grid-template-columns: var(--image-size) 1fr;
	}
.blogs-interest-item + .blogs-interest-item {
	border-top: 1px solid var(--background-divider);
	padding-top: var(--margin-small);
	}
.blogs-interest-image {
	border-radius: var(--radius);
	overflow: hidden;
	}
.blogs-interest-header {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	margin-block: var(--space-5);
	}
.blogs-interest-text {
	color: var(--color-dimmed);
	font-size: var(--text-micro);
	line-height: var(--line-height-none);
	}

/* TAGS */
.blog-tags ul {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	gap: var(--space-5);
	margin-block-start: var(--margin-small);
	}
.blog-tags ul > li {
	display: inline-block;
	}
.blog-tags ul > li > a {
	background: var(--hue-white);
	border-radius: var(--radius);
	color: var(--hue-white-text);
	padding: 0.5em 1em;
	display: inline-block;
	}
.blog-tags ul > li > a:hover,
.blog-tags ul > li > a:focus-visible {
	background: var(--color-button);
	color: var(--color-button-text);
	}

/* POST DETAILS */
.postcontent-details {
	--image-size: 2.5rem;
	border-bottom: 1px solid var(--background-divider);
	font-size: var(--text-micro);
	line-height: var(--image-size);
	margin-bottom: var(--margin-small);
	padding-bottom: var(--margin-small);
	}
.postcontent-author-img,
.postcontent-author-name {
	display: inline-block;
	vertical-align: top;
	}
.postcontent-author-img {
	border-radius: 100%;
	overflow: hidden;
	width: var(--image-size);
	}
.postcontent-author-name {
	padding-left: var(--space-5);
	}
.postcontent-date,
.postcontent-comments {
	padding-left: var(--space-10);
	}
.postcontent-date > i,
.postcontent-comments > i {
	padding-right: var(--space-5);
	}

/* POST NAV */
.postnav {
	--image-width: 3rem;
	border-top: 1px solid var(--background-divider);
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr 1fr;
	margin-block: var(--margin-gap);
	}
.postnav-link {
	align-items: flex-start;
	display: grid;
	gap: var(--gap-small);
	margin-top: var(--margin-small);
	}
.postnav-link.postnav-next {
	grid-column: 2;
	}
.postnav-info > span > i {
	color: var(--color-arrow);
	}
.postnav-info > span {
	display: block;
	margin-block: var(--space-5);
	}
.postnav-link.postnav-prev {
	grid-template-columns: var(--image-width) 1fr;
	}
.postnav-link.postnav-next {
	grid-template-columns: 1fr var(--image-width);
	text-align: right;
	}
.postnav-dir {
	font-size: var(--font-size-xs);
	}
.postnav-dir > strong {
	font-weight: var(--font-weight-heavy);
	text-transform: uppercase;
	}
.postnav-img {
	border-radius: var(--radius);
	}
.postnav-title {
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
	text-wrap: balance;
	}
@media screen and (min-width: 80em) {
	.postnav {
		--image-width: 7.5rem;
		}
}

/* OEMBED */
.twitter-tweet {
	margin: var(--margin-gap) auto;
	}

/* FIXES */
.blogpost .is-layout-flex {
	display: flex;
	flex-wrap: wrap;
	}
.blogpost .textlinks a[class],
.blogpost .textlinks a[class]:focus-visible,
.blogpost .textlinks a[class]:hover {
	text-decoration: none !important;
	}
.blogpost .wp-block-cover {
	border-radius: var(--radius);
	}
.blogpost .wp-block-cover,
.blogpost .wp-block-buttons {
	margin: var(--margin-gap) auto;
	}
.blogpost .wp-block-buttons {
	gap: var(--gap-small);
	}
.blogpost .wp-block-button__link,
.blogpost .wp-block-file .wp-block-file__button {
	background-color: var(--color-button);
	border-radius: var(--radius);
	color: var(--color-button-text);
	font-size: var(--font-size-md);
	min-width: 0;
	}
.blogpost  .textlinks .wp-block-buttons a.has-background.has-background:hover,
.blogpost  .textlinks .wp-block-buttons a.has-text-color.has-text-color:hover {
	background-color: var(--color-button-hover) !important;
	color: var(--color-button-hover-text) !important;
	}
.blogpost .wp-block-button + .wp-block-button {
	margin-left: var(--gap-small);
	}
.blogpost pre.wp-block-verse {
	overflow: visible;
	}
.blogpost .wp-block-image img {
	border-radius: var(--radius);
	}
.blogpost .wp-block-gallery .wp-block-image > a {
	border-radius: var(--radius);
	box-shadow: var(--box-shadow);
	margin: 0;
	overflow: hidden;
	}
.blogpost .wp-block-gallery .wp-block-image > a > img {
	margin: 0;
	}
@media (hover: hover) and (pointer: coarse), (hover: hover) and (pointer: fine) {
	.blogpost .wp-block-gallery .wp-block-image > a img,
	.blogpost .wp-block-gallery .wp-block-image > a picture {
		transition: transform var(--animation-duration) var(--animation-easing);
		}
	.blogpost .wp-block-gallery .wp-block-image > a:hover img,
	.blogpost .wp-block-gallery .wp-block-image > a:hover picture {
		transform: scale(1.1)
		}
}
.blogpost .wp-block-quote,
.blogpost .wp-block-quote.is-style-large {
	margin-bottom: 2.5rem;
	margin-top: 2.5rem;
	}
.blogpost .wp-block-quote > p {
	margin: 0;
	}
.blogpost .wp-block-quote > cite {
	display: block;
	}

/* BLOCKS SPACING */
@media (min-width: 60em) {
	.container .alignwide,
	.container .alignfull,
	.container .twitter-tweet,
	.container p.has-background,
	.container .wp-block-embed.is-type-video.alignwide,
	.container .wp-block-embed.is-type-video.alignfull {
		margin-inline: calc(var(--indents) * -1);
		}
	.container .wp-block-gallery.alignleft > .blocks-gallery-grid,
	.container .wp-block-gallery.alignright > .blocks-gallery-grid {
		margin-inline: 0;
		}
	.container .wp-block-cover,
	.container .wp-block-cover-image {
		width: auto;
		}
}