@layer framework,
components,
layout;

@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/open-props.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/gray-hsl.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/borders.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.16/normalize.light.min.css') layer(framework.open-props);
@import url('https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css') layer(components.leaflet);
@import url('https://cdn.jsdelivr.net/npm/unpoly@3.7.3/unpoly.min.css') layer(components.unpoly);
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css') layer(components.swiper);
@import url('https://fonts.googleapis.com/css?family=Overpass') layer(layout);


/**
 * Reset some stuff from open props that interferes with kint
 */
.kint-rich * {
	font-size: unset;
	max-inline-size: unset;
}

:where(svg:not([fill])) {
	fill: currentColor;
}


/*
 * Base Styles
 */

html {
	scroll-padding-top: 6rem;
	scroll-behavior: smooth;
	overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
	overflow-x: clip; /* Better than hidden, prevents scrollbar */
	padding-bottom: 30vh;
}

@media (min-width: 768px) {
	body {
		padding-bottom: 0vh;
	}
}

/* Prevent any direct children from overflowing */
body > * {
	max-width: 100vw;
	/* overflow-x: clip; */
}


.offline-banner {
	display: none;
	font-size: 70%;
}

.offline .hero-figure {
	filter: grayscale(1);
}

.offline .offline-banner {
	display: block;
}

.d-none {
	display: none !important;
}

:where(:not(pre)>code)
{
	background-color: transparent;
	color: var(--green-8);
	text-decoration: none;
}


h1 {
	font-size: clamp(var(--font-size-5), 6cqw, var(--font-size-4));
	font-weight: var(--font-weight-7);

	.heading-permalink {
		display: none;
	}
}

h1+small {
	margin-left: var(--size-3);
	margin-right: var(--size-3);
}

h2 {
	font-size: clamp(var(--font-size-3), 4cqw, var(--font-size-3));
	font-weight: var(--font-weight-6);
}

h3 {
	font-size: clamp(var(--font-size-2), 3cqw, var(--font-size-2));
	font-weight: var(--font-weight-5);
}

/* Ensure all media elements never overflow */
.post-body img,
.img-fluid,
img,
video,
iframe,
embed,
object,
svg {
	max-width: 100%;
	height: auto;
}

/* Ensure figures and pre elements don't overflow */
figure,
pre,
code {
	max-width: 100%;
	overflow-x: auto;
	overflow-wrap: break-word;
}


.invisible {
	display: none;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; 
}


.heading-permalink {
	font-size: .5em;
	margin-left: 10px;
	text-decoration: none;
	color: transparent;
}

*:hover>.heading-permalink,
.heading-permalink:hover {
	text-decoration: none;
	color: #eee;
}

.u-photo.rounded-circle {
	inline-size: var(--size-5);
	aspect-ratio: var(--ratio-square);
	border-radius: var(--radius-round);
	object-fit: cover;
}

hr.spacer {
	background-color: var(--surface-3);
	height: var(--border-size-0);
	margin-block: var(--size-fluid-3);
}

.markdown>*+* {
	margin-block-start: var(--space-flow, 1em);
}

/*
 * Link color schema (overrides normalize; green + gray)
 */
:root {
	--link: var(--green-7);
	--link-visited: var(--green-6);
	--link-hover: var(--green-8);
}

a[href] {
	color: var(--link);
}

a[href]:visited {
	color: var(--link-visited);
}

a[href]:hover {
	color: var(--link-hover);
}

/**
 * Layout
 */

/* Mobile-first: Simple single column layout */
.grid-container {
	container-type: inline-size;
	container-name: main-content;
	display: grid;
	
	/* Default (mobile) - simple single column with gutters using Open Props */
	grid-template-columns:
		[full-start] var(--size-3)
		[content-start] 1fr
		[content-end] var(--size-3)
		[full-end];
}

.grid-container > * {
	grid-column: content-start / content-end;
}

/* Desktop layout: Use media query for viewport-based breakpoint */
/* This ensures proper centering even when grid-container is constrained by sidebar */
/* @media (--md-n-above) { */
@media (min-width: 768px) {
	.grid-container {
		grid-template-columns:
			[full-start] 5vw
			[margin-start] 1fr
			[wide-start] 1fr
			[outdent-start] 1fr
			[content-start] minmax(auto, var(--max-width, 36rem))
			[content-end] 1fr
			[outdent-end] 1fr
			[wide-end] 1fr
			[margin-end] 5vw
			[full-end];
	}
	
	/* Wide elements - only apply when grid has wide columns */
	main > .wide, 
	main > pre, 
	main > figure, 
	main > [class*="language-"], 
	.wide {
		grid-column: wide-start / wide-end;
	}

	.outdent {
		grid-column: outdent-start / outdent-end;
	}
}


.page-header {
	container-type: inline-size;
	container-name: header;
	display: grid;
	gap: var(--size-4);
	margin-block-start: var(--size-8);
	margin-block-end: var(--size-8);
	text-align: center;
	padding-inline: var(--size-3); /* Add padding for mobile to prevent edge overflow */

	.header-title {
		font-size: var(--font-size-3);
        font-weight: var(--font-weight-5);
        text-transform: uppercase;
	}

	.header-subtitle {
		color: var(--gray-6);
		font-family: var(--font-mono);
		font-weight: var(--font-weight-3);
	}
}

/* Mobile-first: Compact navigation that wraps */
.main-nav .list-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* Allow wrapping on small screens */
	gap: var(--size-2); /* Smaller gap on mobile */
	justify-content: center;
}

.main-nav .list-group .list-group-item {
	width: auto; /* Let content determine width */
	min-width: 2.5rem; /* Minimum touch target */
	padding: var(--size-1) var(--size-2);
	text-align: center;
	font-size: var(--font-size-0);
	color: var(--gray-7);
	text-decoration: none;
	background-color: transparent;
	border-radius: var(--radius-2);

	svg,
	img {
		margin: auto;
		width: 16px;
		height: 16px;
	}
}

.main-nav .list-group .list-group-item:hover {
	color: var(--gray-8);
	background-color: var(--surface-2);
	text-decoration: none;
}

.main-nav .list-group .list-group-item.active {
	color: var(--green-7);
	background-color: var(--surface-2);
	text-decoration: none;
}

.main-nav .list-group .list-group-item:focus-visible {
	outline: var(--border-size-2) solid var(--link);
	outline-offset: 2px;
}

/* When header container has enough space (400px+), use fixed width items */
@container header (min-width: 400px) {
	.main-nav .list-group {
		gap: var(--size-4); /* Larger gap when space allows */
	}
	
	.main-nav .list-group .list-group-item {
		width: 4rem; /* Fixed width when space allows */
		font-size: var(--font-size-1);
	}
}

.page-footer {
	margin-top: var(--size-8);
	margin-bottom: var(--size-8);

	display: flex;
	flex-direction: column;
	gap: var(--size-3);

	.legal {
		font-size: var(--font-size-0);
	}
}

.page-footer a {
	color: var(--gray-6);
	text-decoration: none;
}

.page-footer a:hover {
	color: var(--gray-8);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-footer .legal a {
	color: var(--gray-6);
}

.page-footer .legal a:hover {
	color: var(--gray-8);
	text-decoration: underline;
}

main>h1:not(.page-title h1),
.page-title {
	display: flex;
	align-items: center;
	margin-bottom: var(--size-4);
	padding-bottom: var(--size-6);
	border-bottom: var(--border-size-1) solid var(--gray-3);

	div {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin-left: auto;
	}
}

main>h1:is(.page-title h1),
.page-title:has(> div) {
	@media (max-width: 767.98px) {
		flex-wrap: wrap;
		border-bottom: none;
		padding-bottom: 0;

		&>div {
			flex-basis: 100%;
			flex-grow: 1;
			margin-left: 0;
			padding-top: var(--size-6);
			margin-top: var(--size-4);
			border-top: var(--border-size-1) solid var(--gray-3);
			&>input {
				width: 100%;
			}
		}
	}
}


.stretched-link::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: "";
}

.post-listing>.post-year {
	font-size: var(--font-size-3);
	font-weight: var(--font-weight-5);
	color: var(--gray-5);
	margin-top: var(--size-4);
	margin-bottom: var(--size-4);
}

.post-listing>.post-year:first-of-type {
	margin-top: 0;
}

.post-listing>.post-listing-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--size-4);
	margin-top: var(--size-2);
	position: relative;

	a {
		display: block;
	}

	time {
		text-wrap: nowrap;
		color: var(--gray-5);
	}
}

.post-listing .post-listing-item .post-title-link {
	color: var(--gray-8);
	text-decoration: none;
}

.post-listing .post-listing-item .post-title-link:hover {
	color: var(--green-7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-microblog.post-listing {
	display: grid;
	gap: var(--size-10);
}

.page-footer-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-4);
	position: relative;

	background-color: var(--gray-1);
	padding: var(--size-3);

	img {
		inline-size: var(--size-5);
		aspect-ratio: var(--ratio-square);
		border-radius: var(--radius-round);
		object-fit: cover;
	}
}

.page-footer-nav .pager {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: var(--size-4);

	&>div {
		flex: 1;
		position: relative;
	}

	div:last-child {
		text-align: right;
	}
}

.page-footer-nav .blog-back,
.page-footer-nav .blog-next {
	color: var(--gray-6);
	text-decoration: none;
}

.page-footer-nav .blog-back:hover,
.page-footer-nav .blog-next:hover {
	color: var(--gray-8);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Intro card: lead paragraph styled as a card */
.intro {
	font-family: var(--font-neo-grotesque); /* Roboto-style stack */
	font-size: var(--font-size-2);
	line-height: var(--font-lineheight-4);
	color: var(--gray-7);
	background-color: var(--gray-0);
	border: var(--border-size-1) solid var(--gray-2);
	border-radius: var(--radius-2);
	padding: var(--size-7);
	max-width: 650px;
	box-shadow: var(--shadow-2);
	background: white;
}

.intro b {
	font-weight: var(--font-weight-7);
	color: var(--gray-9);
}

.intro em {
	font-style: italic;
	color: var(--red-6);
}

.intro a {
	color: var(--blue-6);
	text-decoration: none;
	font-weight: var(--font-weight-5);
}

.intro a:hover {
	text-decoration: underline;
	color: var(--blue-7);
}

.content {
	display: grid;
	gap: var(--size-4);
	row-gap: var(--size-7);

	word-break: break-word;

	pre {
		background-color: var(--gray-1);
		padding: var(--size-3);
		max-inline-size: none;
	}

	pre code {
		background-color: transparent;
	}
}

.content a[href] {
	color: var(--link);
	text-decoration: underline;
	text-decoration-color: var(--green-3);
	text-underline-offset: 2px;
}

.content a[href]:visited {
	color: var(--link-visited);
	text-decoration-color: var(--green-3);
}

.content a[href]:hover {
	color: var(--link-hover);
	text-decoration-color: var(--green-5);
}

/* FAB - Floating Action Button with Video Popup */

.FAB {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 2;
	display: none;

	&.skype {
		display: block;
	}
}
/* @media (--md-n-above) { */
@media (min-width: 768px) {
	.FAB {
		right: 60px;
	}
}

/* Video window - hidden by default, shown when .skype class is active */
.FAB .video-window {
	display: none;
}

.FAB.skype .video-window {
	display: block;
	transition: all 1s;
}

.FAB.skype figure.html-video {
	margin-bottom: 0;
	display: inline-block;
	font-size: 0;
	overflow: hidden;
	position: relative;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid black;
	border-radius: 5px;
	box-shadow: var(--shadow-3);
	transition: all 1s;
}

.FAB.skype figure.html-video * {
	box-sizing: inherit;
}

/* Notification dot - flashing red indicator */
.FAB__notification-dot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	margin: 5px;
	background-color: var(--red-9);
	border-radius: var(--radius-round);
	box-shadow: var(--shadow-2);
	display: none;
}

.FAB.skype .FAB__notification-dot {
	display: block;
}

#visualization {
	margin-bottom: 1.5em;
}

/* Animation */

.FAB.skype .FAB__notification-dot {
	animation-name: flash;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

.FAB.skype figure.html-video {
	animation-name: bounceInUp;
	animation-duration: 1s;
	animation-fill-mode: both;
}

@keyframes flash {

	from,
	50%,
	to {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

.flash {
	animation-name: flash;
}

@keyframes bounceInUp {

	from,
	60%,
	75%,
	90%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	from {
		opacity: 0;
		transform: translate3d(0, 3000px, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(0, -20px, 0);
	}

	75% {
		transform: translate3d(0, 10px, 0);
	}

	90% {
		transform: translate3d(0, -5px, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

.bounceInUp {
	animation-name: bounceInUp;
}