/**
 * In-post FAQ accordion — heshamsaad.com (PROPOSAL, not installed)
 *
 * Styles the native <details>/<summary> markup produced by
 * wpseopress/faq-block-v2 > core/details. Presentation only:
 *  - no markup, text, or attribute changes (FAQPage JSON-LD is unaffected)
 *  - never display:none / visibility:hidden / height:0 on the answer
 *  - native open/close, keyboard (Enter/Space) and find-in-page behavior kept
 *  - logical properties only, so EN (LTR) and AR (RTL) share one rule set
 *
 * Scope: single blog post body only (.hs-blog-single--medium .hs-blog-prose).
 * Tokens: reuses the theme's :root tokens (--brand, --foreground, --border,
 * --muted, --accent, --muted-foreground) with literal fallbacks.
 * Site is light-only (no dark theme / prefers-color-scheme rules exist).
 */

.hs-blog-single--medium .hs-blog-prose .wp-block-wpseopress-faq-block-v2 {
	--hs-faq-radius: 0.75rem;
	--hs-faq-border: var(--border, oklch(92.2% 0 0));
	--hs-faq-border-strong: color-mix(in oklab, var(--foreground, #111) 22%, transparent);
	--hs-faq-bg: var(--background, #fff);
	--hs-faq-bg-hover: color-mix(in oklab, var(--muted, #f5f5f5) 85%, transparent);
	--hs-faq-bg-open: var(--accent, #fdf3e9);
	--hs-faq-text: var(--foreground, #171717);
	--hs-faq-text-muted: color-mix(in oklab, var(--foreground, #171717) 88%, transparent);
	--hs-faq-accent: var(--brand, #16697a);          /* teal, 5.9:1 on white */
	--hs-faq-focus: var(--brand, #16697a);
	--hs-faq-pad-block: 1rem;
	--hs-faq-pad-inline: 1.125rem;

	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-block: var(--hs-blog-space-md, 1.25rem) var(--hs-blog-space-lg, 1.75rem);
	padding: 0;
}

/* ---- Item (closed) ---- */
.hs-blog-single--medium .hs-blog-prose .wp-block-wpseopress-faq-block-v2 > .wp-block-details {
	margin: 0;
	padding: 0;
	background: var(--hs-faq-bg);
	border: 1px solid var(--hs-faq-border);
	border-radius: var(--hs-faq-radius);
	/* flow-layout wrapper adds margin-block-start to siblings; gap handles spacing */
	margin-block: 0;
	overflow-wrap: anywhere;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hs-blog-single--medium .hs-blog-prose .wp-block-wpseopress-faq-block-v2 > .wp-block-details:hover {
	border-color: var(--hs-faq-border-strong);
}

/* ---- Item (open) ---- */
.hs-blog-single--medium .hs-blog-prose .wp-block-wpseopress-faq-block-v2 > .wp-block-details[open] {
	background: var(--hs-faq-bg-open);
	border-color: color-mix(in oklab, var(--hs-faq-accent) 38%, var(--hs-faq-border));
	box-shadow: 0 1px 2px color-mix(in oklab, var(--hs-faq-text) 6%, transparent);
}

/* ---- Question row ---- */
.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 3rem;                            /* >= 44px touch target */
	padding-block: var(--hs-faq-pad-block);
	padding-inline: var(--hs-faq-pad-inline);
	border-radius: var(--hs-faq-radius);
	list-style: none;                                /* drop native triangle, keep behavior */
	cursor: pointer;
	color: var(--hs-faq-text);
	font-size: var(--hs-blog-text-md, 1.125rem);
	font-weight: 600;
	line-height: 1.45;
	text-align: start;
	-webkit-tap-highlight-color: transparent;
	user-select: text;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary::-webkit-details-marker {
	display: none;                                   /* marker glyph only, not the summary text */
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary::marker {
	content: "";
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary:hover {
	background: var(--hs-faq-bg-hover);
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details[open] > summary:hover {
	background: transparent;
}

/* Open question: round only the top when answer follows */
.hs-blog-single--medium .hs-blog-prose .wp-block-details[open] > summary {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* ---- Open/closed marker: chevron drawn with borders (no icon font, no content text) ---- */
.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.625rem;
	block-size: 0.625rem;
	margin-inline-end: 0.25rem;
	border-inline-end: 2px solid var(--hs-faq-accent);
	border-block-end: 2px solid var(--hs-faq-accent);
	transform: translateY(-0.15rem) rotate(45deg);   /* points down = closed */
	transition: transform 0.2s ease;
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details[open] > summary::after {
	transform: translateY(0.1rem) rotate(-135deg);   /* points up = open */
}

/* ---- Keyboard focus ---- */
.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary:focus {
	outline: none;
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary:focus-visible {
	outline: 3px solid var(--hs-faq-focus);
	outline-offset: -3px;
	background: var(--hs-faq-bg-hover);
}

/* ---- Answer ---- */
.hs-blog-single--medium .hs-blog-prose .wp-block-details > :not(summary) {
	margin-block: 0;
	padding-inline: var(--hs-faq-pad-inline);
	font-size: var(--hs-blog-text-base, 1.0625rem);
	line-height: var(--hs-blog-leading-body, 1.72);
	color: var(--hs-faq-text-muted);
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details > :not(summary):last-child {
	padding-block-end: var(--hs-faq-pad-block);
}

.hs-blog-single--medium .hs-blog-prose .wp-block-details > :not(summary) + :not(summary) {
	margin-block-start: 0.75em;
}

/* Hairline between question and answer when open */
.hs-blog-single--medium .hs-blog-prose .wp-block-details[open] > summary + * {
	border-block-start: 1px solid color-mix(in oklab, var(--hs-faq-accent) 18%, transparent);
	padding-block-start: 0.875rem;
}

/* Gentle reveal; animates opacity/translate only, never hides the answer */
@media (prefers-reduced-motion: no-preference) {
	.hs-blog-single--medium .hs-blog-prose .wp-block-details[open] > :not(summary) {
		animation: hs-faq-reveal 0.22s ease-out;
	}
}

@keyframes hs-faq-reveal {
	from { opacity: 0.001; transform: translateY(-0.25rem); }
	to   { opacity: 1;     transform: none; }
}

/* ---- Reduced motion: no transitions at all ---- */
@media (prefers-reduced-motion: reduce) {
	.hs-blog-single--medium .hs-blog-prose .wp-block-details,
	.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary,
	.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary::after {
		transition: none;
	}
}

/* ---- Links inside answers keep the theme's brand link style; just ensure wrap ---- */
.hs-blog-single--medium .hs-blog-prose .wp-block-details a {
	overflow-wrap: anywhere;
}

/* ---- Small screens (360/375) ---- */
@media (max-width: 480px) {
	.hs-blog-single--medium .hs-blog-prose .wp-block-wpseopress-faq-block-v2 {
		--hs-faq-pad-block: 0.875rem;
		--hs-faq-pad-inline: 0.875rem;
		--hs-faq-radius: 0.625rem;
		gap: 0.5rem;
	}

	.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary {
		gap: 0.75rem;
		font-size: 1.0625rem;
	}

	.hs-blog-single--medium .hs-blog-prose .wp-block-details > :not(summary) {
		font-size: 1rem;
		line-height: 1.65;
	}
}

/* ---- Arabic: slightly more leading for Arabic script (direction itself comes from dir=rtl) ---- */
:is(:lang(ar), [dir="rtl"]) .hs-blog-single--medium .hs-blog-prose .wp-block-details > summary {
	line-height: 1.6;
}

:is(:lang(ar), [dir="rtl"]) .hs-blog-single--medium .hs-blog-prose .wp-block-details > :not(summary) {
	line-height: 1.85;
}

/* ---- Forced colors / high contrast ---- */
@media (forced-colors: active) {
	.hs-blog-single--medium .hs-blog-prose .wp-block-wpseopress-faq-block-v2 > .wp-block-details {
		border-color: CanvasText;
	}
	.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary::after {
		border-color: CanvasText;
	}
	.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary:focus-visible {
		outline-color: Highlight;
	}
}

/* ---- Print ---- */
@media print {
	.hs-blog-single--medium .hs-blog-prose .wp-block-details > summary::after { display: none; }
	.hs-blog-single--medium .hs-blog-prose .wp-block-wpseopress-faq-block-v2 > .wp-block-details { break-inside: avoid; }
}