/*
Theme Name: Azka
Theme URI: https://example.com/azka
Author: Nicolas Boisgontier
Description: Thème WordPress à édition complète du site (FSE) Azka.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: azka
Tags: full-site-editing, block-patterns, block-styles, wide-blocks
*/

/*
 * Styles de texte Figma.
 * Choisir une taille dans l'éditeur (ex. « Title 48 ») applique le style complet :
 * graisse, hauteur de ligne, espacement des lettres.
 * Les valeurs sont définies dans theme.json (settings.custom.text-style).
 */
.has-title-64-font-size {
	font-weight: var(--wp--custom--text-style--title-64--font-weight);
	line-height: var(--wp--custom--text-style--title-64--line-height);
	letter-spacing: var(--wp--custom--text-style--title-64--letter-spacing);
}

.has-title-56-font-size {
	font-weight: var(--wp--custom--text-style--title-56--font-weight);
	line-height: var(--wp--custom--text-style--title-56--line-height);
	letter-spacing: var(--wp--custom--text-style--title-56--letter-spacing);
}

.has-title-48-font-size {
	font-weight: var(--wp--custom--text-style--title-48--font-weight);
	line-height: var(--wp--custom--text-style--title-48--line-height);
	letter-spacing: var(--wp--custom--text-style--title-48--letter-spacing);
}

.has-title-36-font-size {
	font-weight: var(--wp--custom--text-style--title-36--font-weight);
	line-height: var(--wp--custom--text-style--title-36--line-height);
	letter-spacing: var(--wp--custom--text-style--title-36--letter-spacing);
}

.has-title-28-font-size {
	font-weight: var(--wp--custom--text-style--title-28--font-weight);
	line-height: var(--wp--custom--text-style--title-28--line-height);
	letter-spacing: var(--wp--custom--text-style--title-28--letter-spacing);
}

.has-title-24-font-size {
	font-weight: var(--wp--custom--text-style--title-24--font-weight);
	line-height: var(--wp--custom--text-style--title-24--line-height);
	letter-spacing: var(--wp--custom--text-style--title-24--letter-spacing);
}

.has-title-20-font-size {
	font-weight: var(--wp--custom--text-style--title-20--font-weight);
	line-height: var(--wp--custom--text-style--title-20--line-height);
	letter-spacing: var(--wp--custom--text-style--title-20--letter-spacing);
}

.has-text-18-font-size {
	font-weight: var(--wp--custom--text-style--text-18--font-weight);
	line-height: var(--wp--custom--text-style--text-18--line-height);
	letter-spacing: var(--wp--custom--text-style--text-18--letter-spacing);
}

.has-text-16-font-size {
	font-weight: var(--wp--custom--text-style--text-16--font-weight);
	line-height: var(--wp--custom--text-style--text-16--line-height);
	letter-spacing: var(--wp--custom--text-style--text-16--letter-spacing);
}

.has-text-14-font-size {
	font-weight: var(--wp--custom--text-style--text-14--font-weight);
	line-height: var(--wp--custom--text-style--text-14--line-height);
	letter-spacing: var(--wp--custom--text-style--text-14--letter-spacing);
}

.has-pretitle-14-font-size {
	font-weight: var(--wp--custom--text-style--pretitle-14--font-weight);
	line-height: var(--wp--custom--text-style--pretitle-14--line-height);
	letter-spacing: var(--wp--custom--text-style--pretitle-14--letter-spacing);
	text-transform: var(--wp--custom--text-style--pretitle-14--text-transform);
}

.has-button-14-font-size {
	font-weight: var(--wp--custom--text-style--button-14--font-weight);
	line-height: var(--wp--custom--text-style--button-14--line-height);
	letter-spacing: var(--wp--custom--text-style--button-14--letter-spacing);
}

.has-pill-14-font-size {
	font-weight: var(--wp--custom--text-style--pill-14--font-weight);
	line-height: var(--wp--custom--text-style--pill-14--line-height);
	letter-spacing: var(--wp--custom--text-style--pill-14--letter-spacing);
}

/* Variantes de graisse des styles Text (Regular par défaut). */
.is-weight-medium {
	font-weight: var(--wp--custom--font-weight--medium);
}

.is-weight-bold,
strong {
	font-weight: var(--wp--custom--font-weight--bold);
}

/*
 * Surlignement (format de texte des titres) : un carré à chaque coin,
 * reliés par un pointillé qui passe par le centre des carrés.
 * La teinte suit la couleur du texte. Pour l'imposer dans un contexte :
 *   .mon-bloc {
 *     --azka-highlight-color: var(--wp--preset--color--accent-blue);
 *     --azka-highlight-line-color: var(--wp--custom--color--accent-blue-25);
 *   }
 */
.azka-highlight {
	--azka-highlight-square: var(--wp--preset--spacing--8);

	/*
	 * Décalages verticaux (proportionnels à la taille du texte). Cadre remonté
	 * de 0,05 em moins 1 px (~2 px en Title 64) par rapport à la maquette,
	 * à la demande.
	 */
	--azka-highlight-top: calc(0.05em + 1px);
	--azka-highlight-bottom: calc(0.15em + 1px);

	/*
	 * Étapes d'apparition (0 = caché, 1 = visible), animées après le titre
	 * (voir src/animations/view.js) : d'abord les carrés, puis le pointillé
	 * qui se trace d'un carré à l'autre.
	 */
	--azka-highlight-squares: 1;
	--azka-highlight-lines: 1;

	--_sq: var(--azka-highlight-square);
	--_half: calc(var(--_sq) / 2 - 0.5px);
	--_t: var(--azka-highlight-top);
	--_c: var(--azka-highlight-color, currentcolor);

	/* Pointillé : couleur imposée par le contexte, sinon la teinte à 25 %. */
	--_l: var(--azka-highlight-line-color, color-mix(in srgb, var(--_c) 25%, transparent));

	/* Carrés : taille et recentrage pendant leur apparition. */
	--_k: calc(var(--_sq) * var(--azka-highlight-squares));
	--_o: calc(var(--_sq) / 2 * (1 - var(--azka-highlight-squares)));

	/* Pointillé : part tracée (0 à 1). */
	--_d: var(--azka-highlight-lines);

	/* 16 px jusqu'au centre des carrés + un demi-carré. */
	padding-inline: calc(var(--wp--preset--spacing--16) + var(--_sq) / 2);
	padding-bottom: var(--azka-highlight-bottom);
	background:
		/* Carrés */
		linear-gradient(var(--_c), var(--_c)) left var(--_o) top calc(var(--_t) + var(--_o)) / var(--_k) var(--_k),
		linear-gradient(var(--_c), var(--_c)) right var(--_o) top calc(var(--_t) + var(--_o)) / var(--_k) var(--_k),
		linear-gradient(var(--_c), var(--_c)) left var(--_o) bottom var(--_o) / var(--_k) var(--_k),
		linear-gradient(var(--_c), var(--_c)) right var(--_o) bottom var(--_o) / var(--_k) var(--_k),
		/* Pointillé (1 px de trait, 2 px d'espace), tracé dans le sens des aiguilles d'une montre */
		repeating-linear-gradient(90deg, var(--_l) 0 1px, transparent 1px 3px) left 0 top calc(var(--_t) + var(--_half)) / calc(100% * var(--_d)) 1px,
		repeating-linear-gradient(180deg, var(--_l) 0 1px, transparent 1px 3px) right var(--_half) top var(--_t) / 1px calc((100% - var(--_t)) * var(--_d)),
		repeating-linear-gradient(90deg, var(--_l) 0 1px, transparent 1px 3px) right 0 bottom var(--_half) / calc(100% * var(--_d)) 1px,
		repeating-linear-gradient(180deg, var(--_l) 0 1px, transparent 1px 3px) left var(--_half) bottom 0 / 1px calc((100% - var(--_t)) * var(--_d));
	background-repeat: no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;

	/* Les mots encadrés restent toujours sur la même ligne. */
	white-space: nowrap;
}

/*
 * Titres animés (data-azka-animate, voir inc/animations.php).
 * Masqués jusqu’au début de leur animation, seulement si JavaScript est actif.
 */
.azka-js [data-azka-animate]:not(.is-azka-ready) {
	visibility: hidden;
}

/*
 * Le surlignement s’anime toujours (titre animé ou non) : caché jusqu’à ce
 * qu’il soit dessiné (classe is-azka-drawn, voir src/animations/view.js).
 */
.azka-js .azka-highlight:not(.is-azka-drawn) {
	--azka-highlight-squares: 0;
	--azka-highlight-lines: 0;
}

/*
 * Masque de chaque ligne pendant sa montée (créé par SplitText).
 * Un peu d'espace en bas pour ne pas couper les jambages (p, g, q…).
 */
.azka-line-mask {
	padding-bottom: 0.15em;
	margin-bottom: -0.15em;
}

/* Le titre contient ses masques : la marge négative ne déborde pas sur le bloc suivant. */
[data-azka-animate] {
	display: flow-root;
}

/* Éléments qui apparaissent après le titre (ex. image du hero) : cachés jusque-là. */
.azka-js [data-azka-reveal]:not(.is-azka-revealed) {
	opacity: 0;
}

/* Filet de sécurité : si le script d’animation ne se charge pas, tout s’affiche après 3 s. */
.azka-js:not(.azka-anim-loaded) [data-azka-animate] {
	animation: azka-reveal-fallback 0s 3s forwards;
}

.azka-js:not(.azka-anim-loaded) [data-azka-reveal] {
	animation: azka-reveal-fallback-opacity 0s 3s forwards;
}

.azka-js:not(.azka-anim-loaded) .azka-highlight {
	animation: azka-reveal-fallback-highlight 0s 3s forwards;
}

@keyframes azka-reveal-fallback {

	to {
		visibility: visible;
	}
}

@keyframes azka-reveal-fallback-opacity {

	to {
		opacity: 1;
	}
}

@keyframes azka-reveal-fallback-highlight {

	to {
		--azka-highlight-squares: 1;
		--azka-highlight-lines: 1;
	}
}

/* Animations réduites demandées par le visiteur : affichage direct. */
@media (prefers-reduced-motion: reduce) {

	.azka-js [data-azka-animate]:not(.is-azka-ready) {
		visibility: visible;
	}

	.azka-js [data-azka-reveal]:not(.is-azka-revealed) {
		opacity: 1;
	}

	.azka-js .azka-highlight:not(.is-azka-drawn) {
		--azka-highlight-squares: 1;
		--azka-highlight-lines: 1;
	}
}