/* ==========================================================================
   Header: utility strip, sticky bar, theme control, primary navigation
   (desktop mega menu + mobile drawer). The utility strip scrolls away; the
   bar stays sticky with a compact state that does not change document flow.
   ========================================================================== */

.sb-header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--sb-topbar-h, 0px));
	z-index: 100;
}

.sb-header .sb-header__bar {
	border-bottom: 1px solid var(--sb-border);
	transition: box-shadow 0.22s var(--sb-ease), background-color 0.2s;
}

.sb-header.is-scrolled .sb-header__bar {
	box-shadow: 0 8px 28px rgb(20 27 40 / 10%);
}

/* Utility strip */
.sb-topbar,
.sb-topbar p {
	margin: 0;
	color: var(--sb-on-deep-2);
	font-size: 14px;
	line-height: 1.4;
}

.sb-topbar .sb-topbar__item--grow {
	flex-grow: 1;
}

.sb-topbar a.sb-topbar__phone {
	color: var(--sb-on-deep);
	font-weight: 700;
	text-decoration: none;
}

.sb-topbar a.sb-topbar__phone:hover {
	text-decoration: underline;
}

/* Logo: always on a light surface, never recoloured. */
.sb-logo a,
.sb-logo .elementor-widget-container {
	display: inline-block;
}

.sb-logo img {
	display: block;
	width: 240px;
	height: auto;
	transition: width 0.22s var(--sb-ease);
}

html[data-theme="dark"] .sb-logo img {
	padding: 6px 10px;
	border-radius: 8px;
	background: #f7f5f1;
	box-sizing: content-box;
}

.sb-header.is-scrolled .sb-logo img {
	width: 214px;
}

@media (max-width: 480px) {
	.sb-logo img,
	.sb-header.is-scrolled .sb-logo img {
		width: 180px;
	}
}

.sb-header .sb-header__bar > .e-con-inner > .elementor-widget-shortcode:first-of-type,
.sb-header .sb-nav-widget {
	flex-grow: 1;
}

/* ---------- Native buttons (beat the kit's global button style) ---------- */

.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var(--sb-ease), color 0.18s var(--sb-ease), border-color 0.18s var(--sb-ease), transform 0.18s var(--sb-ease);
}

body a.sb-btn--primary,
button.sb-btn--primary,
button.sb-btn--primary:focus {
	background: var(--sb-btn-bg);
	color: var(--sb-btn-fg);
}

body a.sb-btn--primary:hover,
button.sb-btn--primary:hover {
	background: var(--sb-btn-hover);
	color: var(--sb-btn-fg);
}

body a.sb-btn--outline {
	border-color: var(--sb-brand);
	background: transparent;
	color: var(--sb-brand);
}

body a.sb-btn--outline:hover {
	background: var(--sb-surface-2);
	color: var(--sb-heading);
}

/* Header call link */
body a.sb-header__call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 4px;
	color: var(--sb-heading);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

body a.sb-header__call svg {
	color: var(--sb-accent-text);
}

body a.sb-header__call:hover {
	color: var(--sb-brand);
	text-decoration: underline;
}

@media (max-width: 1279px) {
	.sb-header .sb-call-widget {
		display: none;
	}
}

/* ---------- Theme control (in the mobile menu and the footer) ---------- */

body button.sb-theme-toggle,
body button.sb-theme-toggle:hover,
body button.sb-theme-toggle:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 18px 8px 14px;
	border: 1px solid var(--sb-border);
	border-radius: 999px;
	background: var(--sb-surface);
	color: var(--sb-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

body button.sb-theme-toggle:hover {
	border-color: var(--sb-accent);
	background: var(--sb-surface-2);
}

.sb-theme-toggle svg,
.sb-theme-toggle__text > span {
	display: none;
}

.sb-theme-toggle svg {
	width: 20px;
	height: 20px;
	flex: none;
}

html[data-theme-pref="light"] .sb-theme-toggle .sb-theme-toggle__light,
html[data-theme-pref="dark"] .sb-theme-toggle .sb-theme-toggle__dark,
html[data-theme-pref="system"] .sb-theme-toggle .sb-theme-toggle__system,
html:not([data-theme-pref]) .sb-theme-toggle .sb-theme-toggle__system {
	display: block;
}

/* Footer variant, on the deep background. */
.sb-footer button.sb-theme-toggle,
.sb-footer button.sb-theme-toggle:hover,
.sb-footer button.sb-theme-toggle:focus {
	border-color: rgb(255 255 255 / 25%);
	background: transparent;
	color: var(--sb-on-deep);
}

.sb-footer button.sb-theme-toggle:hover {
	border-color: #e0ae6b;
	background: rgb(255 255 255 / 6%);
}

.sb-nav__theme {
	padding-top: 4px;
}
/* ---------- Primary navigation ---------- */

.sb-nav__list,
.sb-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-nav a.sb-nav__link {
	color: var(--sb-heading);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.sb-nav .sb-nav__item.is-current > a.sb-nav__link {
	color: var(--sb-accent-text);
}

.sb-nav__burger,
.sb-nav__panel-cta {
	display: none;
}

/* Desktop */
@media (min-width: 1100px) {
	.sb-nav__list {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2px;
	}

	.sb-nav__item--d0 {
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 999px;
		transition: background-color 0.18s var(--sb-ease);
	}

	.sb-nav__item--d0:hover,
	.sb-nav__item--d0.is-open {
		background: var(--sb-surface-2);
	}

	.sb-nav__item--d0 > a.sb-nav__link {
		display: inline-block;
		padding: 10px 14px;
	}

	.sb-nav__item--d0.has-children > a.sb-nav__link {
		padding-right: 2px;
	}

	.sb-nav button.sb-nav__toggle,
	.sb-nav button.sb-nav__toggle:hover,
	.sb-nav button.sb-nav__toggle:focus {
		width: 30px;
		height: 36px;
		margin-right: 4px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: none;
		color: var(--sb-heading);
		cursor: pointer;
	}

	.sb-nav__toggle span {
		display: block;
		width: 7px;
		height: 7px;
		margin: -3px auto 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.18s var(--sb-ease);
	}

	.sb-nav__item.is-open > .sb-nav__toggle span {
		transform: translateY(3px) rotate(-135deg);
	}

	.sb-nav__item--d0 > .sb-nav__sub {
		position: absolute;
		top: calc(100% + 10px);
		left: 50%;
		min-width: 250px;
		padding: 10px;
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-lg);
		background: var(--sb-surface);
		box-shadow: var(--sb-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 6px);
		transition: opacity 0.2s var(--sb-ease), transform 0.2s var(--sb-ease), visibility 0s linear 0.2s;
	}

	.sb-nav__item--d0 > .sb-nav__sub::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -14px;
		height: 14px;
	}

	.sb-nav__item--d0:hover > .sb-nav__sub,
	.sb-nav__item--d0.is-open > .sb-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	.sb-nav__sub a.sb-nav__link {
		display: block;
		padding: 9px 12px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
	}

	.sb-nav__sub a.sb-nav__link:hover {
		background: var(--sb-surface-2);
	}

	/* Mega menu (Services), centred on the menu. */
	.sb-nav__item--mega.sb-nav__item--d0 {
		position: static;
	}

	.sb-nav__item--mega > .sb-nav__sub {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px 20px;
		width: min(1000px, 92vw);
		padding: 28px;
	}

	.sb-nav__item--mega .sb-nav__item--d1 > a.sb-nav__link {
		margin-bottom: 6px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--sb-border);
		border-radius: 0;
		color: var(--sb-heading);
		font-size: 15px;
		font-weight: 700;
	}

	.sb-nav__item--mega .sb-nav__item--d1 > a.sb-nav__link:hover {
		background: none;
		color: var(--sb-accent-text);
	}

	.sb-nav__item--mega .sb-nav__sub--d1 a.sb-nav__link {
		padding: 7px 12px;
		font-size: 14px;
		color: var(--sb-text-2);
	}

	.sb-nav__item--mega .sb-nav__sub--d1 a.sb-nav__link:hover {
		color: var(--sb-heading);
	}
}

/* Tablet & mobile: drawer */
@media (max-width: 1099px) {
	.sb-header .sb-header__cta {
		display: none;
	}

	.sb-nav button.sb-nav__burger,
	.sb-nav button.sb-nav__burger:hover,
	.sb-nav button.sb-nav__burger:focus {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 8px 16px;
		border: 1px solid var(--sb-border);
		border-radius: 999px;
		background: var(--sb-surface);
		color: var(--sb-heading);
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	.sb-nav__burger-lines,
	.sb-nav__burger-lines::before,
	.sb-nav__burger-lines::after {
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.2s var(--sb-ease), background-color 0.2s;
	}

	.sb-nav__burger-lines {
		position: relative;
	}

	.sb-nav__burger-lines::before,
	.sb-nav__burger-lines::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.sb-nav__burger-lines::before {
		top: -6px;
	}

	.sb-nav__burger-lines::after {
		top: 6px;
	}

	.sb-nav.is-open .sb-nav__burger-lines {
		background: transparent;
	}

	.sb-nav.is-open .sb-nav__burger-lines::before {
		transform: translateY(6px) rotate(45deg);
	}

	.sb-nav.is-open .sb-nav__burger-lines::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	.sb-nav__panel {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--sb-panel-top, 72px);
		bottom: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--sb-surface);
		border-top: 1px solid var(--sb-border);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.22s var(--sb-ease), transform 0.22s var(--sb-ease), visibility 0s linear 0.22s;
	}

	.sb-nav.is-open .sb-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.sb-nav__item--d0 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--sb-border);
	}

	.sb-nav__item--d0 > a.sb-nav__link {
		flex: 1;
		padding: 16px 2px;
		font-size: 18px;
	}

	.sb-nav button.sb-nav__toggle,
	.sb-nav button.sb-nav__toggle:hover,
	.sb-nav button.sb-nav__toggle:focus {
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--sb-surface-2);
		color: var(--sb-heading);
		cursor: pointer;
	}

	.sb-nav__toggle span {
		display: block;
		width: 9px;
		height: 9px;
		margin: -4px auto 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s var(--sb-ease);
	}

	.sb-nav__item.is-open > .sb-nav__toggle span {
		transform: translateY(4px) rotate(-135deg);
	}

	.sb-nav__item--d0 > .sb-nav__sub {
		display: none;
		flex-basis: 100%;
		padding: 0 0 14px 6px;
	}

	.sb-nav__item.is-open > .sb-nav__sub {
		display: block;
	}

	.sb-nav__sub a.sb-nav__link {
		display: block;
		padding: 10px 4px;
		font-weight: 500;
	}

	.sb-nav__sub--d1 {
		margin-left: 4px;
		padding: 0 0 8px 14px;
		border-left: 2px solid var(--sb-border);
	}

	.sb-nav__sub--d1 a.sb-nav__link {
		padding: 8px 4px;
		font-size: 15px;
		color: var(--sb-text-2);
	}

	.sb-nav__item--mega .sb-nav__item--d1 > a.sb-nav__link {
		font-weight: 700;
	}

	.sb-nav__panel-cta {
		display: grid;
		gap: 12px;
	}

	body.sb-nav-open {
		overflow: hidden;
	}
}

/* ---------- Header fit: no wrapping at any width ---------- */

.sb-nav a.sb-nav__link,
.sb-header .sb-header__cta .elementor-button {
	white-space: nowrap;
}

.sb-header .sb-header__bar > .e-con-inner {
	flex-wrap: nowrap;
}

@media (max-width: 1439px) {
	.sb-header .sb-call-widget {
		display: none;
	}
}

@media (min-width: 1100px) and (max-width: 1279px) {
	.sb-logo img,
	.sb-header.is-scrolled .sb-logo img {
		width: 190px;
	}

	.sb-nav__item--d0 > a.sb-nav__link {
		padding-inline: 10px;
	}
}

@media (max-width: 1099px) {
	.sb-header .sb-header__bar > .e-con-inner {
		gap: 10px;
	}

	.sb-header .sb-nav-widget {
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
	}
}

@media (max-width: 420px) {
	.sb-logo img,
	.sb-header.is-scrolled .sb-logo img {
		width: 158px;
	}

	.sb-nav__burger-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	.sb-nav button.sb-nav__burger,
	.sb-nav button.sb-nav__burger:hover,
	.sb-nav button.sb-nav__burger:focus {
		width: 44px;
		padding: 0;
		justify-content: center;
	}
}