/* Root shell: stores JS-managed offsets and keeps the block in the header stack. */
.entry-content > nav.ra-page-nav {
	--ra-page-nav-offset: 0px;
	--ra-page-nav-mobile-top: var(--space-10);
	--ra-page-nav-bg: var(--bg-blue-dark);
	--ra-page-nav-text: var(--color-white, #ffffff);
	--ra-page-nav-muted: rgba(247, 250, 252, 0.74);
	--ra-page-nav-border: var(--color-border-soft);
	--ra-page-nav-active: var(--bg-orange);
	position: sticky;
	top: var(--ra-page-nav-offset);
	width: 100%;
	color: var(--ra-page-nav-text);
	z-index: 9997;
	max-width: 100%
}

/* WordPress alignfull can be lost inside constrained templates, so force it here. */
.ra-page-nav.alignfull,
.wp-block-roofadvisor-page-section-nav.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Desktop bar: the root wrapper owns sticky positioning so it can stay pinned. */
.ra-page-nav__bar {
	position: relative;
	z-index: 9997;
	background: var(--ra-surface-muted);
	border-top: 1px solid var(--ra-page-nav-border);
	border-bottom: 1px solid var(--ra-page-nav-border);
	box-shadow: 0 var(--space-0-5) var(--space-2) rgba(0, 0, 0, 0.16);
	color: var(--ra-page-nav-text);
}

/* Docked state gives the nav a stronger edge once it has joined the fixed header. */
.ra-page-nav.is-docked .ra-page-nav__bar {
	box-shadow: 0 var(--space-1) var(--space-2) rgba(0, 0, 0, 0.2);
}

.ra-container.ra-page-nav__bar-inner {
    padding-top: var(--space-1);
}

.is-docked .ra-page-nav__bar-inner.ra-container,
.ra-page-nav.is-measuring-docked .ra-page-nav__bar-inner.ra-container {
    display: flex;
    align-items: center;
    grid-gap: var(--space-2);
}

/* Section labels are intentionally compact so links stay scannable. */
.ra-page-nav__label,
.ra-page-nav__panel-title,
.ra-page-nav__toggle-label {
	flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.ra-page-nav__label {
	color: var(--color-black);
    background: var(--bg-orange);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.ra-page-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ra-page-nav__item {
	margin: 0;
}

/* Links use explicit color values because this block often sits in dark headers. */
.ra-page-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--space-5);
	padding: 0;
	border-bottom: 3px solid transparent;
	color: var(--ra-text-body);
	font-size: var(--font-size-sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	margin-right: var(--space-2);
}

.ra-page-nav__link:hover,
.ra-page-nav__link:focus-visible,
.ra-page-nav__link.is-active {
	color: var(--ra-page-nav-active);
	border-bottom-color: var(--ra-page-nav-active);
}

.ra-page-nav__link:focus-visible,
.ra-page-nav__toggle:focus-visible,
.ra-page-nav__close:focus-visible {
	outline: 2px solid var(--ra-page-nav-active);
	outline-offset: 3px;
}

.ra-page-nav__mobile {
	display: none;
}

/* Compact mode: full list at rest, hamburger after the row docks when needed. */
.ra-page-nav.is-compact {
	min-height: var(--space-7);
}

.ra-page-nav.is-compact .ra-page-nav__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	pointer-events: none;
}

.ra-page-nav.is-compact .ra-page-nav__mobile {
	display: block;
}

.ra-page-nav.is-compact .ra-page-nav__toggle {
	position: fixed;
	top: var(--ra-page-nav-mobile-top);
	left: var(--space-1);
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	width: auto;
	min-width: var(--space-6);
	height: var(--space-6);
	padding: 0 var(--space-1-5);
	border: 1px solid var(--ra-page-nav-border);
	border-radius: var(--radius-sm);
	background: var(--ra-page-nav-bg);
	box-shadow: var(--box-shadow-mid);
	color: var(--ra-page-nav-text);
	cursor: pointer;
}

.ra-page-nav.is-compact .ra-page-nav__toggle-bars {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: var(--space-3);
	height: var(--space-3);
}

.ra-page-nav.is-compact .ra-page-nav__toggle-bars span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: var(--radius-circle);
	background: var(--ra-page-nav-active);
}

.ra-page-nav.is-compact .ra-page-nav__toggle-label {
	color: var(--ra-page-nav-text);
}

.ra-page-nav.is-compact .ra-page-nav__panel {
	position: fixed;
	top: calc(var(--ra-page-nav-mobile-top) + var(--space-7));
	left: var(--space-1);
	z-index: 9999;
	width: min(82vw, 360px);
	max-height: calc(100dvh - var(--ra-page-nav-mobile-top) - var(--space-9));
	overflow: auto;
	border: 1px solid var(--ra-page-nav-border);
	border-radius: var(--radius-sm);
	background: var(--ra-page-nav-bg);
	box-shadow: var(--box-shadow-close);
	color: var(--ra-page-nav-text);
}

.ra-page-nav.is-compact .ra-page-nav__panel[hidden] {
	display: none;
}

.ra-page-nav.is-compact .ra-page-nav__panel-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-1-5) var(--space-2);
	background: var(--ra-page-nav-bg);
	border-bottom: 1px solid var(--ra-page-nav-border);
}

.ra-page-nav.is-compact .ra-page-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-4);
	height: var(--space-4);
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ra-page-nav-text);
	font-size: var(--font-size-xl);
	line-height: 1;
	cursor: pointer;
}

.ra-page-nav.is-compact .ra-page-nav__list--mobile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.ra-page-nav.is-compact .ra-page-nav__list--mobile .ra-page-nav__link {
	display: flex;
	width: 100%;
	min-height: var(--space-6);
	padding: 0 var(--space-2);
	border-bottom: 1px solid var(--ra-page-nav-border);
	white-space: normal;
}

.ra-page-nav.is-compact .ra-page-nav__list--mobile .ra-page-nav__item:last-child .ra-page-nav__link {
	border-bottom: 0;
}

.ra-page-nav.is-compact .ra-page-nav__list--mobile .ra-page-nav__link.is-active {
	border-bottom-color: var(--ra-page-nav-border);
	box-shadow: inset 4px 0 0 var(--ra-page-nav-active);
}

/* Editor-only empty state from render.php when no RA Section anchors exist. */
.ra-page-nav--empty {
	padding: var(--space-2);
	border: 1px dashed var(--color-border-muted);
	color: var(--bg-blue);
	font-size: var(--font-size-sm);
}

@media (max-width: 781px) {
	/* Mobile keeps the full list in page flow until compact mode docks it. */
	.ra-page-nav {
		z-index: 9998;
	}

	.ra-page-nav__bar-inner {
		padding-left: var(--space-1);
		padding-right: var(--space-1);
	}
}