/*
 * layout.css — الهيكل العام: الحاويات، الترويسة، التذييل، تخطيط المحتوى
 * موجّه للجوال أولًا (Mobile-first) وبخصائص CSS منطقية.
 */

/* ---------- الحاويات ---------- */

.container {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* ---------- الترويسة ---------- */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background-color: var(--c-white);
	border-block-end: var(--border-thin) solid var(--c-border);
}

/* شريط إدارة ووردبريس: يظهر فوق الترويسة اللاصقة (32px سطح المكتب، 46px جوال) */
.admin-bar .site-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		inset-block-start: 46px;
	}
}

/* الروابط الداخلية (#) لا تختبئ تحت الترويسة اللاصقة */
html {
	scroll-padding-block-start: 6rem;
}

.site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-m);
	padding-block: 0.75rem;
}

.site-header__brand {
	margin-inline-end: auto;
}

.site-header__brand-link {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--c-navy);
	font-size: 1.375rem;
	font-weight: 800;
	text-decoration: none;
}

.site-header__brand-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.custom-logo {
	display: block;
	max-height: 56px;
	width: auto;
}

/*
 * قائمة سطح المكتب وزر الاستشارة: مخفيان على الجوال.
 * التخصيص (0,2,0) مقصود كي لا تتغلب قاعدة .btn { display:inline-flex }
 * القادمة لاحقًا من components.css على الإخفاء.
 */
.site-header .site-nav--desktop,
.site-header .site-header__cta {
	display: none;
}

.site-nav__list,
.nav-fallback ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a,
.nav-fallback a {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	color: var(--c-navy);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius-s);
}

.site-nav a:hover,
.nav-fallback a:hover {
	background-color: var(--c-ivory);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* الصفحة الحالية: خط سفلي ذهبي ثابت + وزن أثقل (ليست بالحالة اللونية فقط) */
.site-nav .current-menu-item > a,
.site-nav a[aria-current="page"],
.nav-fallback .current_page_item > a {
	font-weight: 800;
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.35em;
}

/* ---------- قائمة الجوال (details/summary — بلا جافاسكربت) ---------- */

/*
 * البنية: display:contents على <details> يجعل الزر واللوحة عنصرين
 * مباشرين داخل شريط الترويسة المرن، فيبقى زر «القائمة» في السطر الأول
 * دائمًا (مغلقًا ومفتوحًا)، وتلتف اللوحة سطرًا كامل العرض أسفله وتدفع
 * محتوى الصفحة للأسفل بدل تغطيته.
 * المتصفحات الحديثة تغلّف محتوى details بصندوق زائف ::details-content —
 * نعطيه هو أيضًا عرضًا كاملًا، بينما تغطي قاعدة .nav-drawer__panel
 * المحركات الأقدم التي ترفع الأبناء مباشرة.
 */
.nav-drawer {
	display: contents;
}

.nav-drawer::details-content {
	flex-basis: 100%;
	min-width: 100%;
}

/* زر مدمج بلا إطار ضخم ولا مظهر «عائم» */
.nav-drawer__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.625rem;
	color: var(--c-navy);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
	border-radius: var(--radius-s);
}

.nav-drawer__toggle::-webkit-details-marker {
	display: none;
}

.nav-drawer__toggle:hover {
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* حالتا الزر: «القائمة» مغلقًا و«إغلاق» مفتوحًا — CSS فقط */
.nav-drawer__state {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.nav-drawer__state--open {
	display: none;
}

.nav-drawer[open] .nav-drawer__state--closed {
	display: none;
}

.nav-drawer[open] .nav-drawer__state--open {
	display: inline-flex;
}

/* لوحة كاملة العرض ضمن تدفق المستند — خلفية بيضاء، قائمة عمودية نظيفة */
.nav-drawer__panel {
	flex-basis: 100%;
	min-width: 0;
	padding-block: 0.25rem 1rem;
	border-block-start: var(--border-thin) solid var(--c-border);
	background-color: var(--c-white);
}

.nav-drawer__list,
.nav-drawer__panel .nav-fallback ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* فواصل خفيفة بين الروابط */
.nav-drawer__panel li + li {
	border-block-start: var(--border-thin) solid var(--c-border);
}

.nav-drawer__panel a:not(.btn) {
	display: block;
	padding: 0.875rem 0.25rem;
	color: var(--c-navy);
	font-weight: 600;
	text-decoration: none;
}

.nav-drawer__panel a:not(.btn):hover {
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* الصفحة الحالية: حد ذهبي جانبي رقيق فقط — بلا بطاقة خلفية */
.nav-drawer__panel .current-menu-item > a,
.nav-drawer__panel .current_page_item > a {
	font-weight: 800;
	border-inline-start: 3px solid var(--c-gold);
	padding-inline-start: 0.75rem;
}

/* زر الاستشارة عنصرًا أخيرًا داخل اللوحة */
.nav-drawer__cta {
	margin-block-start: var(--gap-m);
}

/* ---------- نقطة التحول لسطح المكتب ---------- */

@media (min-width: 64em) {
	/*
	 * ترويسة سطح المكتب — Grid مقصود بثلاثة أعمدة (وليس سلوك RTL عرضيًا):
	 * [العلامة][القائمة بجانبها + الفراغ المرن][زر الاستشارة في الطرف]
	 * يبقى الترتيب ثابتًا مهما زادت العناصر أو طالت التسميات أو استُبدلت
	 * العلامة النصية بشعار.
	 */
	.site-header__bar {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--gap-l);
		padding-block: 0.625rem;
	}

	.site-header__brand {
		margin-inline-end: 0;
	}

	/*
	 * The nav occupies the flexible middle grid track; centering its list
	 * inside that track makes the menu sit visually centered between the brand
	 * and the consultation CTA (which have different widths) — without fragile
	 * fixed margins. The grid keeps brand/CTA pinned to the two outer edges.
	 */
	.site-header .site-nav--desktop {
		display: flex;
		justify-content: center;
		min-width: 0;
	}

	.site-header .site-nav__list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.site-header .site-header__cta {
		display: inline-flex;
	}

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

/* ---------- ترويسة الصفحات الداخلية ---------- */

.page-header {
	max-width: calc(var(--content) + (2 * var(--gutter)));
	padding-block: clamp(1rem, 3vw, 2rem) 0;
}

/* ---------- محتوى المقال/الصفحة ---------- */

.entry-header,
.entry-meta {
	max-width: calc(var(--content) + (2 * var(--gutter)));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.entry-header {
	padding-block: clamp(1rem, 3vw, 2rem) 0;
}

.entry-meta {
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * عرض القراءة: يُضبط كل ابن مباشر على عرض المحتوى، مع سماح
 * alignwide/alignfull بالتمدد — نفس سلوك محرر المكوّنات.
 */
.entry-content {
	padding-inline: var(--gutter);
}

.entry-content > * {
	max-width: var(--content);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--wide);
}

.entry-content > .alignfull {
	max-width: none;
	margin-inline: calc(-1 * var(--gutter));
}

/* ---------- قائمة المقالات (المدونة/الأرشيف/البحث) ---------- */

.error-404 {
	max-width: calc(var(--content) + (2 * var(--gutter)));
	padding-block: var(--gap-l);
}

/* ---------- التذييل ---------- */

.site-footer {
	background-color: var(--c-navy);
	color: var(--c-ivory);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-l);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* Tablet: two balanced columns. */
@media (min-width: 40em) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * Desktop footer: render only the tracks that really exist. The former fixed
 * four-column grid left a visibly empty track while the services list was
 * unavailable. Columns are intentionally content-sized and centred so the
 * Customizer gap is the real visual distance between them.
 */
@media (min-width: 64em) {
	.site-footer__grid {
		column-gap: var(--fa-footer-column-gap, 32px);
		row-gap: var(--gap-l);
		justify-content: center;
		align-items: start;
	}

	.site-footer__grid--2 {
		grid-template-columns: minmax(17rem, 23rem) minmax(14rem, 20rem);
	}

	.site-footer__grid--3 {
		grid-template-columns: minmax(19rem, 24rem) minmax(9rem, 13rem) minmax(17rem, 20rem);
	}

	.site-footer__grid--4 {
		grid-template-columns: minmax(17rem, 21rem) minmax(8rem, 11rem) minmax(8rem, 11rem) minmax(16rem, 19rem);
	}
}

/*
 * حالات روابط التذييل — محددات كافية التخصيص كي لا تتغلب عليها قواعد
 * الروابط العامة. الافتراضي والمُزار: أبيض عالي التباين على الكحلي.
 * التحويم/التركيز/الضغط: ذهبي (تباين 6.7:1 على الكحلي) مع خط سفلي.
 * الأزرار (واتساب مثلًا) مستثناة ولها حالاتها الخاصة عالية التباين.
 */
.site-footer a:not(.btn),
.site-footer a:not(.btn):visited {
	color: var(--c-white);
}

.site-footer a:not(.btn):hover,
.site-footer a:not(.btn):focus-visible,
.site-footer a:not(.btn):active {
	color: var(--c-gold);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* أيقونة داخل رابط ترث لون الرابط دائمًا فلا تختفي باستقلال عنه */
.site-footer a .icon {
	color: currentColor;
}

.site-footer .btn--whatsapp,
.site-footer .btn--whatsapp:visited {
	color: var(--c-white);
}

.site-footer__brand {
	margin-block-end: 0.5rem;
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--c-white);
}

.site-footer__desc {
	color: var(--c-ivory);
	opacity: 0.9;
}

.site-footer__title {
	margin-block-end: 0.75rem;
	color: var(--c-white);
	font-size: var(--wp--preset--font-size--medium);
}

.site-footer__links,
.site-footer .nav-fallback ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.site-footer__links a,
.site-footer .nav-fallback a {
	display: inline-block;
	padding-block: 0.375rem;
	text-decoration: none;
}

.site-footer__links a:hover,
.site-footer .nav-fallback a:hover {
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 2px;
}

/*
 * التذييل: رابط الصفحة الحالية يبقى بخطٍّ عادي بلا خطّ سفلي — لا تمييز
 * «الصفحة الحالية» في التذييل (يبقى في الترويسة فقط).
 */
.site-footer .site-footer__links .current-menu-item > a,
.site-footer .site-footer__links .current_page_item > a,
.site-footer .nav-fallback .current-menu-item > a,
.site-footer .nav-fallback .current_page_item > a,
.site-footer a[aria-current="page"] {
	font-weight: 400;
	text-decoration: none;
}

.contact-list {
	list-style: none;
	margin: 0 0 var(--gap-m);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.contact-list .icon {
	flex: none;
	margin-block-start: 0.3em;
	color: var(--c-gold);
}

.site-footer__legal {
	border-block-start: var(--border-thin) solid rgb(247 244 236 / 0.18);
	padding-block: var(--gap-m);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__disclaimer {
	margin-block-end: 0.75rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 3px solid var(--c-gold);
	opacity: 0.9;
}

.site-footer__copyright {
	margin: 0;
	opacity: 0.85;
}

/* ---------- ترقيم الصفحات ---------- */

.pagination {
	padding-block: var(--gap-l);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border: var(--border-thin) solid var(--c-border);
	border-radius: var(--radius-s);
	color: var(--c-navy);
	font-weight: 600;
	text-decoration: none;
}

.pagination a.page-numbers:hover {
	background-color: var(--c-ivory);
	border-color: var(--c-navy);
}

.pagination .page-numbers.current {
	background-color: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
	font-weight: 800;
}

/* ---------- تنقل المقال السابق/التالي ---------- */

.post-navigation {
	max-width: calc(var(--content) + (2 * var(--gutter)));
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--gap-l);
}

.post-navigation .nav-links {
	display: flex;
	flex-direction: column;
	gap: var(--gap-s);
}

@media (min-width: 48em) {
	.post-navigation .nav-links {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--gap-l);
	}
}

.post-navigation a {
	display: block;
	padding: var(--gap-s) var(--gap-m);
	border: var(--border-thin) solid var(--c-border);
	border-radius: var(--radius-m);
	text-decoration: none;
}

.post-navigation a:hover {
	border-color: var(--c-navy);
	background-color: var(--c-ivory);
}

.post-nav__label {
	display: block;
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--small);
}

.post-nav__title {
	color: var(--c-navy);
	font-weight: 700;
}

/*
 * ملاحظة: أنماط الأقسام (.section والمتغيرات) انتقلت إلى
 * assets/css/patterns.css لأنها تُحمَّل في الواجهة والمحرر معًا.
 */

/* =====================================================================
 * التنقل: قوائم منسدلة على سطح المكتب (hover + focus-within، بلا JS)
 * ===================================================================== */

.site-nav__item {
	position: relative;
}

.site-nav__caret {
	font-size: 0.7em;
	margin-inline-start: 0.15rem;
	color: var(--c-gold);
}

.site-nav__sub {
	position: absolute;
	inset-inline-start: 0;
	/* No physical gap between the parent item and the submenu, so the pointer
	   can move down into it without the menu closing. */
	top: 100%;
	min-width: 16rem;
	max-width: min(22rem, 90vw);
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--c-white);
	border: var(--border-thin) solid var(--c-border);
	border-block-start: 3px solid var(--c-gold);
	border-radius: var(--radius-m);
	box-shadow: 0 14px 34px rgb(14 34 53 / 0.14);
	display: none;
	z-index: 60;
}

/* Invisible hover-bridge: covers the small area between the parent link and
   the submenu so crossing the caret/border never drops the hover state. */
.site-nav__item--has-sub > .site-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 100%;
	height: 0.6rem;
}

/* Keep the submenu inside the viewport near the left edge (RTL): flip its
   anchor to the item's inline-end so it opens toward the start. */
.site-nav__list > .site-nav__item--has-sub:last-of-type .site-nav__sub {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* يظهر عند التحويم أو عند وصول التركيز لأي عنصر داخل العنصر (وصول لوحة المفاتيح) */
.site-nav__item--has-sub:hover > .site-nav__sub,
.site-nav__item--has-sub:focus-within > .site-nav__sub {
	display: block;
}

.site-nav__sub li {
	margin: 0;
}

.site-nav__sub a {
	display: block;
	padding: 0.55rem 0.7rem;
	border-radius: var(--radius-s);
	color: var(--c-navy);
	font-weight: 600;
	white-space: normal;
	text-decoration: none;
}

.site-nav__sub a:hover,
.site-nav__sub a:focus-visible {
	background: var(--c-ivory);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-underline-offset: 0.2em;
}

/* ---- Level 3: side flyout for a level-2 item that has children ---- */
.site-nav__subitem--has-sub {
	position: relative;
}

.site-nav__subitem--has-sub > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
}

.site-nav__caret--flyout {
	font-size: 0.7em;
	color: var(--c-gold);
}

/* The nested flyout (level 3) opens to the inline-start (left in RTL), aligned
   with its parent row, with a small overlap so the pointer never drops hover. */
.site-nav__sub .site-nav__sub {
	position: absolute;
	top: -0.4rem;
	inset-inline-start: auto;
	inset-inline-end: 100%;
	margin-inline-end: -0.15rem;
	border-block-start-width: var(--border-thin);
	border-inline-end: 3px solid var(--c-gold);
}

/* Hover-bridge covering the small overlap between a level-2 row and its flyout. */
.site-nav__subitem--has-sub > a::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -0.4rem;
	inline-size: 0.5rem;
}

.site-nav__subitem--has-sub:hover > .site-nav__sub,
.site-nav__subitem--has-sub:focus-within > .site-nav__sub {
	display: block;
}

/* تركيز واضح على كل روابط التنقل */
.site-nav a:focus-visible,
.nav-drawer__panel a:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

/* الجوال: مجموعات قابلة للطي عبر <details> — الأبناء مخفيّون حتى الفتح */
.nav-drawer__group {
	border-block-start: var(--border-thin) solid rgb(221 214 196 / 0.5);
}

.nav-drawer__group-toggle {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.85rem 0.25rem;
	min-height: 2.75rem;
	font-weight: 600;
	color: var(--c-navy);
}

.nav-drawer__group-toggle::-webkit-details-marker {
	display: none;
}

.nav-drawer__group-toggle:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

.nav-drawer__caret {
	color: var(--c-gold);
	transition: transform var(--transition);
}

.nav-drawer__group[open] > .nav-drawer__group-toggle .nav-drawer__caret {
	transform: rotate(180deg);
}

/* Explicitly collapse a closed group's children (do not rely only on the UA
   ::details-content behavior, which varies by engine). */
.nav-drawer__group:not([open]) > .nav-drawer__sub {
	display: none;
}

.nav-drawer__sub {
	list-style: none;
	margin: 0 0 0.6rem;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid rgb(201 162 39 / 0.5);
	display: grid;
	gap: 0.15rem;
}

/* Nested (level-3) group inside a level-2 group: keep it collapsible and avoid
   runaway indentation on narrow screens. */
.nav-drawer__sub .nav-drawer__group {
	border-block-start: none;
}

.nav-drawer__sub .nav-drawer__group-toggle {
	padding-block: 0.6rem;
	font-weight: 600;
	font-size: 0.95em;
}

.nav-drawer__sub .nav-drawer__sub {
	padding-inline-start: 0.75rem;
	margin-block-end: 0.3rem;
}

.nav-drawer__sub a {
	display: block;
	padding: 0.55rem 0.5rem;
	min-height: 2.5rem;
	font-weight: 500;
	font-size: 0.98rem;
	border-radius: var(--radius-s);
}

.nav-drawer__sub-all {
	font-weight: 700;
	color: var(--c-navy);
}

/* =====================================================================
 * التذييل: شبكة متوازنة + تواصل اجتماعي (بلا شريط دعوة علوي)
 * ===================================================================== */

.site-footer__col .site-footer__title {
	margin-block: 0 0.85rem;
}

.contact-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.6;
}

.contact-list .icon {
	flex: 0 0 auto;
	margin-block-start: 0.15rem;
	color: var(--c-gold);
}

.contact-list__hours {
	color: rgb(247 244 236 / 0.8);
}

.site-footer__wa {
	margin-block-start: 0.35rem;
}

/* التواصل الاجتماعي */
.fa-social {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fa-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-pill);
	border: var(--border-thin) solid rgb(221 214 196 / 0.28);
	color: var(--c-ivory);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

/* خصوصية أعلى من .site-footer a:not(.btn):hover وإلا صارت الأيقونة ذهبية فوق خلفية ذهبية */
.site-footer .fa-social__link:not(.btn),
.site-footer .fa-social__link:not(.btn):visited {
	text-decoration: none;
}

.site-footer .fa-social__link:not(.btn):hover,
.site-footer .fa-social__link:not(.btn):focus-visible,
.site-footer .fa-social__link:not(.btn):active {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-navy);
	text-decoration: none;
	transform: translateY(-2px);
}

.site-footer .fa-social__link:not(.btn):focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.site-footer .fa-social__link:not(.btn):hover {
		transform: none;
	}
}

.fa-social__link .icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* فصل بصري أوضح لصف الحقوق */
.site-footer__legal {
	border-block-start: var(--border-thin) solid rgb(221 214 196 / 0.18);
	background: rgb(0 0 0 / 0.12);
}

.site-footer__legal .container {
	padding-block: 1rem;
}