/* Planet Boxes: site header, utility bar and footer (PLANET enclosures design). */
.pb-wrap {
	max-inline-size: var(--psb-container, 1280px);
	margin-inline: auto;
	padding-inline: 24px;
}

/* Utility bar */
.pb-util {
	background: var(--psb-deep-navy, #0B2740);
	color: #C9D6E2;
	font-size: 14px;
	line-height: 1.4;
}
.pb-util__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	justify-content: space-between;
	align-items: center;
}
.pb-util__note { margin: 0; padding-block: 8px; }
.pb-util__links { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.pb-util a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: #FFFFFF;
	text-decoration: none;
}
.pb-util a:hover { text-decoration: underline; }
.pb-util a.pb-util__lang {
	min-block-size: 32px;
	margin-block: 6px;
	padding: 4px 12px;
	font-weight: 600;
	border: 1px solid #5C7C9C;
	border-radius: 4px;
}

/* Header */
.pb-header {
	background: #FFFFFF;
	border-block-end: 1px solid var(--psb-line, #DDE1DD);
	font-family: var(--psb-font-body, inherit);
}
.pb-header__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 36px;
	align-items: center;
	justify-content: space-between;
	padding-block: 14px;
}
.pb-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}
.pb-brand img.pb-brand__logo { display: block; block-size: 50px; inline-size: auto; max-inline-size: none; }
.pb-brand__name {
	font-family: var(--psb-font-heading, inherit);
	font-size: 20px;
	font-weight: 600;
	color: var(--psb-navy, #0E314F);
	border-inline-start: 1px solid #CBD0CC;
	padding-inline-start: 14px;
}
:lang(ar) .pb-brand__name { font-size: 18px; }

.pb-nav__list,
.pb-fnav__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pb-nav__list { gap: 0 28px; font-size: 16px; font-weight: 500; }
.pb-nav a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: #1E2B36;
	text-decoration: none;
	border-block-end: 2px solid transparent;
}
.pb-nav a:hover,
.pb-nav a[aria-current="page"],
.pb-nav .current-menu-item > a { border-block-end-color: var(--psb-teal, #17707A); color: var(--psb-navy, #0E314F); }

.pb-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	padding: 10px 22px;
	border-radius: var(--psb-radius-button, 6px);
	background: var(--psb-teal, #17707A);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
}
.pb-header__cta:hover,
.pb-header__cta:focus { background: var(--psb-navy, #0E314F); color: #FFFFFF; }
.pb-header__count {
	min-inline-size: 24px;
	padding: 0 7px;
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--psb-navy, #0E314F);
	font-size: 14px;
	line-height: 24px;
	text-align: center;
}
.pb-header__count[hidden] { display: none; }

/* Footer */
.pb-footer {
	background: var(--psb-deep-navy, #0B2740);
	color: #C9D6E2;
	font-family: var(--psb-font-body, inherit);
}
.pb-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	align-items: center;
	padding-block: 48px;
}
.pb-footer img.pb-footer__logo { display: block; block-size: 60px; inline-size: auto; max-inline-size: none; }
.pb-footer__links { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pb-fnav__list { gap: 0 24px; }
.pb-footer__contact { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; font-size: 14px; }
.pb-footer a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: #FFFFFF;
}
.pb-footer a:hover { color: var(--psb-teal-light, #4FB3BA); }

.pb-util a:focus-visible,
.pb-header a:focus-visible,
.pb-footer a:focus-visible {
	outline: 3px solid var(--psb-teal-light, #4FB3BA);
	outline-offset: 2px;
}

@media (max-width: 760px) {
	.pb-util__note { flex-basis: 100%; }
	.pb-header__inner { gap: 8px 20px; }
	.pb-nav { order: 3; flex-basis: 100%; }
	.pb-nav__list { gap: 0 20px; }
	.pb-footer__links { align-items: flex-start; }
}

/* Astra sets overflow-x: hidden on <body>, which makes it a scroll box and stops position: sticky
   (configurator stage). clip hides horizontal overflow the same way without that side effect. */
body { overflow-x: clip; }