/* ==================================================
   CALPE LOCAL — TOP BAR AND MAIN NAVIGATION
   ================================================== */

:root {
	--cl-ink: #102a2e;
	--cl-ink-light: #18383d;
	--cl-cream: #f6f1e8;
	--cl-white: #fffdf8;
	--cl-sea: #2e6f7e;
	--cl-terracotta: #d8764a;
	--cl-terracotta-dark: #b95e38;
	--cl-charcoal: #2d3333;
	--cl-muted: #687170;
	--cl-border: #d8d0c4;
	--cl-header-width: 1380px;
}

/* Hide the standard GeneratePress header and navigation. */
#masthead,
#site-navigation {
	display: none !important;
}

.cl-main-header button {
	font: inherit;
}

/* Top utility bar */
.cl-topbar {
	position: relative;
	z-index: 1001;
	background: var(--cl-ink);
	color: rgba(255, 255, 255, 0.82);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.cl-topbar__inner {
	width: min(calc(100% - 40px), var(--cl-header-width));
	min-height: 36px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.cl-topbar__message {
	display: flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
}

.cl-topbar__marker {
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	border-radius: 50%;
	background: var(--cl-terracotta);
}

.cl-topbar__links {
	display: flex;
	align-items: center;
	gap: 24px;
}

.cl-topbar__links a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 180ms ease;
}

.cl-topbar__links a:hover,
.cl-topbar__links a:focus-visible {
	color: #ffffff;
}

/* Main header */
.cl-main-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(246, 241, 232, 0.98);
	border-bottom: 1px solid var(--cl-border);
	box-shadow: 0 7px 24px rgba(16, 42, 46, 0.035);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.admin-bar .cl-main-header {
	top: 32px;
}

.cl-header__inner {
	width: min(calc(100% - 40px), var(--cl-header-width));
	min-height: 78px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 44px;
}

/* Logo */
.cl-brand {
	width: 220px;
	height: 58px;
	display: block;
	flex: 0 0 220px;
	background-image: url("../images/calpe-local-logo-header.webp");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	color: var(--cl-ink);
	text-decoration: none;
}

.cl-brand:hover,
.cl-brand:focus,
.cl-brand:visited {
	color: var(--cl-ink);
}

/* The existing Hook Element still contains the original text logo spans.
   Hide them visually while keeping the link's aria-label for accessibility. */
.cl-brand__calpe,
.cl-brand__dot,
.cl-brand__local {
	display: none;
}

/* Desktop navigation */
.cl-primary-nav {
	min-width: 0;
}

.cl-primary-nav .cl-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-primary-nav .cl-menu > li {
	position: relative;
	margin: 0;
	padding: 0;
}

.cl-primary-nav .cl-menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 78px;
	padding: 0;
	color: var(--cl-charcoal);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color 180ms ease;
}

.cl-primary-nav .cl-menu > li > a::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	height: 2px;
	background: var(--cl-terracotta);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.cl-primary-nav .cl-menu > li:hover > a,
.cl-primary-nav .cl-menu > li > a:focus-visible,
.cl-primary-nav .current-menu-item > a,
.cl-primary-nav .current-menu-ancestor > a {
	color: var(--cl-ink);
}

.cl-primary-nav .cl-menu > li:hover > a::before,
.cl-primary-nav .cl-menu > li > a:focus-visible::before,
.cl-primary-nav .current-menu-item > a::before,
.cl-primary-nav .current-menu-ancestor > a::before {
	transform: scaleX(1);
}

.cl-primary-nav .menu-item-has-children > a {
	gap: 7px;
}

.cl-primary-nav .menu-item-has-children > a::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.cl-primary-nav .sub-menu {
	position: absolute;
	top: calc(100% - 10px);
	left: -22px;
	z-index: 1005;
	width: 230px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--cl-white);
	border: 1px solid var(--cl-border);
	box-shadow: 0 18px 45px rgba(16, 42, 46, 0.13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.cl-primary-nav li:hover > .sub-menu,
.cl-primary-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cl-primary-nav .sub-menu li {
	margin: 0;
}

.cl-primary-nav .sub-menu a {
	display: block;
	padding: 11px 12px;
	color: var(--cl-charcoal);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.cl-primary-nav .sub-menu a:hover,
.cl-primary-nav .sub-menu a:focus-visible {
	background: var(--cl-cream);
	color: var(--cl-ink);
}

/* Header language selector */
.cl-language-switcher-source {
	display: none !important;
}

.cl-language-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 42px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1;
}

.cl-language-switcher select,
.cl-language-switcher .gt_selector {
	width: auto;
	min-width: 96px;
	max-width: 126px;
	height: 40px;
	margin: 0;
	padding: 0 30px 0 11px;
	border: 1px solid var(--cl-border);
	border-radius: 0;
	outline: 0;
	background-color: rgba(255, 253, 248, 0.72);
	color: var(--cl-charcoal);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 650;
	line-height: 40px;
	box-shadow: none;
	cursor: pointer;
}

.cl-language-switcher select:hover,
.cl-language-switcher select:focus-visible,
.cl-language-switcher .gt_selector:hover,
.cl-language-switcher .gt_selector:focus-visible {
	border-color: var(--cl-ink);
	background-color: var(--cl-white);
}

/* GTranslate's alternative dropdown and floating-widget layouts are reset so
   the shortcode behaves like a normal header control. */
.cl-language-switcher .switcher,
.cl-language-switcher .gt_float_switcher {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: 126px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

.cl-language-switcher .switcher .selected,
.cl-language-switcher .gt_float_switcher .gt-selected {
	background: transparent !important;
}

.cl-language-switcher .switcher .selected a,
.cl-language-switcher .gt_float_switcher .gt-selected .gt-current-lang {
	min-height: 40px !important;
	padding: 0 10px !important;
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	border: 1px solid var(--cl-border) !important;
	border-radius: 0 !important;
	background: rgba(255, 253, 248, 0.72) !important;
	color: var(--cl-charcoal) !important;
	font-size: 12px !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

.cl-language-switcher .switcher .option,
.cl-language-switcher .gt_float_switcher .gt_options {
	z-index: 1010 !important;
	max-height: 320px !important;
	border: 1px solid var(--cl-border) !important;
	border-top: 0 !important;
	border-radius: 0 !important;
	background: var(--cl-white) !important;
	box-shadow: 0 16px 35px rgba(16, 42, 46, 0.13) !important;
	overflow-y: auto !important;
}

.cl-language-switcher .switcher .option a,
.cl-language-switcher .gt_float_switcher .gt_options a {
	padding: 9px 10px !important;
	color: var(--cl-charcoal) !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
	text-decoration: none !important;
}

.cl-language-switcher img {
	max-width: 22px;
	height: auto;
	margin: 0 5px 0 0 !important;
}

/* Header actions */
.cl-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.cl-search-toggle,
.cl-menu-toggle {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--cl-ink);
	box-shadow: none;
	cursor: pointer;
}

.cl-search-toggle {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
}

.cl-search-toggle:hover,
.cl-search-toggle:focus-visible {
	border-color: var(--cl-border);
	background: rgba(255, 253, 248, 0.7);
}

.cl-search-toggle svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.cl-business-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 19px;
	background: var(--cl-terracotta);
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 180ms ease, transform 180ms ease;
}

.cl-business-button:hover,
.cl-business-button:focus-visible,
.cl-business-button:visited {
	color: #ffffff;
}

.cl-business-button:hover,
.cl-business-button:focus-visible {
	background: var(--cl-terracotta-dark);
	transform: translateY(-1px);
}

.cl-menu-toggle,
.cl-mobile-business-link {
	display: none;
}

/* Search panel */
.cl-search-panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	background: var(--cl-white);
	border-bottom: 1px solid var(--cl-border);
	box-shadow: 0 20px 35px rgba(16, 42, 46, 0.1);
}

.cl-search-panel[hidden] {
	display: none;
}

.cl-search-panel__inner {
	width: min(calc(100% - 40px), var(--cl-header-width));
	margin: 0 auto;
	padding: 24px 0;
}

.cl-search-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	max-width: 780px;
	margin: 0 auto;
	border: 1px solid var(--cl-border);
	background: var(--cl-cream);
}

.cl-search-form input[type="search"] {
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--cl-charcoal);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	box-shadow: none;
}

.cl-search-form input[type="search"]::placeholder {
	color: #78807e;
	opacity: 1;
}

.cl-search-form input[type="search"]:focus {
	box-shadow: inset 0 0 0 2px var(--cl-sea);
}

.cl-search-form button {
	min-width: 112px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	background: var(--cl-ink);
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
}

.cl-search-form button:hover,
.cl-search-form button:focus-visible {
	background: var(--cl-ink-light);
}

@media (max-width: 1050px) {
	.cl-language-switcher select,
	.cl-language-switcher .gt_selector {
		min-width: 88px;
		max-width: 102px;
	}

	.cl-language-switcher .switcher,
	.cl-language-switcher .gt_float_switcher {
		width: 102px !important;
	}
}

@media (max-width: 1050px) {
	.cl-brand {
		width: 190px;
		height: 50px;
		flex-basis: 190px;
	}

	.cl-header__inner {
		gap: 24px;
	}

	.cl-primary-nav .cl-menu {
		gap: 17px;
	}

	.cl-primary-nav .cl-menu > li > a {
		font-size: 13px;
	}

	.cl-business-button {
		padding: 0 14px;
	}
}

@media (max-width: 900px) {
	.cl-topbar__inner,
	.cl-header__inner,
	.cl-search-panel__inner {
		width: min(calc(100% - 30px), var(--cl-header-width));
	}

	.cl-topbar__links a:nth-child(2),
	.cl-topbar__links a:nth-child(3) {
		display: none;
	}

	.cl-header__inner {
		position: relative;
		min-height: 68px;
		display: flex;
		gap: 14px;
	}

	.cl-brand {
		width: 178px;
		height: 46px;
		flex: 0 0 178px;
		margin-right: auto;
	}

	.cl-business-button {
		display: none;
	}

	.cl-menu-toggle {
		width: 42px;
		height: 42px;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		border: 1px solid transparent;
	}

	.cl-menu-toggle:hover,
	.cl-menu-toggle:focus-visible {
		border-color: var(--cl-border);
		background: rgba(255, 253, 248, 0.7);
	}

	.cl-menu-toggle span {
		display: block;
		width: 21px;
		height: 1.5px;
		background: currentColor;
		transition: transform 180ms ease, opacity 180ms ease;
	}

	.cl-menu-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(6.5px) rotate(45deg);
	}

	.cl-menu-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.cl-menu-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-6.5px) rotate(-45deg);
	}

	.cl-primary-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		background: var(--cl-white);
		border-top: 1px solid var(--cl-border);
		border-bottom: 1px solid var(--cl-border);
		box-shadow: 0 20px 35px rgba(16, 42, 46, 0.12);
	}

	.cl-primary-nav.is-open {
		display: block;
	}

	.cl-primary-nav .cl-menu {
		width: min(calc(100% - 30px), var(--cl-header-width));
		margin: 0 auto;
		padding: 10px 0;
		display: block;
	}

	.cl-primary-nav .cl-menu > li {
		border-bottom: 1px solid rgba(216, 208, 196, 0.75);
	}

	.cl-primary-nav .cl-menu > li:last-child {
		border-bottom: 0;
	}

	.cl-primary-nav .cl-menu > li > a {
		justify-content: space-between;
		min-height: auto;
		padding: 16px 2px;
		font-size: 15px;
	}

	.cl-primary-nav .cl-menu > li > a::before {
		display: none;
	}

	.cl-primary-nav .sub-menu {
		position: static;
		width: auto;
		margin: 0;
		padding: 0 0 12px 14px;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.cl-primary-nav .sub-menu a {
		padding: 9px 0;
		color: var(--cl-muted);
		font-size: 13px;
	}

	.cl-mobile-business-link {
		width: min(calc(100% - 30px), var(--cl-header-width));
		min-height: 48px;
		margin: 8px auto 20px;
		padding: 0 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--cl-terracotta);
		color: #ffffff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: 750;
		text-decoration: none;
	}

	.cl-mobile-business-link:hover,
	.cl-mobile-business-link:focus,
	.cl-mobile-business-link:visited {
		color: #ffffff;
	}
}

@media (max-width: 782px) {
	.admin-bar .cl-main-header {
		top: 46px;
	}
}

@media (max-width: 520px) {
	.cl-language-switcher select,
	.cl-language-switcher .gt_selector {
		width: 76px;
		min-width: 76px;
		max-width: 76px;
		height: 38px;
		padding-right: 24px;
		padding-left: 8px;
		font-size: 11px;
	}

	.cl-language-switcher .switcher,
	.cl-language-switcher .gt_float_switcher {
		width: 58px !important;
	}

	.cl-language-switcher .switcher .selected a,
	.cl-language-switcher .gt_float_switcher .gt-selected .gt-current-lang {
		min-height: 38px !important;
		justify-content: center !important;
		padding: 0 8px !important;
		font-size: 0 !important;
	}

	.cl-language-switcher .switcher .selected a img,
	.cl-language-switcher .gt_float_switcher .gt-selected img {
		margin: 0 !important;
	}

	.cl-language-switcher .switcher .option,
	.cl-language-switcher .gt_float_switcher .gt_options {
		right: 0 !important;
		left: auto !important;
		width: 180px !important;
	}
}

@media (max-width: 520px) {
	.cl-topbar__inner {
		width: calc(100% - 24px);
		min-height: 34px;
	}

	.cl-topbar {
		font-size: 10px;
	}

	.cl-topbar__message {
		gap: 7px;
	}

	.cl-topbar__links {
		gap: 0;
	}

	.cl-topbar__links a {
		font-size: 10px;
	}

	.cl-header__inner,
	.cl-search-panel__inner {
		width: calc(100% - 24px);
	}

	.cl-brand {
		width: 150px;
		height: 39px;
		flex-basis: 150px;
	}

	.cl-header-actions {
		gap: 2px;
	}

	.cl-search-toggle,
	.cl-menu-toggle {
		width: 40px;
		height: 40px;
	}

	.cl-search-panel__inner {
		padding: 16px 0;
	}

	.cl-search-form {
		grid-template-columns: minmax(0, 1fr) 82px;
	}

	.cl-search-form input[type="search"] {
		height: 52px;
		padding: 0 14px;
		font-size: 14px;
	}

	.cl-search-form button {
		min-width: 82px;
		padding: 0 12px;
		font-size: 12px;
	}
}

/* ==================================================
   TOP BAR LANGUAGE LAYOUT — VERSION 1.0.50
   ================================================== */

/* The utility links stay centred while the GTranslate choices occupy a
   dedicated right-hand column. This keeps the main navigation focused on the
   guide sections and gives each header row one clear purpose. */
.cl-topbar__inner {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
	align-items: center;
	justify-content: normal;
	gap: 24px;
}

.cl-topbar__message {
	justify-self: start;
}

.cl-topbar__links {
	justify-self: center;
}

.cl-topbar__language {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	justify-self: end;
}

.cl-topbar__language .cl-language-switcher {
	min-height: 36px;
	color: rgba(255, 255, 255, 0.82);
}

/* GTranslate's flags-with-names mode outputs individual links rather than a
   dropdown. Keep those links compact and visually consistent with the utility
   navigation in the dark top bar. */
.cl-topbar__language .cl-language-switcher a.glink,
.cl-topbar__language .cl-language-switcher a[onclick*="doGTranslate"] {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	margin: 0 0 0 11px !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, 0.82) !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.cl-topbar__language .cl-language-switcher a.glink:first-of-type,
.cl-topbar__language .cl-language-switcher a[onclick*="doGTranslate"]:first-of-type {
	margin-left: 0 !important;
}

.cl-topbar__language .cl-language-switcher a.glink:hover,
.cl-topbar__language .cl-language-switcher a.glink:focus-visible,
.cl-topbar__language .cl-language-switcher a[onclick*="doGTranslate"]:hover,
.cl-topbar__language .cl-language-switcher a[onclick*="doGTranslate"]:focus-visible {
	color: #ffffff !important;
}

.cl-topbar__language .cl-language-switcher img {
	width: auto;
	max-width: 19px;
	max-height: 14px;
	margin: 0 !important;
}

/* Dropdown modes also inherit a darker, slimmer top-bar treatment. */
.cl-topbar__language .cl-language-switcher select,
.cl-topbar__language .cl-language-switcher .gt_selector {
	min-width: 94px;
	max-width: 122px;
	height: 28px;
	padding: 0 26px 0 9px;
	border-color: rgba(255, 255, 255, 0.24);
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-size: 11px;
	line-height: 28px;
}

.cl-topbar__language .cl-language-switcher .switcher,
.cl-topbar__language .cl-language-switcher .gt_float_switcher {
	width: 112px !important;
}

.cl-topbar__language .cl-language-switcher .switcher .selected a,
.cl-topbar__language .cl-language-switcher .gt_float_switcher .gt-selected .gt-current-lang {
	min-height: 28px !important;
	padding: 0 8px !important;
	border-color: rgba(255, 255, 255, 0.24) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	font-size: 11px !important;
}

@media (max-width: 1220px) {
	.cl-topbar__inner {
		grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
		gap: 18px;
	}

	.cl-topbar__language .cl-language-switcher a.glink,
	.cl-topbar__language .cl-language-switcher a[onclick*="doGTranslate"] {
		gap: 0;
		margin-left: 8px !important;
		font-size: 0 !important;
	}
}

@media (max-width: 900px) {
	.cl-topbar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 14px;
	}

	.cl-topbar__links {
		display: none;
	}

	.cl-topbar__language {
		grid-column: 2;
	}
}

@media (max-width: 520px) {
	.cl-topbar__language .cl-language-switcher a.glink,
	.cl-topbar__language .cl-language-switcher a[onclick*="doGTranslate"] {
		margin-left: 6px !important;
	}

	.cl-topbar__language .cl-language-switcher img {
		max-width: 17px;
		max-height: 12px;
	}

	.cl-topbar__language .cl-language-switcher select,
	.cl-topbar__language .cl-language-switcher .gt_selector {
		width: 72px;
		min-width: 72px;
		max-width: 72px;
		height: 28px;
		padding-right: 22px;
		padding-left: 7px;
		font-size: 10px;
	}
}

/* ==================================================
   STICKY BUSINESS CTA HEADER — VERSION 1.0.51
   ================================================== */

:root {
	--cl-topbar-sticky-height: 36px;
}

/* Keep the commercial message and the main navigation together while the
   visitor scrolls. The top bar occupies the first sticky row and the guide
   navigation sits directly beneath it. */
.cl-topbar {
	position: sticky;
	top: 0;
	z-index: 1002;
	min-height: var(--cl-topbar-sticky-height);
}

.cl-main-header {
	top: var(--cl-topbar-sticky-height);
	z-index: 1001;
}

.admin-bar .cl-topbar {
	top: 32px;
}

.admin-bar .cl-main-header {
	top: calc(32px + var(--cl-topbar-sticky-height));
}

/* The top bar is now the single desktop business conversion point. Keeping a
   second orange button beside the search icon would repeat the same action and
   make the main navigation feel crowded again. */
@media (min-width: 901px) {
	.cl-main-header .cl-business-button {
		display: none;
	}
}

.cl-topbar__links {
	gap: 0;
}

/* Hide the old Hook Element links before JavaScript replaces them so there is
   no brief About/Contact flash during page load. */
.cl-topbar__links > a:not(.cl-topbar__business-cta) {
	display: none;
}

.cl-topbar__business-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--cl-topbar-sticky-height);
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color 180ms ease;
}

.cl-topbar__business-cta:hover,
.cl-topbar__business-cta:focus-visible,
.cl-topbar__business-cta:visited {
	color: #ffffff;
}

.cl-topbar__business-arrow {
	position: relative;
	width: 23px;
	height: 23px;
	flex: 0 0 23px;
	border: 2px solid var(--cl-terracotta);
	border-radius: 50%;
	transition: background 180ms ease, transform 180ms ease;
}

.cl-topbar__business-arrow::before,
.cl-topbar__business-arrow::after {
	content: "";
	position: absolute;
}

.cl-topbar__business-arrow::before {
	width: 6px;
	height: 6px;
	top: 6px;
	left: 6px;
	border-top: 2px solid var(--cl-terracotta);
	border-right: 2px solid var(--cl-terracotta);
	transform: rotate(45deg);
}

.cl-topbar__business-arrow::after {
	width: 8px;
	height: 2px;
	top: 9px;
	left: 5px;
	background: var(--cl-terracotta);
}

.cl-topbar__business-cta:hover .cl-topbar__business-arrow,
.cl-topbar__business-cta:focus-visible .cl-topbar__business-arrow {
	background: rgba(216, 118, 74, 0.14);
	transform: translateX(2px);
}

.cl-topbar__business-short {
	display: none;
}

@media (max-width: 1220px) {
	.cl-topbar__inner {
		grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
	}

	.cl-topbar__business-cta {
		font-size: 11px;
	}
}

@media (max-width: 900px) {
	.cl-topbar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.cl-topbar__message {
		display: none;
	}

	.cl-topbar__links {
		display: flex;
		justify-self: start;
	}

	.cl-topbar__language {
		grid-column: 2;
	}

	.cl-topbar__business-full {
		display: none;
	}

	.cl-topbar__business-short {
		display: inline;
	}
}

@media (max-width: 782px) {
	.admin-bar .cl-topbar {
		top: 46px;
	}

	.admin-bar .cl-main-header {
		top: calc(46px + var(--cl-topbar-sticky-height));
	}
}

@media (max-width: 520px) {
	.cl-topbar__inner {
		min-height: var(--cl-topbar-sticky-height);
		gap: 10px;
	}

	.cl-topbar__business-cta {
		gap: 7px;
		font-size: 10px;
		letter-spacing: 0;
	}

	.cl-topbar__business-arrow {
		width: 20px;
		height: 20px;
		flex-basis: 20px;
	}

	.cl-topbar__business-arrow::before {
		top: 5px;
		left: 5px;
	}

	.cl-topbar__business-arrow::after {
		top: 8px;
		left: 4px;
	}
}

@media (max-width: 390px) {
	.cl-topbar__business-short {
		font-size: 0;
	}

	.cl-topbar__business-short::after {
		content: "Advertise";
		font-size: 10px;
	}
}


/* ==================================================
   RIGHT-ALIGNED MAIN NAVIGATION — VERSION 1.0.52
   ================================================== */

/* With the commercial action now living in the sticky top bar, the guide
   navigation can return to the right side of the main header. The search icon
   remains the final action at the far edge. */
@media (min-width: 901px) {
	.cl-header__inner {
		gap: 28px;
	}

	.cl-primary-nav {
		width: 100%;
		justify-self: end;
	}

	.cl-primary-nav .cl-menu {
		justify-content: flex-end;
	}
}