/*
 * Dini core — design tokens and base styles shared by every section.
 * Colours and measures were taken from the source design (sharjah.ac.ae);
 * see docs/developer-guide.md, section 6. Use only logical properties
 * (inline-start/end) so every section works in RTL and LTR unchanged.
 */

:root {
	--dini-green: #00c389;
	--dini-green-dark: #00a374;
	--dini-mint: #e6f8f2;
	--dini-blue: #144495;
	--dini-purple: #403a60;
	--dini-red: #ba0c2f;
	--dini-gray-bg: #f8f8f8;
	--dini-black: #000;
	--dini-white: #fff;
	--dini-ink: #111;
	--dini-muted: #5f6368;
	--dini-line: #e3e3e3;

	--dini-gutter: clamp(16px, 3.9vw, 56px);
	--dini-radius: 8px;
	--dini-ease: .25s ease-in-out;

	--dini-font-rtl: "Vazirmatn", "Rubik Variable", Tahoma, sans-serif;
	--dini-font-ltr: "Rubik Variable", "Vazirmatn", "Segoe UI", Arial, sans-serif;
	--dini-font: var(--dini-font-rtl);

	/* Set by the header plugin (current height of the fixed header). */
	--dini-header-h: 0px;
}

body.dini-ltr { --dini-font: var(--dini-font-ltr); }

body.dini-site {
	margin: 0;
	font-family: var(--dini-font);
	color: var(--dini-ink);
	background: var(--dini-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Pages without a hero start below the fixed header. */
body.dini-site:not(.dini-has-overlay-header) { padding-top: var(--dini-header-h); }

.dini-site *, .dini-site *::before, .dini-site *::after { box-sizing: border-box; }

.dini-container {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--dini-gutter);
}

.dini-icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}
.dini-rtl .dini-flip { transform: scaleX(-1); }

/* Shared green button with a black arrow disc ("View all" in several sections). */
.dini-btn-green {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding-inline: 16px 12px;
	border-radius: var(--dini-radius);
	background: var(--dini-green);
	color: var(--dini-black);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--dini-ease);
}
.dini-btn-green:hover { background: var(--dini-green-dark); color: var(--dini-black); }
.dini-btn-icon {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--dini-black);
	color: var(--dini-white);
}
.dini-btn-icon .dini-icon { width: 12px; height: 12px; stroke-width: 2.6; }

.dini-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.dini-site :focus-visible { outline: 2px solid var(--dini-green); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.dini-site *, .dini-site *::before, .dini-site *::after { transition: none !important; animation: none !important; }
}