/**
 * AION Theme - Compliance & Security Page Styles
 *
 * Page-specific styles for the Compliance & Security page.
 * Builds on top of variables.css and components.css.
 *
 * @package aion-theme
 * @since   1.0.0
 */

/* =========================================================================
   Section 1: Hero
   ========================================================================= */

.compliance-hero {
	min-height: 55vh;
	padding-block: var(--space-12);
}

@media (min-width: 1024px) {
	.compliance-hero {
		min-height: 65vh;
		padding-block: var(--space-16);
	}
}

@media (max-width: 767px) {
	.compliance-hero {
		min-height: auto;
		padding-block: var(--space-10);
	}

	.compliance-hero .hero__title {
		font-size: var(--text-3xl);
	}
}

/* =========================================================================
   Section 2: Compliance Standards Cards
   ========================================================================= */

.compliance-standards {
	padding-block: var(--space-16);
}

@media (max-width: 767px) {
	.compliance-standards {
		padding-block: var(--space-10);
	}
}

/* Standards card grid inherits .features-grid (1 → 2 → 3 cols).
   Override to 2-col max for readability given the card content depth. */
.compliance-standards__grid {
	grid-template-columns: 1fr;
}

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

@media (min-width: 1280px) {
	.compliance-standards__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Standard name styled as a short-code badge above the description */
.compliance-standard-card__name {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--color-dark-text);
	margin-bottom: var(--space-3);
}

.compliance-standard-card__description {
	font-size: var(--text-sm);
	color: var(--color-body-text);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-5);
}

/* "How we address this" block inside each card */
.compliance-standard-card__addressed {
	margin-top: auto;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-medium-gray);
}

.compliance-standard-card__addressed-label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

.compliance-standard-card__addressed-label i[data-lucide] {
	color: var(--color-success);
	flex-shrink: 0;
}

.compliance-standard-card__addressed-text {
	font-size: var(--text-sm);
	color: var(--color-body-text);
	line-height: var(--leading-relaxed);
	margin-bottom: 0;
}

/* =========================================================================
   Section 3: Security Architecture
   ========================================================================= */

.compliance-security {
	padding-block: var(--space-16);
}

@media (max-width: 767px) {
	.compliance-security {
		padding-block: var(--space-10);
	}
}

/* Two-column grid of icon + text pairs */
.compliance-security__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.compliance-security__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.compliance-security__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Individual security feature row */
.compliance-security-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-6);
	background-color: var(--color-white);
	border: 1px solid var(--color-medium-gray);
	border-radius: var(--radius-lg);
	transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.compliance-security-item:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--color-accent);
}

.compliance-security-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background-color: var(--color-accent-light);
	border-radius: var(--radius-md);
	color: var(--color-accent);
	flex-shrink: 0;
}

.compliance-security-item__icon i[data-lucide] {
	color: var(--color-accent);
}

.compliance-security-item__content {
	flex: 1;
}

.compliance-security-item__title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-dark-text);
	margin-bottom: var(--space-2);
	line-height: var(--leading-tight);
}

.compliance-security-item__description {
	font-size: var(--text-sm);
	color: var(--color-body-text);
	line-height: var(--leading-relaxed);
	margin-bottom: 0;
}

/* =========================================================================
   Section 4: Data Residency
   ========================================================================= */

.compliance-residency {
	padding-block: var(--space-16);
}

@media (max-width: 767px) {
	.compliance-residency {
		padding-block: var(--space-10);
	}
}

/* Fallback layout: text left, region cards right */
.compliance-residency__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 1024px) {
	.compliance-residency__layout {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
		align-items: center;
	}
}

.compliance-residency__title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	color: var(--color-dark-text);
	margin-bottom: var(--space-5);
	line-height: var(--leading-tight);
}

@media (min-width: 768px) {
	.compliance-residency__title {
		font-size: var(--text-4xl);
	}
}

.compliance-residency__body {
	font-size: var(--text-lg);
	color: var(--color-body-text);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-5);
}

.compliance-residency__note {
	font-size: var(--text-sm);
	color: var(--color-body-text);
	line-height: var(--leading-relaxed);
	padding: var(--space-4);
	background-color: var(--color-light-bg);
	border-left: 3px solid var(--color-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin-bottom: 0;
}

/* Region cards column */
.compliance-residency__regions {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.compliance-residency__region {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background-color: var(--color-white);
	border: 1px solid var(--color-medium-gray);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.compliance-residency__region:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--color-accent);
}

.compliance-residency__region-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--color-accent-light);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.compliance-residency__region-icon i[data-lucide] {
	color: var(--color-accent);
}

.compliance-residency__region-label {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-dark-text);
	margin-bottom: var(--space-1);
}

.compliance-residency__region-note {
	font-size: var(--text-sm);
	color: var(--color-body-text);
	margin-bottom: 0;
}

/* ACF wysiwyg fallback — constrain width for readability */
.compliance-residency__content {
	max-width: var(--container-md);
	margin-inline: auto;
}

/* =========================================================================
   Section 5: BAA Availability
   ========================================================================= */

.compliance-baa {
	padding-block: var(--space-16);
}

@media (max-width: 767px) {
	.compliance-baa {
		padding-block: var(--space-10);
	}
}

/* Fallback layout: large icon left, text right */
.compliance-baa__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 768px) {
	.compliance-baa__layout {
		grid-template-columns: auto 1fr;
		gap: var(--space-12);
		align-items: center;
	}
}

.compliance-baa__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	background-color: var(--color-accent-light);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.compliance-baa__icon-wrap i[data-lucide] {
	color: var(--color-accent);
}

.compliance-baa__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-dark-text);
	margin-bottom: var(--space-4);
	line-height: var(--leading-tight);
}

@media (min-width: 768px) {
	.compliance-baa__title {
		font-size: var(--text-3xl);
	}
}

.compliance-baa__body {
	font-size: var(--text-lg);
	color: var(--color-body-text);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-6);
}

/* Bullet list */
.compliance-baa__points {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.compliance-baa__point {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	color: var(--color-body-text);
	line-height: var(--leading-relaxed);
	margin: 0;
}

.compliance-baa__point i[data-lucide] {
	color: var(--color-success);
	flex-shrink: 0;
	margin-top: 3px;
}

/* ACF wysiwyg fallback */
.compliance-baa__content {
	max-width: var(--container-md);
	margin-inline: auto;
}

/* =========================================================================
   Section 6: Security CTA Banner
   ========================================================================= */

.compliance-cta .compliance-cta__btn {
	background-color: var(--color-white);
	color: var(--color-accent);
	border-color: var(--color-white);
}

.compliance-cta .compliance-cta__btn:hover {
	background-color: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
}