/* Semioticom anchor link and anchor menu system */

:root {
	--sem-anchor-header-gap: 8px;
	--sem-anchor-menu-height: 0px;
	--sem-anchor-menu-top: calc(var(--sem-header-height, 88px) + 12px);
	--sem-nav-backdrop-top: 0px;
	--sem-nav-backdrop-height: calc(var(--sem-header-height, 88px) + var(--sem-anchor-menu-height, 0px) + 20px);
}

.sem-section-anchor-marker {
	display: block;
	height: 0;
	position: relative;
	scroll-margin-top: calc(var(--sem-admin-bar-height, 0px) + var(--sem-header-height, 88px) + var(--sem-anchor-menu-height, 0px) + 28px);
}

/* Anchor IDs are shown in the WordPress editor metabox, not as frontend chips. */
.sem-anchor-chip {
	display: none !important;
}

.anchor-menu--hidden {
	display: none !important;
}

.anchor-menu--refresh {
	color: #ff7a00;
	font-family: inherit;
}

.anchor-menu--desktop_sticky {
	display: none;
}

.anchor-menu__eyebrow,
.anchor-menu__heading,
.anchor-menu__description {
	display: none;
}

.anchor-menu__inner {
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: flex;
	justify-content: center;
	padding: 0;
}

.anchor-menu__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.anchor-menu__item + .anchor-menu__item {
	margin-top: 0;
}

.anchor-menu__link {
	align-items: center;
	background: linear-gradient(180deg, rgba(235, 248, 251, 0.78) 0%, rgba(219, 239, 246, 0.66) 100%);
	border: 1px solid rgba(18, 51, 79, 0.14);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(8, 24, 44, 0.06);
	color: #12334f;
	display: inline-flex;
	font-size: clamp(11px, 0.78vw, 13px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	min-height: 32px;
	padding: 8px 15px;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(12px) saturate(1.18);
	backdrop-filter: blur(12px) saturate(1.18);
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.anchor-menu__link::after {
	content: none !important;
	display: none !important;
}

.anchor-menu__link:hover,
.anchor-menu__link:focus-visible {
	background: linear-gradient(180deg, rgba(218, 242, 247, 0.88) 0%, rgba(198, 228, 237, 0.78) 100%);
	border-color: rgba(18, 126, 119, 0.28);
	box-shadow: 0 12px 28px rgba(18, 126, 119, 0.10);
	color: #127e77;
	outline: none;
	text-decoration: none;
	transform: translateY(-1px);
}

.anchor-menu__link.is-active {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 245, 236, 0.76) 100%);
	border-color: rgba(255, 122, 0, 0.42);
	box-shadow: 0 14px 30px rgba(255, 122, 0, 0.14);
	color: #ff7a00;
}

.anchor-menu__link.is-active::after {
	content: none !important;
	display: none !important;
}

.anchor-menu__label {
	display: block;
}

.anchor-menu--inline {
	margin: var(--sem-section-gap-y-tight, 48px) auto;
	max-width: var(--sem-page-shell-width, min(96%, 1526px));
	width: 100%;
}


/* When the secondary anchor row is visible, the frosted header field must be
   visible as well. This prevents the anchor row from visually sitting directly
   on top of the Hero card. The height is still driven by measured header and
   anchor-row dimensions from anchor-menu.js. */

.sem-nav-frost-backdrop {
	background: rgba(238, 248, 252, 0.72);
	border-bottom: 1px solid rgba(126, 200, 244, 0.20);
	box-shadow: 0 18px 42px rgba(14, 39, 71, 0.08);
	-webkit-backdrop-filter: blur(18px) saturate(1.18);
	backdrop-filter: blur(18px) saturate(1.18);
	height: var(--sem-nav-backdrop-height);
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: var(--sem-nav-backdrop-top);
	transform: translateY(-8px);
	transition: opacity 180ms ease, transform 180ms ease;
	z-index: 54;
}

body.sem-anchor-ui-visible .sem-nav-frost-backdrop {
	opacity: 1;
	transform: translateY(0);
}

body.sem-anchor-ui-hidden .sem-nav-frost-backdrop {
	opacity: 0 !important;
	transform: translateY(-8px);
}

body.sem-anchor-ui-hidden .anchor-menu--refresh:not(.anchor-menu--hidden) {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

body.sem-anchor-ui-visible .anchor-menu--refresh:not(.anchor-menu--hidden) {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

@media (min-width: 1201px) {
	.anchor-menu--desktop_sticky {
		display: block;
		left: 50%;
		max-width: min(96vw, var(--sem-page-shell-width, 1526px));
		position: fixed;
		top: var(--sem-anchor-menu-top);
		transform: translateX(-50%);
		width: max-content;
		z-index: 72;
	}
}

@media (max-width: 1200.98px) {
	.anchor-menu--inline {
		display: none !important;
	}

	.anchor-menu--desktop_sticky {
		display: block;
	}
}


/* Robust top-row anchor menu placement. This targets all non-hidden anchor-menu modes
   because the editor may return display_mode values differently. */
@media (min-width: 1201px) {
	.anchor-menu--refresh:not(.anchor-menu--hidden) {
		display: block !important;
		left: 50% !important;
		max-width: min(96vw, var(--sem-page-shell-width, 1526px)) !important;
		position: fixed !important;
		top: var(--sem-anchor-menu-top) !important;
		transform: translateX(-50%) !important;
		width: max-content !important;
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
	z-index: 1002 !important;
	}
}

@media (max-width: 1200.98px) {
	.anchor-menu--refresh:not(.anchor-menu--hidden) {
		display: block !important;
		left: 50% !important;
		max-width: min(82vw, var(--sem-page-shell-width, 1526px)) !important;
		position: fixed !important;
		top: var(--sem-anchor-menu-top) !important;
		transform: translateX(-50%) !important;
		width: max-content !important;
		z-index: 1002 !important;
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
	}

	.anchor-menu__inner {
		max-width: 100%;
		overflow: hidden;
	}

	.anchor-menu__list {
		flex-wrap: nowrap;
		gap: 6px;
		justify-content: flex-start;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 1px 3px 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.anchor-menu__list::-webkit-scrollbar {
		display: none;
	}

	.anchor-menu__link {
		font-size: 10px;
		min-height: 27px;
		padding: 7px 10px;
	}

	.sem-nav-frost-backdrop {
		box-shadow: 0 14px 32px rgba(14, 39, 71, 0.08);
	}
}