/**
 * Blog content styles, ported from the hello-elementor Customizer CSS
 * (post 61230), which stops applying when the theme changes. They style
 * classes already saved in post content (.note, .tip, .also-read, .border,
 * .caption, .comp-block) plus the matching block styles (is-style-*).
 * Kept in the plugin so content keeps its look under any theme; colours
 * use theme tokens with fallbacks.
 */

/* Callout paragraphs. */
.note,
.is-style-note,
.tip,
.is-style-tip,
.also-read,
.is-style-also-read,
.border,
.is-style-bordered,
p.has-background {
	padding: var(--wp--preset--spacing--30, 15px) var(--wp--preset--spacing--40, 20px);
	font-size: var(--wp--preset--font-size--small-title, 1rem);
}

.note,
.is-style-note {
	background-color: var(--wp--preset--color--callout-note, #ffc);
}

.tip,
.is-style-tip {
	background-color: var(--wp--preset--color--callout-tip, #dfd);
}

.also-read,
.is-style-also-read {
	background-color: var(--wp--preset--color--callout-info, #e7f3fe);
}

.border,
.is-style-bordered {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--meta, #919191) 60%, transparent);
	font-size: var(--wp--preset--font-size--text-small, 0.875rem);
}

/* Screenshot frame: dark border around images (image block, p/li.caption). */
p.caption img,
li.caption img,
.wp-block-image.caption,
.wp-block-image.is-style-screenshot {
	display: inline-block;
	border: 15px solid var(--wp--preset--color--primary, #111);
	border-radius: var(--wp--preset--border-radius--medium, 4px);
	background: var(--wp--preset--color--primary, #111);
	box-shadow: var(--wp--preset--shadow--card, 0 0 10px rgb(0 0 0 / 10%));
}

.wp-block-image.caption figcaption,
.wp-block-image.is-style-screenshot figcaption {
	text-align: center;
}

/* Images in content. */
.wp-block-post-content .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--50, 30px);
}

.wp-block-post-content .wp-block-image img {
	border-radius: var(--wp--preset--border-radius--small, 3px);
}

/* Quotes. */
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
	margin-inline: 0;
	padding-block: var(--wp--preset--spacing--20, 10px);
	padding-left: var(--wp--preset--spacing--50, 30px);
	border-left: 7px solid rgb(0 0 0 / 10%);
	color: var(--wp--preset--color--meta, #919191);
	font-style: italic;
}

.wp-block-post-content .wp-block-quote > p:empty {
	display: none;
}

/* Tables. */
.wp-block-post-content figure.wp-block-table {
	margin-inline: 0;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table thead th {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--meta, #919191) 60%, transparent);
	background-color: var(--wp--preset--color--green-dark, #1d855a);
	color: var(--wp--preset--color--base, #fff);
}

.wp-block-table tbody td,
.wp-block-table tbody th {
	border-color: color-mix(in srgb, var(--wp--preset--color--meta, #919191) 60%, transparent);
	background-color: var(--wp--preset--color--base, #fff);
}

/* Lists. */
.wp-block-post-content :where(ol, ul) {
	padding-left: var(--wp--preset--spacing--40, 20px);
}

/* Comparison block (one post): bordered rows and columns without gaps. */
.wp-block-group.comp-block .is-layout-constrained {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--meta, #919191) 60%, transparent);
}

.wp-block-group.comp-block .wp-block-columns {
	gap: 0;
	margin: 0;
}

.wp-block-group.comp-block .wp-block-columns:not(:last-child) {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--meta, #919191) 60%, transparent);
}

.wp-block-group.comp-block .wp-block-column {
	padding: var(--wp--preset--spacing--30, 15px);
}

@media (min-width: 782px) {

	.wp-block-group.comp-block .wp-block-column:not(:last-child) {
		border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--meta, #919191) 60%, transparent);
	}
}

/* LiteSpeed lazy-loaded images fade in (production server). */
img[data-lazyloaded] {
	opacity: 0;
}

img.litespeed-loaded {
	opacity: 1;
	transition: opacity 0.5s linear 0.2s;
}

/*
 * Yoast FAQ block as an accordion (assets/js/faq.js adds the buttons and hides
 * answers). Ported from the Elementor kit custom CSS.
 */
.wp-block-yoast-faq-block .schema-faq-section {
	margin-bottom: var(--wp--preset--spacing--10, 5px);
}

.wp-block-yoast-faq-block .schema-faq-question {
	display: block;
}

.wp-block-yoast-faq-block .schema-faq-toggle {
	position: relative;
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--20, 10px) var(--wp--preset--spacing--30, 15px);
	padding-left: var(--wp--preset--spacing--60, 40px);
	border: 1px solid var(--wp--preset--color--gray-light, #f1f1f1);
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.wp-block-yoast-faq-block .schema-faq-toggle::before {
	content: "+";
	position: absolute;
	left: var(--wp--preset--spacing--30, 15px);
	font-size: 1.5em;
	line-height: 1.2;
}

.wp-block-yoast-faq-block .schema-faq-toggle[aria-expanded="true"]::before {
	content: "\2212";
}

.wp-block-yoast-faq-block .schema-faq-toggle:hover,
.wp-block-yoast-faq-block .schema-faq-toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--secondary, #0e4bd5);
}

.wp-block-yoast-faq-block .schema-faq-answer {
	margin: 0;
	padding: var(--wp--preset--spacing--20, 10px) var(--wp--preset--spacing--30, 15px);
	padding-left: var(--wp--preset--spacing--60, 40px);
	border: 1px solid var(--wp--preset--color--gray-light, #f1f1f1);
	border-top: 0;
}

/* Table of contents (includes/toc.php): a collapsible contents card before
   a post's first heading (replaces Easy Table of Contents). Top-level entries
   are numbered 01, 02 …; deeper levels hang off a hairline guide. */
.qasolved-toc {
	margin-block: var(--wp--preset--spacing--50);
	border-left: 3px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--preset--border-radius--medium);
	background-color: var(--wp--preset--color--gray-light);
}

.qasolved-toc__summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	list-style: none;
	cursor: pointer;
}

.qasolved-toc__summary::-webkit-details-marker {
	display: none;
}

.qasolved-toc__title {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--text-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qasolved-toc__count {
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--text-small);
}

/* Chevron in a round button at the end of the header. */
.qasolved-toc__summary::after {
	content: "";
	flex: none;
	width: var(--wp--preset--spacing--50);
	height: var(--wp--preset--spacing--50);
	margin-left: auto;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--base);
	background-image:
		linear-gradient(45deg, transparent 43%, currentcolor 43%, currentcolor 57%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, currentcolor 43%, currentcolor 57%, transparent 57%);
	background-repeat: no-repeat;
	background-position: 38% 55%, 62% 55%;
	background-size: 30% 30%;
	color: var(--wp--preset--color--secondary);
	transition: transform 0.2s ease;
}

.qasolved-toc details[open] .qasolved-toc__summary::after {
	transform: rotate(180deg);
}

.qasolved-toc__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: -2px;
}

/* Smooth open where the browser can animate <details> (progressive). */
.qasolved-toc details {
	interpolate-size: allow-keywords;
}

.qasolved-toc details::details-content {
	height: 0;
	overflow: hidden;
	transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
}

.qasolved-toc details[open]::details-content {
	height: auto;
}

.qasolved-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: qasolved-toc;
}

.qasolved-toc details > ol {
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* Deeper levels: behind a hairline guide that starts under the parent's text
   (past the 01 number), slightly smaller; further levels step in gently. */
.qasolved-toc ol ol {
	margin: 0 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--60);
	padding-left: var(--wp--preset--spacing--10);
	border-left: 1px solid var(--wp--custom--color--hairline);
	font-size: var(--wp--preset--font-size--text-small);
}

.qasolved-toc ol ol ol {
	margin-left: var(--wp--preset--spacing--30);
}

.qasolved-toc li {
	counter-increment: qasolved-toc;
}

.wp-block-post-content .qasolved-toc li > a:not(.wp-element-button) {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--preset--border-radius--medium);
	color: var(--wp--preset--color--body-text);
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* 01, 02 … on top-level entries only. */
.qasolved-toc details > ol > li > a::before {
	content: counter(qasolved-toc, decimal-leading-zero);
	flex: none;
	color: var(--wp--preset--color--secondary);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.wp-block-post-content .qasolved-toc li > a:not(.wp-element-button):hover,
.wp-block-post-content .qasolved-toc li > a:not(.wp-element-button):focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
}

@media (prefers-reduced-motion: reduce) {

	.qasolved-toc *,
	.qasolved-toc *::after,
	.qasolved-toc details::details-content {
		transition: none;
	}
}

/* Jumps land below the sticky header (Easy TOC: 30px offset), smoothly
   unless motion is reduced. */
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6)[id],
.qasolved-toc-anchor {

	/* stylelint-disable-next-line length-zero-no-unit -- calc() needs a unit */
	--qasolved-toc-bar: var(--wp-admin--admin-bar--height, 0px);
	--qasolved-toc-header: var(--wp--preset--spacing--70);
	--qasolved-toc-gap: var(--wp--preset--spacing--50);
	--qasolved-toc-offset: calc(var(--qasolved-toc-header) + var(--qasolved-toc-gap));
	scroll-margin-top: calc(var(--qasolved-toc-bar) + var(--qasolved-toc-offset));
}

@media (prefers-reduced-motion: no-preference) {

	html:has(.qasolved-toc) {
		scroll-behavior: smooth;
	}
}