/*
 * The contact dock (components/contact-dock) — WhatsApp and a phone call at
 * the side of every page (owner 2026-10-07 09:09).
 *
 * Bottom of the reading START side: right in Arabic, left in English (logical
 * properties). Nomo's button and the article's reading stem are on the other
 * side, so nothing overlaps. Layer 85: under Nomo's button (90) and window
 * (95), under the header and its phone menu (100), under the page loader.
 *
 * Colours: WhatsApp's green, darkened to #1DA851 so the white icon keeps a
 * 3:1 contrast (WCAG 1.4.11); the phone in the site's navy with a turquoise
 * edge, so it shows on the navy bands too.
 */

.gb-dock {
	--gb-dock-gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	--gb-dock-size: clamp(3rem, 2.75rem + 0.6vw, 3.4rem);

	position: fixed;
	z-index: 85;
	inset-block-end: calc(var(--gb-dock-gap) + env(safe-area-inset-bottom, 0px));
	inset-inline-start: var(--gb-dock-gap);
}

.gb-dock__list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-dock__link {
	--gb-focus: var(--gb-focus-inverse, var(--gb-color-turquoise));

	position: relative;
	display: grid;
	place-items: center;
	inline-size: var(--gb-dock-size);
	block-size: var(--gb-dock-size);
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: 50%;
	color: var(--gb-color-neutral-0, #fff);
	text-decoration: none;
	box-shadow: 0 12px 26px -12px rgb(12 35 66 / 0.65);
	transition: translate var(--gb-duration-base) var(--gb-ease-out), box-shadow var(--gb-duration-base) linear;
}

.gb-dock__link--whatsapp {
	background-color: #1da851;
}

.gb-dock__link--phone {
	border-color: rgb(0 202 190 / 0.55);
	background-color: var(--gb-color-navy);
}

.gb-dock__icon {
	--gb-icon-size: calc(var(--gb-dock-size) * 0.46);
	--gb-icon-stroke: 2;
}

.gb-dock__link:hover,
.gb-dock__link:focus-visible {
	translate: 0 -2px;
	box-shadow: 0 16px 30px -12px rgb(12 35 66 / 0.75);
}

/* WhatsApp says hello once, a little after the page opens (a soft ring, twice). */
.gb-dock__link--whatsapp::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 2px solid #1da851;
	opacity: 0;
	pointer-events: none;
	animation: gb-dock-ring 1.8s var(--gb-ease-out, ease-out) 2.5s 2;
}

@keyframes gb-dock-ring {
	0% {
		opacity: 0.7;
		scale: 1;
	}

	100% {
		opacity: 0;
		scale: 1.55;
	}
}

/* The label beside the button: on hover (a mouse) and on keyboard focus. */
.gb-dock__tip {
	position: absolute;
	inset-block-start: 50%;
	/* Beside the button, toward the page (inset from the start edge: past the button's own width). */
	inset-inline-start: calc(100% + 0.6rem);
	padding: 0.35rem 0.85rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-navy);
	color: var(--gb-color-neutral-0, #fff);
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step--1);
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 8px 20px -10px rgb(12 35 66 / 0.6);
	opacity: 0;
	translate: 0 -50%;
	pointer-events: none;
	transition: opacity var(--gb-duration-base) linear;
}

.gb-dock__link:focus-visible .gb-dock__tip {
	opacity: 1;
}

@media (hover: hover) {
	.gb-dock__link:hover .gb-dock__tip {
		opacity: 1;
	}
}

/* Still: no lift, no ring (reduced motion, or the footer's «إيقاف الحركة»). */
@media (prefers-reduced-motion: reduce) {
	.gb-dock__link,
	.gb-dock__link:hover,
	.gb-dock__link:focus-visible {
		translate: none;
		transition: none;
	}

	.gb-dock__link--whatsapp::after {
		animation: none;
	}
}

[data-gb-motion="off"] .gb-dock__link--whatsapp::after {
	animation: none;
}

/* High contrast: the buttons keep an edge and their icons. */
@media (forced-colors: active) {
	.gb-dock__link {
		border: 2px solid ButtonText;
	}
}

@media print {
	.gb-dock {
		display: none;
	}
}