/*
 * Dynamic Navigation — component styles.
 *
 * Every visual value is a CSS variable. Override them on any parent
 * (e.g. Elementor container → Advanced → Custom CSS):
 *
 *   selector { --dnav-link-color: #333; --dnav-more-color: red; }
 *
 * Selectors use "parent + a.class" on purpose: Elementor's global link colors
 * (.elementor-kit-XX a) would otherwise win over a single class.
 */

:root {
	--dnav-font: "Roboto", sans-serif;
	--dnav-blue: #006FFF;
	--dnav-blue-dark: #0059CC;
	--dnav-light: #F7F9FA;

	/* List items */
	--dnav-item-size: 13.5px;
	--dnav-item-weight: 400;
	--dnav-item-line-height: 1;      /* 100% as specified — raise to 1.2 if wrapped items feel tight */
	--dnav-link-color: #4A5560;
	--dnav-link-hover-color: var(--dnav-blue);
	--dnav-gap: 16px;

	/* "Voir tous…" link */
	--dnav-more-color: var(--dnav-blue);

	/* Thématique */
	--dnav-name-size: 20px;
	--dnav-name-weight: 700;
	--dnav-name-color: inherit;
	--dnav-icon-box: 32px;           /* round background */
	--dnav-icon-size: 32px;          /* picto itself — lower it if the picto has no inner padding */
	--dnav-icon-bg: var(--dnav-light);
	--dnav-icon-gap: 10px;

	/* Breadcrumb parent ("Formations ›") */
	--dnav-parent-size: 15px;
	--dnav-parent-weight: 500;
	--dnav-parent-color: #4A5560;
	--dnav-parent-hover-color: var(--dnav-blue);
	--dnav-sep-color: #4A5560;
	--dnav-crumb-gap: 12px;

	/* Button */
	--dnav-btn-size: 14px;
	--dnav-btn-weight: 500;
	--dnav-btn-radius: 8px;
	--dnav-btn-padding: 12px 16px;
	--dnav-btn-bg: var(--dnav-light);
	--dnav-btn-color: var(--dnav-blue);
	--dnav-btn-hover-bg: var(--dnav-blue);
	--dnav-btn-hover-color: #FFFFFF;
	--dnav-btn-primary-bg: var(--dnav-blue);
	--dnav-btn-primary-color: #FFFFFF;
	--dnav-btn-primary-hover-bg: var(--dnav-blue-dark);
	--dnav-btn-primary-hover-color: #FFFFFF;
}

/* ---------- List ---------- */

.dnav-list {
	font-family: var(--dnav-font);
}

.dnav-list .dnav-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dnav-gap);
}

.dnav-list .dnav-list__item {
	margin: 0;
	padding: 0;
}

.dnav-list .dnav-list__item > a.dnav-list__link,
.dnav-list a.dnav-list__more[href] {
	font-family: var(--dnav-font);
	font-size: var(--dnav-item-size);
	font-weight: var(--dnav-item-weight);
	font-style: normal;
	line-height: var(--dnav-item-line-height);
	letter-spacing: 0;
	text-decoration: none;
	transition: color .15s ease;
}

.dnav-list .dnav-list__item > a.dnav-list__link,
.dnav-list .dnav-list__item > a.dnav-list__link:visited {
	color: var(--dnav-link-color);
}

.dnav-list .dnav-list__item > a.dnav-list__link:hover,
.dnav-list .dnav-list__item > a.dnav-list__link:focus-visible,
.dnav-list .dnav-list__item.is-current > a.dnav-list__link {
	color: var(--dnav-link-hover-color);
}

.dnav-list a.dnav-list__more,
.dnav-list a.dnav-list__more:visited,
.dnav-list a.dnav-list__more:hover,
.dnav-list a.dnav-list__more:focus-visible {
	display: inline-block;
	margin-top: var(--dnav-gap);
	color: var(--dnav-more-color);
}

.dnav-list a.dnav-list__more:hover,
.dnav-list a.dnav-list__more:focus-visible {
	text-decoration: underline;
}

/* ---------- Thématique (breadcrumb) ---------- */

.dnav-thematique {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dnav-crumb-gap);
	font-family: var(--dnav-font);
}

.dnav-thematique a.dnav-thematique__parent[href],
.dnav-thematique a.dnav-thematique__parent[href]:visited,
.dnav-thematique span.dnav-thematique__parent {
	font-family: var(--dnav-font);
	font-size: var(--dnav-parent-size);
	font-weight: var(--dnav-parent-weight);
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	color: var(--dnav-parent-color);
	text-decoration: none;
	transition: color .15s ease;
}

.dnav-thematique a.dnav-thematique__parent[href]:hover,
.dnav-thematique a.dnav-thematique__parent[href]:focus-visible {
	color: var(--dnav-parent-hover-color);
}

.dnav-thematique .dnav-thematique__sep {
	display: inline-flex;
	color: var(--dnav-sep-color);
}

.dnav-thematique a.dnav-thematique__current,
.dnav-thematique a.dnav-thematique__current:visited,
.dnav-thematique a.dnav-thematique__current:hover,
.dnav-thematique span.dnav-thematique__current {
	display: inline-flex;
	align-items: center;
	gap: var(--dnav-icon-gap);
	color: var(--dnav-name-color);
	text-decoration: none;
}

.dnav-thematique .dnav-thematique__name {
	margin: 0;
	padding: 0;
	font-family: var(--dnav-font);
	font-size: var(--dnav-name-size);
	font-weight: var(--dnav-name-weight);
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	color: inherit;
}

.dnav-thematique .dnav-thematique__icon {
	box-sizing: border-box;
	flex: 0 0 var(--dnav-icon-box);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dnav-icon-box);
	min-width: var(--dnav-icon-box);
	height: var(--dnav-icon-box);
	border-radius: 50%;
	background: var(--dnav-icon-bg);
	overflow: hidden;
}

.dnav-thematique .dnav-thematique__icon img.dnav-icon {
	display: block;
	width: var(--dnav-icon-size) !important;   /* beats width/height HTML attributes and theme img rules */
	height: var(--dnav-icon-size) !important;
	max-width: none;
	object-fit: contain;
}

/* ---------- Button ---------- */

a.dnav-button[href],
a.dnav-button[href]:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: var(--dnav-btn-padding);
	border-radius: var(--dnav-btn-radius);
	font-family: var(--dnav-font);
	font-size: var(--dnav-btn-size);
	font-weight: var(--dnav-btn-weight);
	line-height: 1;
	text-decoration: none;
	background: var(--dnav-btn-bg);
	color: var(--dnav-btn-color);
	transition: background-color .15s ease, color .15s ease;
}

a.dnav-button[href]:hover,
a.dnav-button[href]:focus-visible {
	background: var(--dnav-btn-hover-bg);
	color: var(--dnav-btn-hover-color);
	text-decoration: none;
}

a.dnav-button[href].dnav-button--primary,
a.dnav-button[href].dnav-button--primary:visited {
	background: var(--dnav-btn-primary-bg);
	color: var(--dnav-btn-primary-color);
}

a.dnav-button[href].dnav-button--primary:hover,
a.dnav-button[href].dnav-button--primary:focus-visible {
	background: var(--dnav-btn-primary-hover-bg);
	color: var(--dnav-btn-primary-hover-color);
}

.dnav-button__arrow {
	transition: transform .15s ease;
}

a.dnav-button[href]:hover .dnav-button__arrow {
	transform: translateX(3px);
}

/* Utility: add this class to an Elementor container (column) to hide it
   when the [dnav_list] inside renders nothing (heading + icon included). */
.dnav-hide-if-empty:not(:has(.dnav-list)) {
	display: none !important;
}