:root {

	--main-color: #333;
	--color-brand: #00a36d;
	--color-brand-alt: #02ac79;
	--color-brand-dark: #008859;
	--color-background: var(--clr-100);


	--main-background: #f9f9fa;
	--blocks-background: var(--color-background);

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

	/* header */
	--header-height: 5rem;
	--header-padding-block: 1px;
	--header-outter-height: calc(var(--header-height) + var(--header-padding-block) * 2);
	--header-logo-width: 260px;

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

body[data-mode^="pages"] {
	/* old home page */
	#type2 {
		margin-block: 2lh;
		background: var(--blocks-background);
		padding-inline: 1ch;
		border-radius: var(--ui-border-radius);
		box-shadow: 0 0 2px hsl(0 0% 0% / .1);

		.pages-block-user-container .block-title {
			display: grid;
			grid-auto-flow: column;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 0 .5ch;
		}
	}

	/* new */
	#pages-default-main-container:has(#main) {
		margin-block-end: 2lh;
	}
	#main {
		display: grid;
		grid-auto-flow: row;
		grid-template-rows: auto 1fr;
		gap: 1lh 0;

		@media ( width <= 80ch ){
			gap: .5lh 0;
		}


		#middle-container {
			display: grid;
			grid-template-columns: 1fr 2fr 1fr;
			grid-template-areas: 'advice laius contact';
			gap: .5lh 1ch;

			@media ( width <= 140ch ){
				grid-template-columns: 1fr 1fr;
				grid-template-areas:
					'laius laius'
					'advice contact';
			}
			@media ( width <= 80ch ){
				grid-template-columns: 1fr;
				grid-template-areas:
					'laius'
					'advice'
					'contact';
			}

			strong {
				font-weight: var(--fw-bolder);
			}

			h1 {
				font-size: var(--fs-x-large);
				font-weight: var(--fw-bold);
				color: var(--clr-700);
			}
			#left {
				grid-area: advice;

				h2 {
					font-size: var(--fs-large);
				}
				p {
					font-size: var(--fs-smaller);
				}
			}
			#center {
				grid-area: laius;
			}
			#right {
				grid-area: contact;

				.name {
					font-size: var(--fs-large);
					font-weight: var(--fw-bolder);
					line-height: var(--lh-secondary);
				}
				.name-sub {
					font-size: var(--fs-medium);
					color: var(--clr-700);
					font-weight:: var(--fw-normal);
					line-height: var(--lh-primary);
				}
				p:not(.name, .name-sub) {
					font-size: var(--fs-smaller);
				}
			}
			:is(#left, #center, #right) {
				padding: 1lh 2ch;
				padding-block-end: 1.5lh;
				background: var(--blocks-background);
			}
		}
	}
}

/* menu */
.main-menu {

	.menu-option {
		--_border-color: transparent;
		--_border-size: 2px;
		border-radius: 50%;

		&.selected {
			--_border-color: currentColor;
		}
		.menu-link {
			border-block-end: var(--_border-size) solid var(--_border-color);
		}
	}
}

/* gray background */
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;

	color: var(--color-brand-dark);
}
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);
}



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

.item-title {
	font-size: var(--fs-larger);
}


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


/* alptis */
.sub-menu .menu-option {
	max-width: 19ch;
}

input[type="text"][list] {
	padding-inline-end: 2ch;
	background-image: url("data:image/svg+xml;utf8,<svg fill='gray' width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.25ch center;
	background-size: 1lh 2ch;
}