:root {
	/* larger max font
	--fs-primary: clamp(1rem, 2vw + .25rem, 1.25rem);
	*/

	--blocks-background: var(--color-background);
	--main-background: #f0f0f0;
	--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);

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

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


	/* 3 per rows */
	--mosaic-min-width: 36ch;

	/* bca */
	--header-logo-width: 220px;
	--header-height: 3.5lh;
	--color-brand: #00158e;
	--color-accent: var(--color-brand);

	--background-sub-menu-selected-hovered: #fec700;
	--color-sub-menu-selected-hovered: var(--color-brand);

	/* thumbnails */
	/*
	--thumbnail-ratio: 16 / 10;
	*/

}
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;
}

/* jsu thumbnails */
.jsu-thumbnail-placeholder {
	--jsu-placeholder-background: #ffffff;
}


/* temp */
.item-thumbnail {
	object-fit: contain;
}


[data-mode^="login"],
[data-mode="logout"] {
	background-image: url('imgs/pexels-quentin-martinez-2147503099-29648178.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	background-color: transparent;

	main {
		background: transparent;
	}
	footer#page-footer {
		display: none;
	}
	#users-form-main-container {
		form > fieldset {
			padding: 1em;
			margin-inline: auto;
			width: 100%;
			max-width: 80ch;
			border-radius: 1em;
			padding-block: 1lh;
			box-shadow:
				0 .5em 15em rgba(0, 0, 0, 0.2),
				0 .25em .75em rgba(0, 0, 0, 0.1);

			legend {
				display: none;
			}
			dd.form.tab:has(#remember) > *:not(a) {
				display: none;
			}
			#user_password {
				width: 100%;
				max-width: min(100%, var(--input-narrow-max-width));
			}
		}
	}
}


/* 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;
				}
			}
		}
	}
}

#type5 {
	--block-background: var(--blocks-background);
	--block-color: var(--color-primary);
	--block-title: var(--color-brand);
}
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);
	}
}