/*
 * Site footer (components/footer/footer.php).
 *
 * Navy surface. Four columns on wide screens (brand · links · contact · CTA),
 * reflowing intrinsically to two and then one column — no breakpoints needed.
 */

.gb-site-footer {
	/* Inverse surface: the light focus ring stays visible. */
	--gb-focus: var(--gb-focus-inverse);

	position: relative;
	background-color: var(--gb-surface-inverse);
	color: var(--gb-scene-text);
}

.gb-site-footer a {
	color: inherit;
}

/* ---------- Growth Line ending ---------- */

.gb-site-footer__line {
	block-size: 1px;
	background-image: linear-gradient(90deg, transparent, var(--gb-color-turquoise-a60), transparent);
}

/* The start point (the logo's seed) sits on the line's centre (direction-neutral). */
.gb-site-footer__line span {
	display: block;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	margin-inline: auto;
	border-radius: 50%;
	background-color: var(--gb-seed);
	box-shadow: 0 0 0 0.3rem var(--gb-seed-glow);
	translate: 0 -50%;
}

/* ---------- Columns ---------- */

.gb-site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--gb-space-l) var(--gb-space-m);
	padding-block: var(--gb-space-2xl) var(--gb-space-xl);
}

/*
 * Phones: the two link lists (quick links, services) sit side by side;
 * brand, contact and CTA keep the full width.
 */
@media (max-width: 39.99rem) {
	.gb-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gb-site-footer__grid > :not(nav),
	.gb-site-footer__grid > nav:only-of-type {
		grid-column: 1 / -1;
	}
}

/* The brand column gets a little more room where there is space for it. */
@media (min-width: 64rem) {
	.gb-site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
	}

	/* Five columns once the services column is there (Stage 3). */
	.gb-site-footer__grid:has(> :nth-child(5)) {
		grid-template-columns: 1.3fr 0.9fr 1fr 1.2fr 1fr;
	}
}

.gb-site-footer__name {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-3);
	font-weight: var(--gb-weight-bold);
	line-height: 1.1;
}

.gb-site-footer__mark {
	--gb-mark-sheen: transparent;

	flex: none;
	inline-size: 1.6em;
	block-size: 1.6em;
}

.gb-site-footer__tagline {
	margin-block-start: var(--gb-space-2xs);
	color: var(--gb-primary);
	font-size: var(--gb-step-1);
}

.gb-site-footer__title {
	margin-block-end: var(--gb-space-s);
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step-0);
	font-weight: var(--gb-weight-bold);
	color: var(--gb-scene-text);
}

/* Short turquoise rule under each column title. */
.gb-site-footer__title::after {
	content: "";
	display: block;
	inline-size: 2rem;
	block-size: 2px;
	margin-block-start: var(--gb-space-2xs);
	border-radius: 2px;
	background-color: var(--gb-primary);
}

/* ---------- Links ---------- */

.gb-site-footer__links,
.gb-site-footer__contact-list,
.gb-site-footer__social-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-site-footer__links a,
.gb-site-footer__contact-item {
	display: flex;
	align-items: center;
	gap: var(--gb-space-2xs);
	/* 44px targets for touch. */
	min-block-size: 2.75rem;
	color: var(--gb-scene-text-muted);
}

.gb-site-footer__links a {
	text-decoration: none;
	transition: color var(--gb-duration-fast) linear;
}

.gb-site-footer__links a:hover,
.gb-site-footer__contact-item a:hover,
.gb-site-footer__links [aria-current] {
	color: var(--gb-scene-text);
}

/* ---------- Contact ---------- */

/* <address> is italic by default; contact details are not emphasized text. */
.gb-site-footer__contact {
	font-style: normal;
}

.gb-site-footer__contact-item a {
	text-decoration-color: var(--gb-color-turquoise-a60);
}

.gb-site-footer__contact-icon {
	--gb-icon-size: 1.15rem;

	color: var(--gb-primary);
}

/* ---------- Social ---------- */

.gb-site-footer__social {
	margin-block-start: var(--gb-space-m);
}

.gb-site-footer__social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-2xs);
}

.gb-site-footer__social-link {
	--gb-icon-size: 1.2rem;

	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--gb-color-turquoise-a35);
	border-radius: 50%;
	color: var(--gb-scene-text);
	transition:
		background-color var(--gb-duration-fast) linear,
		color var(--gb-duration-fast) linear,
		border-color var(--gb-duration-fast) linear;
}

.gb-site-footer__social-link:hover {
	border-color: var(--gb-primary);
	background-color: var(--gb-primary);
	color: var(--gb-primary-contrast);
}

/* ---------- CTA column ---------- */

.gb-site-footer__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ---------- Legal bar ---------- */

.gb-site-footer__bar {
	border-block-start: 1px solid var(--gb-color-turquoise-a20);
}

.gb-site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gb-space-xs);
	padding-block: var(--gb-space-s);

	/*
	 * Room under the last line for the floating buttons (contact dock, Nomo):
	 * at the very bottom of the page they sat over the legal line, the privacy
	 * link and «إيقاف الحركة» at every width (found 2026-10-08, Stage 11). The
	 * room is the dock's height (contact-dock.css: gap + two buttons + their gap).
	 */
	padding-block-end: calc(var(--gb-space-s) + clamp(0.75rem, 0.5rem + 1vw, 1.5rem) + 2 * clamp(3rem, 2.75rem + 0.6vw, 3.4rem) + 0.65rem + env(safe-area-inset-bottom, 0px));
}

.gb-site-footer__legal {
	font-size: var(--gb-step--1);
	color: var(--gb-scene-text-muted);
}

.gb-site-footer__legal-sep {
	margin-inline: 0.4em;
}

/* The privacy link and the credit wrap as whole phrases, never mid-way. */
.gb-site-footer__legal-link,
.gb-site-footer__credit {
	white-space: nowrap;
}

.gb-site-footer__legal-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--gb-color-turquoise-a35);
	text-underline-offset: 0.25em;
}

.gb-site-footer__legal-link:hover,
.gb-site-footer__legal-link:focus-visible {
	color: var(--gb-scene-text);
	text-decoration-color: var(--gb-primary);
}

/*
 * «إيقاف الحركة» (assets/js/motion-switch.js): small and quiet, like the legal
 * line beside it, but a real button with a visible focus ring and a 44 px
 * touch target. Pause bars while motion runs, the play triangle once it is off.
 */
.gb-site-footer__motion {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-block-size: 2.75rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--gb-color-turquoise-a20);
	border-radius: var(--gb-radius-pill);
	background: none;
	font: inherit;
	font-size: var(--gb-step--1);
	color: var(--gb-scene-text-muted);
	cursor: pointer;
	transition: color var(--gb-duration-fast) var(--gb-ease-out), border-color var(--gb-duration-fast) var(--gb-ease-out);
}

.gb-site-footer__motion[hidden] {
	display: none;
}

.gb-site-footer__motion:hover {
	border-color: var(--gb-primary);
	color: var(--gb-scene-text);
}

.gb-site-footer__motion .gb-icon {
	--gb-icon-size: 0.95rem;
}

.gb-site-footer__motion[data-gb-motion-state="on"] .gb-site-footer__motion-icon--play,
.gb-site-footer__motion[data-gb-motion-state="off"] .gb-site-footer__motion-icon--pause,
.gb-site-footer__motion:not([data-gb-motion-state]) .gb-site-footer__motion-icon--play {
	display: none;
}