/**
 * FAQ page.
 *
 * templates/page.faq.json placed a single "faq" section on this page and
 * nothing else, so the accordion itself is styled by the homepage FAQ rules
 * that already ship in style.css. Repeating them here would mean two copies
 * of the same component drifting apart.
 *
 * What is left is what a standalone FAQ page needs and a homepage section
 * does not: a breadcrumb, and top spacing where a hero would otherwise be.
 *
 * Loaded only on this page, per the project's per-page CSS rule.
 * Depends on tokens.css and base.css.
 *
 * @package maaz-dev
 */

.faq-page {
	padding-top: var(--rlr-space-32);
}

.faq-page__breadcrumb {
	max-width: var(--rlr-page-width);
	margin: 0 auto;
	padding: 0 var(--rlr-gutter);
	font-size: var(--rlr-fs-13);
	color: var(--rlr-text-soft);
}

.faq-page__breadcrumb-link {
	color: var(--rlr-text-soft);
	text-decoration: none;
	transition: color var(--rlr-transition);
}

.faq-page__breadcrumb-link:hover {
	color: var(--rlr-brand);
}

.faq-page__breadcrumb-sep {
	margin: 0 var(--rlr-space-8);
	opacity: 0.5;
}

.faq-page__breadcrumb-current {
	color: var(--rlr-ink);
	font-weight: var(--rlr-fw-semibold);
}

/*
 * The page's own body content, above the accordion. Shopify rendered
 * page.content inside the section; here it is the WordPress page content.
 */
.faq-page__content {
	max-width: var(--rlr-width-prose);
	margin: 0 auto;
	padding: var(--rlr-space-32) var(--rlr-gutter) 0;
	font-size: var(--rlr-fs-15);
	line-height: var(--rlr-lh-body);
	color: var(--rlr-text);
}

.faq-page__content a {
	color: var(--rlr-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media screen and (max-width: 768px) {

	.faq-page__breadcrumb,
	.faq-page__content {
		padding-inline: var(--rlr-page-margin);
	}
}

/*
 * Page body as a floating card with its own type scale.
 *
 * Plain pages (policies, FAQ) put long merchant-written text here. Without a
 * scale of their own, every <h2> took the theme's display size and the page
 * read as a wall of shouting headings.
 */
.faq-page {
	padding-bottom: var(--rlr-space-64);
	background:
		radial-gradient(ellipse 60% 40% at 50% 0%, rgba(139, 0, 0, 0.06), transparent 70%),
		linear-gradient(180deg, #ffffff 0%, #fff6f6 30%, #fdf0f0 100%);
}

.faq-page__content {
	max-width: 920px;
	margin: var(--rlr-space-24) auto 0;
	padding: 48px 56px 52px;
	font-size: 16px;
	line-height: 1.8;
	color: #4a4a4a;
	background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
	border: 1px solid rgba(139, 0, 0, 0.12);
	border-radius: 24px;
	box-shadow:
		0 1px 2px rgba(139, 0, 0, 0.06),
		0 24px 50px -24px rgba(139, 0, 0, 0.3);
}

.faq-page__content > :first-child { margin-top: 0; }
.faq-page__content > :last-child { margin-bottom: 0; }

.faq-page__content h1 {
	font-size: clamp(1.8rem, 3.6vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--rlr-ink);
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(139, 0, 0, 0.1);
}

.faq-page__content h2 {
	position: relative;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--rlr-ink);
	margin: 40px 0 12px;
	padding-left: 16px;
}

.faq-page__content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(139, 0, 0, 0.9), rgba(190, 24, 24, 0.5));
}

.faq-page__content h3 {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--rlr-ink);
	margin: 26px 0 6px;
}

.faq-page__content h4,
.faq-page__content h5,
.faq-page__content h6 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--rlr-ink);
	margin: 20px 0 6px;
}

.faq-page__content p { margin: 0 0 16px; }
.faq-page__content strong { color: #1a1a1a; }

.faq-page__content ul,
.faq-page__content ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.faq-page__content li { margin-bottom: 8px; }
.faq-page__content ul li::marker { color: #8b0000; }
.faq-page__content ol li::marker { color: #8b0000; font-weight: 700; }

@media screen and (max-width: 768px) {

	.faq-page__content {
		margin-inline: 16px;
		padding: 28px 20px 32px;
		border-radius: 18px;
		font-size: 15px;
	}
}