/*
Misc
*/
.imio-no-border {
	border: none !important;
}

.imio-no-shadows {
	box-shadow: none !important;
}

input,
textarea,
button,
select,
a,
div {
	-webkit-tap-highlight-color: rgba(
		0,
		0,
		0,
		0
	); /* for removing the highlight on tap (mobile)*/
}

::selection {
	color: white;
	background-color: $darkened-primary-color;
}

h1#logo > a {
	&:hover {
		filter: brightness(108%);
	}
	&:active {
		border: 1px $light-grey dotted;
		filter: brightness(1);
	}
}

.loading,
.error-loading {
	display: block !important;
	color: #5e5e5e !important;
	padding-left: 16px !important;
	font-size: 1.15em !important;
}

.loading {
	animation: blinkingLoading 0.9 infinite;
}

@keyframes blinkingLoading {
	0% {
		color: #111;
	}
	25% {
		color: #333;
	}
	50% {
		color: #555;
	}
	75% {
		color: #333;
	}
	100% {
		color: #111;
	}
}

/*
Header
*/

#toplinks {
	display: none;
}

$logo-width: 110px !default;
$imio-logo-top: 20px !default;
$imio-logo-left: 20px !default;
$imio-logo-height: 40px !default;

#header {
	position: relative;
	h1 {
		position: absolute;
		top: $imio-logo-top;
		left: $imio-logo-left;
		a {
			display: block;
			text-indent: -10000px;
			background: url(/assets/header:logo) top left no-repeat;
			background-size: contain;
			width: $logo-width;
			height: $imio-logo-height;
		}
	}
}

@media screen and (min-width: $nav-mobile-limit) {
	body.has-picture .site-nav::after {
		width: 1598px;
		border-radius: $border-radius;
		margin: 0 auto;
		left: -9px;
	}
}

// TELE-1883 Harmoniser pour les basses résolutions encore très employées.
@media screen and (max-width: 1366px) {
	.page-width,
	.header-width,
	.nav-width,
	.footer-width {
		max-width: 1280px;
	}
	body.has-picture .site-nav::after {
		width: 1260px;
		border-radius: $border-radius;
		background-position: inherit;
	}
}
@media screen and (max-width: 1280px) {
	.page-width,
	.header-width,
	.nav-width,
	.footer-width {
		max-width: 1260px;
	}
	body.has-picture .site-nav::after {
		width: 1240px;
		border-radius: $border-radius;
		background-position: inherit;
	}
}

@media screen and (max-width: $nav-mobile-limit) {
	#logo.has-logo {
		padding-left: 0;
		left: 0;
		width: 100%;
		a {
			width: 100%;
			background-position: center;
		}
	}
	body.has-picture .site-nav::after {
		width: 100%;
		border-radius: 0;
		background-position: top;
		background-size: cover;
		height: 185px;
	}
	#footer {
		padding-left: 9px;
		padding-right: 9px;
	}
}

$nav-height: 10rem;

nav.site-nav {
	@media screen and (max-width: $nav-mobile-limit) {
		margin-top: 75px;
		div.gru-nav .gru-nav-button {
			position: absolute;
			top: 10px;
			right: 10px;
			& {
				.icon-bar {
					background: $imio-mobile-hamburger-menu-icon-bar-color;
					transition: none;
				}
				.icon-bar-1,
				.icon-bar-2,
				.icon-bar-3 {
					left: auto;
					right: 17%;
				}
				.icon-bar-2 {
					width: 50%;
					left: auto;
				}
			}
			&.toggled {
				.icon-bar-2,
				.icon-bar-3 {
					width: 66%;
				}
			}
			+ ul {
				margin-top: 50px;
			}
		}
	}
}

div#nav {
	margin-bottom: 2em;
	padding-right: 1.2em;
	> ul {
		margin-left: #{$logo-width + 68px};
		background-color: #e6e6e6;
		border-radius: $border-radius $border-radius 0 $border-radius;
		@media screen and (max-width: $nav-mobile-limit) {
			margin-left: 0;
		}
		ul {
			box-shadow: $imio-box-shadow-style-upper;
		}
		a {
			transition: none;
			@media screen and (max-width: $nav-mobile-limit) {
				border-radius: 0;
			}
		}
	}
	li.has-submenu {
		> a > span {
			&::after {
				// font-family: FontAwesome;
				padding-left: 3px;
				content: "⌄"; // angle-down
			}
		}
	}
}

div.gru-nav > ul > li a {
	text-transform: uppercase;
	font-weight: 600;
}

@media screen and (max-width: $nav-mobile-limit) {
	.text-cell h1 {
		margin-left: 1.3em;
		margin-right: 1.3em;
	}
	.pwa-navigation div > ul li a span,
	.pwa-navigation div#nav ul li a span {
		margin-top: 7px;
		font-size: 11px;
	}
}

/* 2022-11-24 · MTELEGRZA-8 : avoid lost li menu items if big logo */
ul.menu {
	display: flex;
	flex-wrap: wrap;
}

/*
Mettre en évidence le panier
https://support.imio.be/browse/TELE-1645
*/
.badge {
	background-color: $primary-color;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 4px;
	margin-left: 7px;
	color: if(lightness($primary-color) > 50, #333, white);
}
div.gru-nav span.badge::after,
div.menucell span.badge::after,
div.gru-nav span.badge::before,
div.menucell span.badge::before {
	content: "";
}

/*
Cells
*/
@media screen and (max-width: 800px) {
	#columns-wrapper {
		padding: 0 0.2em;
	}
}

/* iA.Citizen : fix insivible dashboard cells with margin causing big spaces */
.cell.config-json-cell {
	margin-bottom: 0 !important;
}

@media screen and (min-width: $nav-mobile-limit) {
	.text-cell h1 {
		margin-left: 1.3em;
		margin-right: 1.3em;
	}
}

@if $imio-box-shadow-turned-on {
	.cell,
	.block,
	.a2-block,
	#nav,
	#header {
		box-shadow: $imio-box-shadow-style;
	}
}

// .column div.a2-block,
// .gru-content div.cell,
// .block {
// 	margin-bottom: 1.7rem;
// }

div.textcell {
	margin-right: 1.2rem;
	h2,
	h3,
	h4,
	h5,
	p,
	table,
	ol,
	ul {
		margin: 1.386em 1.618rem;
	}
	p,
	table,
	ul,
	ol {
		line-height: 1.4;
	}
}

@media screen and (max-width: $nav-mobile-limit) {
	h2,
	h3,
	h4,
	h5,
	p,
	table,
	ol,
	ul {
		margin: 1.386em 0.386rem;
	}
	p,
	table,
	ul,
	ol {
		line-height: 1.3;
	}
}

p.empty-dashboard,
p.empty-message,
div.deliberations-communales p {
	margin: 1.386em 1.618rem !important;
}

div.cell .cell--body {
	padding: 0 !important;
}

.link-list-cell .links-list {
	border-radius: $border-radius;
	font-size: 0.96em;
	li {
		border-bottom: 1px dashed #ccc;
		a {
			background-image: linear-gradient(#fff 0, #fcfcfc 100%);
			background-clip: content-box, border-box;
			&:hover {
				background-image: linear-gradient(#fcfcfc 0, #fff 100%);
				color: $link-color;
				&::after {
					content: "→";
					margin-left: 10px;
				}
			}
		}
	}
	li:last-child {
		border-bottom: none;
	}
}

#footer .cell,
#nav {
	box-shadow: none;
}

div#rub_service div.category ul > li:first-child:not(.more-items--item) a,
div#services > ul > li > ul > li:first-child:not(.more-items--item) a,
div#account-management ul > li:first-child:not(.more-items--item) a,
div.links-list ul > li:first-child:not(.more-items--item) a,
div.menucell ul > li:first-child:not(.more-items--item) a,
div.wcsformcell > li:first-child:not(.more-items--item) a,
div.categoriescell ul > li:first-child:not(.more-items--item) a,
div.wcsformsofcategorycell ul > li:first-child:not(.more-items--item) a,
div.wcscurrentdraftscell ul > li:first-child:not(.more-items--item) a,
div.wcscurrentformscell ul > li:first-child:not(.more-items--item) a {
	border-radius: 0;
}

div#rub_service div.category ul > li:last-child a:only-child,
div#services > ul > li > ul > li:last-child a:only-child,
div#account-management ul > li:last-child a:only-child,
div.links-list ul > li:last-child a:only-child,
div.menucell ul > li:last-child a:only-child,
div.wcsformcell > li:last-child a:only-child,
div.categoriescell ul > li:last-child a:only-child,
div.wcsformsofcategorycell ul > li:last-child a:only-child,
div.wcscurrentdraftscell ul > li:last-child a:only-child,
div.wcscurrentformscell ul > li:last-child a:only-child {
	border-radius: 0;
}

.wcs-forms-of-category-cell {
	padding-bottom: 16px;
	.links-list {
		ul li a {
			&:hover {
				&::after {
					content: "→";
					margin-left: 10px;
				}
			}
		}
	}
}

div.link-cell.pk-button ul > li > a,
.link-cell.lingo-basket-cell--item-pay ul > li > a,
div.link-cell.pk-big-button ul > li > a,
a.pk-button,
a.lingo-basket-cell--item-pay,
a.pk-big-button,
div.table-container ul.pagination li.previous a,
div.table-container ul.pagination li.next a,
.fargo-pick-popup button,
button.ui-button,
a#a2-continue,
.gru-content button,
input[type="submit"],
div.buttons input,
.gru-content button.cancel-button,
div.buttons .cancel-button button {
	transition: background 0.1s cubic-bezier(0.79, 0.14, 0.15, 0.86),
		color 0.1s cubic-bezier(0.79, 0.14, 0.15, 0.86),
		border 0.1s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

div#content div.wcsformsofcategorycell.has-asset-picture,
div#content div.link-list-cell.has-asset-picture {
	$imio-formsofcategorycell-asset-height: 130px;
	position: relative;
	padding-bottom: 0;
	picture img {
		width: 100%;
		object-fit: cover;
		height: $imio-formsofcategorycell-asset-height;
	}
	@media screen and (min-width: $nav-mobile-limit) {
		h2 {
			font-size: 1.1em;
		}
	}
	h2 {
		position: absolute;
		width: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.33);
		color: white;
		height: $imio-formsofcategorycell-asset-height;
		padding-top: 50px;
		font-weight: bold;
		&::after {
			font-size: 1.2em;
		}
	}
	&.foldable {
		@media screen and ($max-mobile-viewport) {
			h2 {
				padding-right: 50px; // for folding arrow
			}
		}
		h2::after {
			font-size: 30px;
		}
	}
}

.wcs-forms-of-category-cell > div > div > ul > li:last-child > div.description {
	margin-bottom: 16px;
}

.links-list ul li {
	position: relative; // needed for form_lock.svg positionning
}

.required-fedict-authentication::after,
li.required-authentication a:after {
	background-image: url("images/form_lock.svg");
	background-repeat: no-repeat;
	background-size: 20px 20px;
	content: "";
	position: absolute;
	width: 20px;
	height: 53px;
	background-position: right center;
	z-index: 2;
	top: 0;
	right: 0;
	margin-right: 10px;
}

div#carrousel,
.cell.dashboard-cell.dashboardcell,
.actualites,
.deliberations-communales,
.evenements {
	margin-right: 1.2rem;
}

span.form-status {
	font-weight: normal;
}

/* fix input from tracking-code cell taking too much space */
.wcs-tracking-code-input input {
	width: 150px !important;
}

.actualites,
.deliberations-communales,
.evenements {
	margin-bottom: 10px !important;
	box-shadow: none !important;
	border: 0 !important;
}

div#tracking-code h3,
.form-content--title,
div#rub_service h2,
.godo-dialog--title,
div#rub_service div.category h3,
.gru-content div.a2-block h2,
.gru-content .block h2,
div.links-list h2,
.gru-content div.textcell h2:first-child,
.gru-content div.cell h2:first-child {
	font-weight: normal;
	letter-spacing: -0.023em;
}

.text-cell h3 {
	font-weight: lighter;
	font-size: 1.3em;
}

/*
Links
*/
div.cell p > a:not(.pk-button),
picture .link-cell:not(.has-asset-picture) a,
.comment-field a {
	text-decoration: underline;
	text-decoration-thickness: 0.09em;
	text-decoration-style: dotted;
	transition: all linear 0.1s;
	text-underline-offset: 0.35em;
	&:hover {
		text-decoration: none;
		color: darken($link-color, 10%);
	}
}

.link-cell:not(.has-asset-picture) {
	div {
		margin: 1.386em 1.618rem;
	}
}

div.link-cell.has-asset-picture {
	div {
		position: relative;
	}
	border: none;
	box-shadow: none;
	picture img {
		border-radius: $border-radius $border-radius 0 $border-radius;
		max-width: 100%;
		min-height: 100%;
		max-height: none;
		object-fit: cover;
	}
	picture {
		overflow: hidden;
		height: 224px;
		max-width: 100%;
		position: relative;
		display: block;
		&::before {
			border-radius: $border-radius $border-radius 0 $border-radius;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #333;
			opacity: 0.2;
			transition: opacity cubic-bezier(0.79, 0.14, 0.15, 0.86) 0.1s;
		}
	}
	&:hover picture {
		&::before {
			opacity: 0.7;
		}
	}
	a.asset-link {
		padding: 0;
	}
	a:not(.asset-link) {
		position: absolute;
		display: block;
		bottom: 75px;
		padding-left: 15px;
		color: white;
		font-weight: bold;
		&:hover {
			text-decoration: none;
		}
		span {
			background-color: $darkened-primary-color;
			padding-left: 0.2em;
			padding-right: 0.2em;
			&::after {
				content: "→";
			}
		}
	}
	a {
		padding-top: 0;
		padding-left: 0;
		&::after {
			content: none;
		}
	}
}

/*
Forms
*/
// Mobile adjustments
@media screen and (max-width: $nav-mobile-limit) {
	form button {
		margin-top: 10px;
	}
	div#rub_service {
		// Completing a form
		h2 {
			padding: 0.386rem;
		}
	}
	div#tracking-code h3 {
		padding: 0.386rem;
	}
}

.wcs-step:not(:last-child)::after {
	z-index: -1;
}

form.quixote div.hidden,
div.invisible {
	display: none;
}

.wcs-step.current .wcs-step--label {
	color: if(lightness($primary-color) > 50, #333, white);
}

div.widget div.title {
	margin-bottom: 15px;
}

/*
Buttons
*/

div.link-cell.pk-button ul > li > a,
.link-cell.lingo-basket-cell--item-pay ul > li > a,
div.link-cell.pk-big-button ul > li > a,
a.pk-button,
a.lingo-basket-cell--item-pay,
a.pk-big-button,
div.table-container ul.pagination li.previous a,
div.table-container ul.pagination li.next a,
.fargo-pick-popup button,
button.ui-button,
a#a2-continue,
.gru-content button,
input[type="submit"],
div.buttons input,
.gru-content button.cancel-button,
div.buttons .cancel-button button {
	box-shadow: none;
	&:hover {
		box-shadow: none;
	}
	&:active {
		border: 2px #ccc inset;
	}
}

.cancel {
	background: 0 !important;
	border: 0 !important;
	color: $link-color !important;
	&:hover {
		color: $darkened-primary-color !important;
		text-decoration: underline !important;
	}
	&:active {
		color: lighten($darkened-primary-color, 5%) !important;
		border: 1px dotted $primary-color !important;
	}
}

/*
Footer
*/
#footer a {
	color: $link-color-footer;
}

a.back-top--link:hover {
	text-decoration: none;
}

/* hotfix meal calendar for PP */
tbody > tr > td.jour {
	height: 100px; // cell will grow since height function like min-height in table cells
}

/* iA.Citizen related (Dashboard & others)*/
@if $imio-is-iacitizen {
	#content div.profile-cell {
		div.profile {
			padding-top: 0;
			padding-bottom: 0;
		}
		p.edit-link {
			margin-left: 1em;
		}
	}

	.dashboardcell .cell {
		border: 0;
	}

	// .column:last-child .cell {
	// 	margin-right: 1ex;
	// }

	.dashboardcell .categories button {
		padding: 0.1em 0.7em;
		margin-right: 0.3em;
		margin-bottom: 0.2em;
		&::after {
			content: " \002714";
		}
		&.off {
			border: 1px solid $primary-color;
			color: darken($darkened-primary-color, 10%);
			background: white;
			&::after {
				color: white;
			}
		}
	}

	.loading {
		display: none;
	}

	.eventitems,
	.newsitems,
	.deliberations-communales {
		// margin: 0 1ex;
		border: 0;
		box-shadow: none;
	}

	div.deliberations-communales {
		h2:first-child {
			padding-left: 0;
		}
		p {
			margin-top: 0;
		}
	}

	.delib,
	.eventitem,
	.newsitem {
		display: flex;
		margin: 1ex;
		@media screen and (max-width: $nav-mobile-limit) {
			flex-direction: column;
		}
		img {
			border-radius: $border-radius;
			flex: 0;
			width: 133px;
			height: 133px;
			@media screen and (max-width: $nav-mobile-limit) {
				margin: 0 0.33em;
			}
		}
		div {
			flex: 1;
			margin-left: 1em;
			h3 {
				margin-top: 1ex;
				margin-bottom: 0;
			}
			h4 {
				margin: 0;
			}
			p {
				margin-top: 0.2em;
			}
		}
	}

	.dashboard-settings {
		display: flex;
		.dashboard-meta {
			flex: 1;
			h2 {
				height: 1em !important;
				font-size: 1.1em !important;
				padding: 15px 10px 10px 10px !important;
				height: 40px !important;
			}
		}
		.dashboard-switch {
			scale: 0.8;
			padding-top: 10px;
			input {
				box-shadow: none;
				background: 0;
				-webkit-appearance: none;
				-webkit-tap-highlight-color: transparent;
				padding: 0;
				position: relative;
				border: 0;
				outline: 0;
				cursor: pointer;
				overflow: initial;
				$switch-width: 3em;
				$switch-height: 1.5em;
				$switch-slider-diameter: 1.75em;
				&::after {
					content: "";
					width: $switch-width;
					height: $switch-height;
					display: inline-block;
					background: rgba(196, 195, 195, 0.55);
					border-radius: 1em;
					clear: both;
					transition: ease 0.3s;
				}
				&:checked::after {
					background: $darkened-primary-color;
				}
				&::before {
					content: "";
					width: $switch-slider-diameter;
					height: $switch-slider-diameter;
					display: block;
					position: absolute;
					left: 0;
					top: #{($switch-height - $switch-slider-diameter) / 2};
					border-radius: 50%;
					background: #fff;
					box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
					transition: ease 0.3s;
				}
				&:checked::before {
					left: #{$switch-width - $switch-slider-diameter};
					box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
				}
			}
		}
	}
}

/* Misc Mobile Fixes */

@media screen and (max-width: $nav-mobile-limit) {
	div#tracking-code h3,
	.form-content--title,
	div#rub_service h2,
	.godo-dialog--title,
	div#rub_service div.category h3,
	.gru-content div.a2-block h2,
	.gru-content .block h2,
	div.links-list h2,
	.gru-content div.textcell h2:first-child,
	.gru-content div.cell h2:first-child {
		padding: 0.8rem 0.5rem;
	}
	div.textcell h2,
	div.textcell h3,
	div.textcell h4,
	div.textcell h5,
	div.textcell p,
	div.textcell table,
	div.textcell ol,
	div.textcell ul {
		margin: 1.5em 0.618rem;
	}
	div.textcell,
	div#carrousel,
	.cell.dashboard-cell.dashboardcell,
	.actualites,
	.deliberations-communales,
	.evenements {
		margin-right: 0;
	}
	.dashboardcell {
		.cell div.categories {
			padding: 0.3rem 0.1rem !important;
			button {
				padding: 0.2em 0.2em;
				margin-right: 0.29em;
				margin-bottom: 0.3em;
				height: 25px;
				font-size: 0.9em;
			}
		}
		.delib,
		.eventitem,
		.newsitem {
			div {
				margin-left: 0;
			}
			h4 {
				margin-left: 0.4em;
			}
		}
	}
}
