/* Fix weird interaction with text not having access to my fun indiana jones font */
:where(h1) {
	margin-top: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}

:where(h1, h2) {
	text-shadow: var(--shadow-lg);
	color: var(--color-primary);
}

/* Sticky Settings */
.sticky-page {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: var(--spacing-lg);
	padding-block: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.sticky-section {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.sticky-header {
	position: sticky;
	top: 0; /* required offset for sticky to work */
	z-index: 1;
	background: var(--color-surface);
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--accent-300);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.sticky-header h2 {
	margin: 0;
	text-shadow: var(--shadow-sm);
	color: var(--color-primary);
}

.sticky-header p {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* Intentional Bug and Repair
	Since I was supposed to intentionally introduce an overflow bug by adding overflow hidden, I did it here.
	This breaks the sticky position because sticky elements can't have an ancestor with overflow other than overflow: visible between them and the container your scrolling in.
	The fix was to move the overflow-hidden into .section-body instead, so the header is no longer inside an overflowing ancestor.
*/
.section-shell {
	border-radius: var(--radius-lg);
	/* overflow: hidden;  this breaks the sticky */
}
.section-body {
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	overflow: hidden; /* This is the right place to put the sticky */
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}