.sheen-anchor-menu {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 24px;
}

/* Horizontal Navigation Bar style */
.sheen-anchor-menu--horizontal-bar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	scrollbar-width: none; /* Firefox */
	justify-content: center;
	align-items: center;
	gap: 32px;
	background-color: #ffffff;
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	padding: 10px 24px;
	margin-bottom: 32px;
}

.sheen-anchor-menu--horizontal-bar::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}
	


/* Override child items inside horizontal bar style */
.sheen-anchor-menu--horizontal-bar .sheen-anchor-item {
	display: inline-flex;
	padding: 6px 14px !important;
	border: none;
	background-color: transparent !important;
	color: #334155 !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	transition: all 0.2s ease;
}

.sheen-anchor-menu--horizontal-bar .sheen-anchor-item:hover {
	color: #1a2d42 !important;
	background-color: #fef08a !important; /* Soft Yellow Hover Pill */
	border-radius: 6px !important;
}

.sheen-anchor-menu--horizontal-bar .sheen-anchor-item.is-active,
.sheen-anchor-menu--horizontal-bar .sheen-anchor-item.active {
	color: #1a2d42 !important;
	background-color: #f4c243 !important; /* Solid UGM Yellow Active Pill */
	font-weight: 600 !important;
	border-radius: 6px !important;
}

/* Hide chevron arrows inside horizontal bar style */
.sheen-anchor-menu--horizontal-bar .sheen-anchor-chevron {
	display: none !important;
}

@media (max-width: 768px) {
	.sheen-anchor-menu--horizontal-bar {
		gap: 16px;
		padding: 14px 16px;
	}
	.sheen-anchor-menu--horizontal-bar .sheen-anchor-item {
		font-size: 13px;
	}
}

/* Gutenberg Editor Specific layout styling for horizontal display style */
.sheen-anchor-menu--horizontal-bar .block-editor-block-list__layout {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 32px !important;
}

.sheen-anchor-menu--horizontal-bar .block-editor-block-list__layout .wp-block {
	margin: 0 !important;
}

/* Prevent the Gutenberg 'Add Block' appender from taking 100% width and breaking flex centering */
.sheen-anchor-menu--horizontal-bar .block-editor-block-list__layout > .block-list-appender,
.sheen-anchor-menu--horizontal-bar .block-editor-block-list__layout > .block-editor-button-block-appender {
	width: auto !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
}

/* Sticky capability styling */
.sheen-anchor-menu--sticky {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: var(--sheen-header-bottom, 80px) !important;
	z-index: 100 !important;
	align-self: flex-start;
}


/* Ensure common block wrappers don't clip sticky items */
#page, #content, .site-inner, .site-content, .content-area,
.site-main, .entry-content, .post-content, .wp-block-columns,
.wp-block-column, .sheen-flex-item, .wp-block-group,
.wp-block-group__inner-container {
	overflow: visible !important;
}

/* 
 * CRITICAL FIX: If the anchor menu is the ONLY block inside a Column, 
 * the Column height is identical to the menu, preventing it from sticking 
 * to the rest of the page. By making the WRAPPER sticky as well, we bypass this. 
 */
.wp-block-column:has(> .sheen-anchor-menu--sticky),
.wp-block-columns:has(> .wp-block-column > .sheen-anchor-menu--sticky),
.wp-block-group:has(> .wp-block-group__inner-container > .sheen-anchor-menu--sticky) {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: var(--sheen-header-bottom, 80px) !important;
	z-index: 99 !important;
}


/* Swipeable horizontal scrolling on mobile */
@media (max-width: 768px) {
	.sheen-anchor-menu--horizontal-bar {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		justify-content: flex-start !important;
		white-space: nowrap !important;
		scrollbar-width: none; /* Firefox */
	}
	.sheen-anchor-menu--horizontal-bar::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}
}

/* Disable sticky positioning in the block editor canvas */
.editor-styles-wrapper .sheen-anchor-menu--sticky,
.sheen-anchor-menu-editor.sheen-anchor-menu--sticky,
.editor-styles-wrapper .wp-block-column:has(> .sheen-anchor-menu--sticky),
.editor-styles-wrapper .wp-block-columns:has(> .wp-block-column > .sheen-anchor-menu--sticky) {
	position: static !important;
}

/* Full-bleed: break out of the content container like the Full Width block.
   Bar band spans the viewport; items stay centered. */
.sheen-anchor-menu--horizontal-bar {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
@media (max-width: 1439px) {
	.sheen-anchor-menu--horizontal-bar {
		width: auto !important;
		max-width: none !important;
		margin-left: -20px !important;
		margin-right: -20px !important;
	}
}
@media (max-width: 768px) {
	.sheen-anchor-menu--horizontal-bar {
		margin-left: -16px !important;
		margin-right: -16px !important;
	}
}
/* Keep the side-rail usage (inside a flex item) container-bound */
.sheen-flex-item .sheen-anchor-menu--horizontal-bar,
.sheen-flex .sheen-anchor-menu--horizontal-bar {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}