/*
 * Fil d'Ariane "Maison" — habillage aux couleurs de la marque.
 *
 * S'applique aux deux fils d'Ariane du site (mêmes classes .inspiro-breadcrumb*
 * définies dans le thème parent) :
 *  - la bande WooCommerce (boutique / catégorie / fiche produit) ;
 *  - la version "eyebrow" (.inspiro-breadcrumb--maison) au-dessus du titre des
 *    pages et articles classiques, voir inc/breadcrumb.php.
 *
 * Les couleurs suivent --inspiro-primary-color / --inspiro-dark-color, donc la
 * teinte dorée s'adapte automatiquement si la couleur de marque est changée
 * dans Personnaliser > Couleurs.
 */

/*
 * Réinitialisation structurelle (liste à puces -> ligne horizontale).
 *
 * Doublon volontaire des règles déjà présentes dans style.css du thème
 * parent : si ce fichier parent n'est pas encore synchronisé/à jour côté
 * serveur, ce fichier (child, toujours à jour) garantit quand même le bon
 * rendu — sans quoi le <ol> retombe sur le style de liste numérotée par
 * défaut du navigateur.
 */
.inspiro-breadcrumb__track {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.inspiro-breadcrumb__track::-webkit-scrollbar {
	display: none;
	height: 0;
}

.inspiro-breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inspiro-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	list-style: none;
	/* Police alignée sur celle du menu (Personnaliser > Typographie > Menu) —
	   voir inc/breadcrumb.php pour la génération de la valeur exacte. Ici,
	   "inherit" reproduit le comportement du menu quand aucune police n'y
	   est explicitement choisie (le menu hérite alors de la police globale
	   du site). */
	font-family: inherit;
	color: var(--inspiro-primary-color, #b08d57);
}

.inspiro-breadcrumb__item a:hover {
	color: var(--inspiro-dark-color, #101010);
}

.inspiro-breadcrumb__item:last-child {
	color: #F8F7F4;
}

.inspiro-breadcrumb__sep {
	font-size: 11px;
	color: var(--inspiro-primary-color, #b08d57);
	opacity: 0.55;
}

/* ---------- Variante "eyebrow" (pages & articles) ---------- */

.inspiro-breadcrumb--maison {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	border: none;
	color: #F8F7F4;
}

.inspiro-breadcrumb--maison .inspiro-breadcrumb__track {
	max-width: 100%;
}

.inspiro-breadcrumb--maison .inspiro-breadcrumb__sep {
	padding: 0 10px;
}

@media (max-width: 768px) {
	.inspiro-breadcrumb--maison {
		margin-bottom: 10px;
	}
}

/*
 * Flèche "voir la suite" (n'apparaît que quand la page a une image de
 * couverture en fond de header — voir inc/breadcrumb.php) : lien natif vers
 * #first (ancre posée sur .entry-content, voir
 * template-parts/page/content-page.php).
 *
 * scroll-behavior:smooth anime ce défilement nativement (plus besoin du
 * plugin jquery-scrollTo). scroll-margin-top compense la hauteur du header
 * pour que #first n'atterrisse pas caché dessous — sa valeur (--header-height)
 * est mesurée dynamiquement en JS (assets/js/breadcrumb-scroll.js), avec un
 * repli en dur au cas où le JS n'aurait pas encore tourné.
 */
html {
	scroll-behavior: smooth;
}
#first {
	scroll-margin-top: var(--header-height, 90px);
}
.inspiro-breadcrumb__scroll-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--inspiro-primary-color, #b08d57);
	cursor: pointer;
	animation: inspiro-breadcrumb-arrow-bounce 1.8s ease-in-out infinite;
	transition: color 0.25s ease, opacity 0.25s ease;
}
.inspiro-breadcrumb__scroll-arrow svg {
	width: 12px;
	height: 7px;
}
.inspiro-breadcrumb__scroll-arrow:hover {
	color: var(--inspiro-dark-color, #101010);
}

@keyframes inspiro-breadcrumb-arrow-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(3px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.inspiro-breadcrumb__scroll-arrow {
		animation: none;
	}
}

/*
 * Le fil d'Ariane "eyebrow" affiche déjà le nom de la page/l'article en
 * dernier maillon (ex. "Accueil / La Maison") : le <h1 class="entry-title">
 * du thème juste en dessous est redondant, on le masque.
 */
h1.entry-title {
	display: none;
}

.entry-cover-image .inspiro-breadcrumb__list {
	color: #F8F7F4 !important;
}

.entry-cover-image .inspiro-breadcrumb__sep {
	color: inherit !important;
	opacity: 0.6;
}
.entry-cover-image .inspiro-breadcrumb__scroll-arrow,
.entry-cover-image .inspiro-breadcrumb__scroll-arrow:hover {
	color: inherit;
}
.entry-cover-image .inspiro-breadcrumb__scroll-arrow:hover {
	opacity: 0.7;
}