/*
 * ATP Gateway – front-end styles
 * File: wp-content/plugins/atp-gateway/assets/css/gateway.css
 *
 * RTL: only logical properties are used (margin-inline, padding-block,
 * inset-inline, text-align: start), so the Arabic layout mirrors itself
 * automatically when WordPress sets dir="rtl". No separate RTL file needed.
 */

:root {
	--atp-green: #0f6b4f;
	--atp-green-dark: #0a4d39;
	--atp-ink: #1d2327;
	--atp-muted: #5b6770;
	--atp-line: #dfe5e8;
	--atp-bg-soft: #f4f8f6;
	--atp-radius: 10px;
	--atp-max: 1200px;
}

/* Arabic typography: uses the font if installed, falls back cleanly. */
:lang(ar) .atp-landing,
:lang(ar) .atp-consortium {
	font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
	line-height: 1.8;
}

.atp-container {
	max-inline-size: var(--atp-max);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ---------- Consortium bar ---------- */
.atp-consortium {
	background: var(--atp-bg-soft);
	border-block-end: 1px solid var(--atp-line);
	font-size: 13px;
	color: var(--atp-muted);
}

.atp-consortium__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 8px;
}

.atp-consortium__logos {
	display: flex;
	align-items: center;
	gap: 20px;
}

.atp-consortium__logos img {
	block-size: 32px;
	inline-size: auto;
}

/* ---------- Landing (full width) ----------
 * Each section's background runs edge to edge; content sits in .atp-container.
 * Requires Astra page setting: Container Layout = Full Width / Stretched.
 */
.atp-landing {
	color: var(--atp-ink);
	inline-size: 100%;
}

.atp-landing h2 {
	font-size: clamp(24px, 3vw, 32px);
	margin-block: 0 24px;
}

.atp-section {
	padding-block: 64px;
}

.atp-section--hero {
	padding-block: 88px;
	background: linear-gradient(135deg, var(--atp-green) 0%, var(--atp-green-dark) 100%);
	color: #fff;
}

.atp-section--soft {
	background: var(--atp-bg-soft);
}

.atp-hero__title {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	margin-block: 0 16px;
}

.atp-hero__text {
	max-inline-size: 720px;
	font-size: 18px;
	margin-block: 0 28px;
	opacity: 0.95;
}

.atp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.atp-landing .atp-btn,
.atp-landing .atp-btn:hover,
.atp-landing .atp-btn:focus {
	text-decoration: none !important; /* theme underlines links by default */
}

.atp-btn {
	display: inline-block;
	padding-block: 12px;
	padding-inline: 22px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.atp-btn--primary {
	background: #fff;
	color: var(--atp-green-dark);
}

.atp-btn--primary:hover,
.atp-btn--primary:focus {
	background: var(--atp-bg-soft);
	color: var(--atp-green-dark);
}

.atp-btn--secondary {
	border: 2px solid #fff;
	color: #fff;
}

.atp-btn--secondary:hover,
.atp-btn--secondary:focus {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.atp-hubs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.atp-card {
	padding: 24px;
	border: 1px solid var(--atp-line);
	border-inline-start: 4px solid var(--atp-green);
	border-radius: var(--atp-radius);
	background: #fff;
}

.atp-card__title {
	font-size: 18px;
	margin-block: 0 8px;
}

.atp-card__text {
	color: var(--atp-muted);
	margin: 0;
}

.atp-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	padding: 0;
	list-style: none;
	counter-reset: atp-step;
}

.atp-steps__list li {
	counter-increment: atp-step;
	padding: 20px;
	border-radius: var(--atp-radius);
	background: #fff;
	border: 1px solid var(--atp-line);
}

.atp-steps__list li::before {
	content: counter(atp-step);
	display: inline-grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	margin-block-end: 12px;
	border-radius: 50%;
	background: var(--atp-green);
	color: #fff;
	font-weight: 700;
}

.atp-steps__list strong {
	display: block;
	margin-block-end: 6px;
}

.atp-steps__list span {
	color: var(--atp-muted);
}

@media (max-width: 600px) {
	.atp-section--hero {
		padding-block: 56px;
	}
	.atp-section {
		padding-block: 44px;
	}
	.atp-consortium__inner {
		justify-content: center;
		text-align: center;
	}
}