/**
 * OpsKit Design System — shared primitives.
 * ==========================================
 * Every block consumes these classes; blocks must NOT redefine button/card/
 * section/eyebrow CSS. All --wp--preset--* and --wp--custom--* variables are
 * defined in tokens.css (loaded as a dependency before this file).
 *
 * RTL-first: authored entirely with logical properties so the same CSS serves
 * RTL (primary, Arabic) and LTR.
 */

/* -------------------------------------------------------------------------- *
 * 1. Document direction + base
 * -------------------------------------------------------------------------- */
.wp-site-blocks,
.editor-styles-wrapper {
	direction: rtl;
}

/* -------------------------------------------------------------------------- *
 * 2. Layout: container + section rhythm
 * -------------------------------------------------------------------------- */
.ops-container {
	inline-size: 100%;
	max-inline-size: var(--ops-max-width, var(--ops-g-container-width, var(--wp--custom--container--max)));
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--pad);
}

.ops-section {
	padding-block: var(--ops-g-section-spacing, var(--wp--custom--section--padding));
}

@media (max-width: 1199px) {

	.ops-section {
		padding-block: var(--wp--custom--section--padding-tablet);
	}
}

@media (max-width: 767px) {

	.ops-section {
		padding-block: var(--wp--custom--section--padding-mobile);
	}

	.ops-container {
		padding-inline: 16px;
	}
}

/* -------------------------------------------------------------------------- *
 * 3. Section header: eyebrow → heading → lead
 * -------------------------------------------------------------------------- */
.ops-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
}

.ops-section-header--center {
	align-items: center;
	text-align: center;
}

/* Header → content rhythm + responsive card grid.
 * Column count: block override (--ops-columns) ← per-block default
 * (--ops-cols-d/t/m) ← 3/2/1. Gap: block override (--ops-gap) ← 16px. */
.ops-section__body {
	margin-block-start: 56px;
}

.ops-grid {
	display: grid;
	grid-template-columns: repeat(var(--ops-columns, var(--ops-cols-d, 3)), minmax(0, 1fr));
	gap: var(--ops-gap, 16px);
}

@media (max-width: 1199px) {

	.ops-grid {
		grid-template-columns: repeat(var(--ops-columns, var(--ops-cols-t, 2)), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.ops-section__body {
		margin-block-start: 40px;
	}

	.ops-grid {
		grid-template-columns: repeat(var(--ops-columns, var(--ops-cols-m, 1)), minmax(0, 1fr));
	}
}

.ops-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.333;
	font-weight: 400;
	letter-spacing: var(--wp--custom--tracking--eyebrow-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.ops-eyebrow::before {
	content: "";
	flex: none;
	inline-size: 4px;
	block-size: 4px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--ops-g-accent, var(--wp--preset--color--accent));
}

/* Section eyebrows are Arabic ("01 · المشكلة"); Figma renders them in the
 * IBM Plex Arabic body face, incl. the Latin index/dot. Scoped so the Hero's
 * Latin Control-View label (also .ops-eyebrow, but not in a section header)
 * keeps the Inter label face. */
.ops-section-header .ops-eyebrow {
	font-family: var(--ops-g-font-body, var(--wp--preset--font-family--body));
}

.ops-heading {
	margin: 0;
	font-family: var(--ops-g-font-heading, var(--wp--preset--font-family--display));
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.ops-heading--hero {
	font-size: var(--wp--preset--font-size--hero);
	line-height: var(--wp--custom--line-height--hero);
	letter-spacing: var(--wp--custom--tracking--hero);
}

.ops-heading--h2 {
	font-size: var(--wp--preset--font-size--h2);
	line-height: var(--wp--custom--line-height--h2);
	letter-spacing: var(--wp--custom--tracking--h2);
	margin-block-start: 16px;
	max-inline-size: 768px;
}

.ops-lead {
	margin: 24px 0 0;
	font-family: var(--ops-g-font-body, var(--wp--preset--font-family--body));
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
	max-inline-size: 672px;
}

/* -------------------------------------------------------------------------- *
 * 4. Gradient text highlight (with safe fallback)
 * -------------------------------------------------------------------------- */
.ops-text-gradient {
	background: var(--wp--preset--gradient--accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {

	.ops-text-gradient {
		background: none;
		color: var(--wp--preset--color--accent);
	}
}

/* -------------------------------------------------------------------------- *
 * 5. Buttons
 * -------------------------------------------------------------------------- */
.ops-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	inline-size: var(--ops-btn-width, auto);
	max-inline-size: 100%;
	block-size: var(--ops-btn-height, 56px);
	padding-inline: var(--ops-btn-px, 36px);
	border: 1px solid transparent;
	border-radius: var(--ops-btn-radius, var(--ops-g-btn-radius, var(--wp--custom--radius--md)));
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.ops-btn--primary {
	background: var(--ops-g-primary, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--on-accent);
	box-shadow: var(--wp--custom--shadow--glow);
	letter-spacing: -0.4px;
}

.ops-btn--primary:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 14px 26px var(--wp--custom--accent--glow-color);
}

.ops-btn--primary:active {
	transform: translateY(0);
}

.ops-btn--secondary {
	background: var(--wp--custom--surface--translucent);
	color: var(--wp--preset--color--text);
	border-color: var(--wp--custom--border--strong);
	font-weight: 500;
}

.ops-btn--secondary:hover {
	background: var(--wp--custom--surface--translucent-hover);
	border-color: rgba(255, 255, 255, 0.25);
}

.ops-btn--sm {
	block-size: var(--ops-btn-height, 36px);
	padding-inline: var(--ops-btn-px, 16px);
	font-size: var(--wp--preset--font-size--card);
	border-radius: var(--ops-btn-radius, var(--ops-g-btn-radius, var(--wp--custom--radius--sm)));
	letter-spacing: -0.35px;
}

.ops-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ops-icon {
	display: block;
}

/* Icon sizing inside buttons. */
.ops-btn .ops-icon {
	flex: none;
	order: var(--ops-btn-icon-order, 0);
	inline-size: var(--ops-btn-icon-size);
	block-size: var(--ops-btn-icon-size);
}

/* -------------------------------------------------------------------------- *
 * 6. Cards + icon box
 * -------------------------------------------------------------------------- */
.ops-card {
	position: relative;
	box-sizing: border-box;

	/* Baseline card padding (Figma pain-point card). Card sections that need a
	 * denser or roomier inset override `padding` locally, so this is the
	 * fallback for a bare .ops-card. */
	padding: var(--wp--custom--card-pad);
	border-width: var(--ops-card-border-width, 1px);
	border-style: solid;
	border-color: var(--ops-card-border-color, var(--wp--custom--border--subtle));
	border-radius: var(--ops-card-radius, var(--ops-g-card-radius, var(--wp--custom--radius--md)));
	background: var(--ops-card-bg, var(--wp--preset--gradient--surface-card));
	box-shadow: var(--ops-card-shadow, var(--ops-g-shadow-card, var(--wp--custom--shadow--card)));
}

/* Inset hairline highlight along the top edge. */
.ops-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: var(--wp--custom--shadow--inset-highlight);
	pointer-events: none;
}

.ops-card--interactive {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ops-card--interactive:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.14);
}

.ops-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: var(--wp--custom--icon-box);
	block-size: var(--wp--custom--icon-box);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--custom--accent--soft-bg);
	border: 1px solid var(--wp--custom--accent--soft-border);
	color: var(--ops-g-accent, var(--wp--preset--color--accent));
}

/* -------------------------------------------------------------------------- *
 * 7. Pills / badges
 * -------------------------------------------------------------------------- */
.ops-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 17px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--surface--overlay);
	border: 1px solid var(--wp--custom--border--subtle);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.ops-badge-accent {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--custom--accent--border);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------- *
 * 8. Accessibility utilities
 * -------------------------------------------------------------------------- */
.ops-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Unified keyboard focus ring for interactive elements that are not .ops-btn
 * (buttons carry their own ring in section 5). One source of truth so links,
 * the header brand + toggle, and the accordion summary all match. Only the
 * keyboard-focus state is affected; resting appearance is unchanged. */
.ops-header__brand:focus-visible,
.ops-header__nav a:focus-visible,
.ops-header__toggle:focus-visible,
.ops-module__head:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- *
 * 9. Entrance animations (OpsKit runtime — assets/js/ops-animate.js)
 * Initial state primed by JS (.ops-anim); .is-ops-visible is added on scroll.
 * Only transform + opacity animate (compositor-friendly).
 * -------------------------------------------------------------------------- */
.ops-anim {
	opacity: 0;
	transition:
		opacity var(--ops-anim-duration, 600ms) var(--ops-anim-ease, cubic-bezier(0.16, 1, 0.3, 1)) var(--ops-anim-delay, 0ms),
		transform var(--ops-anim-duration, 600ms) var(--ops-anim-ease, cubic-bezier(0.16, 1, 0.3, 1)) var(--ops-anim-delay, 0ms);
	will-change: opacity, transform;
}

.ops-anim--fade-up {
	transform: translateY(var(--ops-anim-distance, 24px));
}

.ops-anim--fade-down {
	transform: translateY(calc(-1 * var(--ops-anim-distance, 24px)));
}

.ops-anim--fade-start {
	transform: translateX(var(--ops-anim-distance, 24px));
}

.ops-anim--fade-end {
	transform: translateX(calc(-1 * var(--ops-anim-distance, 24px)));
}

.ops-anim--zoom {
	transform: scale(0.94);
}

.ops-anim.is-ops-visible {
	opacity: 1;
	transform: none;

	/* Release the compositor hint once the entrance has played. */
	will-change: auto;
}

/* -------------------------------------------------------------------------- *
 * 10. Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.ops-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------- *
 * 11. [opsengine_landing] shortcode wrapper
 *     Force the dark theme background regardless of the active theme.
 * -------------------------------------------------------------------------- */
.opsengine-landing-page {
	background-color: var(--wp--preset--color--bg, #100c0a);
	color: var(--wp--preset--color--text, #faf8f5);
	direction: rtl;
	width: 100%;
}