/**
 * WP Expertz — Component Styles (Phase 3B)
 *
 * Styling for every reusable component only. No page-specific layout, no
 * section arrangement — that belongs to later Phase 3 stages. Every value
 * below references a token from tokens.css; no raw brand colors or
 * arbitrary spacing values are introduced here.
 */

/* =================================================================
 * BUTTON
 * ================================================================= */
.wpx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	min-height: 44px; /* touch-target minimum */
	padding: 14px var(--space-24); /* mobile default, per Phase 2 Section 4 */
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-button-size);
	line-height: var(--text-button-line);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

@media (min-width: 1200px) {
	.wpx-button {
		padding: 14px 28px;
	}
}

/* Primary — the one and only accent-colored CTA style on the site.
   Hover/active states are derived from the token itself via filter(),
   rather than introducing new hard-coded hex shades. */
.wpx-button--primary {
	background-color: var(--color-accent);
	color: var(--color-text-on-dark);
}
.wpx-button--primary:hover {
	filter: brightness(0.92);
}
.wpx-button--primary:active {
	filter: brightness(0.85);
}
.wpx-button--primary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: none;
}

/* Secondary — outlined, primary-navy. */
.wpx-button--secondary {
	background-color: transparent;
	color: var(--color-primary);
	border: 1.5px solid var(--color-primary);
}
.wpx-button--secondary:hover {
	background-color: var(--overlay-primary-hover);
}
.wpx-button--secondary:active {
	background-color: var(--overlay-primary-active);
}
.wpx-button--secondary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Tertiary — plain text link styled as an action.
   No background/border, so it still reads visually as a lightweight
   text link — but the base .wpx-button 44px min-height is deliberately
   NOT overridden here, so the actual clickable/tappable area stays
   accessible for keyboard and touch users even though nothing about
   its appearance signals a large button. */
.wpx-button--tertiary {
	background-color: transparent;
	color: var(--color-accent);
	padding-left: var(--space-8);
	padding-right: var(--space-8);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.wpx-button--tertiary:hover {
	color: var(--color-primary-dark);
}
.wpx-button--tertiary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.wpx-button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* =================================================================
 * STATUS INDICATOR — the signature motif. Status colors used ONLY here,
 * never repurposed as decorative brand colors elsewhere.
 * ================================================================= */
.wpx-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-mono);
	font-size: var(--text-mono-label-size);
	line-height: var(--text-mono-label-line);
	color: var(--color-text-secondary);
}

.wpx-status__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.wpx-status--broken .wpx-status__dot {
	background-color: var(--color-error);
}
.wpx-status--diagnosing .wpx-status__dot {
	background-color: var(--color-accent-warning);
}
.wpx-status--fixed .wpx-status__dot {
	background-color: var(--color-accent);
}

/* =================================================================
 * CARDS — shared base for service / case-study / review / blog cards
 * ================================================================= */
.wpx-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-card-padding-mobile);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

@media (min-width: 768px) {
	.wpx-card { padding: var(--space-card-padding-tablet); }
}
@media (min-width: 1200px) {
	.wpx-card { padding: var(--space-card-padding-desktop); }
}

.wpx-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-card-hover);
}

.wpx-card__title {
	font-size: var(--text-h4-size);
	line-height: var(--text-h4-line);
	font-weight: var(--text-h4-weight);
	margin: var(--space-8) 0 var(--space-8) 0;
}

.wpx-card__description {
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-16) 0;
}

.wpx-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	color: var(--color-accent);
	text-decoration: none;
}
.wpx-card__link:hover {
	text-decoration: underline;
}

.wpx-card__eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
	background-color: var(--color-background);
	border-radius: var(--radius-sm);
	padding: 2px var(--space-8);
	margin-bottom: var(--space-8);
}

.wpx-card__eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
}

.wpx-card__date {
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
}

/* Card image + graceful placeholder for missing imagery */
.wpx-card--case-study,
.wpx-card--blog {
	padding: 0;
	overflow: hidden;
}

.wpx-card--case-study .wpx-card__body,
.wpx-card--blog .wpx-card__body {
	padding: var(--space-card-padding-mobile);
}
@media (min-width: 768px) {
	.wpx-card--case-study .wpx-card__body,
	.wpx-card--blog .wpx-card__body { padding: var(--space-card-padding-tablet); }
}
@media (min-width: 1200px) {
	.wpx-card--case-study .wpx-card__body,
	.wpx-card--blog .wpx-card__body { padding: var(--space-card-padding-desktop); }
}

.wpx-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background-color: var(--color-background);
}

.wpx-card__image--placeholder {
	background-color: var(--color-background);
	border-bottom: 1px solid var(--color-border);
}

/* =================================================================
 * REVIEW CARD
 * ================================================================= */
.wpx-card--review {
	margin: 0;
}

.wpx-card__rating {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--text-h3-size);
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: var(--space-8);
}

.wpx-card__quote {
	margin: 0 0 var(--space-16) 0;
}

.wpx-card__quote p {
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
	color: var(--color-text-primary);
	margin: 0;
}

.wpx-card__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wpx-card__name {
	font-weight: 500;
	font-size: var(--text-body-sm-size);
	color: var(--color-text-primary);
}

.wpx-card__meta {
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
}

/* =================================================================
 * CTA BLOCK
 * ================================================================= */
.wpx-cta-block {
	border-radius: var(--radius-md);
	padding: var(--space-32);
	text-align: center;
}

@media (min-width: 1200px) {
	.wpx-cta-block {
		padding: var(--space-64);
	}
}

.wpx-cta-block--light {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
}
.wpx-cta-block--light .wpx-cta-block__heading {
	color: var(--color-text-primary);
}
.wpx-cta-block--light .wpx-cta-block__text {
	color: var(--color-text-secondary);
}

.wpx-cta-block--dark {
	background-color: var(--color-primary-dark);
}
.wpx-cta-block--dark .wpx-cta-block__heading {
	color: var(--color-text-on-dark);
}
.wpx-cta-block--dark .wpx-cta-block__text {
	color: var(--text-on-dark-secondary);
}
/* On the dark variant, the secondary action uses the outlined style but
   needs a light-colored border/text instead of navy — handled with a
   scoped override rather than a new button variant. */
.wpx-cta-block--dark .wpx-button--secondary {
	color: var(--color-text-on-dark);
	border-color: var(--color-text-on-dark);
}
.wpx-cta-block--dark .wpx-button--secondary:hover {
	background-color: var(--overlay-on-dark-hover);
}

.wpx-cta-block__heading {
	margin: 0 0 var(--space-16) 0;
}

.wpx-cta-block__text {
	max-width: var(--container-reading);
	margin: 0 auto var(--space-24) auto;
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

.wpx-cta-block__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

@media (min-width: 768px) {
	.wpx-cta-block__actions {
		flex-direction: row;
		justify-content: center;
	}
}

/* =================================================================
 * FAQ ACCORDION — styled native <details>/<summary>, no JS.
 * ================================================================= */
.wpx-faq-accordion {
	max-width: var(--container-reading);
	margin: 0 auto;
}

.wpx-faq-item {
	border-bottom: 1px solid var(--color-border);
}

.wpx-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-16) 0;
	font-family: var(--font-display);
	font-size: var(--text-h4-size);
	font-weight: var(--text-h4-weight);
	color: var(--color-text-primary);
	cursor: pointer;
	list-style: none; /* remove default disclosure triangle */
}

/* Remove default marker across browsers */
.wpx-faq-item__question::-webkit-details-marker {
	display: none;
}

.wpx-faq-item__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
}
.wpx-faq-item__icon::before,
.wpx-faq-item__icon::after {
	content: "";
	position: absolute;
	background-color: var(--color-accent);
	transition: transform var(--transition-base);
}
/* Horizontal bar */
.wpx-faq-item__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}
/* Vertical bar — rotates flat when the item is open, forming a "–" */
.wpx-faq-item__icon::after {
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}
.wpx-faq-item[open] .wpx-faq-item__icon::after {
	transform: translateX(-50%) rotate(90deg) scaleX(0);
}

.wpx-faq-item__answer {
	padding: 0 0 var(--space-16) 0;
}

.wpx-faq-item__answer p {
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
	color: var(--color-text-secondary);
	margin: 0;
}

.wpx-faq-item__question:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* =================================================================
 * PROCESS STEPS
 * ================================================================= */
.wpx-process-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

@media (min-width: 1200px) {
	.wpx-process-steps {
		flex-direction: row;
		gap: var(--space-24);
	}
}

.wpx-process-steps__item {
	display: flex;
	gap: var(--space-16);
	flex: 1;
}

@media (min-width: 1200px) {
	.wpx-process-steps__item {
		flex-direction: column;
		gap: var(--space-12);
	}
}

.wpx-process-steps__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-text-on-dark);
	font-family: var(--font-display);
	font-size: var(--text-body-sm-size);
	font-weight: 600;
}

.wpx-process-steps__title {
	font-size: var(--text-h4-size);
	line-height: var(--text-h4-line);
	font-weight: var(--text-h4-weight);
	margin: 0 0 var(--space-4) 0;
}

.wpx-process-steps__description {
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-text-secondary);
	margin: 0;
}

/* =================================================================
 * TRUST STRIP
 * ================================================================= */
.wpx-trust-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-24);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.wpx-trust-strip__rating {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-h4-size);
	color: var(--color-primary);
}

.wpx-trust-strip__reviews,
.wpx-trust-strip__supporting {
	font-size: var(--text-body-sm-size);
	color: var(--color-text-secondary);
}

.wpx-trust-strip__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	color: var(--color-accent);
	text-decoration: none;
}
.wpx-trust-strip__link:hover {
	text-decoration: underline;
}

/* =================================================================
 * FORM FIELD (visual/accessibility scaffold — no submission logic)
 * ================================================================= */
.wpx-form-field {
	/* Phase 2 specified 20px between fields, which isn't on the existing
	   8px token scale (4/8/12/16/24…). Using the nearest existing token
	   (24px) rather than introducing a new arbitrary spacing value per
	   the Phase 3B instruction not to add ad hoc spacing numbers. */
	margin-bottom: var(--space-24);
}

.wpx-form-field__label {
	display: block;
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	color: var(--color-text-primary);
	margin-bottom: var(--space-8);
}

.wpx-form-field__required {
	color: var(--color-error);
}

.wpx-form-field__help {
	font-size: var(--text-caption-size);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-8) 0;
}

.wpx-form-field__control {
	width: 100%;
	min-height: 44px;
	padding: var(--space-12) var(--space-16);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--text-body-size);
	transition: border-color var(--transition-base);
}

textarea.wpx-form-field__control {
	min-height: 120px;
	resize: vertical;
}

.wpx-form-field__control:focus-visible {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--focus-ring-accent);
}

.wpx-form-field--error .wpx-form-field__control {
	border-color: var(--color-error);
}

.wpx-form-field__error {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--text-caption-size);
	color: var(--color-error);
	margin: var(--space-8) 0 0 0;
}