/* Content pages: About Us, Contact Us, FAQ, Shipping Information, Payment Information and the policies.
   One readable column in the Tasneem type, FAQ questions as open/close rows, and the button in the
   site standard (assets/buttons.css). Loaded only on these pages: tasneem_is_content_page() in
   functions.php, which also adds the body class "tn-page". Wording: local-setup/site-content.php. */

body.tn-page main.site-main {
	max-width: calc(var(--tn-page-col) + 2 * var(--hj-gut));
	margin-inline: auto;
	padding-inline: var(--hj-gut);
}
body.tn-page { --tn-page-col: 760px; }

body.tn-page .page-header .entry-title {
	max-width: none;
	margin: 0 0 18px;
	padding-inline: 0; /* Hello's 10px would push the title in from the text */
	font-family: var(--hj-serif);
	font-size: clamp(32px, 4.4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
}

body.tn-page .page-content {
	color: var(--hj-ink-2);
	font-size: 16.5px;
	line-height: 1.7;
}
body.tn-page .page-content strong { color: var(--hj-ink); }
body.tn-page .page-content .tasneem-lead {
	margin-bottom: 28px;
	color: var(--hj-ink);
	font-size: 18.5px;
	line-height: 1.6;
}

body.tn-page .page-content h2 {
	margin: 40px 0 12px;
	font-family: var(--hj-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}
body.tn-page .page-content h3 {
	margin: 26px 0 6px;
	color: var(--nl-mulberry);
	font-family: var(--hj-serif);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

body.tn-page .page-content a:not(.wp-block-button__link) {
	color: var(--hj-accent-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
body.tn-page .page-content a:not(.wp-block-button__link):hover { color: var(--hj-accent-hover); }

body.tn-page .page-content ul { margin: 0 0 1rem; padding-left: 1.2em; }
body.tn-page .page-content li { margin: 6px 0; }
body.tn-page .page-content li::marker { color: var(--nl-rose); }

body.tn-page .page-content .wp-block-buttons { margin: 24px 0 8px; }
body.tn-page .page-content .wp-block-button__link { text-decoration: none; } /* Hello underlines every .page-content link */

body.tn-page .page-content .tasneem-updated {
	margin-top: 40px;
	color: var(--hj-muted);
	font-size: 14px;
}

/* FAQ: each question opens and closes; a plum plus turns into a cross when open. */
body.tn-page .page-content .wp-block-details { margin: 0; border-bottom: 1px solid var(--hj-line); }
body.tn-page .page-content h2 + .wp-block-details { border-top: 1px solid var(--hj-line); }
body.tn-page .page-content .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	color: var(--hj-ink);
	font-family: var(--hj-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}
body.tn-page .page-content .wp-block-details summary::-webkit-details-marker { display: none; }
body.tn-page .page-content .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	color: var(--nl-rose);
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: transform .2s ease;
}
body.tn-page .page-content .wp-block-details[open] summary::after { transform: rotate(45deg); }
body.tn-page .page-content .wp-block-details summary:hover { color: var(--hj-accent-deep); }
body.tn-page .page-content .wp-block-details summary:focus-visible {
	outline: 2px solid var(--hj-accent-deep);
	outline-offset: 2px;
	border-radius: 4px;
}
body.tn-page .page-content .wp-block-details > p { margin: 0 0 18px; padding-right: 30px; }

@media (prefers-reduced-motion: reduce) {
	body.tn-page .page-content .wp-block-details summary::after { transition: none; }
}

@media (max-width: 767px) {
	body.tn-page .page-content { font-size: 16px; }
	body.tn-page .page-content .tasneem-lead { font-size: 17.5px; }
	body.tn-page .page-content h2 { margin-top: 32px; font-size: 22px; }
	body.tn-page .page-content .wp-block-details summary { font-size: 16px; }
}