/*
Long-form content typography (.entry-content) — shared by single blog
posts and static pages (About/FAQ/Contact/etc., via page.php's
"page-content entry-content" wrapper), plus the handful of core Gutenberg
blocks either is likely to contain.
*/

.entry-content {
    font-size: var(--text-md);
    line-height: 2;
    color: #3f3f51;
}

.entry-content > * + * {
	margin-block-start: var(--space-4);
}

.entry-content h2 {
	font-size: var(--text-2xl);
	margin-block-start: var(--space-7);
}
.entry-content h2:first-child {
    margin-block-start: var(--space-5);
}

.entry-content h3 {
	font-size: var(--text-xl);
	margin-block-start: var(--space-6);
}

/* Offsets a jump-to-heading link (the auto-built TOC, inc/toc.php) so the
   sticky header doesn't cover the target -- only headings the TOC has
   actually tagged with an id get this, so it never shifts ordinary
   headings. */
.entry-content h2[id],
.entry-content h3[id],
.entry-content h4[id] {
	scroll-margin-top: calc(var(--header-h, 0px) + var(--space-3));
}

.entry-content img {
	display: block;
	width: 100%;
	height: auto;
	/* margin-block: var(--space-6); */
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* First child (no preceding element to add spacing against) shouldn't
   carry the same margin-start as an image breaking up running text. */
.entry-content > img:first-child,
.entry-content > figure:first-child img {
	margin-block-start: 0;
}

.entry-content figure {
	margin-block: var(--space-6);
}

.entry-content figure img {
	margin-block: 0;
}

.entry-content figcaption {
	font-size: var(--text-sm);
	color: var(--color-muted);
	text-align: center;
	margin-block-start: var(--space-2);
}

.entry-content blockquote {
	border-inline-start: 3px solid var(--color-primary);
	padding-inline-start: var(--space-4);
	color: var(--color-muted);
	font-size: var(--text-xl);
	font-style: normal;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: var(--space-6);
	list-style-position: outside;
}

.entry-content ul {
	list-style-type: disc;
}

.entry-content ol {
	list-style-type: decimal;
}

.entry-content a {
}

.entry-content code {
	background: var(--color-surface);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	font-size: 0.9em;
	direction: ltr;
	unicode-bidi: isolate;
}

.entry-content pre {
	background: var(--color-surface);
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	overflow-x: auto;
	direction: ltr;
	text-align: start;
}

.page-links {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-6);
	font-size: var(--text-sm);
}

/* Core Gutenberg blocks — only the ones a content page realistically uses. */

.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-bg);
	font-weight: var(--font-medium);
	text-decoration: none;
}

.entry-content .wp-block-button__link:hover {
	background: var(--color-primary-hover);
}

.entry-content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
}

.entry-content .wp-block-column {
	flex: 1 1 240px;
}

.entry-content .wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-border);
	margin-block: var(--space-6);
}

.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	text-align: start;
	font-size: var(--text-base);
}

/* FAQ accordions: the core "Details" block already renders <details>/
   <summary> natively — same zero-JS pattern as the product tabs. */

.entry-content .wp-block-details {
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-2);
}

.entry-content .wp-block-details summary {
	font-weight: var(--font-semibold);
	cursor: pointer;
	padding-block: var(--space-2);
}

/* FAQ repeater accordion: zero-JS <details>/<summary>, shared by the
   product FAQ tab (new_ubit_product_faq_tab_content() in
   inc/woocommerce.php) and the post/page FAQ section
   (new_ubit_render_post_faqs() in inc/template-tags.php). Lives here
   rather than product-single.css since prose.css is enqueued on every
   page regardless of post type. */

.entry-faq {
	margin-block-start: var(--space-7);
}

.entry-faq__heading {
	font-size: var(--text-2xl);
	margin-block-end: var(--space-3);
}

.product-faq__item {
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-1);
}

.product-faq__item:last-child {
	border-bottom: 0;
}

.product-faq__question {
	padding-block: var(--space-3);
	font-weight: var(--font-medium);
	cursor: pointer;
	list-style: none;
}

.product-faq__question::-webkit-details-marker {
	display: none;
}

.product-faq__question::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-inline-end: var(--space-2);
	background: var(--color-muted);
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E') center / contain no-repeat;
	transition: transform var(--transition-fast);
}

.product-faq__item[open] .product-faq__question::before {
	transform: rotate(180deg);
}

.product-faq__answer {
	padding-block-end: var(--space-3);
	color: var(--color-muted);
	max-width: 65ch;
}

.product-faq__answer p:last-child {
	margin-block-end: 0;
}