/*
Theme Name: Garbell TT5
Theme URI: https://www.garbell.net/
Template: twentytwentyfive
Author: AMGV
Description: Thème enfant de Twenty Twenty-Five pour www.garbell.net : carnet technique Linux, réseau et télécom. Polices hébergées localement, blocs de commandes avec bouton « Copier », accueil en liste-index.
Version: 1.1.1
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: garbell-tt5
*/

/* ---------- Base ---------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

::selection {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* ---------- En-tête ---------- */

.garbell-header {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.garbell-header .wp-block-site-title a,
.garbell-footer .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.garbell-header .wp-block-navigation a:hover,
.garbell-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 2px;
}

.garbell-header .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	padding: 0.4rem;
}

.garbell-header .wp-block-search__button:hover,
.garbell-header .wp-block-search__button:focus-visible {
	color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

.garbell-header .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
}

/* ---------- Accueil, archives, recherche : liste-index ---------- */

.garbell-index .wp-block-post-template {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.garbell-entry {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	column-gap: 1.75rem;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.garbell-entry > * {
	margin-block: 0 !important;
}

.garbell-entry > .wp-block-post-date {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
	padding-top: 0.3rem;
	font-variant-numeric: tabular-nums;
}

.garbell-entry .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.garbell-entry .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.garbell-entry .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--accent-4);
	margin: 0;
}

.garbell-entry .wp-block-post-terms a,
.garbell-meta .wp-block-post-terms a {
	color: var(--wp--preset--color--accent-1);
}

.garbell-index .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 640px) {
	.garbell-entry {
		grid-template-columns: 1fr;
		row-gap: 0.4rem;
	}
	.garbell-entry > .wp-block-post-date {
		padding-top: 0;
	}
}

/* ---------- Article ---------- */

.garbell-meta .wp-block-post-date {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	color: var(--wp--preset--color--accent-4);
	font-variant-numeric: tabular-nums;
}

.wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--40);
}

/* Code en ligne */
.wp-block-post-content :not(pre) > code,
.garbell-entry :not(pre) > code {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.875em;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
	padding: 0.1em 0.35em;
	border-radius: 3px;
	overflow-wrap: anywhere;
}

/* Blocs de commandes : éditeur classique (<pre>) et blocs Code / Préformaté */
.wp-block-post-content pre {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--custom--code-fg);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 3px solid var(--wp--custom--prompt);
	border-radius: 0 6px 6px 0;
	overflow-x: auto;
	white-space: pre;
	tab-size: 4;
	margin-block: 1.25rem;
}

.wp-block-post-content pre code {
	background: none;
	color: inherit;
	font-size: inherit;
	padding: 0;
}

.garbell-code {
	position: relative;
	margin-block: 1.25rem;
}

.garbell-code > pre {
	margin-block: 0;
	padding-right: 5.75rem;
}

.garbell-copy {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.75rem;
	line-height: 1;
	color: var(--wp--custom--code-fg);
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: 4px;
	padding: 0.4rem 0.6rem;
	cursor: pointer;
}

.garbell-copy:hover,
.garbell-copy:focus-visible {
	color: var(--wp--custom--prompt);
	border-color: var(--wp--custom--prompt);
	outline: none;
}

.garbell-copy[data-state="done"] {
	color: var(--wp--custom--prompt);
	border-color: var(--wp--custom--prompt);
}

/* Colonne d'article : tout part du même bord gauche.
   Le texte reste à la largeur de lecture, le code et les tableaux
   s'étendent vers la droite jusqu'à code-width. */
.garbell-article > *,
.garbell-article .wp-block-post-content > * {
	max-width: var(--wp--style--global--content-size);
	margin-left: 0;
	margin-right: 0;
}

.garbell-article > .wp-block-post-content {
	max-width: none;
}

.garbell-article .wp-block-post-content > pre,
.garbell-article .wp-block-post-content > .garbell-code,
.garbell-article .wp-block-post-content > .wp-block-code,
.garbell-article .wp-block-post-content > .wp-block-preformatted,
.garbell-article .wp-block-post-content > table,
.garbell-article .wp-block-post-content > .wp-block-table,
.garbell-article .wp-block-post-content > .alignwide,
.garbell-article .wp-block-post-content > .alignfull {
	max-width: var(--wp--custom--code-width);
}

/* Tableaux */
.wp-block-post-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.9375rem;
	margin-block: 1.25rem;
}

.wp-block-post-content th,
.wp-block-post-content td {
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: 0.5rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content thead th,
.wp-block-post-content tr:first-child th {
	background: var(--wp--preset--color--accent-2);
}

@media (max-width: 640px) {
	.wp-block-post-content table {
		display: block;
		overflow-x: auto;
	}
}

.garbell-post-nav a {
	color: var(--wp--preset--color--accent-1);
}

/* ---------- Pied de page ---------- */

.garbell-footer {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	background: var(--wp--preset--color--accent-5);
}

.garbell-footer .wp-block-categories {
	list-style: none;
	padding-left: 0;
}

.garbell-footer .wp-block-categories li {
	margin-block: 0.3rem;
}

.garbell-footer a {
	color: var(--wp--preset--color--contrast);
}

.garbell-footer a:hover {
	color: var(--wp--preset--color--accent-1);
}