/**
 * Oktimus Arrow — chrome prev/next partagé (voir Support\Arrow).
 *
 * Source unique du design des flèches de navigation. Toute surface qui dessine une
 * flèche (flèches intégrées du carousel via CarouselShell, bloc autonome
 * oktimus/carousel-arrows) émet `.oktimus-arrow` et hérite d'ici — les surfaces ne
 * redéclarent que leur POSITIONNEMENT, jamais leur design.
 *
 * Chaîne de résolution, du plus local au plus global :
 *
 *   --okt-arrow-*            surcharge de CONTEXTE. N'importe quel ancêtre la pose
 *                            (section sombre, variation de style, instance) et gagne
 *                            par simple héritage — sans spécificité ni !important.
 *   --wp--custom--arrow--*   le CADRAN de la maquette : settings.custom.arrow du
 *                            theme.json du thème actif. C'est le point de réglage.
 *   valeur en dur            repli neutre sous un thème tiers (Contrat n°3).
 *
 * Règle de pose : ne déclarer une `--okt-arrow-*` sur `.oktimus-arrow` lui-même que
 * pour un choix qui DOIT battre le contexte — sinon la déclaration locale gagnerait
 * sur la valeur héritée d'un ancêtre et fermerait la porte aux variantes
 * contextuelles. Deux exceptions assumées plus bas : les modificateurs `is-size-*`
 * (une classe explicite bat l'ambiance) et le bloc accessibilité (`prefers-contrast`
 * / `prefers-reduced-motion` doivent primer sur la maquette). Partout ailleurs, on
 * pose sur un ancêtre ou sur l'attribut style de l'instance (render.php).
 */

/* Socle -------------------------------------------------------------------- */

.oktimus-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var( --okt-arrow-size, var( --wp--custom--arrow-size--medium--size, 2.75rem ) );
	block-size: var( --okt-arrow-size, var( --wp--custom--arrow-size--medium--size, 2.75rem ) );
	padding: 0;
	margin: 0;
	border-width: var( --okt-arrow-border-width, var( --wp--custom--arrow--border-width, 1px ) );
	border-style: solid;
	border-color: var(
		--okt-arrow-border-color,
		var( --wp--custom--arrow--border-color, var( --wp--preset--color--line, #e0e0e0 ) )
	);
	border-radius: var(
		--okt-arrow-radius,
		var( --wp--custom--arrow--radius, var( --wp--preset--border-radius--full, 100rem ) )
	);
	background: var( --okt-arrow-bg, var( --wp--custom--arrow--background, var( --wp--preset--color--base, #fff ) ) );
	color: var( --okt-arrow-color, var( --wp--custom--arrow--color, var( --wp--preset--color--contrast, #1a1a1a ) ) );
	box-shadow: var(
		--okt-arrow-shadow,
		var( --wp--custom--arrow--shadow, var( --wp--preset--shadow--small, 0 1px 4px rgba( 0, 0, 0, 0.12 ) ) )
	);
	cursor: pointer;
	transition: var(
		--okt-arrow-transition,
		var( --wp--custom--arrow--transition, opacity 0.2s ease, background 0.2s ease, color 0.2s ease )
	);
}

.oktimus-arrow:hover {
	border-color: var(
		--okt-arrow-hover-border-color,
		var( --wp--custom--arrow--hover--border-color, var( --wp--preset--color--line, #e0e0e0 ) )
	);
	background: var(
		--okt-arrow-hover-bg,
		var( --wp--custom--arrow--hover--background, var( --wp--preset--color--tint, #f2f2f2 ) )
	);
	color: var(
		--okt-arrow-hover-color,
		var( --wp--custom--arrow--hover--color, var( --wp--preset--color--contrast, #1a1a1a ) )
	);
}

.oktimus-arrow:disabled {
	opacity: var( --okt-arrow-disabled-opacity, var( --wp--custom--arrow--disabled-opacity, 0.35 ) );
	cursor: default;
	pointer-events: none;
}

/* Désactivée : `hide` (réglage d'instance) la masque au lieu de l'estomper ; la
   place reste réservée (visibility) pour ne pas décaler la mise en page. */
.is-disabled-hide .oktimus-arrow:disabled {
	visibility: hidden;
}

/* Glyphe ------------------------------------------------------------------- */

/* Masque, pas un `<svg>` : `background-color: currentcolor` fait suivre au glyphe la
   couleur du bouton, donc dark/light, sections inversées et contraste renforcé
   marchent sans une seule règle dédiée. La FORME vient de theme.json
   (--wp--custom--arrow--glyph--{prev,next}) ; le repli en dur sur :root n'existe que
   pour les thèmes tiers sans token (Contrat n°3) — c'est un filet de sécurité, pas le
   point de réglage : pour changer la flèche, on édite le theme.json, jamais ce
   fichier. `--okt-arrow-glyph-{prev,next}` est posée en inline par render.php quand
   l'instance choisit une icône dans la bibliothèque. */
.oktimus-arrow__glyph {
	display: block;
	inline-size: var( --okt-arrow-glyph-size, var( --wp--custom--arrow-size--medium--glyph-size, 1.25rem ) );
	block-size: var( --okt-arrow-glyph-size, var( --wp--custom--arrow-size--medium--glyph-size, 1.25rem ) );
	background-color: currentColor;
}

.oktimus-arrow--prev .oktimus-arrow__glyph {
	-webkit-mask: var( --okt-arrow-glyph-prev, var( --wp--custom--arrow--glyph--prev, var( --okt-arrow-fallback-prev ) ) )
		center / contain no-repeat;
	mask: var( --okt-arrow-glyph-prev, var( --wp--custom--arrow--glyph--prev, var( --okt-arrow-fallback-prev ) ) ) center /
		contain no-repeat;
}

.oktimus-arrow--next .oktimus-arrow__glyph {
	-webkit-mask: var( --okt-arrow-glyph-next, var( --wp--custom--arrow--glyph--next, var( --okt-arrow-fallback-next ) ) )
		center / contain no-repeat;
	mask: var( --okt-arrow-glyph-next, var( --wp--custom--arrow--glyph--next, var( --okt-arrow-fallback-next ) ) ) center /
		contain no-repeat;
}

.oktimus-arrow--up .oktimus-arrow__glyph {
	-webkit-mask: var( --okt-arrow-glyph-up, var( --wp--custom--arrow--glyph--up, var( --okt-arrow-fallback-up ) ) )
		center / contain no-repeat;
	mask: var( --okt-arrow-glyph-up, var( --wp--custom--arrow--glyph--up, var( --okt-arrow-fallback-up ) ) ) center /
		contain no-repeat;
}

/* Repli neutre (thème sans settings.custom.arrow.glyph). Sur :root, donc toujours
   battu par le token du thème, lu avant lui dans la chaîne ci-dessus. */
:root {
	--okt-arrow-fallback-prev: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E" );
	--okt-arrow-fallback-next: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E" );
	--okt-arrow-fallback-up: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E" );
}

/* Groupe ------------------------------------------------------------------- */

/* Rangée de flèches inline (bloc autonome, et toute future paire côte à côte). */
.oktimus-arrows {
	display: flex;
	align-items: center;
	gap: var( --okt-arrow-gap, var( --wp--custom--arrow--gap, 0.5rem ) );
	width: fit-content;
}

/* Tailles ------------------------------------------------------------------ */

/* Posées sur le GROUPE ou sur le bouton : les custom properties héritent, donc les
   deux marchent. Scopées par une classe oktimus pour ne pas capturer un `is-size-*`
   d'un autre bloc. */
.oktimus-arrows.is-size-small,
.oktimus-arrow.is-size-small {
	--okt-arrow-size: var( --wp--custom--arrow-size--small--size, 2.25rem );
	--okt-arrow-glyph-size: var( --wp--custom--arrow-size--small--glyph-size, 1rem );
}

.oktimus-arrows.is-size-medium,
.oktimus-arrow.is-size-medium {
	--okt-arrow-size: var( --wp--custom--arrow-size--medium--size, 2.75rem );
	--okt-arrow-glyph-size: var( --wp--custom--arrow-size--medium--glyph-size, 1.25rem );
}

.oktimus-arrows.is-size-large,
.oktimus-arrow.is-size-large {
	--okt-arrow-size: var( --wp--custom--arrow-size--large--size, 3.25rem );
	--okt-arrow-glyph-size: var( --wp--custom--arrow-size--large--glyph-size, 1.5rem );
}

/* Accessibilité ------------------------------------------------------------ */

/* Le focus clavier ne dépend jamais de la maquette : on garde l'anneau natif du
   thème/UA et on l'écarte du bord arrondi. */
.oktimus-arrow:focus-visible {
	outline-offset: 2px;
}

/* Exception assumée à la règle de pose : ces deux préférences utilisateur doivent
   primer sur la maquette ET sur toute surcharge de contexte, donc on déclare sur le
   composant (le point le plus spécifique) plutôt que sur un ancêtre. */
@media ( prefers-contrast: more ) {
	.oktimus-arrow {
		--okt-arrow-border-color: currentColor;
		--okt-arrow-border-width: 2px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.oktimus-arrow {
		--okt-arrow-transition: none;
	}
}

/* Flèches sans carousel à piloter (posé par carousel-arrows/view.js) : inertes,
   donc masquées plutôt que montrées mortes. */
.oktimus-carousel-arrows.is-unlinked {
	display: none;
}