/*
Theme Name: BioMolBlog
Theme URI: https://www.biomolblog.com
Author: Tanguy Araud
Description: Thème du blog BioMolBlog, aux couleurs de la série de Shorts sur les mutations génétiques : nuit bleue profonde, ADN doré, protéines cyan, mutation magenta.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: biomolblog
*/

/* La palette, les polices et les tailles sont dans theme.json.
   Ce fichier ne contient que ce que theme.json ne sait pas exprimer. */

/* ---------- Fond : nuit, halo et poussières de lumière ---------- */

body {
	background:
		radial-gradient(ellipse 90% 60% at 50% -10%, var(--wp--preset--color--bg-glow) 0%, transparent 70%),
		var(--wp--preset--color--bg);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.55;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255, 207, 92, 0.55) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 78% 12%, rgba(62, 224, 216, 0.5) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 64% 46%, rgba(255, 231, 168, 0.4) 0 1px, transparent 2px),
		radial-gradient(circle at 26% 64%, rgba(62, 224, 216, 0.35) 0 1px, transparent 2px),
		radial-gradient(circle at 88% 72%, rgba(255, 207, 92, 0.35) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 42% 88%, rgba(255, 231, 168, 0.3) 0 1px, transparent 2px),
		radial-gradient(circle at 6% 92%, rgba(62, 224, 216, 0.3) 0 1px, transparent 2px),
		radial-gradient(circle at 54% 26%, rgba(62, 224, 216, 0.25) 0 1px, transparent 2px);
}

::selection {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Couleur d'accent posée dans un titre (format « couleur du texte ») : pas de surlignage. */
mark.has-inline-color {
	background: transparent;
}

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

.bm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(6, 10, 24, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.admin-bar .bm-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .bm-header {
		top: 46px;
	}
}

/* Sous 600 px, la barre d'administration défile avec la page. */
@media (max-width: 600px) {
	.admin-bar .bm-header {
		top: 0;
	}
}

.bm-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: -0.01em;
}

.bm-wordmark a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bm-wordmark a:hover {
	color: var(--wp--preset--color--text);
}

.bm-gold {
	color: var(--wp--preset--color--gold);
}

.bm-header .wp-block-navigation a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.bm-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--gold);
}

.bm-header .bm-nav-yt a {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--gold);
	border-radius: 999px;
	padding: 0.35em 1em;
	font-weight: 800;
}

.bm-header .bm-nav-yt a:hover {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--gold-pale);
}

.bm-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--text);
}

/* ---------- Accueil ---------- */

.bm-hero {
	text-align: center;
}

.bm-kicker {
	margin: 0;
	color: var(--wp--preset--color--cyan);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bm-lead {
	color: var(--wp--preset--color--text-dim);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.bm-hero .wp-block-buttons {
	justify-content: center;
}

.bm-section-title {
	margin-top: 0;
}

/* ---------- Cartes d'articles ---------- */

.bm-cards > .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.4rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.bm-cards > .wp-block-post::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--cyan));
}

.bm-cards > .wp-block-post:hover {
	border-color: var(--wp--preset--color--gold);
	transform: translateY(-2px);
}

.bm-cards .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.bm-cards .wp-block-post-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bm-cards .wp-block-post-title a:hover {
	color: var(--wp--preset--color--gold);
}

.bm-cards .wp-block-post-excerpt {
	margin: 0;
	color: var(--wp--preset--color--text-dim);
	font-size: 1rem;
	line-height: 1.6;
}

.bm-cards .wp-block-post-featured-image {
	margin: -1.4rem -1.4rem 0.2rem;
}

.bm-cards .wp-block-post-date {
	margin-top: auto;
}

/* ---------- Article à la une (accueil) ---------- */

.bm-section-kicker {
	margin-bottom: 0.8rem;
}

.bm-featured {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bm-featured > .wp-block-post {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 120% at 100% 0%, rgba(62, 224, 216, 0.10), transparent 60%),
		radial-gradient(ellipse 60% 100% at 0% 100%, rgba(255, 207, 92, 0.10), transparent 60%),
		var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	transition: border-color 0.2s ease;
}

.bm-featured > .wp-block-post::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--cyan));
}

.bm-featured > .wp-block-post:hover {
	border-color: var(--wp--preset--color--gold);
}

.bm-featured .wp-block-post-featured-image {
	margin: 0;
}

.bm-featured-body {
	padding: clamp(1.6rem, 4vw, 3rem);
}

.bm-featured .wp-block-post-title {
	margin: 0.9rem 0 0;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.12;
}

.bm-featured .wp-block-post-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bm-featured .wp-block-post-title a:hover {
	color: var(--wp--preset--color--gold);
}

.bm-featured .wp-block-post-excerpt {
	color: var(--wp--preset--color--text-dim);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.bm-featured .wp-block-post-excerpt__more-text {
	display: none;
}

.bm-featured-meta {
	gap: 1.2rem;
}

.bm-read-more {
	display: inline-block;
	padding: 0.7em 1.5em;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink) !important;
	font-weight: 800;
	text-decoration: none;
}

.bm-read-more:hover {
	background: var(--wp--preset--color--gold-pale);
}

.bm-read-more::after {
	content: " →";
}

.bm-empty {
	color: var(--wp--preset--color--text-dim);
}

/* Tant qu'il n'y a qu'un article, pas de section « Articles précédents » vide. */
.bm-previous:has(.bm-empty) {
	display: none;
}

.bm-about {
	text-align: center;
}

/* ---------- Puces de catégories et d'étiquettes ---------- */

.bm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.bm-chips .wp-block-post-terms__separator {
	display: none;
}

.bm-chips a {
	display: inline-block;
	padding: 0.2em 0.75em;
	border: 1px solid rgba(62, 224, 216, 0.45);
	border-radius: 999px;
	color: var(--wp--preset--color--cyan);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.5;
}

.bm-chips a:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}

.bm-chips.bm-tags {
	margin-top: 1.4rem;
}

.bm-chips.bm-tags a {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-dim);
}

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

.bm-article-head {
	text-align: center;
}

.bm-article-head .bm-chips {
	justify-content: center;
}

.wp-block-post-content :where(p, li) code,
.wp-block-post-content > p > code:only-child {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.95em;
	padding: 0.15em 0.45em;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--gold-pale);
	letter-spacing: 0.04em;
}

/* Une séquence seule sur sa ligne (`ATG GCA …`) : centrée et plus grande. */
.wp-block-post-content > p:has(> code:only-child) {
	text-align: center;
}

.wp-block-post-content > p > code:only-child {
	display: inline-block;
	font-size: 1.15em;
	padding: 0.45em 0.9em;
}

.wp-block-post-content hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-post-content strong {
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

/* ---------- Shorts intégrés : vertical, 315 px au plus, centré ---------- */

.wp-block-embed.wp-embed-aspect-9-16 {
	max-width: 315px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--wp--preset--color--line), 0 0 40px rgba(255, 207, 92, 0.15);
}

/* ---------- Encadrés ---------- */

.bm-callout {
	padding: 1.4rem 1.6rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: 14px;
}

.bm-callout > :first-child {
	margin-top: 0;
}

.bm-callout > :last-child {
	margin-bottom: 0;
}

.bm-cta {
	text-align: center;
	padding: 2rem 1.6rem;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 207, 92, 0.12), transparent 70%),
		var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
}

.bm-cta .wp-block-buttons {
	justify-content: center;
}

/* ---------- Tuiles A/T/C/G (motif de la série) ---------- */

.bm-seq {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1rem;
	margin: 1.5rem 0 0.5rem;
}

.bm-codon {
	display: inline-flex;
	gap: 0.3rem;
}

.bm-b {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 0.6rem;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 900;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 -3px 0 rgba(8, 16, 34, 0.25);
}

.bm-A { background: var(--wp--preset--color--base-a); }
.bm-T { background: var(--wp--preset--color--base-t); }
.bm-C { background: var(--wp--preset--color--base-c); }
.bm-G { background: var(--wp--preset--color--base-g); }

/* La mutation : une forme (anneau) et une couleur (magenta), jamais la couleur seule. */
.bm-mut {
	box-shadow:
		0 0 0 3px var(--wp--preset--color--bg),
		0 0 0 6px var(--wp--preset--color--mutation),
		0 0 18px 6px rgba(255, 79, 216, 0.5);
}

.bm-seq-caption {
	color: var(--wp--preset--color--text-dim);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

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

.bm-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-dim);
	font-size: var(--wp--preset--font-size--small);
}

.bm-footer .bm-wordmark {
	font-size: 1.3rem;
}

.bm-disclaimer {
	color: var(--wp--preset--color--text-dim);
	opacity: 0.85;
}

/* ---------- Divers ---------- */

.wp-block-query-pagination a {
	text-decoration: none;
	font-weight: 600;
}

.wp-block-search__input {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.6em 1.1em;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cyan);
	border: 2px solid var(--wp--preset--color--cyan);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}

@media (prefers-reduced-motion: reduce) {
	.bm-cards > .wp-block-post,
	.bm-featured > .wp-block-post {
		transition: none;
	}

	.bm-cards > .wp-block-post:hover {
		transform: none;
	}
}