/* =========================================================
   8530CLOUD — HEADER COMPONENT
   Liquid glass header
   Desktop + tablet + mobile

   Behaviour:
   - Floating glass appearance
   - Sticky while scrolling
   - WordPress template-part remains at top of viewport
   - Page content scrolls underneath
   - NOT fixed
   ========================================================= */


/* =========================================================
   HEADER — WORDPRESS STICKY TEMPLATE PART
   ========================================================= */

.c8530-sticky-header {
	position: sticky;
	top: 0;
	z-index: 1000;

	width: 100%;
	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	pointer-events: none;
}


/* Prevent WordPress theme/block styling from painting
   a background behind the floating glass header. */

.c8530-sticky-header,
.c8530-sticky-header.wp-block-template-part {
	background-color: transparent !important;
	background-image: none !important;
}


/* =========================================================
   HEADER — SHELL
   ========================================================= */

.c8530-header-shell {
	position: relative;
	z-index: 1;

	width: 100%;
	margin: 0;
	padding: 10px 18px;

	background: transparent !important;

	pointer-events: none;
}

.c8530-header,
.c8530-header * {
	box-sizing: border-box;
}

.c8530-header {
	position: relative;

	width: min(calc(100vw - 36px), 1440px);
	max-width: 1440px;

	margin: 0 auto;

	color: #17233c;

	font-family:
		"Space Grotesk",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	pointer-events: auto;
}


/* =========================================================
   HEADER — MAIN GLASS CAPSULE
   ========================================================= */

.c8530-glass {
	position: relative;
	isolation: isolate;

	display: grid;

	grid-template-columns:
		minmax(150px, 0.72fr)
		minmax(440px, 1.55fr)
		minmax(430px, 1.35fr);

	align-items: center;

	width: 100%;
	min-height: 68px;

	padding: 0 12px 0 22px;

	overflow: visible;

	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 21px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.78),
			rgba(255, 255, 255, 0.60)
		);

	-webkit-backdrop-filter:
		blur(24px)
		saturate(180%);

	backdrop-filter:
		blur(24px)
		saturate(180%);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.90),
		inset 0 -1px 0 rgba(255, 255, 255, 0.20),
		0 10px 30px rgba(17, 31, 56, 0.065);
}


/* Liquid light */

.c8530-glass::before {
	content: "";

	position: absolute;
	z-index: -1;

	top: -160%;
	left: -35%;

	width: 32%;
	height: 420%;

	pointer-events: none;

	background:
		linear-gradient(
			115deg,
			transparent 15%,
			rgba(255, 255, 255, 0.04) 30%,
			rgba(255, 255, 255, 0.48) 48%,
			rgba(255, 255, 255, 0.09) 65%,
			transparent 82%
		);

	opacity: 0.5;

	transform: rotate(14deg);

	transition:
		left 1.35s
		cubic-bezier(0.22, 1, 0.36, 1);
}

.c8530-glass:hover::before {
	left: 105%;
}


/* Blue ambient glow */

.c8530-glass::after {
	content: "";

	position: absolute;
	z-index: -2;

	top: -125px;
	right: 5%;

	width: 340px;
	height: 180px;

	pointer-events: none;

	border-radius: 50%;

	background: rgba(23, 164, 226, 0.14);

	filter: blur(48px);
}


/* =========================================================
   HEADER — LOGO
   ========================================================= */

.c8530-brand {
	display: inline-flex;
	align-items: center;

	width: fit-content;
	min-width: 0;

	color: inherit;
	text-decoration: none;
}

.c8530-brand img {
	display: block;

	width: 128px;
	max-width: 100%;
	max-height: 42px;

	object-fit: contain;

	transition:
		transform 0.4s
		cubic-bezier(0.22, 1, 0.36, 1);
}

.c8530-brand:hover img {
	transform:
		translateY(-1px)
		scale(1.018);
}


/* =========================================================
   HEADER — NAVIGATION
   ========================================================= */

.c8530-nav {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 3px;
	min-width: 0;
}

.c8530-nav a,
.c8530-updates-button {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 38px;

	padding: 0 12px;

	border: 1px solid transparent;
	border-radius: 12px;

	background: transparent;

	color: #17233c;

	font-family: inherit;
	font-size: 12px;
	font-weight: 550;

	line-height: 1;

	white-space: nowrap;

	text-decoration: none;

	cursor: pointer;

	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s
		cubic-bezier(0.22, 1, 0.36, 1);
}

.c8530-nav a:hover,
.c8530-nav a:focus-visible,
.c8530-updates-button:hover,
.c8530-updates-button:focus-visible {
	border-color: rgba(255, 255, 255, 0.68);

	background: rgba(255, 255, 255, 0.56);

	color: #17233c;

	transform: translateY(-1px);
}


/* Headway */

.c8530-updates-button {
	appearance: none;
	-webkit-appearance: none;
}

.c8530-updates-button .HW_badge {
	transform: scale(0.82);
	transform-origin: center;
}


/* =========================================================
   HEADER — ACTIONS
   ========================================================= */

.c8530-actions {
	display: flex;

	align-items: center;
	justify-content: flex-end;

	gap: 9px;

	min-width: 0;
	white-space: nowrap;
}


/* =========================================================
   HEADER — HARELBEKE TIME + WEATHER
   ========================================================= */

.c8530-live {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	min-width: 0;
	min-height: 36px;

	padding: 0 11px;

	flex: 0 0 auto;

	white-space: nowrap;

	border: 1px solid rgba(15, 23, 42, 0.065);
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.31);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.c8530-weather {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 14px;

	flex: 0 0 auto;

	font-size: 12px;
	line-height: 1;
}

.c8530-location {
	flex: 0 0 auto;

	color: rgba(23, 35, 60, 0.43);

	font-size: 7px;
	font-weight: 650;

	letter-spacing: 1.15px;
}

.c8530-time {
	flex: 0 0 auto;

	color: #17233c;

	font-size: 11px;
	font-weight: 600;

	font-variant-numeric: tabular-nums;
}

.c8530-separator {
	width: 1px;
	height: 12px;

	flex: 0 0 1px;

	background: rgba(15, 23, 42, 0.09);
}

.c8530-temperature {
	flex: 0 0 auto;

	color: rgba(23, 35, 60, 0.56);

	font-size: 9px;
	font-weight: 600;
}

.c8530-zone {
	flex: 0 0 auto;

	color: rgba(23, 35, 60, 0.35);

	font-size: 7px;
	font-weight: 600;

	letter-spacing: 0.5px;
}


/* =========================================================
   HEADER — LANGUAGE SELECTOR
   ========================================================= */

.c8530-language {
	position: relative;

	display: inline-flex;
	align-items: center;

	flex: 0 0 auto;
}

.c8530-language-toggle {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 6px;

	min-height: 36px;

	padding: 0 10px;

	border: 1px solid rgba(15, 23, 42, 0.065);
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.31);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.50);

	color: #17233c;

	font-family: inherit;

	cursor: pointer;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.c8530-language-toggle:hover,
.c8530-language-toggle:focus-visible,
.c8530-language.is-open .c8530-language-toggle {
	border-color: rgba(255, 255, 255, 0.72);

	background: rgba(255, 255, 255, 0.60);
}

.c8530-language-toggle:focus-visible {
	outline: 2px solid rgba(21, 159, 221, 0.38);
	outline-offset: 2px;
}

.c8530-language-code {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 21px;

	color: #159fdd;

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.06em;
}

.c8530-language-name {
	color: rgba(23, 35, 60, 0.72);

	font-size: 9px;
	font-weight: 600;

	white-space: nowrap;
}

.c8530-language-chevron {
	margin-top: -2px;

	color: rgba(23, 35, 60, 0.40);

	font-size: 12px;
	line-height: 1;

	transition:
		transform 0.2s ease;
}

.c8530-language.is-open .c8530-language-chevron {
	transform: rotate(180deg);
}


/* Language dropdown */

.c8530-language-menu {
	position: absolute;
	z-index: 20;

	top: calc(100% + 10px);
	right: 0;

	width: 190px;

	padding: 7px;

	border: 1px solid rgba(255, 255, 255, 0.76);
	border-radius: 17px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.94),
			rgba(248, 251, 253, 0.84)
		);

	-webkit-backdrop-filter:
		blur(26px)
		saturate(180%);

	backdrop-filter:
		blur(26px)
		saturate(180%);

	box-shadow:
		0 18px 45px rgba(7, 23, 43, 0.13),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.c8530-language-menu[hidden] {
	display: none;
}

.c8530-language-option {
	display: grid;

	grid-template-columns:
		34px
		1fr
		18px;

	align-items: center;

	width: 100%;
	min-height: 42px;

	padding: 0 10px;

	border: 0;
	border-radius: 11px;

	background: transparent;

	color: #17233c;

	font-family: inherit;

	text-align: left;

	cursor: pointer;

	transition:
		background 0.18s ease,
		transform 0.18s ease;
}

.c8530-language-option:hover,
.c8530-language-option:focus-visible {
	background: rgba(21, 159, 221, 0.08);
	outline: none;
}

.c8530-language-option-code {
	color: #159fdd;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.05em;
}

.c8530-language-option-name {
	font-size: 11px;
	font-weight: 550;
}

.c8530-language-check {
	color: #159fdd;

	font-size: 11px;
	font-weight: 700;

	opacity: 0;
}

.c8530-language-option.is-active .c8530-language-check,
.c8530-mobile-language-option.is-active .c8530-language-check {
	opacity: 1;
}


/* =========================================================
   HEADER — DASHBOARD
   ========================================================= */

.c8530-dashboard {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 9px;

	min-height: 42px;

	padding: 0 17px;

	flex: 0 0 auto;

	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, 0.52);
	border-radius: 14px;

	background:
		linear-gradient(
			135deg,
			rgba(14, 151, 219, 0.96),
			rgba(36, 177, 230, 0.88)
		);

	color: #ffffff;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.36),
		0 7px 20px rgba(16, 155, 220, 0.17);

	font-size: 11px;
	font-weight: 600;

	letter-spacing: 0.25px;

	white-space: nowrap;
	text-decoration: none;

	transition:
		transform 0.3s
		cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

.c8530-dashboard::before {
	content: "";

	position: absolute;

	top: -25px;
	left: -70px;

	width: 48px;
	height: 95px;

	pointer-events: none;

	background: rgba(255, 255, 255, 0.30);

	filter: blur(11px);

	transform: rotate(20deg);

	transition:
		left 0.65s
		cubic-bezier(0.22, 1, 0.36, 1);
}

.c8530-dashboard:hover,
.c8530-dashboard:focus-visible {
	color: #ffffff;

	transform: translateY(-2px);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		0 11px 25px rgba(16, 155, 220, 0.23);
}

.c8530-dashboard:hover::before,
.c8530-dashboard:focus-visible::before {
	left: 120%;
}

.c8530-dashboard-arrow {
	font-size: 13px;
	line-height: 1;
}


/* =========================================================
   HEADER — MOBILE DEFAULT
   ========================================================= */

.c8530-menu-button,
.c8530-mobile-menu,
.c8530-mobile-language {
	display: none;
}


/* =========================================================
   HEADER — TRANSPARENT VARIANT
   ========================================================= */

.c8530-header-shell--transparent {
	background: transparent;
}

.c8530-header-shell--transparent .c8530-glass {
	border-color: rgba(255, 255, 255, 0.52);

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.68),
			rgba(255, 255, 255, 0.48)
		);

	box-shadow:
		0 14px 44px rgba(7, 23, 43, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.78);

	-webkit-backdrop-filter:
		blur(26px)
		saturate(170%);

	backdrop-filter:
		blur(26px)
		saturate(170%);
}


/* =========================================================
   HEADER — TABLET
   ========================================================= */

@media
	(max-width: 1100px)
	and
	(min-width: 901px) {

	.c8530-glass {
		grid-template-columns:
			135px
			1fr
			auto;
	}

	.c8530-nav a,
	.c8530-updates-button {
		padding: 0 8px;

		font-size: 11px;
	}

	.c8530-live {
		display: none;
	}

	.c8530-language-toggle {
		padding: 0 9px;
	}

	.c8530-language-name {
		display: none;
	}
}


/* =========================================================
   HEADER — MOBILE
   ========================================================= */

@media (max-width: 900px) {

	.c8530-header-shell {
		padding: 8px 10px;
	}

	.c8530-header {
		width: 100%;
		max-width: none;
	}

	.c8530-glass {
		display: flex;

		align-items: center;

		min-height: 62px;

		padding: 0 10px 0 16px;

		border-radius: 18px;
	}

	.c8530-brand img {
		width: 112px;
	}

	.c8530-nav,
	.c8530-live,
	.c8530-dashboard,
	.c8530-language {
		display: none;
	}

	.c8530-actions {
		margin-left: auto;
	}


	/* Mobile menu button */

	.c8530-menu-button {
		display: flex;

		flex-direction: column;

		align-items: center;
		justify-content: center;

		gap: 5px;

		width: 40px;
		height: 40px;

		padding: 0;

		border: 1px solid rgba(255, 255, 255, 0.70);
		border-radius: 13px;

		background: rgba(255, 255, 255, 0.44);

		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.68);

		cursor: pointer;
	}

	.c8530-menu-button span {
		display: block;

		width: 14px;
		height: 1.5px;

		border-radius: 999px;

		background: #17233c;

		transition:
			transform 0.35s
			cubic-bezier(0.22, 1, 0.36, 1);
	}

	.c8530-header.menu-open
	.c8530-menu-button span:first-child {
		transform:
			translateY(3.25px)
			rotate(45deg);
	}

	.c8530-header.menu-open
	.c8530-menu-button span:last-child {
		transform:
			translateY(-3.25px)
			rotate(-45deg);
	}


	/* Mobile glass menu */

	.c8530-mobile-menu {
		display: grid;

		grid-template-rows: 0fr;

		width: calc(100% - 20px);

		margin: 5px auto 0;

		overflow: hidden;

		border: 1px solid rgba(255, 255, 255, 0.72);
		border-radius: 18px;

		background:
			linear-gradient(
				135deg,
				rgba(255, 255, 255, 0.76),
				rgba(255, 255, 255, 0.57)
			);

		-webkit-backdrop-filter:
			blur(28px)
			saturate(180%);

		backdrop-filter:
			blur(28px)
			saturate(180%);

		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.80),
			0 14px 38px rgba(17, 31, 56, 0.09);

		transition:
			grid-template-rows 0.45s
			cubic-bezier(0.22, 1, 0.36, 1);
	}

	.c8530-header.menu-open
	.c8530-mobile-menu {
		grid-template-rows: 1fr;
	}

	.c8530-mobile-inner {
		min-height: 0;

		overflow: hidden;

		padding: 0 16px;
	}


	/* Mobile navigation */

	.c8530-mobile-nav {
		display: block;
	}

	.c8530-mobile-nav a,
	.c8530-mobile-updates {
		display: flex;

		align-items: center;
		justify-content: space-between;

		width: 100%;
		min-height: 56px;

		padding: 0;

		border: 0;
		border-bottom: 1px solid rgba(15, 23, 42, 0.065);

		background: transparent;

		color: #17233c;

		font-family: inherit;
		font-size: 14px;
		font-weight: 550;

		text-align: left;
		text-decoration: none;

		cursor: pointer;
	}

	.c8530-mobile-nav a span:last-child,
	.c8530-mobile-updates span:last-child {
		color: rgba(23, 35, 60, 0.42);

		font-size: 16px;

		transition:
			transform 0.25s ease;
	}

	.c8530-mobile-nav a:hover span:last-child,
	.c8530-mobile-nav a:focus-visible span:last-child,
	.c8530-mobile-updates:hover span:last-child,
	.c8530-mobile-updates:focus-visible span:last-child {
		transform: translateX(3px);
	}


	/* Mobile language selector */

	.c8530-mobile-language {
		display: block;

		padding: 20px 0;

		border-bottom:
			1px solid
			rgba(15, 23, 42, 0.065);
	}

	.c8530-mobile-language-grid {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 7px;
	}

	.c8530-mobile-language-option {
		display: grid;

		grid-template-columns:
			28px
			1fr
			16px;

		align-items: center;

		min-height: 44px;

		padding: 0 11px;

		border:
			1px solid
			rgba(15, 23, 42, 0.06);

		border-radius: 12px;

		background:
			rgba(255, 255, 255, 0.32);

		color: #17233c;

		font-family: inherit;

		text-align: left;

		cursor: pointer;

		transition:
			background 0.18s ease,
			border-color 0.18s ease;
	}

	.c8530-mobile-language-option:hover,
	.c8530-mobile-language-option:focus-visible,
	.c8530-mobile-language-option.is-active {
		border-color:
			rgba(21, 159, 221, 0.15);

		background:
			rgba(255, 255, 255, 0.62);

		outline: none;
	}

	.c8530-mobile-language-option > span:first-child {
		color: #159fdd;

		font-size: 9px;
		font-weight: 700;

		letter-spacing: 0.05em;
	}

	.c8530-mobile-language-option strong {
		font-size: 10px;
		font-weight: 600;
	}


	/* Mobile local info */

	.c8530-mobile-info {
		display: flex;

		align-items: center;
		justify-content: space-between;

		gap: 20px;

		padding: 20px 0;
	}

	.c8530-mobile-label {
		display: block;

		margin-bottom: 7px;

		color: rgba(23, 35, 60, 0.32);

		font-size: 7px;
		font-weight: 650;

		letter-spacing: 1.25px;
	}

	.c8530-mobile-local strong {
		display: block;

		color: #17233c;

		font-size: 13px;
		font-weight: 600;
	}

	.c8530-mobile-local > span:last-child {
		display: block;

		margin-top: 3px;

		color: rgba(23, 35, 60, 0.42);

		font-size: 9px;

		font-variant-numeric: tabular-nums;
	}

	.c8530-mobile-weather {
		display: flex;

		align-items: center;

		gap: 7px;

		color: #17233c;

		font-size: 13px;
	}


	/* Mobile dashboard */

	.c8530-mobile-dashboard {
		display: flex;

		align-items: center;
		justify-content: space-between;

		width: 100%;

		margin-bottom: 16px;

		padding: 14px 15px;

		border: 1px solid rgba(255, 255, 255, 0.52);
		border-radius: 13px;

		background:
			linear-gradient(
				135deg,
				rgba(14, 151, 219, 0.96),
				rgba(36, 177, 230, 0.88)
			);

		color: #ffffff;

		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.35),
			0 7px 20px rgba(16, 155, 220, 0.16);

		font-size: 12px;
		font-weight: 600;

		text-decoration: none;
	}
}


/* =========================================================
   HEADER — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.c8530-header-shell {
		padding: 7px 8px;
	}

	.c8530-glass {
		min-height: 58px;

		padding-left: 14px;

		border-radius: 17px;
	}

	.c8530-brand img {
		width: 106px;
	}

	.c8530-menu-button {
		width: 38px;
		height: 38px;

		border-radius: 12px;
	}

	.c8530-mobile-menu {
		width: calc(100% - 16px);

		border-radius: 17px;
	}

	.c8530-mobile-language-grid {
		grid-template-columns: 1fr;
	}
}