/* ----------------------------------------- */
/* SOVRASCRITTURA Bootstrap base ----------- */
/* Font size base (Bootstrap default è 16px) */
/* ----------------------------------------- */
html {
  scrollbar-gutter: stable; /* KEVIN */
}
body {
  font-size: 20px;
  
  /* se il body ha 3 elementi (nav, main, footer) e voglio che il footer stia sempre in fondo */
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* style del codice definito come pre > code */
pre:has(code)
{
	border-radius: .5rem;
	background-color: var(--bs-tertiary-bg);
	padding:1.5rem 1rem 1.5rem 1rem;
}


/* ----------------------------------------- */
/* PAGINA INDEX (HOME) PRINCIPALE ---------- */
/* ----------------------------------------- */
/* Immagini hero sovrapposte */
.avatar-wrapper {position: relative;display: inline-flex;width: 210px;height: 130px;}
.avatar-img {width: 130px;height: 130px;border-radius: 50%;object-fit: cover;}
.avatar-img.author {position: relative;z-index: 2;}
.avatar-img.logo {position: absolute;left: 90px;width: 100px;height: 100px;z-index: 1;}


/* ----------------------------------------- */
/* TOC ARTICOLI ---------------------------- */
/* ----------------------------------------- */
.toc-list {padding: 0;margin: 0;padding-inline-start: 30px;}
.toc-list > li {margin-block-end: .3rem;}
.toc-list > li a {text-decoration:none;}
.toc-list > li a:hover{text-decoration: underline;text-underline-offset:.2rem;}
/* .toc-list a::before {content: "-> ";} */


/* Nessun risultato (nascosto di default) */
.no-results {
  display: none;
}


/* ----------------------------------------- */
/* articoli -------------------------------- */
/* ----------------------------------------- */
/* Immagine di copertina articolo */
.article-cover {width: 100%;max-height: 420px;object-fit: cover;}

/* div.article-content il contenuto degli articoli */
div#article-content
{
	.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
		margin-block:3.5rem .4rem;
	}

	hr {margin:3rem 0;}

	/* GESTIONE STILE tasto copy nei tag pre > code presenti negli articoli */
	.pre-wrapper {position: relative;}
	.copy-button {
		font-size: 16px;
		position: absolute;
		top: 0.2rem;
		right: 0.2rem;
		padding: 0.2rem;
		background: transparent; /* oppure lo stesso colore di sfondo del tuo pre */
		border: 1px solid #555;
		border-radius: 4px;
		color: #aaa;
		cursor: pointer;
		opacity: 0.6;
		transition: opacity 0.2s, color 0.2s, border-color 0.2s;
		line-height: 0;
		z-index: 1;
	}
	.pre-wrapper:hover .copy-button {opacity: 1;}
	.copy-button:hover {color: #fff;border-color: #fff;}
	.copy-button.copied {color: #4ade80;border-color: #4ade80;opacity: 1;}

}