/* -----------------------------------------------------------------------------
   [fcc_page_nav] — in-page section menu
   Positioning/stickiness is handled by the Elementor widget's own Sticky
   setting; these rules style the list itself.
   ----------------------------------------------------------------------------- */

/* Exposed to assistive tech only — standard clip-based visually-hidden
   utility, never shown on screen regardless of viewport. */
.fcc26-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.fcc26-page-toc {
	font-family: var( --e-global-typography-text-font-family ), sans-serif;

	border: 1px solid #E1ECE9;
    border-radius: 20px;
    padding: 20px 10px;
}

.fcc26-page-toc[hidden] {
	display: none;
}

.fcc26-page-toc__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
}

/* Overrides the site's checkmark-bullet default for ul/li (meant for body
   checklists, scoped to the page-content wrapper) — this is a nav, not a
   checklist. !important because that rule's specificity (.class + 2 tags)
   otherwise beats a same-or-lower-specificity override here. */
.fcc26-page-toc__item::before {
	content: none !important;
}

.fcc26-page-toc__item .fcc26-page-toc__link {
	position: relative;
	display: block;
	padding: 6px 12px 6px 20px;
	border-radius: 6px;
	color: var(--e-global-color-969937c);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fcc26-page-toc__item .fcc26-page-toc__link:hover,
.fcc26-page-toc__item .fcc26-page-toc__link:focus-visible {
	background-color: #E6ECF0;
	color: var(--e-global-color-primary);
}
.fcc26-page-toc__item .fcc26-page-toc__link.is-active {
	background-color: transparent;
}
.fcc26-page-toc__item .fcc26-page-toc__link.is-active::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 6px;
	height: 16px;
	transform: translateY(-50%);
	transition: background-color 0.15s ease;

	background-color: transparent;

	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fcc26-page-toc__item .fcc26-page-toc__link.is-active::before {
	background-color: currentColor;
}
.fcc26-page-toc__item .fcc26-page-toc__link.is-active:after {
    background: #E1ECE9;
    content: '';
    left: 20px;
    height: 1px;
    position: absolute;
    bottom: 1px;
    width: calc(100% - 34px);
} 

/* !important as a safeguard: this file already has one confirmed case
   (the FAB/back-to-top buttons) where Elementor's global kit button style
   won a specificity tie against a bare class selector, so these "hidden on
   desktop" rules shouldn't be left to win only by luck. */
.fcc26-page-toc__handle,
.fcc26-page-toc__close {
	display: none !important;
}

/* Hidden on desktop by default — shown only inside the max-width:1024px
   block below, where it becomes the drawer's trigger. */
.fcc26-page-toc-fab {
	display: none !important;
}

/* -----------------------------------------------------------------------------
   MOBILE/TABLET — the sidebar becomes a summon-able slide-up drawer instead
   of an always-visible list, so it never permanently takes up scroll space.
   Opened via .fcc26-page-toc-fab; mirrors the [fcc_blog_filters] drawer
   pattern (handle, close button, backdrop, same transform/transition).
   ----------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	/* bottom is the live-measured bottom-bar height, not 0 — the drawer's
	   own edge stops right above that bar so it can never visually cover
	   it, regardless of which one wins a z-index/stacking-context
	   comparison (the earlier grey-overlay bug showed that comparison
	   isn't always reliable across Elementor's nested stacking contexts). */
	.fcc26-page-toc {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var( --fcc-bottom-bar-height, 0px );
		z-index: 999998;
		max-height: 70vh;
		overflow-y: auto;
		border-radius: 1rem 1rem 0 0;
		background: #fff;
		box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.15 );
		/* translateY(100%) alone only accounts for the drawer's own height —
		   since it now rests bottom-bar-height above the viewport edge
		   (not flush with it), closing needs to travel that extra distance
		   too, or a sliver of the "closed" drawer peeks above the fold. */
		transform: translateY( calc( 100% + var( --fcc-bottom-bar-height, 0px ) ) );
		transition: transform 0.28s ease;
		padding: 1.5rem 1.25rem;
	}

	.fcc26-page-toc.is-open {
		transform: translateY( 0 );
	}

	.fcc26-page-toc__handle {
		display: block !important;
		width: 2.5rem;
		height: 4px;
		border-radius: 2px;
		background: #ccc;
		margin: 0 auto 1rem;
	}

	/* background/border-radius/padding are !important for the same reason
	   as the FAB/back-to-top buttons — Elementor's global kit button style
	   otherwise wins the specificity tie and turns this into a large
	   accent-colored circle instead of a plain text close control. */
	.fcc26-page-toc__close {
		display: block !important;
		position: absolute;
		top: 1rem;
		right: 1rem;
		border: none !important;
		background: none !important;
		border-radius: 14px !important;
		cursor: pointer;
		color: var( --e-global-color-text, #444 ) !important;
		padding: 10px 17px !important;
		line-height: 1;
	}

	.fcc26-page-toc__list {
		flex-direction: column;
		gap: 4px;
	}

	.fcc26-page-toc__item .fcc26-page-toc__link {
		font-size: 15px;
		padding: 10px 12px 10px 20px;
		background-color: transparent;
	}

	/* Floating trigger — opens the drawer above. Kept clear of the site's
	   fixed 3-button bottom bar via a live-measured CSS variable rather than
	   a hardcoded offset, since that bar's height isn't fixed. !important
	   because Elementor's global kit button style (".elementor-kit-20
	   button") has slightly higher specificity than a single class and
	   would otherwise override these colors. */
	.fcc26-page-toc-fab {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 16px;
		bottom: calc( var( --fcc-bottom-bar-height, 0px ) + 16px );
		width: 52px !important;
		height: 52px !important;
		padding: 0 !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
		border-radius: 50% !important;
		background: var( --e-global-color-accent, #DA8527 ) !important;
		color: #fff !important;
		border: none !important;
		box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 );
		z-index: 90;
		cursor: pointer;
	}

	.fcc26-page-toc-fab:is( :hover, :focus-visible ) {
		background-color: #DA8527BF !important;
	}

	/* Icon as a CSS mask on ::before rather than an inline <svg> in the
	   button — background-color: currentColor keeps it in sync with the
	   button's own color, and the button carries no content nodes, so its
	   accessible name comes solely from aria-label. */
	.fcc26-page-toc-fab::before {
		content: "";
		display: block;
		width: 22px;
		height: 22px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

/* Overlay behind the open drawer. Stops above the site's fixed 3-button
   bottom bar (bottom is the live-measured bar height, not 0) rather than
   covering the full viewport — those buttons must stay fully visible and
   usable, not dimmed, while the drawer is open. */
body.fcc26-toc-open::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: var( --fcc-bottom-bar-height, 0px );
	background: rgba( 0, 0, 0, 0.35 );
	z-index: 999996;
}

/* -----------------------------------------------------------------------------
   BACK TO TOP — same live bottom-bar clearance, shown once the page has
   scrolled far enough that "top" isn't already onscreen.
   ----------------------------------------------------------------------------- */

/* !important throughout because Elementor's global kit button style
   (".elementor-kit-20 button") has slightly higher specificity than a
   single class and would otherwise override these colors. */
.fcc26-back-to-top {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: fixed;
	right: 16px;
	bottom: calc( var( --fcc-bottom-bar-height, 0px ) + 16px );
	width: 52px !important;
	height: 52px !important;
	padding: 0 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var( --e-global-color-primary, #0B3A66 ) !important;
	border: 1px solid #E1ECE9 !important;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.18 );
	z-index: 999995;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fcc26-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

/* Icon as a CSS mask on ::before — see the matching comment on
   .fcc26-page-toc-fab::before above. */
.fcc26-back-to-top::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fcc26-back-to-top:is( :hover, :focus-visible ) {
	background-color: #E6ECF0 !important;
}

/* On mobile/tablet, stack above the jump-to-section FAB instead of sharing
   its slot: FAB's own height (52px) + a 12px gap. */
@media ( max-width: 1024px ) {
	.fcc26-back-to-top {
		bottom: calc( var( --fcc-bottom-bar-height, 0px ) + 16px + 52px + 12px );
	}
}



.fcc26-page-content__content ul {
    margin: 0;
	padding: 0 0 .9rem;
	list-style: none;
}
.fcc26-page-content__content ul:last-child {
    padding-bottom: 0;
}
.fcc26-page-content__content ul li {
    position: relative;
    /* padding-left: 40px; */ /* old: spacing for checkmark marker */
    padding-left: 14px;
    padding-bottom: 6px;
}
.fcc26-page-content__content ul li:last-child {
    padding-bottom: 0;
}

/* Old checkmark marker — replaced with bullet points per client request
.fcc26-page-content__content ul li::before {
    content: "";
    position: absolute;
    top: 0.15em;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: #0B3A66;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.4L9.4 16.8L19 7.2' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.4L9.4 16.8L19 7.2' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
*/

.fcc26-page-content__content ul li::before {
    content: "\25CF" / ""; /* ● black circle glyph, matching the /mental-health-conditions/ page */
    position: absolute;
    top: 0;
    left: 0;
    color: #021223; /* body text color used for the bullets on the reference page */
    font-size: 1em;
    line-height: inherit;
}

.fcc26-page-content__content > .e-con:not(:has(.e-con)) :is(.elementor-widget-heading, .elementor-widget-text-editor) {
    width: min(740px, 100%);
}
.fcc26-page-content__content > .e-con[data-settings*='"background_background":"classic"']:not(:has(.e-con)) :is(.elementor-widget-heading, .elementor-widget-text-editor) {
    width: min(700px, 100%);
}