/**
 * Al-Amal Preschool — UI foundation (3.1.30).
 *
 * One shared visual contract for current and future frontend components.
 * All values inherit from Global Design Tokens so later components do not
 * need their own independent radius, shadow, spacing or button systems.
 */
:root,
.editor-styles-wrapper {
	--al-amal-preschool-ui-card-bg: var(--al-amal-preschool-token-surface, #ffffff);
	--al-amal-preschool-ui-card-soft-bg: color-mix(in srgb, var(--al-amal-preschool-token-soft, #f4f5f9) 72%, #ffffff);
	--al-amal-preschool-ui-card-border: var(--al-amal-preschool-token-border, #dce3ec);
	--al-amal-preschool-ui-card-radius: var(--al-amal-preschool-token-radius-lg, 18px);
	--al-amal-preschool-ui-card-radius-sm: var(--al-amal-preschool-token-radius-md, 14px);
	--al-amal-preschool-ui-card-shadow: var(--al-amal-preschool-token-shadow-sm, 0 4px 14px rgba(38,41,57,.05));
	--al-amal-preschool-ui-card-shadow-hover: var(--al-amal-preschool-token-shadow-md, 0 8px 24px rgba(38,41,57,.08));
	--al-amal-preschool-ui-card-padding: clamp(1.15rem, 2.4vw, 1.75rem);
	--al-amal-preschool-ui-card-gap: clamp(.9rem, 1.8vw, 1.25rem);
	--al-amal-preschool-ui-section-gap: clamp(1.35rem, 3vw, 2rem);

	--al-amal-preschool-ui-button-radius: 12px;
	--al-amal-preschool-ui-button-min-height: 44px;
	--al-amal-preschool-ui-button-pad-y: .72rem;
	--al-amal-preschool-ui-button-pad-x: 1.15rem;
	--al-amal-preschool-ui-button-weight: 700;

	--al-amal-preschool-ui-image-radius: var(--al-amal-preschool-token-radius-md, 14px);
	--al-amal-preschool-ui-image-border: var(--al-amal-preschool-token-border, #dce3ec);
	--al-amal-preschool-ui-focus: var(--al-amal-preschool-brand-secondary, #2f76c6);
	--al-amal-preschool-ui-transition: 180ms ease;
}

/* -------------------------------------------------------------------------
 * Card system: Standard / Soft Feature / CTA.
 * ---------------------------------------------------------------------- */
:where(
	.wp-block-group.is-style-al-amal-preschool-card,
	.al-amal-preschool-ui-card,
	.al-amal-preschool-card,
	.al-amal-preschool-content-card
) {
	padding: var(--al-amal-preschool-ui-card-padding);
	border: 1px solid var(--al-amal-preschool-ui-card-border);
	border-radius: var(--al-amal-preschool-ui-card-radius);
	background: var(--al-amal-preschool-ui-card-bg);
	box-shadow: var(--al-amal-preschool-ui-card-shadow);
}

:where(
	.wp-block-group.is-style-al-amal-preschool-feature-card,
	.al-amal-preschool-ui-card--soft
) {
	position: relative;
	padding: var(--al-amal-preschool-ui-card-padding);
	border: 1px solid color-mix(in srgb, var(--al-amal-preschool-brand-secondary, #2f76c6) 16%, var(--al-amal-preschool-ui-card-border));
	border-radius: var(--al-amal-preschool-ui-card-radius);
	background: linear-gradient(145deg,
		color-mix(in srgb, var(--al-amal-preschool-accent-sky, #cfe3ff) 12%, #ffffff),
		var(--al-amal-preschool-ui-card-bg));
	box-shadow: var(--al-amal-preschool-ui-card-shadow);
	overflow: hidden;
	transition: transform var(--al-amal-preschool-ui-transition), box-shadow var(--al-amal-preschool-ui-transition), border-color var(--al-amal-preschool-ui-transition);
}

:where(
	.wp-block-group.is-style-al-amal-preschool-feature-card,
	.al-amal-preschool-ui-card--soft
)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--al-amal-preschool-local-accent, var(--al-amal-preschool-brand-secondary, #2f76c6));
}

:where(
	.wp-block-group.is-style-al-amal-preschool-cta-panel,
	.al-amal-preschool-ui-card--cta
) {
	padding: clamp(1.35rem, 3vw, 2rem);
	border: 1px solid color-mix(in srgb, var(--al-amal-preschool-brand-secondary, #2f76c6) 24%, var(--al-amal-preschool-ui-card-border));
	border-radius: var(--al-amal-preschool-ui-card-radius);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--al-amal-preschool-accent-sky, #cfe3ff) 24%, #fff),
		color-mix(in srgb, var(--al-amal-preschool-accent-mint, #bee7d3) 13%, #fff));
	box-shadow: var(--al-amal-preschool-ui-card-shadow);
}

:where(
	.wp-block-group.is-style-al-amal-preschool-card,
	.wp-block-group.is-style-al-amal-preschool-feature-card,
	.wp-block-group.is-style-al-amal-preschool-cta-panel,
	.al-amal-preschool-ui-card
) > :first-child { margin-block-start: 0; }

:where(
	.wp-block-group.is-style-al-amal-preschool-card,
	.wp-block-group.is-style-al-amal-preschool-feature-card,
	.wp-block-group.is-style-al-amal-preschool-cta-panel,
	.al-amal-preschool-ui-card
) > :last-child { margin-block-end: 0; }

@media (hover:hover) and (pointer:fine) {
	:where(.wp-block-group.is-style-al-amal-preschool-feature-card, .al-amal-preschool-ui-card--interactive):hover,
	:where(.wp-block-group.is-style-al-amal-preschool-feature-card, .al-amal-preschool-ui-card--interactive):focus-within {
		transform: translateY(-2px);
		border-color: color-mix(in srgb, var(--al-amal-preschool-brand-secondary, #2f76c6) 34%, var(--al-amal-preschool-ui-card-border));
		box-shadow: var(--al-amal-preschool-ui-card-shadow-hover);
	}
}

/* Equal-height card grids keep the final action aligned. */
.wp-block-columns.is-style-al-amal-preschool-equal-cards > .wp-block-column > .wp-block-group,
.al-amal-preschool-ui-equal-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.wp-block-columns.is-style-al-amal-preschool-equal-cards > .wp-block-column > .wp-block-group > .wp-block-buttons:last-child,
.al-amal-preschool-ui-equal-card > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-block-start: 1rem;
}

/* -------------------------------------------------------------------------
 * Button hierarchy: Primary / Secondary / Positive / Outline.
 * ---------------------------------------------------------------------- */
:where(
	.wp-block-button .wp-block-button__link,
	.al-amal-preschool-ui-button
) {
	min-height: var(--al-amal-preschool-ui-button-min-height);
	padding: var(--al-amal-preschool-ui-button-pad-y) var(--al-amal-preschool-ui-button-pad-x);
	border-radius: var(--al-amal-preschool-ui-button-radius);
	font-weight: var(--al-amal-preschool-ui-button-weight);
	line-height: 1.2;
	text-decoration: none;
	transition: transform var(--al-amal-preschool-ui-transition), box-shadow var(--al-amal-preschool-ui-transition), background-color var(--al-amal-preschool-ui-transition), border-color var(--al-amal-preschool-ui-transition), color var(--al-amal-preschool-ui-transition);
}

.wp-block-button.is-style-al-amal-preschool-primary .wp-block-button__link,
.al-amal-preschool-ui-button--primary {
	border: 1px solid var(--al-amal-preschool-brand-primary, #5e52e4);
	background: var(--al-amal-preschool-brand-primary, #5e52e4);
	color: #fff;
}

.wp-block-button.is-style-al-amal-preschool-primary .wp-block-button__link:hover,
.wp-block-button.is-style-al-amal-preschool-primary .wp-block-button__link:focus-visible,
.al-amal-preschool-ui-button--primary:hover,
.al-amal-preschool-ui-button--primary:focus-visible {
	border-color: var(--al-amal-preschool-brand-primary-hover, #4e48bc);
	background: var(--al-amal-preschool-brand-primary-hover, #4e48bc);
	color: #fff;
}

.wp-block-button.is-style-al-amal-preschool-secondary .wp-block-button__link,
.al-amal-preschool-ui-button--secondary {
	border: 1px solid var(--al-amal-preschool-brand-secondary, #2f76c6);
	background: var(--al-amal-preschool-brand-secondary, #2f76c6);
	color: #fff;
}

.wp-block-button.is-style-al-amal-preschool-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-al-amal-preschool-secondary .wp-block-button__link:focus-visible,
.al-amal-preschool-ui-button--secondary:hover,
.al-amal-preschool-ui-button--secondary:focus-visible {
	border-color: var(--al-amal-preschool-brand-deep-blue, #1768a8);
	background: var(--al-amal-preschool-brand-deep-blue, #1768a8);
	color: #fff;
}

.wp-block-button.is-style-al-amal-preschool-positive .wp-block-button__link,
.al-amal-preschool-ui-button--positive {
	border: 1px solid var(--al-amal-preschool-accent-mint-strong, #62b98f);
	background: var(--al-amal-preschool-accent-mint-strong, #62b98f);
	color: #17372b;
}

.wp-block-button.is-style-al-amal-preschool-positive .wp-block-button__link:hover,
.wp-block-button.is-style-al-amal-preschool-positive .wp-block-button__link:focus-visible,
.al-amal-preschool-ui-button--positive:hover,
.al-amal-preschool-ui-button--positive:focus-visible {
	border-color: #4ea77c;
	background: #4ea77c;
	color: #102a20;
}

.wp-block-button.is-style-al-amal-preschool-outline .wp-block-button__link,
.al-amal-preschool-ui-button--outline {
	border: 1px solid color-mix(in srgb, var(--al-amal-preschool-brand-secondary, #2f76c6) 62%, var(--al-amal-preschool-ui-card-border));
	background: var(--al-amal-preschool-ui-card-bg);
	color: var(--al-amal-preschool-brand-secondary, #2f76c6);
}

.wp-block-button.is-style-al-amal-preschool-outline .wp-block-button__link:hover,
.wp-block-button.is-style-al-amal-preschool-outline .wp-block-button__link:focus-visible,
.al-amal-preschool-ui-button--outline:hover,
.al-amal-preschool-ui-button--outline:focus-visible {
	border-color: var(--al-amal-preschool-brand-secondary, #2f76c6);
	background: color-mix(in srgb, var(--al-amal-preschool-accent-sky, #cfe3ff) 22%, #fff);
	color: var(--al-amal-preschool-brand-deep-blue, #1768a8);
}

@media (hover:hover) and (pointer:fine) {
	:where(
		.wp-block-button.is-style-al-amal-preschool-primary,
		.wp-block-button.is-style-al-amal-preschool-secondary,
		.wp-block-button.is-style-al-amal-preschool-positive
	) .wp-block-button__link:hover,
	.al-amal-preschool-ui-button:not(.al-amal-preschool-ui-button--outline):hover {
		transform: translateY(-1px);
		box-shadow: 0 7px 18px rgba(38,41,57,.13);
	}
}

/* -------------------------------------------------------------------------
 * Image system.
 * ---------------------------------------------------------------------- */
.wp-block-image.is-style-al-amal-preschool-rounded-image img,
.al-amal-preschool-ui-image img,
img.al-amal-preschool-ui-image {
	border: 1px solid var(--al-amal-preschool-ui-image-border);
	border-radius: var(--al-amal-preschool-ui-image-radius);
	box-shadow: 0 4px 14px rgba(38,41,57,.045);
}

/* -------------------------------------------------------------------------
 * Focus, spacing and motion contract.
 * ---------------------------------------------------------------------- */
body.al-amal-preschool-accessible-focus :where(
	.wp-block-button__link,
	.al-amal-preschool-ui-button,
	.wp-block-details summary,
	.al-amal-preschool-ui-card--interactive a
):focus-visible,
.editor-styles-wrapper :where(.wp-block-button__link, .al-amal-preschool-ui-button):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--al-amal-preschool-ui-focus) 48%, transparent);
	outline-offset: 3px;
}

.al-amal-preschool-ui-stack > * + * {
	margin-block-start: var(--al-amal-preschool-ui-card-gap);
}

.al-amal-preschool-ui-section + .al-amal-preschool-ui-section {
	margin-block-start: var(--al-amal-preschool-ui-section-gap);
}

@media (max-width: 781px) {
	:root,
	.editor-styles-wrapper {
		--al-amal-preschool-ui-card-padding: clamp(1rem, 4vw, 1.35rem);
		--al-amal-preschool-ui-section-gap: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(
		.wp-block-group.is-style-al-amal-preschool-feature-card,
		.al-amal-preschool-ui-card--interactive,
		.wp-block-button .wp-block-button__link,
		.al-amal-preschool-ui-button
	) {
		transition: none !important;
	}

	:where(
		.wp-block-group.is-style-al-amal-preschool-feature-card,
		.al-amal-preschool-ui-card--interactive,
		.wp-block-button .wp-block-button__link,
		.al-amal-preschool-ui-button
	):hover {
		transform: none !important;
	}
}