:root {
	--color-brand-deco: #2bd6d9;

	--color-brand: #2e1452;
	--color-primary: #000;
	--color-accent: #3836bf;
	--color-brand-accent: #3836bf;
	--header-logo-width: 250px;
	--header-height: 98px;

	--blocks-background: var(--color-background);

	--main-background: #f4f4f4;
	--footer-background: var(--main-background);
	--color-local-menu-selected: var(--color-brand-accent);
	--color-local-menu-selected-hovered: var(--clr-700);
	--background-local-menu-selected: var(--main-background);

	/* curriculum */
	/*
	--banner-background: var(--blocks-background);
	--banner-color: var(--color-text);
	*/

	/* document lighter */
	--color-items-background: var(--blocks-background);
	--item-document-background: #fafafa;
	--block-title-color: var(--clr-400);

	--histo-background: var(--main-background);

	/* breadcrumbs with dark background
	--color-breadcrumbs: var(--clr-150);
	--color-backtick-background: var(--clr-300);
	*/

	/* 3 per rows */
	--mosaic-min-width: 36ch;
}
input, textarea, select {
	background: var(--blocks-background);
}
.ql-container, .ql-toolbar {
	background: var(--blocks-background);
}

legend {
	border-top-left-radius: var(--ui-border-radius);
	border-top-right-radius: var(--ui-border-radius);
	border-top: var(--ui-border);
	position: relative;
}
fieldset:has(legend) {
	margin-block-start: .5em;
}
legend::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -1px;
	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
}

/* on header a shadow */
header#page-header {
	box-shadow: 0 2px 5px hsla(0, 0%, 0%, .1);
}


/* in admin, white page */
/*
main#page-content:has(.local-menu) section#main-container {
	background: var(--blocks-background);
}
main#page-content:has(.local-menu) + footer#page-footer {
	background: var(--blocks-background);
}
*/

#courses-details-front .course-details-front,
#curriculum .single .course-details-front {
	padding: 1em;
}

.item-title {
	font-size: var(--fs-larger);
}
/*
.curriculum:not(.single) .banner .item-title {
	color: var(--color-brand);
}
*/
.document .item-title {
	box-shadow: 0 0 5px hsla(0, 0%, 50%, .1);
}

.banner.item-main-info {
	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
}
.banner .item-duration-status {
	padding-inline: .5em;
}

.item-histo-container {
	background: var(--color-items-background);
}
.item-desc-long {
	background: var(--color-items-background);
}
.curriculum .item-visual-completion {
	background: var(--blocks-background);
	border: var(--ui-border);
}
.curriculum:not(.single) .item-histo-container {
	background: transparent;
}
.curriculum:not(.single) .item-histo {
	background: var(--blocks-background);
	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
}

/* due to border on the banner */
.curriculum .banner {
	margin-block-end: -1px;
}
.curriculum .nav-local-container {
	margin-inline-end: 1px;
}

.package {
	--package-color-name: var(--clr-500);
	--package-color-defs: var(--clr-300);
	--package-color-name-hover: var(--clr-700);
}
.package.version-pending .package-type {
	opacity: .75;
}

#type3,
#type5 {
	--block-background: var(--blocks-background);
	--block-color: var(--color-primary);
	--block-title: var(--color-brand);
}

/* page type3 */
[data-mode^="pages"]:has(#type3) {
	.page-width-constrained:has(#block-header img){
		padding-inline: 0;

		#block-middle {
			padding-inline: var(--constrained-margin);
		}
	}
	.mydashboard-block-container,
	.pages-block-text-container {
		background: var(--blocks-background);
		padding: .5lh 1ch;
		height: 100%;
	}

	div#pages-default-main-container {
		h4.block-title {
			line-height: revert;
			font-size: var(--fs-x-large);
			font-weight: var(--fw-bolder);
			color: var(--block-title);

			padding-block-end: .25lh;
			margin-block-end: .5lh;
			border: 0;
		}
	}
	#middle-right {
		display: grid;
		align-items: stretch;
	}
}

/* page type5 */
[data-mode^="pages"] {
	.page-width-constrained:has(#type5 .b1 img) {
		padding-inline: 0;

		.block:not(.b1) {
			padding-inline: var(--constrained-margin);

			@media (width > 120ch){
				&.b2 {
					padding-inline-end: 0;
				}
				&.b3 {
					padding-inline-start: 0;
				}
			}
		}
	}
}

div#pages-default-main-container,
div#pages_form-container {

	#type5 {

		h4.block-title {
			border: 0;
			line-height: var(--lh-secondary);
			font-size: var(--fs-x-large);
			font-weight: var(--fw-bolder);
			color: var(--block-title);
		}

		.block:not(.b1) {
			display: grid;
			align-items: stretch;

			.pages-block-text-container {
				display: grid;
				gap: .5lh 0;

				&:has(h4.block-title) {
					grid-template-rows: auto 1fr;

					h4.block-title {
						border: 0;
						line-height: var(--lh-secondary);
						font-size: var(--fs-x-large);
						font-weight: var(--fw-bolder);
					}
				}

				.texts_text_container {
					align-self: stretch;
					padding: 1lh 2ch;
					border-radius: var(--ui-border-radius);
				}
			}
		}
	}
}
/*
#type5 {
	.b3 {
		--block-background: var(--color-brand);
		--block-color: var(--color-brand-on);
	}
}
*/



body:not(.mobile) .main-menu-container {

	--_color-menu-selected-hovered: var(--color-brand-accent);

	align-self: stretch;
	align-items: stretch;

	.main-menu-mutator {
		height: 100%;

		.menu-main-options-container {
			height: 100%;

			.main-menu {
				height: 100%;
				align-items: stretch;
				padding-block: 0;
				gap: 0 1px;

				.menu-option {
					cursor: pointer;

					border-block: 3px solid transparent;
					transition:
						background 250ms ease-in,
						border-block-color 250ms ease-in;

					& a {
						height: 100%;
						display: grid;
						align-items: center;
						padding-inline: 2ch;
					}

					&:is(:hover, .selected){
						background: var(--clr-150);
						border-block-start: 3px solid var(--color-brand-deco);
					}
					&.selected {
						color: var(--color-brand-accent);
					}
				}
			}
		}
	}
}

body:is([data-mode^="login"], [data-mode="logout"]){
	.login-header {

		--login-logo: url('../brand/logodekuple-white.svg');
		--login-logo-height: 3.5lh;
		--login-logo-margin-block: 2lh 3lh;

		.login-logo {
			background-image: var(--login-logo);
		}
	}
}



.item-thumbnail {
	object-fit: contain;
}