/* ==========================================================================
   Anchor Menu — Sticky Section Navigation (HYBRID)
   File: anchor-menu.css

   Desktop (>= 768px): native CSS position: sticky.
   Mobile  (<  768px): JS-driven position: fixed (set inline by anchor-menu.js,
                       which also reparents the bar to <body> so a transformed
                       or overflow-clipping ancestor can't break it).
   ========================================================================== */

.react-post-template .pbcb-anchor-menu {
	--pbcb-anchor-offset: 12px;

	position: relative;
	z-index: 999;
	overflow-anchor: none;

	margin: 32px 0;
	padding: 10px;

	background: rgba( 255, 255, 255, .92 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );

	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .08 );
}

/* -----------------------------------------------------------------
   DESKTOP: native sticky. top follows the live header offset that
   the JS writes into --pbcb-anchor-offset.
   ----------------------------------------------------------------- */
@media ( min-width: 768px ) {
	.react-post-template .pbcb-anchor-menu {
		position: sticky;
		top: var( --pbcb-anchor-offset, 12px );
	}
}

/* -----------------------------------------------------------------
   MOBILE: JS adds .pbcb-anchor-fixed and sets position/top/left/width
   inline. This rule only supplies the "pinned" shadow. Do NOT put
   position here — the JS owns it so it survives any CSS scope.
   ----------------------------------------------------------------- */
@media ( max-width: 767px ) {
	.react-post-template .pbcb-anchor-menu.pbcb-anchor-fixed {
		box-shadow: 0 10px 26px rgba( 0, 0, 0, .14 );
	}
}

.react-post-template .pbcb-anchor-placeholder { display: none; overflow-anchor: none; }

.react-post-template .pbcb-anchor-track {
	display: flex;
	gap: 10px;
	align-items: center;

	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;

	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;

	mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc( 100% - 16px ), transparent 100% );
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc( 100% - 16px ), transparent 100% );
}
.react-post-template .pbcb-anchor-track::-webkit-scrollbar { display: none; }

.react-post-template .pbcb-pill {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid transparent;

	background: #f3f5f7;
	color: #1f2937;

	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;

	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.react-post-template .pbcb-pill:hover,
.react-post-template .pbcb-pill:focus-visible {
	background: #eaf3ff;
	color: #005baa;
	outline: none;
}

.react-post-template .pbcb-pill:active { transform: scale( .97 ); }

.react-post-template .pbcb-pill.active {
	background: #005baa;
	color: #fff;
	box-shadow: 0 4px 10px rgba( 0, 91, 170, .25 );
}

/* When the bar is reparented to <body> on mobile it is no longer a
   descendant of .react-post-template, so restate the visuals it needs
   while pinned. */
body > .pbcb-anchor-menu.pbcb-anchor-fixed {
	z-index: 999;
	padding: 8px;
	background: rgba( 255, 255, 255, .92 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba( 0, 0, 0, .14 );
	box-sizing: border-box;
}
body > .pbcb-anchor-menu.pbcb-anchor-fixed .pbcb-anchor-track {
	display: flex;
	gap: 10px;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc( 100% - 16px ), transparent 100% );
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc( 100% - 16px ), transparent 100% );
}
body > .pbcb-anchor-menu.pbcb-anchor-fixed .pbcb-anchor-track::-webkit-scrollbar { display: none; }
body > .pbcb-anchor-menu.pbcb-anchor-fixed .pbcb-pill {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: #f3f5f7;
	color: #1f2937;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}
body > .pbcb-anchor-menu.pbcb-anchor-fixed .pbcb-pill.active {
	background: #005baa;
	color: #fff;
	box-shadow: 0 4px 10px rgba( 0, 91, 170, .25 );
}

:target { scroll-margin-top: 100px; }

@media ( max-width: 600px ) {
	.react-post-template .pbcb-anchor-menu {
		margin: 20px 0;
		padding: 8px;
		border-radius: 12px;
	}
	.react-post-template .pbcb-pill {
		padding: 9px 16px;
		font-size: 14px;
	}
}