/* Single posts and pages: layout, typography, FAQ, comments, plugin skins. */

.single-layout,
.page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem 2.5rem;
	padding-block: 1.25rem 1rem;
}

.page-layout {
	max-width: 820px;
}

.entry-title {
	margin-bottom: 0.4em;
	font-size: clamp(1.95rem, 6vw, 3rem);
	line-height: 1.1;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.entry-head__chips {
	margin-bottom: 0.9rem;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	color: var(--ink-2);
	font-size: 0.9rem;
	list-style: none;
}

.meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.entry-figure {
	position: relative;
	max-width: 560px;
	margin: 0 0 0.5rem;
	border-radius: var(--r2);
	overflow: hidden;
	background: var(--linen-2);
}

.entry-figure::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1.5px dashed rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	pointer-events: none;
}

.entry-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Wide layout: reading column plus sticky sidebar. */
@media (min-width: 1100px) {
	.single-layout {
		grid-template-columns: minmax(0, 720px) 300px;
		justify-content: center;
		align-items: start;
	}

	.single-layout .entry-head {
		grid-column: 1;
		grid-row: 1;
	}

	.single-layout .toc {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: calc(var(--header-h) + 20px);
	}

	.single-layout .entry {
		grid-column: 1;
		grid-row: 2;
	}

	.single-layout .entry-after {
		grid-column: 1;
		grid-row: 3;
	}

	.single-layout .entry-aside {
		grid-column: 2;
		grid-row: 3;
		position: sticky;
		top: calc(var(--header-h) + 20px);
	}

	.single-layout:not(.has-toc) .entry-aside {
		grid-row: 2;
	}
}

/* Table of contents */
.toc__box {
	padding: 0 1rem;
	background: #fff;
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--r2);
}

.toc__title {
	display: flex;
	align-items: center;
	min-height: 48px;
	font: 700 1.15rem/1.2 var(--font-head);
	cursor: pointer;
}

.toc__list {
	margin: 0;
	padding: 0 0 1rem 1.2rem;
	font-size: 0.95rem;
}

.toc__list li {
	padding: 0.2rem 0;
}

.toc__list a {
	color: var(--ink);
	text-decoration: none;
}

.toc__list a:hover {
	color: var(--teal);
	text-decoration: underline;
}

@media (min-width: 1100px) {
	.toc__list {
		max-height: calc(100vh - var(--header-h) - 140px);
		overflow-y: auto;
	}
}

/* Reading column */
.entry-content {
	font-size: 1.125rem;
	line-height: 1.72;
}

.entry-content h2 {
	margin: 2em 0 0.55em;
	font-size: clamp(1.6rem, 4.6vw, 2.1rem);
}

.entry-content h3 {
	margin: 1.7em 0 0.5em;
	font-size: clamp(1.3rem, 3.6vw, 1.6rem);
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin-bottom: 1.15em;
}

.entry-content img {
	height: auto;
	border-radius: var(--r1);
}

.entry-content figure {
	margin: 1.5em 0;
}

.entry-content figcaption {
	margin-top: 0.4rem;
	color: var(--ink-2);
	font-size: 0.9rem;
}

.entry-content div[style*="grid"] {
	gap: 0.6rem !important;
}

.entry-content div[style*="grid"] img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.entry-content blockquote {
	margin: 1.5em 0;
	padding: 0.9rem 1.2rem;
	background: var(--linen-2);
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--r2);
}

.entry-content a {
	overflow-wrap: anywhere;
}

.table-wrap {
	margin: 1.5em 0;
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.entry-content th,
.entry-content td {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--line-strong);
	text-align: left;
}

.entry-content th {
	background: var(--linen-2);
}

/* Tag cloud and block leftovers on pages */
.entry-content .wp-block-tag-cloud,
.entry-content .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.entry-content .wp-block-tag-cloud a,
.entry-content .tagcloud a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 0.9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--burgundy);
	font-size: 0.95rem !important;
	text-decoration: none;
}

.entry-content .wp-block-tag-cloud a:hover,
.entry-content .tagcloud a:hover {
	background: var(--burgundy);
	color: #fff;
}

.entry-content .wp-block-image img,
.entry-content .wp-block-image figure {
	max-width: 100%;
	height: auto;
}

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

/* FAQ */
.faq {
	margin-top: 2.5rem;
	padding: 1.25rem 1.25rem 0.5rem;
	background: var(--linen-2);
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--r2);
}

.faq__title {
	margin-bottom: 0.4rem;
	font-size: clamp(1.45rem, 4vw, 1.9rem);
}

.faq .faq-block {
	margin: 0;
}

.faq .faq-item {
	padding: 0.95rem 0;
	border-top: 1px dashed var(--line-strong);
}

.faq .faq-item:first-child {
	border-top: 0;
}

.faq .faq-item h3 {
	margin: 0 0 0.35rem;
	font-size: 1.2rem;
}

.faq .faq-item p {
	margin: 0;
	font-size: 1.02rem;
}

/* Tags and author */
.entry-tags {
	margin-top: 2rem;
}

.side-title {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
}

.author-box {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r2);
}

.author-box__name {
	margin: 0 0 0.2rem;
	font-weight: 600;
}

.author-box__label {
	display: block;
	color: var(--ink-2);
	font-size: 0.82rem;
	font-weight: 400;
}

.author-box__bio {
	margin: 0;
	color: var(--ink-2);
	font-size: 0.95rem;
}

/* After the article */
.related,
.comments {
	margin-top: 2.5rem;
}

.grid--related {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.grid--related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 640px) {
	.grid--related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post-navigation {
	margin-top: 2.5rem;
}

.post-navigation .nav-links {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 0.9rem 1.1rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r2);
	color: var(--ink);
	text-decoration: none;
}

.post-navigation a:hover {
	border-color: var(--teal);
}

.post-navigation .nav-next {
	text-align: right;
}

.post-nav__label {
	display: block;
	color: var(--ink-2);
	font-size: 0.82rem;
}

.post-nav__title {
	display: block;
	font: 700 1.1rem/1.25 var(--font-head);
}

/* Sidebar list */
.now-reading__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.now-reading__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 0.7rem;
	align-items: center;
}

.now-reading__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--r1);
	background: var(--linen-2);
}

.now-reading__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.now-reading__body {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

.now-reading__link {
	color: var(--ink);
	font-size: 0.95rem;
	line-height: 1.3;
	text-decoration: none;
}

.now-reading__link:hover {
	color: var(--teal);
	text-decoration: underline;
}

.now-reading__viewers {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--ink-2);
	font-size: 0.82rem;
	line-height: 1;
}

.now-reading__viewers .icon {
	width: 16px;
	height: 16px;
}

.entry-aside {
	margin-top: 1.5rem;
}

@media (min-width: 1100px) {
	.entry-aside {
		margin-top: 2.5rem;
	}
}

/* Comments: theme template and SASWP form share one look */
.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 0;
	padding-left: 1.25rem;
	list-style: none;
}

.comment-body {
	display: grid;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r2);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.comment-metadata {
	font-size: 0.82rem;
}

.comment-metadata a {
	color: var(--ink-2);
}

.comment-respond {
	margin-top: 1.5rem;
	padding: 1.1rem;
	background: #fff;
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--r2);
}

.comment-respond :where(input[type="text"], input[type="email"], input[type="url"], textarea),
.saswp-rf-form-control {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--r1);
	background: #fff;
	color: var(--ink);
	font: inherit;
}

.comment-respond textarea {
	min-height: 140px;
}

.comment-respond label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.comment-respond .submit,
.saswp-rf-form-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--teal);
	color: #fff;
	font: 600 1rem/1 var(--font-body);
	cursor: pointer;
}

.comment-respond .submit:hover,
.saswp-rf-form-submit-btn:hover {
	background: var(--teal-d);
}

.saswp-rf-form-group {
	margin-bottom: 0.9rem;
}

.saswp-rf-form-title,
.comment-reply-title {
	font-size: 1.5rem;
}

.saswp-rf-template-wrapper {
	max-width: 100%;
}

.saswp-rf-template-comment-box,
.saswp-rf-template-single-review {
	border-radius: var(--r2);
}

/* Icon masks replace dashicons and FontAwesome (no icon-font requests). */
.dashicons,
.fa,
.fas,
.far,
.fab {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-style: normal;
	vertical-align: -0.125em;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.dashicons::before,
.fa::before,
.fas::before,
.far::before,
.fab::before {
	content: none !important;
}

.dashicons-star-filled,
.dashicons-star-empty,
.dashicons-star-half,
.dashicons-calendar-alt,
.dashicons-plus,
.dashicons-yes-alt,
.dashicons-arrow-left-alt2,
.dashicons-arrow-right-alt2,
.dashicons-thumbs-up,
.dashicons-thumbs-down,
.dashicons-facebook-alt,
.dashicons-twitter,
.dashicons-share,
.fa-thumbs-up,
.fa-thumbs-down,
.fa-facebook-f,
.fa-x-twitter,
.fa-twitter,
.fa-telegram-plane,
.fa-telegram,
.fa-pinterest,
.fa-pinterest-p {
	background-color: currentColor;
}

.dashicons-star-filled {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.6l-5.9 3.2 1.2-6.5L2.5 9.7l6.6-.9z'/%3E%3C/svg%3E");
}

.dashicons-star-empty {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M12 2.8l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.6l-5.9 3.2 1.2-6.5L2.5 9.7l6.6-.9z'/%3E%3C/svg%3E");
}

.dashicons-star-half {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M12 2.8l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.6l-5.9 3.2 1.2-6.5L2.5 9.7l6.6-.9z'/%3E%3Cpath d='M12 2.8v14.8l-5.900 3.200 1.200-6.500L2.500 9.700l6.600-.9z'/%3E%3C/svg%3E");
}

.dashicons-calendar-alt {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3zM6 9v11h12V9z'/%3E%3C/svg%3E");
}

.dashicons-plus {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E");
}

.dashicons-yes-alt {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.500 14.500l-4-4 1.400-1.400 2.600 2.600 5.600-5.600 1.400 1.400z'/%3E%3C/svg%3E");
}

.dashicons-arrow-left-alt2 {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.500 4l-8 8 8 8 1.500-1.500L10.500 12 17 5.500z'/%3E%3C/svg%3E");
}

.dashicons-arrow-right-alt2 {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.500 4l8 8-8 8L7 18.500 13.500 12 7 5.500z'/%3E%3C/svg%3E");
}

.dashicons-thumbs-up,
.fa-thumbs-up {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zm6 11V10l4-7c1.500 0 2.500 1 2.500 2.500L14 9h6c1.100 0 2 .9 2 2l-2 8c-.3 1.200-1.200 2-2.500 2z'/%3E%3C/svg%3E");
}

.dashicons-thumbs-down,
.fa-thumbs-down {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h4v11H2zm6 0v11l4 7c1.500 0 2.500-1 2.500-2.500L14 15h6c1.100 0 2-.9 2-2l-2-8c-.3-1.200-1.200-2-2.500-2z'/%3E%3C/svg%3E");
}

.fa-facebook-f,
.dashicons-facebook-alt {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h2.500V4.500H14C11.500 4.500 10 6 10 8.500V10H7.500v3.500H10V21h3.500v-7.500H16l.5-3.500h-3V8.700c0-.5.200-.7.500-.7z'/%3E%3C/svg%3E");
}

.fa-x-twitter,
.fa-twitter,
.dashicons-twitter {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.400' stroke-linecap='round' d='M5 4.500l14 15M19 4.500L5 19.500'/%3E%3C/svg%3E");
}

.fa-telegram-plane,
.fa-telegram {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3.500L2.500 10.800l5.500 2 2 6.200 3.200-4 4.800 3.500z'/%3E%3C/svg%3E");
}

.fa-pinterest,
.fa-pinterest-p {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.600' stroke-linecap='round' stroke-linejoin='round' d='M9 21V4h4.500a4.500 4.500 0 010 9H9'/%3E%3C/svg%3E");
}

.dashicons-share {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 3a3 3 0 00-2.900 3.800L8.500 10a3 3 0 100 4l6.600 3.200A3 3 0 1016 15l-6.600-3.200a3 3 0 000-.6L16 8a3 3 0 102-5z'/%3E%3C/svg%3E");
}

.socializer {
	margin: 1.25rem 0;
}

.pld-like-dislike-wrap {
	margin: 1.25rem 0;
}
