/*
Theme Name: Choro d'Aqui
Description: Thème enfant FSE de Twenty Twenty-Five pour le site Choro d'Aqui (quintet de musique brésilienne).
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 7.1
Requires PHP: 8.1
Text Domain: chorodaqui
*/

/*
 * Styles du thème enfant Choro d'Aqui, chargés sur le site et dans l'éditeur.
 * La mise en forme passe d'abord par theme.json, les options des blocs et les styles de bloc enregistrés.
 * Ce fichier ne contient que ce que Gutenberg ne sait pas faire nativement.
 */

/* ------------------------------------------------------------
   1. Page « journal » : feuille de papier texturée sur fond papier foncé
   ------------------------------------------------------------ */

body {
	background: var(--wp--preset--color--base-2);
}

.wp-site-blocks {
	max-width: 1040px;
	margin: 0.75rem;
	border: 1px solid var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);

	/* Grain du papier : bruit SVG très léger, sans image externe. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

@media (min-width: 600px) {

	.wp-site-blocks {
		margin: 2rem auto 3rem;
		width: calc(100% - 4rem);
	}
}

@media (min-width: 1024px) {

	.wp-site-blocks {
		margin-top: 3rem;
		box-shadow: 0 18px 50px rgb(0 0 0 / 0.4);
	}
}

/* ------------------------------------------------------------
   2. Traits graphiques (styles du bloc Séparateur, voir inc/custom.php)
   ------------------------------------------------------------ */

/* « Journal » : filet épais doublé d'un filet fin. */
.wp-block-separator.is-style-journal {
	height: 7px;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	opacity: 1;
}

/* « Ornement » : deux filets fins et un fleuron au centre. */
.wp-block-separator.is-style-ornement {
	height: auto;
	border: 0;
	background:
		linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast)) left center / calc(50% - 1.75rem) 1px no-repeat,
		linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast)) right center / calc(50% - 1.75rem) 1px no-repeat;
	opacity: 1;
	overflow: visible;
	text-align: center;
}

.wp-block-separator.is-style-ornement::after {
	content: "\2766";
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

/* Liste « Fleurons » : losange à l'encre devant chaque élément, deux colonnes séparées par un filet. */
.wp-block-list.is-style-fleurons {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-fleurons > li {
	position: relative;
	padding-left: 1.75rem;
	break-inside: avoid;
}

.wp-block-list.is-style-fleurons > li::before {
	content: "\2756";
	position: absolute;
	left: 0.1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95em;
	color: var(--wp--preset--color--contrast);
}

@media (min-width: 600px) {

	.wp-block-list.is-style-fleurons {
		column-count: 2;
		column-gap: 3rem;
		column-rule: 1px solid var(--wp--preset--color--contrast);
	}
}

/* ------------------------------------------------------------
   3. Boutons
   ------------------------------------------------------------ */

/* Flèche après le texte. */
.wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.75em;
	transition: transform 0.15s ease;
}

.wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* Bouton contour : fond transparent, texte et bordure à l'encre. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 1rem 1.4rem;
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

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

/* ------------------------------------------------------------
   4. Cartes des musiciens : toute la carte ouvre la biographie
   ------------------------------------------------------------ */

.jll-musicien {
	position: relative;
}

.jll-musicien h3 a {
	color: inherit;
	text-decoration: none;
}

.jll-musicien h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Flèche ronde en bas à droite. */
.jll-musicien::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1714' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
	transition: background-color 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.jll-musicien:hover::after,
.jll-musicien:focus-within::after {
	background: var(--wp--preset--color--contrast) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EADFC8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
	transform: translateX(3px);
}

.jll-musicien:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
}

/* ------------------------------------------------------------
   5. Fenêtre de biographie (créée par assets/js/custom.js)
   ------------------------------------------------------------ */

html:has(.jll-dialog[open]) {
	overflow: hidden;
}

.jll-dialog {
	width: min(40rem, calc(100% - 2rem));
	max-height: 85vh;
	padding: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
}

.jll-dialog::backdrop {
	background: rgb(26 23 20 / 0.7);
}

.jll-dialog__contenu {
	position: relative;
	padding: 3.5rem 1.5rem 2rem;
	border: 3px double var(--wp--preset--color--contrast);
	margin: 0.5rem;
}

.jll-dialog__titre {
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.1;
}

.jll-dialog__fermer {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.jll-dialog__fermer:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.jll-dialog__fermer:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@media (min-width: 600px) {

	.jll-dialog__contenu {
		padding: 3.5rem 3rem 3rem;
	}
}

/* ------------------------------------------------------------
   6. Médias : vidéo, publications Instagram en noir et blanc
   ------------------------------------------------------------ */

.wp-block-video video {
	display: block;
	width: 100%;
}

.jll-insta .MediaThumbnail__image {
	filter: grayscale(1) sepia(0.2) contrast(1.05);
	transition: filter 0.2s ease;
}

.jll-insta .MediaTile__root:hover .MediaThumbnail__image {
	filter: none;
}

/* ------------------------------------------------------------
   7. Divers
   ------------------------------------------------------------ */

/* Défilement doux vers les ancres, sauf si l'utilisateur limite les animations. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Les sections ancrées ne collent pas au bord haut de l'écran. */
:where(section[id]) {
	scroll-margin-top: 1.5rem;
}

/* Titres équilibrés et paragraphes sans mot orphelin. */
:where(h1, h2, h3) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {

	.jll-insta .MediaThumbnail__image,
	.jll-musicien::after,
	.wp-block-button__link::after {
		transition: none;
	}
}