/**
 * /wordpress-audit/ landing page styles.
 * Loaded conditionally in functions.php only when the page uses the
 * "WordPress Audit" template (page-wordpress-scan.php).
 *
 * BEM prefix: .wp-audit-*
 */

/* ─────────────────────────────────────────────
 * Hero — eyebrow badge + gradient H1 + stats row
 * (dark, mirrors .section--hero pattern)
 * ───────────────────────────────────────────── */
.wp-audit-hero {
	text-align: center;
}

.wp-audit-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.45em 1em 0.45em 0.85em;
	margin-bottom: var(--boltpress-spacing-lg);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.78rem;
	font-weight: var(--boltpress-typography-font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--boltpress-colors-dark-text-muted);
}

.wp-audit-hero__eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--boltpress-colors-accent);
	box-shadow: 0 0 0 3px rgba(255, 220, 0, 0.18);
}

.wp-audit-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--boltpress-spacing-lg);
	max-width: 760px;
	margin: var(--boltpress-spacing-2xl) auto 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

@media (min-width: 768px) {
	.wp-audit-hero__stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wp-audit-hero__stats li {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0;
}

.wp-audit-hero__stats strong {
	font-family: var(--boltpress-typography-font-family-heading);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(90deg, var(--boltpress-colors-accent), var(--boltpress-colors-accent-gradient-end));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.wp-audit-hero__stats span {
	font-size: 0.82rem;
	color: var(--boltpress-colors-dark-text-subtle);
	letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────
 * Scan Section — premium "audit card" wrapping the form
 * (dark, flows from hero so no black-bg gap is exposed)
 * ───────────────────────────────────────────── */
.wp-audit-scan {
	background: var(--boltpress-colors-dark-bg);
	padding-top: var(--boltpress-spacing-xl);
}

.wp-audit-scan h2,
.wp-audit-scan p,
.wp-audit-scan li {
	color: var(--boltpress-colors-text-light);
}

.wp-audit-scan__card {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 56px);
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 220, 0, 0.08), transparent 55%),
		radial-gradient(circle at 100% 100%, rgba(255, 149, 0, 0.06), transparent 55%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--boltpress-border-radius-xl, 20px);
	box-shadow:
		0 30px 60px -30px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 220, 0, 0.05) inset;
	overflow: hidden;
}

.wp-audit-scan__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(255, 220, 0, 0.35), transparent 40%, transparent 60%, rgba(255, 149, 0, 0.25));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

.wp-audit-scan__card-head {
	text-align: center;
	margin-bottom: var(--boltpress-spacing-xl);
}

.wp-audit-scan__badge {
	display: inline-block;
	padding: 0.35em 0.9em;
	margin-bottom: var(--boltpress-spacing-base);
	border-radius: 999px;
	background: rgba(255, 220, 0, 0.12);
	color: var(--boltpress-colors-accent);
	font-size: 0.72rem;
	font-weight: var(--boltpress-typography-font-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wp-audit-scan__card-head h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: #fff;
	margin: 0 0 var(--boltpress-spacing-sm);
	line-height: 1.15;
}

.wp-audit-scan__card-head p {
	max-width: 560px;
	margin: 0 auto;
	color: var(--boltpress-colors-dark-text-muted);
	font-size: 1.02rem;
	line-height: var(--boltpress-typography-line-height-relaxed);
}

/* Scanner form takes full available width inside the card */
.wp-audit-scan__card .bp-scanner {
	max-width: 100%;
}

.wp-audit-scan__assurances {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--boltpress-spacing-base) var(--boltpress-spacing-xl);
	margin: var(--boltpress-spacing-xl) 0 0;
	padding: 0;
	list-style: none;
}

.wp-audit-scan__assurances li {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: 0.88rem;
	color: var(--boltpress-colors-dark-text-muted);
}

.wp-audit-scan__assurances svg {
	color: var(--boltpress-colors-accent);
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────
 * What We Check — 4-card grid
 * ───────────────────────────────────────────── */
.wp-audit-check-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--boltpress-spacing-lg);
	margin-top: var(--boltpress-spacing-2xl);
}

@media (min-width: 768px) {
	.wp-audit-check-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--boltpress-spacing-xl);
	}
}

.wp-audit-check-card {
	background: var(--boltpress-colors-background);
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-lg);
	padding: var(--boltpress-spacing-xl);
	transition: var(--boltpress-transitions-base);
}

.wp-audit-check-card:hover {
	border-color: var(--boltpress-colors-accent);
	transform: translateY(-2px);
	box-shadow: var(--boltpress-shadows-md);
}

.wp-audit-check-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--boltpress-border-radius-md);
	background: var(--boltpress-colors-accent);
	color: var(--boltpress-colors-primary);
	margin-bottom: var(--boltpress-spacing-base);
}

.wp-audit-check-card h3 {
	font-size: var(--boltpress-typography-font-size-lg);
	margin-bottom: var(--boltpress-spacing-base);
	color: var(--boltpress-colors-primary);
}

.wp-audit-check-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-audit-check-card li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: var(--boltpress-spacing-sm);
	color: var(--boltpress-colors-text);
	line-height: var(--boltpress-typography-line-height-relaxed);
}

.wp-audit-check-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--boltpress-colors-accent);
	border-bottom: 2px solid var(--boltpress-colors-accent);
	transform: rotate(-45deg);
}

/* ─────────────────────────────────────────────
 * Why It Matters — narrow prose block
 * ───────────────────────────────────────────── */
.wp-audit-why__body {
	margin-top: var(--boltpress-spacing-xl);
}

.wp-audit-why__body p {
	font-size: var(--boltpress-typography-font-size-md);
	line-height: var(--boltpress-typography-line-height-relaxed);
	color: var(--boltpress-colors-text);
	margin-bottom: var(--boltpress-spacing-base);
}

.wp-audit-why__body p:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────
 * What Happens Next — 3 upsell cards
 * ───────────────────────────────────────────── */
.wp-audit-next-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--boltpress-spacing-lg);
	margin-top: var(--boltpress-spacing-2xl);
}

@media (min-width: 1024px) {
	.wp-audit-next-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--boltpress-spacing-xl);
	}
}

.wp-audit-next-card {
	display: block;
	background: var(--boltpress-colors-background);
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-lg);
	padding: var(--boltpress-spacing-xl);
	text-decoration: none;
	transition: var(--boltpress-transitions-base);
}

.wp-audit-next-card:hover {
	border-color: var(--boltpress-colors-accent);
	transform: translateY(-2px);
	box-shadow: var(--boltpress-shadows-md);
}

.wp-audit-next-card h3 {
	font-size: var(--boltpress-typography-font-size-lg);
	color: var(--boltpress-colors-primary);
	margin: 0 0 var(--boltpress-spacing-sm);
}

.wp-audit-next-card p {
	color: var(--boltpress-colors-text);
	line-height: var(--boltpress-typography-line-height-relaxed);
	margin: 0 0 var(--boltpress-spacing-base);
}

.wp-audit-next-card__cta {
	display: inline-block;
	font-weight: var(--boltpress-typography-font-weight-bold);
	color: var(--boltpress-colors-primary);
	border-bottom: 2px solid var(--boltpress-colors-accent);
	padding-bottom: 2px;
	transition: transform var(--boltpress-transitions-base);
}

.wp-audit-next-card:hover .wp-audit-next-card__cta {
	transform: translateX(4px);
}

/* ─────────────────────────────────────────────
 * FAQ — native <details> accordions
 * (mirrors fix-wp-faq pattern: rotating chevron, accent open border)
 * ───────────────────────────────────────────── */
.wp-audit-faq {
	margin-top: var(--boltpress-spacing-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--boltpress-spacing-sm);
}

.wp-audit-faq__item {
	background: var(--boltpress-colors-background);
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-md);
	overflow: hidden;
}

.wp-audit-faq__item[open] {
	border-color: var(--boltpress-colors-accent);
}

.wp-audit-faq__q {
	font-family: var(--boltpress-typography-font-family-heading);
	font-weight: var(--boltpress-typography-font-weight-bold);
	font-size: var(--boltpress-typography-font-size-md);
	color: var(--boltpress-colors-primary);
	padding: var(--boltpress-spacing-base) var(--boltpress-spacing-lg);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--boltpress-spacing-base);
	transition: var(--boltpress-transitions-base);
}

.wp-audit-faq__q::-webkit-details-marker {
	display: none;
}

.wp-audit-faq__q::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--boltpress-colors-accent);
	border-bottom: 2px solid var(--boltpress-colors-accent);
	transform: rotate(-45deg);
	transform-origin: center;
	transition: transform var(--boltpress-transitions-base);
	flex-shrink: 0;
}

.wp-audit-faq__item[open] .wp-audit-faq__q::after {
	transform: rotate(45deg);
}

.wp-audit-faq__a {
	padding: 0 var(--boltpress-spacing-lg) var(--boltpress-spacing-lg);
	color: var(--boltpress-colors-text);
	line-height: var(--boltpress-typography-line-height-relaxed);
}

.wp-audit-faq__a p {
	margin: 0;
}