/*
Theme Name: Green Data
Theme URI: https://greendata.consulting
Author: Sami Tayara
Description: Lightweight custom block theme for greendata.consulting. Bilingual EN/AR, RTL-ready. No build step.
Version: 0.1.8
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
Text Domain: greendata
RTL: yes
Tags: full-site-editing, block-styles, rtl-language-support
License: GPL-2.0-or-later
*/

/* ==========================================================================
   Green Data — Editorial Authority (iteration 2)
   Most design tokens live in theme.json; this file adds the editorial
   details theme.json can't express: rules, accents, card edges, refined
   button + header treatments. Logical properties throughout for RTL.
   ========================================================================== */

:root {
	--gd-hairline: rgba(19, 20, 15, 0.12);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Hero -------------------------------------------------------------- */
/* Brass eyebrow / kicker above the headline. */
.greendata-kicker {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	/* Pin the eyebrow size so every kicker is consistent — without this, kickers
	   that omit a fontSize attribute default to body size (1.0625rem). */
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Dramatic serif headline with a short brass rule beneath — the signature. */
h1.has-huge-font-size {
	max-inline-size: 18ch;
	letter-spacing: -0.02em;
}

h1.has-huge-font-size::after {
	content: "";
	display: block;
	inline-size: 4.5rem;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Hero subhead: warm-gray, measured line length for readability. */
p.has-large-font-size {
	color: var(--wp--preset--color--neutral);
	max-inline-size: 46ch;
}

/* --- Buttons ----------------------------------------------------------- */
.wp-block-button__link:hover {
	background-color: #085747; /* a shade deeper than primary, for a pressed feel */
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Section headings: a touch more air above. */
main h2.wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Short section intro line under a section heading. */
.gd-section-intro {
	color: var(--wp--preset--color--neutral);
	max-inline-size: 52ch;
	margin-block-start: 0;
}

/* --- Engagement cards (brass-edge proof tiles) ------------------------- */
/* Stable two-column grid with a fluted stone "spine" painted into the central
   gutter — the same column texture as the portico shafts and aqueduct piers,
   carrying the classical motif into this section. */
.gd-engagements {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--80);
	row-gap: var(--wp--preset--spacing--60);
	position: relative;
}
.gd-engagements::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 0;
	/* physical `left` so the centered spine stays centered in RTL too — with
	   logical inset-inline-start it flips to `right` while translateX(-50%) does
	   not, shoving the spine off-center on the Arabic page. */
	left: 50%;
	transform: translateX(-50%);
	inline-size: 30px;
	border-radius: 2px;
	background-color: #fbf8f1;
	/* two bronze flutes (matching the brass card top-edge) on a stone pilaster */
	background-image:
		linear-gradient(90deg,
			transparent 0 9px,
			color-mix(in srgb, var(--wp--preset--color--accent) 88%, transparent) 9px 11px,
			transparent 11px 19px,
			color-mix(in srgb, var(--wp--preset--color--accent) 88%, transparent) 19px 21px,
			transparent 21px 30px),
		linear-gradient(90deg, #cabf9f, #fbf8f1 20%, #fffdf8 50%, #fbf8f1 80%, #cabf9f);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}
.gd-engagement {
	position: relative;
	z-index: 1;
	margin: 0; /* cancel the default-layout sibling top-margin so row 1 aligns */
	border-radius: 2px;
	border-block-start: 3px solid var(--wp--preset--color--accent);
	block-size: 100%;
}

.gd-engagement h3 {
	margin-block: 0 var(--wp--preset--spacing--40);
	/* The anonymized label is a tile heading, not a hero — keep it a notch above the
	   proof text rather than the dominating 1.3rem "large" preset (especially in
	   Arabic, where it wraps to several bold lines). !important beats WP's
	   has-large-font-size preset, which itself ships !important. */
	font-size: 1.15rem !important;
	line-height: 1.3;
}

@media (max-width: 640px) {
	.gd-engagements {
		grid-template-columns: 1fr;
	}
	.gd-engagements::before {
		display: none;
	}
}

/* --- Header ------------------------------------------------------------ */
/* Sticky bar; background on the <header> element so it spans full width while
   the inner content stays constrained. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--gd-hairline);
	box-shadow: 0 2px 10px rgba(19, 20, 15, 0.04);
}

.gd-header__right {
	gap: var(--wp--preset--spacing--50);
	justify-content: flex-end;
}
/* Collapse the nav to its (built-in) hamburger below 850px — WP's default is 600px,
   which leaves a band where the inline nav + the EN/AR switcher overflow and clip.
   Above 850px the full nav + switcher fit inline on one line (gd-header__right is
   nowrap, so the flex-wrap "collapse to widest child" quirk can't push the switcher
   onto its own line). These selectors out-specify WP's min-width:600px rules. */
@media (max-width: 849px) {
	.gd-header-bar .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.gd-header-bar .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none;
	}
}

/* Smooth in-page nav; offset anchors so the sticky header doesn't cover them. */
html {
	scroll-behavior: smooth;
}
:where(#what-i-do, #engagements, #insights, #contact) {
	scroll-margin-block-start: 5.5rem;
}

/* Primary nav links */
.wp-block-navigation {
	--wp--style--block-gap: clamp(0.85rem, 0.5rem + 1vw, 1.5rem);
	font-size: 0.95rem;
}
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	padding-block-end: 2px;
	border-block-end: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
	border-block-end-color: var(--wp--preset--color--accent);
}

.wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
}

.wp-block-site-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* --- Language switcher -------------------------------------------------- */
/* Visual-only for now (EN-first; Polylang wires these up later). EN is the
   active locale; the toggle reads as intentional, not two dead links. */
.greendata-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.85rem;
}

.greendata-lang-switcher__sep {
	inline-size: 1px;
	block-size: 0.9em;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
}

.greendata-lang-switcher__opt {
	color: var(--wp--preset--color--neutral);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: color 0.15s ease;
}

.greendata-lang-switcher__opt:hover {
	color: var(--wp--preset--color--primary);
}

.greendata-lang-switcher__opt.is-active {
	color: var(--wp--preset--color--accent);
	cursor: default;
}

/* ======================================================================
   "What I do" — classical portico
   Regulatory Compliance = pediment + entablature (the roof) resting on two
   stone columns: Data Governance (left) and Data Management (right).
   Green is reserved for the roof; the columns/steps are warm stone with
   brass moldings. Pure CSS + inline SVG; decorative parts are aria-hidden.
   ====================================================================== */
.gd-portico {
	--gd-green: var(--wp--preset--color--primary);
	--gd-brass: var(--wp--preset--color--accent);
	--gd-stone: var(--wp--preset--color--surface);
	--gd-stone-light: #fffdf8;
	--gd-stone-edge: #cabf9f;
	--gd-col-inset: 1.9rem;
	margin-block-start: var(--wp--preset--spacing--70);
	filter: drop-shadow(0 18px 26px rgba(16, 54, 43, 0.10));
}

/* --- Pediment (the gable) — crowned with the brand --- */
.gd-portico__pediment {
	position: relative;
	block-size: 6.8rem;
	margin-block-end: -1px;
}
.gd-portico__pediment svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}
/* "Green Data" — a gilded, engraved SVG inscription set in the gable's lower mass */
.gd-portico__brand {
	position: absolute;
	inset: 44% 0 0.35rem; /* lower, to the triangle's visual centre of gravity */
	display: flex;
	align-items: center;
	justify-content: center;
}
.gd-portico__brand svg {
	inline-size: min(62%, 360px);
	block-size: auto;
}
.gd-pediment-fill {
	fill: var(--gd-green);
}
.gd-pediment-edge {
	fill: none;
	stroke: var(--gd-brass);
	stroke-width: 2.5;
	stroke-linejoin: round;
}
.gd-pediment-inner {
	fill: none;
	stroke: color-mix(in srgb, var(--gd-brass) 42%, transparent);
	stroke-width: 1;
}
.gd-pediment-acroterion {
	fill: var(--gd-stone-light);
	stroke: var(--gd-brass);
	stroke-width: 2.5;
}

/* --- Entablature (the roof beam) — a single slim stripe on the columns --- */
.gd-portico__roof {
	position: relative;
	z-index: 2;
	background: var(--gd-green);
	color: var(--wp--preset--color--base);
	text-align: center;
	padding: 0.62rem var(--wp--preset--spacing--70);
	border-block: 1.5px solid color-mix(in srgb, var(--gd-brass) 80%, transparent);
	box-shadow: 0 14px 20px -12px rgba(16, 54, 43, 0.55);
}
.gd-portico__roof-title {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
	line-height: 1.25;
}
.gd-roof-sep {
	color: var(--gd-brass);
	font-weight: 400;
	margin-inline: 0.2em;
}

/* --- Colonnade (two columns) --- */
.gd-portico__colonnade {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	margin-inline: var(--gd-col-inset);
}
.gd-portico__column {
	position: relative;
	flex: 0 0 33%; /* narrower columns -> bigger central intercolumniation */
	display: flex;
	flex-direction: column;
	min-block-size: 21rem;
}

/* capital — flared cushion (echinus) the beam rests on, with an abacus slab */
.gd-portico__capital {
	position: relative;
	block-size: 1.1rem;
	margin-inline: -1.1rem;
	background: linear-gradient(180deg, var(--gd-stone-light), var(--gd-stone-edge));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14);
	clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.gd-portico__capital::before {
	/* abacus — the flat slab the architrave bears on */
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: -0.2rem;
	block-size: 4px;
	background: var(--gd-stone-light);
	box-shadow: inset 0 2px 0 var(--gd-brass);
}

/* shaft — fluted, cylindrical stone; text centered in the shaft */
.gd-portico__shaft {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* top-align so both titles sit at the same level */
	text-align: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background-color: var(--gd-stone);
	background-image:
		repeating-linear-gradient(90deg, transparent 0 6px, rgba(96, 79, 42, 0.22) 7px, rgba(255, 255, 255, 0.7) 8px, transparent 9px 15px),
		linear-gradient(90deg, var(--gd-stone-edge), var(--gd-stone) 11%, var(--gd-stone-light) 50%, var(--gd-stone) 89%, var(--gd-stone-edge));
}
.gd-portico__shaft h3 {
	margin: 0 0 var(--wp--preset--spacing--40);
	/* match the entablature headline size for consistency (may wrap to 2 lines) */
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
	text-align: center;
}
.gd-portico__shaft p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral);
}
/* column copy as an em-dash bullet list — left-aligned for readability inside
   the centered shaft; the dash hangs in the margin (brass, echoing the brand). */
.gd-portico__list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: start;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral);
}
.gd-portico__list li {
	position: relative;
	padding-inline-start: 1.5em;
	margin-block-end: 0.7em;
}
.gd-portico__list li:last-child {
	margin-block-end: 0;
}
.gd-portico__list li::before {
	content: "—";
	position: absolute;
	inset-inline-start: 0;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* base — flared plinth (torus + plinth) the column stands on */
.gd-portico__base {
	position: relative;
	block-size: 1.5rem;
	margin-inline: -1.1rem;
	margin-block-start: auto;
	background: linear-gradient(180deg, var(--gd-stone), var(--gd-stone-light));
	box-shadow: inset 0 -4px 0 var(--gd-brass);
	clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
.gd-portico__base::before {
	/* torus — the rounded ring above the plinth */
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline: 14%;
	block-size: 0.5rem;
	border-radius: 0.5rem;
	background: linear-gradient(180deg, var(--gd-stone-light), var(--gd-stone-edge));
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

/* --- Stylobate (stepped platform) --- */
.gd-portico__stylobate {
	position: relative;
	z-index: 1;
}
.gd-portico__stylobate span {
	display: block;
	background: linear-gradient(180deg, var(--gd-stone-light), var(--gd-stone-edge));
}
.gd-portico__stylobate span:first-child {
	block-size: 0.7rem;
	margin-inline: calc(var(--gd-col-inset) - 0.5rem);
	box-shadow: inset 0 2px 0 color-mix(in srgb, var(--gd-brass) 55%, transparent);
}
.gd-portico__stylobate span:last-child {
	block-size: 1rem;
	box-shadow: inset 0 2px 0 var(--gd-brass);
}

/* Keep the structure but stack the columns on very small screens. */
@media (max-width: 560px) {
	.gd-portico__colonnade {
		flex-direction: column;
		gap: 1.25rem;
	}
	.gd-portico__column {
		min-block-size: 0;
	}
}

/* ======================================================================
   Cross-brand CTA — the aqueduct bridge (Green Data -> Aiconomica)
   Governed data flows across the arches from one bank to the other.
   ====================================================================== */
.gd-bridge-cta {
	--gd-green: var(--wp--preset--color--primary);
	--gd-brass: var(--wp--preset--color--accent);
	border-block: 1px solid var(--gd-hairline);
	margin-block-start: var(--wp--preset--spacing--80);
	text-align: center;
}
.gd-bridge-cta__title {
	margin-block-end: var(--wp--preset--spacing--60);
}

.gd-bridge {
	max-inline-size: 940px;
	margin-inline: auto;
}
.gd-bridge__banks {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-inline: 0.25rem;
	margin-block-end: 0.35rem;
}
.gd-bridge__bank {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.15rem;
}
.gd-bridge__bank--from {
	color: var(--gd-green);
}
.gd-bridge__bank--to {
	color: var(--gd-brass); /* the destination, lit in gold */
}
.gd-bridge__bank--to::after {
	content: " \2192";
}

.gd-aqueduct {
	display: block;
	inline-size: 100%;
	block-size: auto;
	color: var(--gd-green); /* the flow's arrowhead marker resolves currentColor here */
}
.gd-aq-deck {
	fill: color-mix(in srgb, var(--gd-green) 8%, transparent);
	stroke: var(--gd-brass);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
.gd-aq-arch {
	fill: none;
	stroke: var(--gd-brass);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
/* piers inherit the portico columns: cylindrical stone + fluting */
.gd-aq-pier {
	fill: url(#gd-pier-grad);
	stroke: color-mix(in srgb, var(--gd-brass) 75%, transparent);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}
.gd-aq-flute {
	stroke: color-mix(in srgb, var(--gd-brass) 35%, transparent);
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
}
/* stepped stylobate, echoing the portico base */
.gd-aq-step {
	fill: url(#gd-step-grad);
}
.gd-aq-step-edge {
	stroke: var(--gd-brass);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
/* binary 0/1 data flowing across the deck channel toward Aiconomica */
.gd-aq-bit {
	font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
	font-size: 14px; /* SVG user units */
	font-weight: 700;
	fill: var(--gd-green);
	text-anchor: middle;
	animation: gd-aq-bits 30s linear infinite; /* slow crawl; matches $bit_dur in the pattern */
}
@keyframes gd-aq-bits {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(1140px); /* (x1 - x0) + 80 travel, in SVG user units */
	}
}
@media (prefers-reduced-motion: reduce) {
	/* freeze the stream (still distributed across the span via per-digit delays) */
	.gd-aq-bit {
		animation-play-state: paused;
	}
}

.gd-bridge-cta__body {
	margin-block: var(--wp--preset--spacing--50);
	margin-inline: auto;
	max-inline-size: 54ch;
	color: var(--wp--preset--color--neutral);
}
.gd-bridge-cta__btn .wp-block-button__link::after {
	content: " \2192";
}

/* ======================================================================
   From the blog — featured (sticky) post + Recent Posts list
   ====================================================================== */
.gd-blog__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--wp--preset--spacing--80);
	margin-block-start: var(--wp--preset--spacing--60);
	align-items: start;
}

/* Featured (left) */
.gd-blog__media {
	display: block;
	margin-block-end: var(--wp--preset--spacing--50);
}
.gd-blog__media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: 2px;
	border-block-start: 3px solid var(--wp--preset--color--accent);
}
.gd-blog__kicker {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.gd-blog__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.15;
}
.gd-blog__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.gd-blog__title a:hover {
	text-decoration: underline;
}
.gd-blog__excerpt {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-inline-size: 54ch;
	color: var(--wp--preset--color--neutral);
}
.gd-blog__meta {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.85rem;
	color: var(--wp--preset--color--neutral);
}
.gd-blog__more {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.gd-blog__more:hover {
	text-decoration: underline;
}

/* Recent Posts (right) */
.gd-blog__recent {
	border-inline-start: 1px solid var(--gd-hairline);
	padding-inline-start: var(--wp--preset--spacing--70);
}
.gd-blog__recent-title {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	font-size: 1.2rem;
	color: var(--wp--preset--color--primary);
	border-block-end: 2px solid var(--wp--preset--color--accent);
}
.gd-blog__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gd-blog__item {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--gd-hairline);
}
.gd-blog__item:first-child {
	padding-block-start: 0;
}
.gd-blog__item-title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.gd-blog__item-title:hover {
	color: var(--wp--preset--color--primary);
}
.gd-blog__item-date {
	display: block;
	margin-block-start: 0.2rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--neutral);
}
.gd-blog__viewall {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--50);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.gd-blog__viewall:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.gd-blog__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--70);
	}
	.gd-blog__recent {
		border-inline-start: 0;
		padding-inline-start: 0;
		border-block-start: 1px solid var(--gd-hairline);
		padding-block-start: var(--wp--preset--spacing--60);
	}
}

/* --- Credentials band -------------------------------------------------- */
.gd-creds__row {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}
.gd-creds__item {
	position: relative;
	text-align: center;
	padding-inline: var(--wp--preset--spacing--60);
}
/* brass hairline divider between marks (not before the first) */
.gd-creds__item + .gd-creds__item::before {
	content: "";
	position: absolute;
	inset-block: 0.15em 0.15em;
	inset-inline-start: 0;
	inline-size: 1px;
	background: color-mix(in srgb, var(--gd-brass) 55%, transparent);
}
.gd-creds__mark {
	/* reserve two lines and bottom-align, so single- and two-line marks share
	   one baseline and every caption begins on the same row */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 2.1em;
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
	line-height: 1.05;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
}
.gd-creds__caption {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 26ch;
	margin-inline: auto;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral);
}

@media (max-width: 781px) {
	.gd-creds__row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}
	.gd-creds__item {
		padding-block: var(--wp--preset--spacing--50);
		padding-inline: 0;
	}
	/* swap the vertical divider for a horizontal one when stacked */
	.gd-creds__item + .gd-creds__item::before {
		inset-block-start: 0;
		inset-block-end: auto;
		inset-inline: 20% auto;
		inline-size: 60%;
		block-size: 1px;
	}
}

/* --- Footer ------------------------------------------------------------ */
.gd-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--70);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
}
.gd-footer__wordmark {
	display: block;
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-size: 1.6rem;
	color: var(--wp--preset--color--base);
}
.gd-footer__wordmark::after {
	content: "";
	display: block;
	inline-size: 2.5rem;
	block-size: 2px;
	margin-block-start: var(--wp--preset--spacing--30);
	background: var(--gd-brass, var(--wp--preset--color--accent));
}
.gd-footer__tagline {
	margin-block-start: var(--wp--preset--spacing--40);
	max-inline-size: 34ch;
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	font-size: 0.95rem;
	line-height: 1.5;
}
.gd-footer__col-title {
	display: block;
	margin-block-end: var(--wp--preset--spacing--40);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
	color: var(--gd-brass, var(--wp--preset--color--accent));
}
.gd-footer__link {
	display: inline-block;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.gd-footer__link:hover {
	text-decoration: underline;
}
.gd-footer__link--brass {
	color: var(--gd-brass, var(--wp--preset--color--accent));
}
.gd-footer__note {
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 30ch;
	color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
	font-size: 0.85rem;
	line-height: 1.45;
}
.gd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--60);
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

@media (max-width: 781px) {
	.gd-footer__top {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/* --- About page ------------------------------------------------------- */
.gd-about__cols {
	gap: var(--wp--preset--spacing--80);
}
.gd-about__portrait {
	position: relative;
	margin: 0;
	max-inline-size: 340px;
}
/* offset brass frame behind the portrait — editorial, echoes the golden hue */
.gd-about__portrait::before {
	content: "";
	position: absolute;
	inset-block: 16px -16px;
	inset-inline: -16px 16px;
	border: 1.5px solid var(--wp--preset--color--accent);
	border-radius: 3px;
	z-index: 0;
}
.gd-about__portrait img {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 3px;
	box-shadow: 0 12px 30px rgba(19, 20, 15, 0.14);
}

/* Bio (rendered by the greendata/bio-card block) */
.gd-biocard__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}
.gd-biocard__name::after {
	content: "";
	display: block;
	inline-size: 3.5rem;
	block-size: 3px;
	margin-block-start: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
}
.gd-biocard__headline {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.gd-biocard__intro {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--wp--preset--color--neutral);
	max-inline-size: 60ch;
}
.gd-biocard__facts {
	margin: var(--wp--preset--spacing--60) 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* When the facts render as their own full-width block (About page: lead sits
   beside the portrait, facts break to the shared left spine below), the dl is
   already at the top of its wrapper — drop the extra top margin and let the
   block gap handle the separation. */
.gd-biocard--facts .gd-biocard__facts {
	margin-block-start: 0;
}
.gd-biocard__fact {
	margin: 0;
}
.gd-biocard__fact--full {
	grid-column: 1 / -1;
}
.gd-biocard__label {
	margin: 0 0 0.4em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.gd-biocard__value {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.55;
}
.gd-biocard__certs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--60);
}
.gd-biocard__certs li {
	position: relative;
	padding-block: 0.4rem;
	padding-inline-start: 1.1rem;
	border-block-end: 1px solid var(--gd-hairline);
}
.gd-biocard__certs li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.95em;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Profile pillars (CV profile, adapted) — editorial label | text rows */
.gd-profile {
	margin-block-start: var(--wp--preset--spacing--50);
}
.gd-profile__row {
	display: grid;
	grid-template-columns: 1fr 3.2fr;
	gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--gd-hairline);
}
.gd-profile__row:last-child {
	border-block-end: 1px solid var(--gd-hairline);
}
.gd-profile__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}
.gd-profile__text {
	margin: 0;
	max-inline-size: 64ch;
	line-height: 1.7;
	color: var(--wp--preset--color--neutral);
}
@media (max-width: 781px) {
	.gd-profile__row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* Vision band (the founder's-vision callout) */
.gd-vision__inner {
	max-inline-size: 62ch;
	margin-inline: auto;
	text-align: center;
}
.gd-vision__kicker {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.gd-vision__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	/* Genuine Fraunces italic (the loaded 400-italic face) reads as a reflective
	   pull-quote rather than a headline — calmer than the heavy 600 roman. */
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.55rem);
	line-height: 1.55;
	color: var(--wp--preset--color--primary);
}
.gd-vision__cite {
	margin: var(--wp--preset--spacing--60) 0 0;
}
.gd-vision__cite a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.gd-vision__cite a:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.gd-about__portrait {
		max-inline-size: 280px;
		margin-inline: auto;
		margin-block-end: var(--wp--preset--spacing--70);
	}
	.gd-biocard__facts,
	.gd-biocard__certs {
		grid-template-columns: 1fr;
	}
}

/* --- Blog: Insights list ---------------------------------------------- */
.gd-postlist .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gd-postlist .wp-block-post-template > li {
	padding-block: var(--wp--preset--spacing--70);
	border-block-start: 1px solid var(--gd-hairline);
}
.gd-postlist .wp-block-post-template > li:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}
.gd-post-kicker {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
}
.gd-post-kicker a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.gd-post-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
	line-height: 1.15;
}
.gd-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.gd-post-title a:hover {
	text-decoration: underline;
}
.gd-post-date {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.85rem;
	color: var(--wp--preset--color--neutral);
}
.gd-post-excerpt {
	margin: 0;
	max-inline-size: 68ch;
	color: var(--wp--preset--color--neutral);
	line-height: 1.7;
}
.gd-post-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.gd-post-excerpt .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}
.gd-pagination {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--gd-hairline);
}

/* --- Blog: single article --------------------------------------------- */
.gd-article-head {
	max-inline-size: 46rem;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--60);
	text-align: center;
}
.gd-article-head .gd-post-kicker a {
	color: var(--wp--preset--color--accent);
}
.gd-article-head .gd-post-date {
	margin-block: var(--wp--preset--spacing--30) 0;
}
/* centre the signature brass rule under the centered article title */
.gd-article-head h1.has-huge-font-size::after {
	margin-inline: auto;
}
.gd-article-image img {
	border-radius: 3px;
	border-block-start: 3px solid var(--wp--preset--color--accent);
}
.gd-article-foot {
	border-block-start: 1px solid var(--gd-hairline);
	padding-block-start: var(--wp--preset--spacing--50);
}
.gd-back-link a {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.gd-back-link a:hover {
	text-decoration: underline;
}

/* --- Contact band ------------------------------------------------------ */
.gd-contact__inner {
	max-inline-size: 56ch;
	margin-inline: auto;
	text-align: center;
}
.gd-contact__kicker {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
}
.gd-contact__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}
.gd-contact__text {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-inline-size: 46ch;
	line-height: 1.65;
	color: var(--wp--preset--color--neutral);
}
.gd-contact__actions {
	margin-block-start: var(--wp--preset--spacing--60);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	justify-content: center;
}
.gd-contact__btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gd-contact__btn--primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--primary);
}
.gd-contact__btn--primary:hover {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}
.gd-contact__btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--accent);
}
.gd-contact__btn--ghost:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}

/* footer contact links stack on their own lines */
.gd-footer__link--block {
	display: block;
	margin-block-end: 0.45rem;
}

/* --- Brand / logo ------------------------------------------------------ */
.gd-brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.gd-brand__logo {
	display: block;
	height: 54px;
	width: auto;
}
.gd-footer__logo {
	display: block;
	line-height: 0;
}
.gd-footer__logo svg {
	display: block;
	height: 40px;
	width: auto;
}
@media (max-width: 600px) {
	.gd-brand__logo {
		height: 44px;
	}
}

/* --- RTL: mirror the hero rule origin ---------------------------------- */
/* (logical properties handle most of this automatically) */

/* ======================================================================
   Arabic / RTL — interim About page (pre-Polylang)
   The <html> gets lang="ar" dir="rtl" (inc/i18n.php) so the whole layout
   mirrors via the logical properties already used throughout. Here we only
   need to (a) switch the Arabic content to the self-hosted Noto Sans Arabic
   webfont — Fraunces/IBM Plex carry no Arabic glyphs — and (b) undo Latin
   typographic touches (uppercasing, letter-spacing) that break Arabic shaping.
   The body carries `gd-rtl` (added in inc/i18n.php) and <html> is dir="rtl"
   lang="ar". We scope the Arabic webfont to the page MAIN (`.gd-rtl main`) so the
   Latin brand logo + English nav in the shared header/footer keep their typefaces.
   ====================================================================== */
.gd-rtl main,
.gd-rtl main :is(p, a, li, dt, dd, span, blockquote, figcaption, strong, em),
.gd-rtl main :is(h1, h2, h3, h4, h5, h6) {
	font-family: "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Arabic reads better with a touch more leading and no Latin letter-spacing. */
.gd-rtl main {
	line-height: 1.9;
	letter-spacing: normal;
}
.gd-rtl main :is(h1, h2, h3, h4) {
	line-height: 1.4;
	letter-spacing: normal;
}

/* Kickers/labels: drop uppercase + tracking (meaningless and harmful in Arabic). */
.gd-rtl main :is(.greendata-kicker, .gd-vision__kicker, .gd-contact__kicker, .gd-biocard__label) {
	text-transform: none;
	letter-spacing: normal;
}

/* Arabic glyphs read smaller at a given px than Latin, and these labels/kickers
   carry no uppercase/tracking to give them presence — so size the Arabic section
   labels and band kickers up noticeably (vs ~0.8rem in English) for comfortable
   legibility, keeping them all consistent. */
.gd-rtl main :is(.gd-biocard__label, .greendata-kicker, .gd-vision__kicker, .gd-contact__kicker) {
	font-size: 1.05rem;
}

/* The bio-card facts grid + lists inherit dir=rtl from the page; just relax leading. */
.gd-rtl main .gd-biocard__intro,
.gd-rtl main .gd-profile__text,
.gd-rtl main .gd-vision__quote,
.gd-rtl main .gd-contact__text {
	line-height: 1.95;
}

/* Arabic numerals/Latin tokens (CDMP, LinkedIn, 2017) sit fine in Noto Sans
   Arabic; keep them upright and unspaced within otherwise-Arabic runs. */
.gd-rtl main .gd-biocard__certs li {
	letter-spacing: normal;
}

/* Engagement proof text reads small at 0.875rem in Arabic — nudge it up for
   comfortable legibility (and a tighter ratio to the heading). */
.gd-rtl main .gd-engagement p {
	font-size: 0.95rem !important;
}

/* Arabic legibility: small detail/caption text that reads too small in Arabic. */
.gd-rtl main :is(.gd-creds__caption, .gd-blog__kicker) {
	font-size: 0.95rem;
}
.gd-rtl main :is(.gd-portico__shaft p, .gd-portico__list) {
	font-size: 0.98rem;
}
/* Footer lives outside <main>, so scope it to the body's gd-rtl class. */
.gd-rtl .gd-footer__col-title {
	font-size: 0.85rem;
}
.gd-rtl :is(.gd-footer__note, .gd-footer__bottom) {
	font-size: 0.9rem;
}

/* The Latin brand wordmarks live in inline SVG <text>, which inherits the page's
   dir=rtl on Arabic pages — flowing "Green Data" right-to-left so it collides with
   the shield. Force the brand SVGs back to LTR so the wordmark renders correctly. */
.gd-rtl .gd-brand__logo,
.gd-rtl .gd-footer__logo svg,
.gd-rtl .gd-portico__brand svg {
	direction: ltr;
}

/* --- About: certifications with the DAMA CDMP badge ------------------- */
/* Two columns inside "Recent Certifications": badge + CDMP on one side, the
   rest of the certs on the other. Logical columns flip correctly under RTL. */
.gd-biocard__cert-grid {
	display: grid;
	/* Match the facts grid (two equal columns, same column gap) so the badge/CDMP
	   column and the AI-certs column share the page's left/right spine. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	align-items: start;
}
.gd-biocard__cert-badge img {
	display: block;
	width: 120px;
	height: 120px;
	border: 1px solid var(--gd-hairline);
	border-radius: 8px;
	background: #fff;
	margin-block-end: 0.6rem;
}
/* One column each (override the default 2-up certs grid) inside the split. */
.gd-biocard__certs--single {
	grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 600px) {
	.gd-biocard__cert-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}
}