/*
	==========================================================================
	GLOBAL VARIABLES (CONSTANTS)
	Change these values to update your design globally.
	========================================================================== */
:root {
	--navbar-height: 4em;
	--content-max-width: 50rem;
	/* 800px = 50rem maximum width for content */
	--base-padding: 1.25rem;
	--code-padding: 0.625rem;
	--code-border-radius: 0rem;
	--list-indent: 1.5rem;
	--background-color: #F7F7F7;
	--navbar-background-color: #ECECEC;
	--text-color: #1d1d1d;
	--link-color: #1867ce;
	--table-border-color: #dfe2e5;
}

/*
	==========================================================================
	SECTION 1: NORMALIZATION / RESET
	These rules reset default browser styles and set basic box-model and typography.
	========================================================================== */

/* Reset default margins, paddings, and set box-sizing */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	font-family: "Inter", sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	line-height: 1.5;
}

/* Increment the mono font size */
code, pre {
	font-family: "Fira Code", monospace;
	font-size: 0.95rem; 
}

/* Make images responsive */
img {
	width: 100%;
	height: auto;
}

.img-caption{
	text-align: center;
	font-size: 0.9em;
	font-style: italic;
	line-height: 1.35;
	margin-top: 0.1rem;     /* super vicino all’immagine */
	margin-bottom: 1.8rem;  /* più spazio sotto */
	opacity: 0.85;
}

/* 
	==========================================================================
	SECTION 2: STYLE (AESTHETIC)
	This section contains visual styling for content areas, headings,
	code blocks, lists, and links.
	========================================================================== */

/* Spacing for headings and paragraphs */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin-bottom: 1rem;
}

/* Main content area styling */
.content {
	flex: 1;
	width: 100%;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: var(--base-padding);
	padding-bottom: var(--navbar-height); /* Reserve space for fixed navbar */
}

/* Code block styling */
pre {
	overflow-x: auto; /* Allow horizontal scroll if needed */
	white-space: pre-wrap; /* Wrap long lines */
	word-wrap: break-word; /* Break long words if necessary */
	background: var(--navbar-background-color);
	padding: var(--code-padding);
	border-radius: var(--code-border-radius);
	margin-bottom: 1rem;
}

/* List styling for unordered and ordered lists */
ul,
ol {
	margin-bottom: 1rem;
	padding-left: var(--list-indent);
	/* list-style-position: inside; /* Bullets appear inside the content */
	list-style-position: outside;   /* Bullets appear inside the content because of the padding but prevent immediate wrapping */
	padding-left: 1.5em;
}

/* For nested lists, increase the left indentation */
ul ul,
ol ol {
	padding-left: calc(var(--list-indent) * 1.5);
}

/* Basic link styling for generic content */
a:link,
a:visited,
a:active,
a:hover {
	color: var(--link-color);
	text-decoration: none;
}

/*
	==========================================================================
	SECTION 3: FUNCTIONAL / RESPONSIVE STYLES
	This section contains rules for the fixed navbar, burger menu, overlay,
	and mobile responsiveness.
	========================================================================== */

/* Fixed navbar: background spans full viewport width */
footer.navbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--navbar-height);
	background-color: var(--navbar-background-color);
	z-index: 3;
	user-select: none; /* Prevent text selection */
}

/* Navbar container: centers contents (brand & links) with a max width */
.navbar-container {
	max-width: var(--content-max-width);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--base-padding);
	display: flex;
	flex-direction: row;
	align-items: center; /* Vertical centering */
	justify-content: space-between; /* Brand on the left, menu on the right */
	height: 100%;
}

/* Brand element styling */
.navbar-brand {
	font-weight: bold;
}

/* Navigation menu styling */
.navbar-container nav ul {
	list-style: none;
	display: flex;
	gap: var(--base-padding);
	margin: 0;
	padding: 0;
}

/* Each menu list item */
.navbar-container nav ul li {
	display: flex;
	align-items: center;
}

/* Navbar links: use the same color as the text and no decoration */
.navbar-container nav ul li a {
	text-decoration: none;
	color: var(--text-color);
}

/* Burger menu toggle (hidden by default) */
#menu-toggle {
	display: none;
}

/* Burger label: clickable icon for mobile menu */
.burger-label {
	display: none; /* Shown only in mobile view */
	font-size: 1.5rem;
	cursor: pointer;
	margin-left: auto;
}

/* Overlay for closing the burger menu */
.overlay {
	display: none;
}

#menu-toggle:checked~.overlay {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.menu-icon {
	vertical-align: middle;
	width: 1rem;
	height: 1rem;
}

/* Responsive (mobile) styles */
@media (max-width: 600px) {
	.navbar-container nav ul {
		flex-direction: column; /* Stack menu items vertically */
		position: absolute;
		bottom: 100%; /* Menu appears above the navbar */
		left: 0;
		width: 100%;
		gap: 0.625rem;
		padding: 0.625rem;
		background-color: var(--navbar-background-color);
		align-items: flex-end;
		justify-content: flex-end;
		display: none; /* Hidden by default */
	}

	#menu-toggle:checked~footer .navbar-container nav ul {
		display: flex;
	}

	.burger-label {
		display: block;
	}
}

/*
	==========================================================================
	SECTION 4: GITHUB MARKDOWN LIGHT MODE STYLES (Optional)
	These rules emulate GitHub's light mode for Markdown content, including table borders.
	========================================================================== */

/* Table styling (GitHub style) */
table {
	border-spacing: 0;
	border-collapse: collapse;
	display: block;
	width: 100%;
	overflow: auto;
	margin-bottom: 1rem;
}

th,
td {
	padding: 0.375rem 0.8125rem;
	border: 1px solid var(--table-border-color);
}

/* Horizontal rule spacing */
hr {
	margin: 1rem 0;
}