/*
 * Styles for the theme's own markup: blog, post and page layout, comments, search and core classes.
 * Design sections are styled by Tailwind only; these selectors never target design markup.
 * Regular blocks inside posts and pages are styled in content.css, which the block editor loads too.
 * Fonts and colors follow the design through its Tailwind theme variables when they exist.
 */

.st-container {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
	box-sizing: border-box;
}

.st-container-narrow {
	max-width: 48rem;
}

.st-main {
	padding-block: 4rem;
}

.st-layout {
	display: grid;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.st-layout:has(.st-sidebar) {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}
}

.st-page-header,
.st-entry-header {
	margin-bottom: 2.5rem;
}

.st-page-title,
.st-entry-title,
.st-card-title,
.st-comments-title,
.st-widget-title {
	font-family: var(--font-heading, inherit);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.st-page-title,
.st-entry-title {
	font-size: clamp(2rem, 4vw, 3rem);
}

.st-page-description,
.st-entry-meta {
	margin-top: 0.75rem;
	opacity: 0.7;
	font-size: 0.875rem;
}

.st-meta-sep {
	margin-inline: 0.5rem;
}

.st-entry-thumbnail {
	margin: 0 0 2.5rem;
}

.st-entry-thumbnail img,
.st-card-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

/*
 * Content layout, as in WordPress's own "constrained" layout: blocks are as wide as the content size
 * of theme.json and centered; wide and full-width blocks break out. Design sections are full-width
 * blocks, so nothing here applies to them and Tailwind alone decides their size and spacing.
 *
 * The content size is the width of the design's page container, so regular blocks line up with the
 * sections of the design. Blog posts are narrower, for comfortable line lengths.
 */
.st-content-narrow {
	--wp--style--global--content-size: 48rem;
}

.st-container-content {
	width: 100%;
	max-width: min(var(--wp--style--global--content-size, 76rem), 100% - 3rem);
	margin-inline: auto;
	box-sizing: border-box;
}

.st-content > :where(:not(.alignfull):not(.alignleft):not(.alignright)) {
	max-width: min(var(--wp--style--global--content-size, 76rem), 100% - 3rem);
	margin-inline: auto;
}

.st-content > .alignwide {
	max-width: min(var(--wp--style--global--wide-size, 80rem), 100% - 3rem);
}

.st-content > :where(.alignleft) {
	margin-inline-start: max(1.5rem, (100% - var(--wp--style--global--content-size, 76rem)) / 2);
}

.st-content > :where(.alignright) {
	margin-inline-end: max(1.5rem, (100% - var(--wp--style--global--content-size, 76rem)) / 2);
}

.st-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Space between blocks; sections of the design bring their own. */
.st-content > :where(:not([class*="shuffle-design-"])) {
	margin-block: 0 var(--wp--style--block-gap, 1.5rem);
}

.st-content > :where(:not([class*="shuffle-design-"]):is(h1, h2, h3, h4, h5, h6):not(:first-child)) {
	margin-block-start: 2em;
}

.st-content > :where(:last-child) {
	margin-block-end: 0;
}

.st-entry-footer,
.st-page-links {
	margin-top: 2.5rem;
}

.st-tags a {
	display: inline-block;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.25rem 0.75rem;
	border: 1px solid rgb(0 0 0 / 0.15);
	border-radius: 999px;
	font-size: 0.875rem;
}

/* Post lists */
.st-post-list {
	display: grid;
	gap: 3rem;
}

.st-card {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.st-card:has(.st-card-image) {
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: start;
	}
}

.st-card-title {
	font-size: 1.5rem;
	margin-top: 0.5rem;
}

.st-card-excerpt {
	margin-top: 0.75rem;
	opacity: 0.8;
}

.st-link {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.st-main .navigation {
	margin-top: 3rem;
}

.st-main .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
}

.st-main .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	border: 1px solid rgb(0 0 0 / 0.15);
	border-radius: 0.375rem;
}

.st-main .page-numbers.current {
	background: rgb(0 0 0 / 0.08);
	font-weight: 600;
}

.st-nav-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.6;
}

.st-nav-title {
	font-weight: 600;
}

/* Sidebar */
.st-widget + .st-widget {
	margin-top: 2.5rem;
}

.st-widget-title {
	font-size: 1rem;
	margin-bottom: 1rem;
}

.st-sidebar ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

/* Comments */
.st-comments {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid rgb(0 0 0 / 0.1);
}

.st-comments-title {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

.st-comment-list,
.st-comment-list .children {
	list-style: none;
	padding: 0;
}

.st-comment-list .children {
	padding-left: 2rem;
}

.st-comment-list .comment-body {
	margin-bottom: 2rem;
}

.st-comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
}

.st-comment-list .avatar {
	border-radius: 999px;
}

.st-comment-list .comment-metadata {
	font-size: 0.8125rem;
	opacity: 0.6;
	margin: 0.25rem 0 0.75rem;
}

.st-comments .comment-form {
	display: grid;
	gap: 1rem;
}

.st-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea),
.st-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.625rem 0.875rem;
	border: 1px solid rgb(0 0 0 / 0.2);
	border-radius: 0.375rem;
	background: transparent;
	font: inherit;
	color: inherit;
}

.st-comments .comment-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Buttons and search */
.st-button,
.st-comments .comment-form .submit {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	border: 1px solid currentColor;
	border-radius: 0.375rem;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

.st-search-form {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.st-not-found {
	text-align: center;
}

.st-not-found .st-search-form {
	margin-inline: auto;
	max-width: 28rem;
}

/* Basic header and footer, used when the design has none */
.st-site-header,
.st-site-footer {
	padding-block: 1.5rem;
}

.st-site-header {
	border-bottom: 1px solid rgb(0 0 0 / 0.1);
}

.st-site-footer {
	border-top: 1px solid rgb(0 0 0 / 0.1);
	font-size: 0.875rem;
}

.st-site-header-inner,
.st-site-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.st-site-title {
	font-family: var(--font-heading, inherit);
	font-size: 1.25rem;
	font-weight: 700;
}

.st-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WordPress core classes */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	left: 1rem;
	top: 1rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: #fff;
	color: #111;
}

.alignleft {
	float: left;
	margin: 0.25em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.25em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: 0.875rem;
	opacity: 0.7;
	margin-top: 0.5rem;
}

.sticky .st-card-title::before {
	content: "★ ";
}

.bypostauthor > .comment-body .fn::after {
	content: " ✓";
}