/* =========================================================
   KP HCC Section Navigator — styles
   Scoped entirely under .kp-page-nav-wrapper / .kp-nav-section
   to avoid leaking into or colliding with Divi's own styles.
   ========================================================= */

.kp-page-nav-wrapper,
.kp-page-nav-wrapper * {
	box-sizing: border-box;
}

/* Shared design tokens */
.kp-page-nav-wrapper {
	--kpnav-bg: #ffffff;
	--kpnav-border: #e5e7eb;
	--kpnav-text: #374151;
	--kpnav-text-muted: #6b7280;
	--kpnav-accent: #01411C;      /* KP HCC / KP government green — replace with exact hex from Divi Theme Customizer > Accent Color if it differs */
	--kpnav-accent-bg: #e6f0ea;
	--kpnav-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
	--kpnav-radius: 12px;
	font-family: inherit;
	z-index: 9999;
}

/* ---------- Header / toggle button (always visible) ---------- */
.kp-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 13px 16px;
	background: var(--kpnav-accent-bg);
	border: none;
	border-bottom: 1px solid var(--kpnav-border);
	color: var(--kpnav-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.kp-nav-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.kp-nav-toggle-list-icon {
	flex-shrink: 0;
	opacity: 0.85;
}

.kp-nav-toggle-icon {
	transition: transform 0.2s ease;
	flex-shrink: 0;
	opacity: 0.7;
}

.kp-page-nav-wrapper[data-open="false"] .kp-nav-toggle-icon {
	transform: rotate(-90deg);
}

/* ---------- Nav shell ---------- */
.kp-page-nav {
	background: var(--kpnav-bg);
	border: 1px solid var(--kpnav-border);
	border-radius: var(--kpnav-radius);
	box-shadow: var(--kpnav-shadow);
	overflow: hidden;
}

.kp-page-nav-list,
.kp-page-nav-list li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.kp-page-nav-list {
	margin: 0;
	padding: 8px 6px;
	max-height: 65vh;
	overflow-y: auto;
}

.kp-page-nav-list li {
	margin: 0;
	padding: 0;
}

.kp-page-nav-list a {
	display: block;
	padding: 10px 14px;
	margin: 1px 0;
	border-radius: 8px;
	color: var(--kpnav-text);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	border-left: 3px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.kp-page-nav-list a:hover,
.kp-page-nav-list a:focus-visible {
	background: var(--kpnav-accent-bg);
	color: var(--kpnav-accent);
	outline: none;
}

.kp-page-nav-list a.is-active {
	background: var(--kpnav-accent-bg);
	color: var(--kpnav-accent);
	border-left-color: var(--kpnav-accent);
	font-weight: 600;
}

/* Cross-page links (kp_nav_link) get a small arrow so they read
   differently from in-page jump links. */
.kp-page-nav-list a.kp-nav-link-item::after {
	content: "→";
	float: right;
	margin-left: 10px;
	color: var(--kpnav-text-muted);
	font-size: 13px;
}

/* Empty state (no sections found yet / misconfigured page) */
.kp-page-nav-list:empty::after {
	content: "";
}

/* ---------- Section anchors: keep fixed elements from covering the target ---------- */
.kp-nav-section {
	scroll-margin-top: 90px;
}

/* Collapse works the same on desktop and mobile once "open" is toggled */
.kp-page-nav-wrapper[data-collapse="yes"][data-open="false"] .kp-page-nav {
	display: none;
}

/* =========================================================
   DESKTOP — vertical floating sidebar, pinned to the left
   ========================================================= */
/* =========================================================
   DESKTOP — sticky sidebar, meant to sit in a narrow column
   next to your content (e.g. a Divi "Specialty Section" with
   a sidebar layout: narrow column + wide column). This sticks
   only within its own column's height — it will never float
   over your site header or overlap unrelated content.
   ========================================================= */
@media (min-width: 993px) {

	.kp-page-nav-wrapper {
		position: sticky;
		top: 110px; /* adjust to sit just below your site header + admin bar height */
		width: 100%;
		max-width: 100%;
		align-self: start;
	}

	.kp-page-nav-wrapper[data-sticky="no"] {
		position: static;
	}
}

/* =========================================================
   TABLET / MOBILE — horizontal sticky bar along the top
   ========================================================= */
@media (max-width: 992px) {

	.kp-page-nav-wrapper {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		margin: 0 0 20px 0;
	}

	.kp-page-nav-list {
		display: flex;
		flex-direction: row;
		gap: 4px;
		max-height: none;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.kp-page-nav-list a {
		white-space: nowrap;
		border-left: none;
		border-bottom: 3px solid transparent;
	}

	.kp-page-nav-list a.is-active {
		border-left-color: transparent;
		border-bottom-color: var(--kpnav-accent);
	}

	.kp-nav-section {
		scroll-margin-top: 130px;
	}
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}
}