/**
 * Header, footer and mobile call-dock chrome — ported from
 * design/prototype/assets/css/styles.css (header l.124-142, footer
 * l.400-407, dock l.410-414, 440-443, 460-461), rebuilt on theme.json
 * presets. Logical properties only (RTL-first).
 *
 * @package Shareef
 */

/* stylelint-disable selector-class-pattern -- class names are ported 1:1 from
   the approved prototype (design/prototype/assets/css/styles.css), matching
   base.css's (T/assets/css/base.css) convention. */

/* ---------- header ---------- */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--wp--preset--color--seam);
	border-block-end: 1px solid rgb(255 255 255 / 0.07);
	transition: box-shadow 0.3s var(--wp--custom--ease-out);
}

.site-header.is-scrolled {
	box-shadow: 0 12px 30px -18px rgb(0 0 0 / 0.9);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-block-size: var(--wp--custom--header-h);
}

.brand-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.brand-link img {
	block-size: 40px;
	width: auto;
}

.site-header .nav {
	display: flex;
	gap: 0.25rem;
	margin-inline-start: auto;
}

.site-header .nav a {
	padding: 0.5rem 0.85rem;
	border-radius: 99px;
	text-decoration: none;
	color: var(--wp--preset--color--ink-2);
	font-weight: 500;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s, background-color 0.2s;
}

.site-header .nav a:hover,
.site-header .nav a[aria-current="page"] {
	color: var(--wp--preset--color--white);
	background: rgb(255 255 255 / 0.07);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lang-btn {
	min-block-size: 44px;
	min-inline-size: 44px;
	padding-inline: 0.9rem;
	border-radius: 99px;
	background: transparent;
	border: 1.5px solid rgb(255 255 255 / 0.25);
	cursor: pointer;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	color: inherit;
}

.lang-btn:hover {
	border-color: var(--wp--preset--color--white);
}

.call-pill .num {
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}

.nav-mobile-menu {
	display: none;
}

@media (max-width: 860px) {

	.site-header .nav {
		display: none;
	}

	.header-actions {
		margin-inline-start: auto;
	}

	.site-header .call-pill {
		display: none;
	}

	.nav-mobile-menu {
		display: inline-flex;
	}

	.brand-link img {
		block-size: 34px;
	}
}

/* ---------- footer ---------- */
.site-footer-wrap {
	border-block-start: 1px solid rgb(255 255 255 / 0.07);
	padding-block: 3.5rem 2rem;
	color: var(--wp--preset--color--ink-2);
}

.foot-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2rem;
}

.foot-brand img {
	block-size: 46px;
	width: auto;
	margin-block-end: 1rem;
}

.foot-brand {
	grid-column: 1;
	grid-row: 1;
}

.foot-about {
	grid-column: 1;
	grid-row: 2;
}

.foot-col h3,
.foot-brand h3 {
	font-size: var(--wp--preset--font-size--fs-1);
	color: var(--wp--preset--color--white);
	margin-block-end: 0.75rem;
}

.foot-col li {
	margin-block-end: 0.35rem;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements (footer links vs. header nav), not a cascade bug. */
.foot-col a {
	text-decoration: none;
	display: inline-flex;
	min-block-size: 32px;
	align-items: center;
}

/* stylelint-disable-next-line no-descending-specificity -- see .foot-col a above. */
.foot-col a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.foot-base {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgb(255 255 255 / 0.07);
	font-size: var(--wp--preset--font-size--fs-0);
}

/* stylelint-disable-next-line no-descending-specificity -- see .foot-col a above. */
.foot-base a {
	color: inherit;
}

@media (max-width: 860px) {

	.foot-grid {
		grid-template-columns: 1fr 1fr;
	}

	.foot-brand,
	.foot-about {
		grid-column: 1 / -1;
	}
}

/* ---------- mobile call dock ---------- */
.dock {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: none;
	gap: var(--wp--custom--seam-w);
	padding: var(--wp--custom--seam-w);
	padding-block-end: calc(var(--wp--custom--seam-w) + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--seam);
}

/* stylelint-disable-next-line no-descending-specificity -- see .foot-col a above. */
.dock a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-block-size: 56px;
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
	font-weight: 800;
	color: var(--wp--preset--color--white);
}

.dock .d-call {
	flex: 1;
	background: var(--wp--preset--color--red-ink);
	font-size: var(--wp--preset--font-size--fs-2);
}

.dock .d-call .num {
	font-size: 1.5rem;
}

.dock .d-wa {
	inline-size: 64px;
	background: var(--wp--preset--color--navy);
}

@media (max-width: 860px) {

	:root {
		--wp--custom--header-h: 64px;
	}

	body {
		padding-block-end: calc(68px + env(safe-area-inset-bottom));
	}

	.dock {
		display: flex;
	}
}