/**
 * /wordpress-security/ product page styles (BoltPress Security).
 * Loaded conditionally in functions.php only when the page uses the
 * "WordPress Security" template (page-wordpress-security.php).
 *
 * Shared classes (.section--alt, .section--dark, .section--cta, .btn--*,
 * .hero--inner, .hero__badge, .plans-table) are owned by main.css; the fix
 * cards come from fix-page.css. This file styles only the .wp-sec-* blocks.
 *
 * Mobile-first: base rules are the phone layout, min-width queries widen it.
 *
 * @since 1.3.0
 */

/* ─────────────────────────────────────────────
 * Icons: header icon set (boltpress_child_header_icon) outside the header
 * ───────────────────────────────────────────── */
.wp-sec .bph-ic {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ─────────────────────────────────────────────
 * Hero
 * ───────────────────────────────────────────── */
.wp-sec-hero {
	text-align: center;
	padding-top: var(--boltpress-spacing-3xl);
	padding-bottom: var(--boltpress-spacing-3xl);
}

.wp-sec-hero h1 {
	font-size: clamp(2rem, 5vw, var(--boltpress-typography-font-size-5xl));
	line-height: var(--boltpress-typography-line-height-tight);
	margin-bottom: var(--boltpress-spacing-lg);
}

.wp-sec-hero .hero__subtitle {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--boltpress-spacing-xl);
	font-size: var(--boltpress-typography-font-size-md);
	color: var(--boltpress-colors-dark-text-muted);
}

.wp-sec-hero .hero__actions {
	display: flex;
	gap: var(--boltpress-spacing-base);
	justify-content: center;
	flex-wrap: wrap;
}

.wp-sec-hero__trust {
	margin: var(--boltpress-spacing-lg) 0 0;
	font-size: var(--boltpress-typography-font-size-sm);
	color: var(--boltpress-colors-dark-text-muted);
}

@media (min-width: 768px) {
	.wp-sec-hero {
		padding-top: var(--boltpress-spacing-4xl);
		padding-bottom: var(--boltpress-spacing-4xl);
	}
}

/* ─────────────────────────────────────────────
 * Three layers
 * ───────────────────────────────────────────── */
.wp-sec-layers__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--boltpress-spacing-lg);
}

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

.wp-sec-layer {
	position: relative;
	background: var(--boltpress-colors-background);
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-lg);
	padding: var(--boltpress-spacing-xl);
}

/* The layer WordPress can't reach: the page's point, so it carries the accent. */
.wp-sec-layer--server {
	background: var(--boltpress-colors-background-alt);
	border-color: var(--boltpress-colors-accent);
}

.wp-sec-layer__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--boltpress-colors-primary);
	color: var(--boltpress-colors-accent);
	font-family: var(--boltpress-typography-font-family-heading);
	font-weight: var(--boltpress-typography-font-weight-bold);
	font-size: var(--boltpress-typography-font-size-lg);
	margin-bottom: var(--boltpress-spacing-base);
}

.wp-sec-layer__title {
	font-size: var(--boltpress-typography-font-size-lg);
	margin: 0 0 var(--boltpress-spacing-base);
	color: var(--boltpress-colors-primary);
}

.wp-sec-layer__who,
.wp-sec-layer__we {
	margin: 0 0 var(--boltpress-spacing-md);
	color: var(--boltpress-colors-text);
	line-height: var(--boltpress-typography-line-height-relaxed);
}

.wp-sec-layer__we {
	margin-bottom: 0;
}

.wp-sec-layer strong {
	color: var(--boltpress-colors-primary);
}

/* PHP2Shell example */
.wp-sec-example {
	margin: var(--boltpress-spacing-2xl) auto 0;
	max-width: 860px;
	padding: var(--boltpress-spacing-xl);
	border-left: 4px solid var(--boltpress-colors-accent);
	border-radius: var(--boltpress-border-radius-lg);
	background: var(--boltpress-colors-background-alt);
}

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

.wp-sec-example p:last-child {
	margin-bottom: 0;
}

.wp-sec-example__kicker {
	font-family: var(--boltpress-typography-font-family-heading);
	font-weight: var(--boltpress-typography-font-weight-bold);
	font-size: var(--boltpress-typography-font-size-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--boltpress-colors-primary);
}

.wp-sec-example q {
	font-style: italic;
	color: var(--boltpress-colors-primary);
}

.wp-sec-example a,
.wp-sec-advisory__link,
.wp-sec-plans__link a,
.wp-sec-fixes__more a {
	color: var(--boltpress-colors-primary);
	font-weight: var(--boltpress-typography-font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-sec-example a:hover,
.wp-sec-example a:focus,
.wp-sec-plans__link a:hover,
.wp-sec-plans__link a:focus,
.wp-sec-fixes__more a:hover,
.wp-sec-fixes__more a:focus {
	text-decoration-color: var(--boltpress-colors-accent);
}

.wp-sec-example__stat {
	padding-top: var(--boltpress-spacing-base);
	border-top: 1px solid var(--boltpress-colors-border-light);
}

.wp-sec-example__stat strong {
	font-family: var(--boltpress-typography-font-family-heading);
	font-size: var(--boltpress-typography-font-size-xl);
	color: var(--boltpress-colors-primary);
}

.wp-sec-example__cite {
	display: block;
	margin-top: var(--boltpress-spacing-xs);
	font-size: var(--boltpress-typography-font-size-sm);
	color: var(--boltpress-colors-text-muted);
}

.wp-sec-example__cite a {
	font-weight: var(--boltpress-typography-font-weight-normal);
}

/* Latest advisory card (only when the post is published) */
.wp-sec-advisory {
	position: relative;
	margin: var(--boltpress-spacing-xl) auto 0;
	max-width: 860px;
	padding: var(--boltpress-spacing-lg) var(--boltpress-spacing-xl);
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-lg);
	background: var(--boltpress-colors-background);
	transition: var(--boltpress-transitions-base);
}

.wp-sec-advisory:hover,
.wp-sec-advisory:focus-within {
	border-color: var(--boltpress-colors-accent);
	box-shadow: var(--boltpress-shadows-md);
}

.wp-sec-advisory__kicker {
	margin: 0 0 var(--boltpress-spacing-xs);
	font-size: var(--boltpress-typography-font-size-xs);
	font-weight: var(--boltpress-typography-font-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--boltpress-colors-text-muted);
}

.wp-sec-advisory__title {
	margin: 0 0 var(--boltpress-spacing-sm);
	font-size: var(--boltpress-typography-font-size-lg);
	line-height: var(--boltpress-typography-line-height-tight);
}

.wp-sec-advisory__link {
	text-decoration: none;
}

/* The title link covers the card, so the whole card is one click target. */
.wp-sec-advisory__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-sec-advisory__excerpt,
.wp-sec-advisory__meta {
	margin: 0;
	color: var(--boltpress-colors-text);
	line-height: var(--boltpress-typography-line-height-relaxed);
}

.wp-sec-advisory__meta {
	margin-top: var(--boltpress-spacing-sm);
	font-size: var(--boltpress-typography-font-size-sm);
	color: var(--boltpress-colors-text-muted);
}

/* ─────────────────────────────────────────────
 * What's included (F1-F7)
 * ───────────────────────────────────────────── */
.wp-sec-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--boltpress-spacing-lg);
}

@media (min-width: 768px) {
	.wp-sec-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.wp-sec-features__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.wp-sec-feature {
	display: flex;
	flex-direction: column;
	background: var(--boltpress-colors-background);
	border: 1px solid var(--boltpress-colors-border-light);
	border-radius: var(--boltpress-border-radius-lg);
	padding: var(--boltpress-spacing-xl);
	transition: var(--boltpress-transitions-base);
}

.wp-sec-feature:hover {
	border-color: var(--boltpress-colors-accent);
	box-shadow: var(--boltpress-shadows-md);
}

.wp-sec-feature__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-sec-feature__title {
	font-size: var(--boltpress-typography-font-size-lg);
	margin: 0 0 var(--boltpress-spacing-sm);
	color: var(--boltpress-colors-primary);
}

.wp-sec-feature__text {
	margin: 0 0 var(--boltpress-spacing-base);
	color: var(--boltpress-colors-text);
	line-height: var(--boltpress-typography-line-height-relaxed);
}

.wp-sec-feature__plans {
	margin: auto 0 0;
	padding-top: var(--boltpress-spacing-sm);
	border-top: 1px solid var(--boltpress-colors-border);
	font-size: var(--boltpress-typography-font-size-sm);
	font-weight: var(--boltpress-typography-font-weight-semibold);
	color: var(--boltpress-colors-primary);
}

/* ─────────────────────────────────────────────
 * When an alert lands (dark section)
 * ───────────────────────────────────────────── */
.wp-sec-flow__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--boltpress-spacing-lg);
}

@media (min-width: 768px) {
	.wp-sec-flow__steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.wp-sec-flow__steps {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--boltpress-spacing-base);
	}
}

.wp-sec-flow__step {
	padding: var(--boltpress-spacing-lg);
	border: 1px solid var(--boltpress-colors-dark-border-light);
	border-radius: var(--boltpress-border-radius-lg);
}

.wp-sec-flow__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--boltpress-colors-accent);
	color: var(--boltpress-colors-primary);
	font-family: var(--boltpress-typography-font-family-heading);
	font-weight: var(--boltpress-typography-font-weight-bold);
	font-size: var(--boltpress-typography-font-size-lg);
	margin-bottom: var(--boltpress-spacing-base);
}

.wp-sec-flow__title {
	font-size: var(--boltpress-typography-font-size-md);
	margin: 0 0 var(--boltpress-spacing-sm);
}

.section--dark .wp-sec-flow__text {
	margin: 0;
	color: var(--boltpress-colors-dark-text-muted);
	line-height: var(--boltpress-typography-line-height-relaxed);
}

/* ─────────────────────────────────────────────
 * Rollback is not a fix
 * ───────────────────────────────────────────── */
.wp-sec-rollback__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--boltpress-spacing-2xl);
	align-items: center;
}

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

.wp-sec-rollback__copy h2 {
	margin: 0 0 var(--boltpress-spacing-lg);
	color: var(--boltpress-colors-primary);
}

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

.wp-sec-timeline {
	margin: 0;
	padding: var(--boltpress-spacing-lg);
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-lg);
	background: var(--boltpress-colors-background);
	box-shadow: var(--boltpress-shadows-lg);
}

.wp-sec-timeline__caption {
	margin: 0 0 var(--boltpress-spacing-base);
	font-size: var(--boltpress-typography-font-size-xs);
	font-weight: var(--boltpress-typography-font-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--boltpress-colors-text-muted);
}

.wp-sec-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-sec-timeline__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--boltpress-spacing-sm);
	padding: var(--boltpress-spacing-md) 0 var(--boltpress-spacing-md) var(--boltpress-spacing-xl);
	border-bottom: 1px solid var(--boltpress-colors-border);
}

.wp-sec-timeline__item:last-child {
	border-bottom: 0;
}

/* Status dot on the left rail */
.wp-sec-timeline__item::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--boltpress-colors-success);
}

.wp-sec-timeline__item--fail::before {
	background: var(--boltpress-colors-accent-gradient-end);
}

.wp-sec-timeline__item--warn::before {
	background: var(--boltpress-colors-accent);
}

.wp-sec-timeline__label {
	color: var(--boltpress-colors-primary);
	font-weight: var(--boltpress-typography-font-weight-semibold);
	line-height: var(--boltpress-typography-line-height-normal);
}

.wp-sec-timeline__status {
	padding: var(--boltpress-spacing-xs) var(--boltpress-spacing-sm);
	border-radius: var(--boltpress-border-radius-full);
	background: var(--boltpress-colors-background-alt);
	color: var(--boltpress-colors-primary);
	font-size: var(--boltpress-typography-font-size-xs);
	font-weight: var(--boltpress-typography-font-weight-bold);
	white-space: nowrap;
}

.wp-sec-timeline__item--fail .wp-sec-timeline__status {
	background: var(--boltpress-colors-primary);
	color: var(--boltpress-colors-text-light);
}

/* ─────────────────────────────────────────────
 * Included in every care plan (1.4.0: one line, no plan table)
 * ───────────────────────────────────────────── */
.wp-sec-plans__note {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--boltpress-spacing-xl);
	text-align: center;
	color: var(--boltpress-colors-primary);
	font-size: var(--boltpress-typography-font-size-md);
	line-height: var(--boltpress-typography-line-height-relaxed);
	background: var(--boltpress-colors-background);
	border-radius: var(--boltpress-border-radius-lg);
	box-shadow: var(--boltpress-shadows-sm);
}

.wp-sec-plans__link {
	margin: var(--boltpress-spacing-xl) 0 0;
	text-align: center;
	color: var(--boltpress-colors-text);
}

/* ─────────────────────────────────────────────
 * Related fixes (cards from fix-page.css)
 * ───────────────────────────────────────────── */
@media (min-width: 1024px) {
	.wp-sec-fixes .fix-card-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 960px;
		margin: 0 auto;
	}
}

.wp-sec-fixes__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: var(--boltpress-spacing-base);
	margin: var(--boltpress-spacing-xl) 0 0;
	text-align: center;
}

.wp-sec-fixes__currency {
	font-size: var(--boltpress-typography-font-size-sm);
	color: var(--boltpress-colors-text-muted);
}

/* ─────────────────────────────────────────────
 * FAQ (mirrors the woo-maint / uptime FAQ pattern)
 * ───────────────────────────────────────────── */
.wp-sec-faq {
	display: flex;
	flex-direction: column;
	gap: var(--boltpress-spacing-sm);
}

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

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

.wp-sec-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);
}

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

.wp-sec-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);
	transition: transform var(--boltpress-transitions-base);
	flex-shrink: 0;
}

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

.wp-sec-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-sec-faq__a p {
	margin: 0;
}