/* Below-the-fold persisent buttons */

/* ========================
 * === WATCH ON YOUTUBE ===
 * ======================== */

.watch-on-youtube {
	position: fixed;
	bottom: 1.6rem;
	left: 1.6rem;

	background: var(--dso-orange-50);
	color: var(--dso-warm-gray-10);

	font-family: var(--dso-meta-font);
	font-weight: var(--dso-meta-weight);
	font-size: 0.9rem;

	border-radius: var(--br1);

	padding: 0.4rem 0.8rem;
	height: 2.4rem !important;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: 0 2px 8px var(--dso-cool-gray-90-25p);
	text-decoration: none;

	transition: transform 0.3s ease, opacity 0.3s ease;

	opacity: 0;
	pointer-events: none;
	z-index: 99;
}

.watch-on-youtube.visible {
	opacity: 0.9;
	pointer-events: auto;
}

.watch-on-youtube:hover {
	box-sizing: border-box;
	outline: 1px solid var(--dso-orange-50);
	background-color: var(--dso-warm-gray-10);

	transform: scale(1.05);
	opacity: 1;
}

/* ============================
 * === SCROLL-TO-TOP BUTTON ===
 * ============================ */

#ast-scroll-top.ast-scroll-top-icon {
	position: fixed;  /* Ensure it's anchored */
	bottom: 1.6rem;
	right: 1.6rem;

	background: var(--dso-orange-50);
	color: var(--dso-warm-gray-10);
  	border-radius: var(--br1) !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	max-width: 2.4rem;
	max-height: 2.4rem;
	box-shadow: 0 2px 8px var(--dso-cool-gray-90-25p);

	transition: transform 0.3s ease, opacity 0.3s ease;

	opacity: 0;
	pointer-events: none;
	z-index: 99;
}

#ast-scroll-top.ast-scroll-top-icon.visible {
	opacity: 0.9;
	pointer-events: auto;
}

#ast-scroll-top.ast-scroll-top-icon:hover {
 	outline: 1px solid var(--dso-orange-50);
	background-color: var(--ds-warm-gray-10) !important;
	color: var(--dso-orange-50);

	transform: scale(1.05);

	opacity: 1;
}

/* ============================
 * === SHARED FADE BEHAVIOR ===
 * ============================ */

.watch-on-youtube,
#ast-scroll-top.ast-scroll-top-icon {
	transition: transform 0.3s ease, opacity 0.3s ease;

	opacity: 0;
	pointer-events: none;
}

.watch-on-youtube.visible,
#ast-scroll-top.ast-scroll-top-icon.visible {
	opacity: 0.9;
	pointer-events: auto;
}

.watch-on-youtube:hover,
#ast-scroll-top.ast-scroll-top-icon:hover {
	opacity: 1;
}