/*
 * Datanaos Academy — design system / UI components.
 *
 * Modern, user-friendly polish layered on top of theme.json tokens. Everything
 * here uses theme.json CSS custom properties (colours, spacing, fonts) so the
 * palette stays the single source of truth. Loaded by
 * inc/helpers/template-tags.php.
 */

/* ─── Base / a11y ──────────────────────────────────────────────────────── */
html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--wp--preset--color--secondary);
	color: #fff;
}

/* Visible keyboard focus everywhere (accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Smooth, consistent button feel (theme.json sets the colours). */
.wp-block-button__link {
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	font-weight: 600;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

/* Outline button variant (secondary actions). */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--border);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary);
	box-shadow: none;
}

/* ─── Header ───────────────────────────────────────────────────────────── */
.wp-site-blocks header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	backdrop-filter: saturate(180%) blur(8px);
}

/* ─── Hero (front page cover) ──────────────────────────────────────────── */
.wp-block-cover {
	border-radius: 0;
}

/* Replace the flat 100%-dim overlay with a brand gradient so the hero reads
   modern instead of a single navy block. */
.wp-block-cover.alignfull .wp-block-cover__background {
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--secondary) 100%
	);
	opacity: 1;
}

.wp-block-cover h1 {
	font-size: clamp(2rem, 5vw, 3.25rem);
	letter-spacing: -0.03em;
}

/* On a dark hero the default (navy) button is invisible — make it a light,
   high-contrast pill. */
.wp-block-cover .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.wp-block-cover .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

/* ─── Course cards (catalogue) ─────────────────────────────────────────── */
/* WordPress puts its grid layout on the outer .wp-block-query wrapper, which
   squeezes the post-template into a single narrow track. Neutralise it so the
   post-template can span the full width and own the real grid. */
.post-type-archive-sfwd-courses .wp-block-query.is-layout-grid,
.tax-ld_course_category .wp-block-query.is-layout-grid,
.search .wp-block-query.is-layout-grid {
	display: block;
}

/* Force a responsive 3/2/1 grid on the post-template itself. WordPress
   sometimes puts the grid layout on the outer .wp-block-query wrapper and
   leaves the post-template in flow, which stacks the cards in one column.
   Scoping by body class keeps other post queries untouched. */
.post-type-archive-sfwd-courses .wp-block-post-template,
.tax-ld_course_category .wp-block-post-template,
.search .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
	.post-type-archive-sfwd-courses .wp-block-post-template,
	.tax-ld_course_category .wp-block-post-template,
	.search .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.post-type-archive-sfwd-courses .wp-block-post-template,
	.tax-ld_course_category .wp-block-post-template,
	.search .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

.cours-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cours-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
	border-color: transparent;
}

.cours-card .wp-block-post-featured-image {
	margin: 0;
}

.cours-card .wp-block-post-featured-image img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.cours-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
	margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
}

.cours-card .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.cours-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

/* ─── Course meta badges (durée / niveau / leçons) ─────────────────────── */
.course-meta {
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0;
}

.dn-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
}

.dn-badge svg {
	width: 1em;
	height: 1em;
	opacity: 0.7;
}

.dn-badge--level {
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 12%, transparent);
	color: var(--wp--preset--color--secondary);
}

/* ─── User course list (shortcode) ─────────────────────────────────────── */
.datanaos-user-courses {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.datanaos-user-courses li {
	margin: 0;
}

.datanaos-user-courses a {
	display: block;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.datanaos-user-courses a:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
	border-color: transparent;
}

/* ─── Content media polish ─────────────────────────────────────────────── */
.wp-block-post-content img,
.wp-block-post-featured-image img {
	border-radius: 12px;
}

.single-sfwd-courses .wp-block-post-featured-image img {
	border-radius: 16px;
}

/* ─── Catalogue (shortcode: filters + grid) ────────────────────────────── */
.dn-lede {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lg);
	max-width: 60ch;
}

.dn-catalogue__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
}

.dn-search {
	display: flex;
	flex: 1 1 280px;
	min-width: 220px;
}

.dn-search input {
	flex: 1;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-right: 0;
	border-radius: 10px 0 0 10px;
	background: var(--wp--preset--color--base);
	font: inherit;
}

.dn-search button {
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 0 10px 10px 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.dn-search button:hover {
	background: var(--wp--preset--color--secondary);
}

.dn-filter {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--sm);
}

.dn-filter__label {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.dn-filter select {
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font: inherit;
}

.dn-catalogue__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
	.dn-catalogue__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.dn-catalogue__grid {
		grid-template-columns: 1fr;
	}
}

/* Shortcode card internals (article.cours-card). */
.cours-card__media {
	display: block;
}

.cours-card__media img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.cours-card__media--placeholder {
	height: 180px;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--secondary)
	);
}

.cours-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
}

.cours-card__badge {
	align-self: flex-start;
	margin: 0;
}

.cours-card__title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
	margin: 0;
}

.cours-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.cours-card__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

/* ─── Pagination ───────────────────────────────────────────────────────── */
.dn-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	padding: 0;
	margin: var(--wp--preset--spacing--50) 0 0;
}

.dn-pagination a,
.dn-pagination span {
	display: inline-flex;
	min-width: 2.4rem;
	height: 2.4rem;
	align-items: center;
	justify-content: center;
	padding: 0 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.dn-pagination .current {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-color: var(--wp--preset--color--primary);
}

/* ─── Course page (single) ─────────────────────────────────────────────── */
.dn-course-hero {
	margin-bottom: var(--wp--preset--spacing--50);
}

.dn-course-hero .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--30);
}

/* ─── Curriculum (programme) ───────────────────────────────────────────── */
.dn-curriculum {
	list-style: none;
	counter-reset: none;
	margin: var(--wp--preset--spacing--30) 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
}

.dn-curriculum__item + .dn-curriculum__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.dn-curriculum__item a,
.dn-curriculum__item > span {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.dn-curriculum__item.is-unlocked a:hover {
	background: var(--wp--preset--color--surface);
}

.dn-curriculum__item.is-locked {
	color: var(--wp--preset--color--muted);
}

.dn-curriculum__num {
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	font-variant-numeric: tabular-nums;
}

.dn-curriculum__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1;
}

.dn-curriculum__title {
	font-weight: 600;
}

.dn-curriculum__goal {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.dn-curriculum__play,
.dn-curriculum__lock {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	opacity: 0.7;
}

.dn-curriculum__play {
	color: var(--wp--preset--color--secondary);
}

/* ─── Learner dashboard ────────────────────────────────────────────────── */
.dn-dash__hello {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.dn-dash__resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: 16px;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--secondary)
	);
	color: #fff;
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--50);
}

.dn-dash__resume:hover {
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
}

.dn-dash__resume-label {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--sm);
	opacity: 0.85;
}

.dn-dash__resume-title {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: #fff;
}

.dn-dash__resume-go {
	margin-left: auto;
	font-weight: 600;
}

.dn-dash__heading {
	font-size: var(--wp--preset--font-size--lg);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
}

.dn-dash__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.dn-dash-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

.dn-dash-card__title {
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
}

.dn-dash-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.dn-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.dn-progress__bar {
	height: 100%;
	border-radius: 999px;
	background: var(--wp--preset--color--success);
	transition: width 0.4s ease;
}

.dn-dash-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dn-dash-card__pct {
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.dn-dash-card__cta {
	font-weight: 600;
	text-decoration: none;
}

.dn-dash-card__cert {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.dn-dash__account {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	font-weight: 600;
}

/* ─── Focus mode: table of contents + reading progress ─────────────────── */
.dn-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: transparent;
	z-index: 200;
}

.dn-reading-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--secondary);
}

.dn-lesson-toc {
	background: var(--wp--preset--color--surface);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.dn-lesson-toc__title {
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.dn-toc {
	margin: 0;
	padding-left: 1.1rem;
}

.dn-toc__item {
	margin: 0.2rem 0;
}

.dn-toc__item--h3 {
	margin-left: 1rem;
	list-style: circle;
	font-size: var(--wp--preset--font-size--sm);
}

.dn-toc a {
	text-decoration: none;
}

.dn-toc a:hover {
	text-decoration: underline;
}

/* ─── Parcours (paths) ─────────────────────────────────────────────────── */
.dn-parcours-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.dn-progress--lg {
	height: 12px;
}

.dn-parcours__progress {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
}

.dn-parcours__progress .dn-progress {
	flex: 1;
}

.dn-parcours__progress-label {
	font-weight: 700;
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
}

.dn-parcours {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* vertical connector line */
.dn-parcours::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 18px;
	bottom: 18px;
	width: 2px;
	background: var(--wp--preset--color--border);
}

.dn-parcours-step {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	position: relative;
}

.dn-parcours-step__num {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	border: 2px solid var(--wp--preset--color--border);
	z-index: 1;
}

.dn-parcours-step.is-done .dn-parcours-step__num {
	background: var(--wp--preset--color--success);
	border-color: var(--wp--preset--color--success);
	color: #fff;
}

.dn-parcours-step.is-current .dn-parcours-step__num {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: #fff;
}

.dn-parcours-step__body {
	flex: 1;
}

.dn-parcours-step__title {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--md);
}

.dn-parcours-step__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.dn-parcours-step__pct {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

/* ─── Empty / 404 / search states ──────────────────────────────────────── */
.dn-empty-state {
	text-align: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--30);
}

.dn-empty-state h1 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.dn-empty-state p {
	color: var(--wp--preset--color--muted);
	max-width: 40ch;
	margin-inline: auto;
}