@import '../includes/fonts/roboto';

body {
	background: white linear-gradient(to right, white, #f2f8fa);
}

h1, h3 {
	font-weight: normal;
}

#content div.cell {
	margin-bottom: 0;
}

#sidebar,
#columns {
	margin-top: 4rem;
}

div#page {
	background: url(img/fond-bulles.png) top 240px right calc((100vw - #{$width}) / 2 - 200px) no-repeat;
	overflow: hidden;
}

// header
div#header-wrapper {
	background: $blue;
	background: linear-gradient(135deg, #00a0bc, #007793);
	height: 210px;
	#header {
		height: 100%;
		background: transparent url(img/logo.png) 120px 100% no-repeat;
	}
}

div#header::after {
	content: "";
	background: url(img/illu-bandeau.png) bottom center no-repeat;
	width: 327px;
	height: 254px;
	display: block;
	position: absolute;
	top: 0;
	left: 550px;
}

#logo a {
	background: url(img/portail.png) top left no-repeat;
	display: inline-block;
	text-indent: -2000px;
	width: 259px;
	height: 44px;
	padding: 0;
	margin-top: 100px;
	margin-left: 250px;
	&::before {
		content: "← Accueil";
		text-indent: 0;
		position: absolute;
		left: 260px;
		top: 60px;
		font-size: 0.75rem;
		font-weight: normal;
		color: white;
	}
}

// alter header and navigation for authenticated vs anonymous users
body.authenticated-user {
	div#nav {
		li.menu-je-cree-mon-compte { display: none; }
		li.menu-je-me-connecte { display: none; }
	}
}

body.anonymous-user {
	#toplinks {
		display: none;
	}
	div#nav {
		li.menu-mon-profil { display: none; }
		li.menu-mes-demandes { display: none; }
		li.menu-mes-demarches { display: none; }
	}
}

// custom header image and background for home page
.page-accueil-seine-et-marne-aides-sociales,
.page-index {
	#columns {
		margin-top: 0;
	}
	#logo a {
		background: url(img/bienvenue.png) top left no-repeat;
		display: inline-block;
		text-indent: -2000px;
		width: 733px;
		height: 144px;
		padding: 0;
		margin-top: 60px;
		margin-left: 250px;
		&::before {
			content: none;
		}
	}

	div#header::after {
		content: none;
	}

	#nav-wrapper div#nav {
		background: transparent url(img/accueil.png) 120px 0px no-repeat;
		@media screen and (max-width: $very-small-limit) {
			background: transparent;
		}
	}

	div#page {
		background: transparent;
	}
}


// navigation

.site-nav {
	z-index: 5;
}

#nav-wrapper div#nav {
	margin-bottom: 0;
	& > ul {
		margin-top: -3rem;
		margin-bottom: 0;
		text-align: right;
		> li {
			margin-top: 1rem;
			ul { // no submenu
				display: none;
			}
		}
	}
	& > ul > li > a {
		background: linear-gradient(to right, #f82a3f, #ff5160);
		color: white;
		border-radius: 3rem;
		transition: none;
		&:hover {
			background: #f82a3f;
		}
	}
}

// top user info login/logout link
#toplinks {
	top: 40px;
	border-radius: 2ex;
	border: 1px solid white;
	background: transparent;
	box-shadow: none;
	padding: 1ex;
	a {
		color: white;
		font-weight: bold;
		margin-right: 2ex;
	}
	span.connected-user {
		padding-right: 2rem;
		margin-right: 2ex;
		font-size: 80%;
	}
	a.logout {
		display: inline-block;
		text-indent: -2000px;
		margin-right: 0;
		&::after {
			content: "\f05c";  // fa-times-circle-o
			font-family: FontAwesome;
			position: absolute;
			font-weight: normal;
			text-align: right;
			right: 0;
			width: 3ex;
			height: 2ex;
			padding-right: 1ex;
			text-indent: 0;
		}
	}
}


// footer
#footer {
	padding: 3rem 1rem;
	background: url(img/logo-pole-autonomie.png) bottom right no-repeat;
	ul {
		margin: 0;
		padding: 0;
	}
	ul li {
		display: inline-block;
		a {
			color: white;
			font-weight: bold;
			font-size: 80%;
		}
		padding: 0 2rem;
		border-right: 1px solid white;
		&:first-child {
			padding-left: 0;
		}
		&:last-child {
			border-right: none;
		}
	}
}

// utility mixins to get the colour blocks extend to the edge of the screen

@mixin leftsidebg($color) {
	position: relative;
	background: $color;
	&::before {
		content: "";
		display: block;
		width: calc((100vw - #{$width}) / 2);
		left: calc(0px - (100vw - #{$width}) / 2);
		height: 100%;
		background: $color;
		position: absolute;
	}
}

@mixin rightsidebg($color) {
	position: relative;
	background: $color;
	&::after {
		content: "";
		display: block;
		width: calc((100vw - #{$width}) / 2);
		top: 0;
		left: 100%;
		height: 100%;
		background: $color;
		position: absolute;
	}
}

#content { // home page
	div#simulateur {
		background: transparent url(img/accueil.png) 120px -64px no-repeat;
		height: 400px;
		padding-left: 50%;
		font-size: 110%;
		h1 {
			padding-top: 70px;
			text-transform: uppercase;
		}
		h1, p {
			margin-left: 50px;
			max-width: 40ex;
		}
		a {
			margin-top: 60px;
			margin-left: -50px;
			background: #6ac0d0;
			color: white;
			display: inline-block;
			padding: 1rem 2rem;
			border-radius: 2rem;
			font-weight: bold;
			transition: all ease 0.2s;
			&:hover {
				background: $darkblue;
				color: white;
			}
		}
		@media screen and (max-width: $very-small-limit) {
			height: auto;
			background-position: 0 0;
			padding-left: 0;
			h1 {
				padding-top: 10px;
			}
			h1, p {
				margin-left: 0;
			}
			a {
				margin: 1rem 0;
			}
			& > div {
				background: white;
				background: rgba(255, 255, 255, 0.9);
			}
		}
	}

	div#apa-domicile {
		color: white;
		@include leftsidebg(#84d3e2);
		background: #84d3e2 url(img/bulle1.png) center center no-repeat;
		h3 {
			text-transform: uppercase;
		}
	}

	div#apa-etablissement {
		color: white;
		background: $darkblue url(img/bulle2.png) center center no-repeat;
		h3 {
			text-transform: uppercase;
		}
	}

	div#suivi-dossier {
		color: white;
		@include rightsidebg(#6ac0d0);
		background: #6ac0d0 url(img/bulle3.png) center center no-repeat;
		h3 {
			text-transform: uppercase;
		}
	}

	div#etapes {
		color: white;
		@include leftsidebg(#f82a3f);
		@include rightsidebg(#ff5160);
		background: $red;
		background: linear-gradient(90deg, #f82a3f, #ff5160);
		padding-bottom: 1rem;
		@media screen and (max-width: $very-small-limit) {
			padding: 1rem;
			text-align: center;
		}

		ol {
			margin: 0;
			padding: 0;
		}
		ol li {
			display: block;
			float: left;
			width: 20%;
			@media screen and (max-width: $very-small-limit) {
				float: none;
				width: auto;
			}
			padding: 130px 30px 0 30px;
			text-align: center;
			position: relative;
			&:nth-child(1) { background: url(img/icone1.png) top center no-repeat; }
			&:nth-child(2) { background: url(img/icone2.png) top center no-repeat; }
			&:nth-child(3) { background: url(img/icone3.png) top center no-repeat; }
			&:nth-child(4) { background: url(img/icone4.png) top center no-repeat; }
			&:nth-child(5) { background: url(img/icone5.png) top center no-repeat; }
			&::after {
				content: "";
				@media screen and (max-width: $very-small-limit) {
					content: none;
				}
				width: 65px;
				height: 54px;
				background: url(img/fleche.png) center right no-repeat;
				position: absolute;
				top: 50px;
				right: -32px;
			}
			&:nth-child(5)::after { content: none; }
		}
	}

	div#guide {
		background: $darkblue;
		color: white;
		img {
			max-width: 100%;
		}
	}

	div#aide {
		padding-top: 1rem;
		padding-right: 2rem;
	}

}

#content div#apa-domicile,
#content div#apa-etablissement,
#content div#suivi-dossier {
	text-align: center;
	min-height: 220px;
	h3 {
		font-size: 100%;
		max-width: 250px;
		margin: 2rem auto 1rem auto;
	}
	a {
		margin: 0 auto;
		display: block;
		background: white;
		font-weight: bold;
		border-radius: 40px;
		width: 30ex;
		text-align: center;
		padding: 1ex 2rem;
		transition: all ease 0.2s;
		&:hover {
			background: $darkblue;
			color: white;
		}
	}
}

div#content button {
	font-weight: bold;
	background: linear-gradient(to right, #f82a3f, #ff5160);
	transition: none;
	&:hover {
		background: #f82a3f;
	}
}

div#gauche,
div#rub_service {
	margin-top: 6rem;
	margin-bottom: 2rem;
}

div#gauche {
	width: $sidebar-width;
	padding-right: 20px;
}

div#gauche + div#rub_service {
	width: calc(100% - #{$sidebar-width} - 2rem);
}

div.form-validation div.page {
	background: transparent;
}

div#receipt-intro {
	margin: 1rem 0.5rem;
	padding: 1rem 0;
}

div.back-home-button {
	display: none;
}

div#summary, div#evolution-log {
	padding-bottom: 3rem;
	h2 {
		text-align: left;
	}
}

div#content #disclose-dataview {
	margin-left: 0.5rem;
}

span.required {
	color: red;
}

#content div#rub_service h3 {
	text-transform: none;
	font-weight: bold;
	color: #7fbece;
	border-bottom: 1px solid #7fbece;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service form {
	padding: 1ex 0.5rem;
}

#content div.menucell,
#content div.links-list {
	ul {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	ul > li > a {
		color: #929292;
		border-bottom: 0;
		border-top: 1px solid #9e9e9e;
	}
	ul > li > a::before {
		content: "→";
		padding-right: 1ex;
		color: $lightblue;
	}
}

#content div.menucell { // "dashboard"
	ul > li > a {
		color: $lightblue;
	}
}

div.cell.links-list#demande-d-information {
	// left column on apa-historique, apa-instruction, apa-droits
	h2, a {
		color: $darkblue;
		border-color: $darkblue;
	}
}

#login-page.methods2 {
	max-width: 60rem;
	margin: 0 auto;
	text-align: center;
}

#login-page div.block {
	background: white;
	background: rgba(255, 255, 255, 0.8);
	margin: 0 auto 2rem auto;
	padding: 1rem 2rem;
	max-width: 30rem;
}

div#sidebar + div#columns-wrapper > div.a2-block {
	margin-top: 0rem;
	background: white;
	padding: 2rem;
}

.column.profile {
	margin-top: 0;
	margin-left: 2rem;
	width: 60%;
	div#a2-profile {
		padding: 1rem 1.5rem;
		background: white;
		h2 {
			padding-left: 1rem;
		}
	}
}

.column.account-management {
	width: 30%;
}

#content div#account-management {
	background: rgba(127, 190, 206, 0.7);
	padding: 1rem 1.5rem;
	h2 {
		color: white;
	}
	> ul > li > a {
		color: white;
		border-color: white;
		&:hover {
			color: $blue;
		}
	}
}

#content #account-management-fc h2 {
	display: none;
}

.menucell li.selected span {
	font-weight: bold;
}

div#profile {
	column-count: 2;
	div.field {
		border-top: 1px solid #d2d2d2;
		padding-top: 0.5ex;
		page-break-inside: avoid;
	}
	span.label {
		color: #5caac2;
	}
	div.value {
		color: #929292;
	}
}

#content div.cell.apa-users {
	margin-top: -2rem;
	> div {
		background: url(img/icone-beneficiaires.png) top left no-repeat;
	}
	h2 {
		padding-top: 30px;
		height: 80px;
		padding-left: 100px;
		font-size: 1.875rem;
		color: $darkblue;
		text-transform: uppercase;
	}
	h2 + div {
		padding-top: 0;
	}
}

div.apa-user {
	margin-bottom: 2rem;
	&.apa-user-m .apa-user-link {
		background: white url(img/apa-user-m.png) top 10px right -30px no-repeat;
	}
	&.apa-user-mme .apa-user-link {
		background: white url(img/apa-user-mme.png) top 10px right -30px no-repeat;
	}
	a.apa-user-link {
		box-shadow: 0 0 25px rgba(10, 126, 194, 0.2);
		transition: all ease 0.2s;
		&:hover {
			background-position: top 15px right -20px;
			background-color: white;
		}
	}
	h3 {
		color: $blue;
		span {
			display: block;
			&.firstname, &.title {
				text-transform: none;
			}
			&.lastname {
				text-transform: uppercase;
				color: $darkblue;
			}
		}
	}
	p {
		border-top: 1px solid #929292;
		padding-top: 1rem;
		color: #929292;
	}
	a.remove {
		right: 2rem;
		top: 1rem;
		width: 2ex;
		height: 2ex;
		line-height: 2ex;
		border: 1px solid $link-color;
		border-radius: 2ex;
		&:hover {
			border-color: red;
			background: white;
		}
	}
}

table.pk-data-table {
	th, td {
		border-color: white;
	}
	tbody tr td {
		background: #d8ebf0;
		color: #929292;
		border-bottom-width: 2px;
	}
}

#content div#suivre {
	padding: 2rem 5rem;
	background: #e2f2f6;
	div {
		a {
			color: $darkblue;
		}
	}
}

#content div#contacts {
	padding: 2rem 5rem;
	background: white;
	div {
		h2, a {
			color: #ff5160;
			border-color: #ff5160;
		}
		a::before {
			color: #ff5160;
		}
	}
}

div#rub_service > h2:first-child,
#page-title h1 {
	position: absolute;
	top: 1rem;
	left: 0;
	padding: 0 $title-padding;
	color: $red;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.875rem;
	margin-top: 1rem;
}

.page-apa-details,
.page-apa-instruction,
.page-apa-droits,
.page-apa-details {
	#sidebar,
	#columns {
		margin-top: 6rem;  // space for #page-title
	}
	#columns {
		margin-left: 2%;
	}
}

.page-apa-details {
	#sidebar {
		padding-top: 1.5rem;
	}
	.column:first-child {
		width: 46%;
		padding: 0;
	}
	.column:last-child {
		div.cell h2 {
			background: rgba(127, 190, 206, 0.7);
			color: white;
			padding: 2rem;
			& + div {
				background: white;
				color: #929292;
				padding: 0;
			}
		}
		div.cell {
			margin-bottom: 1rem;
		}
	}
}

#content div.cell h2 + div.apa-user-info {
	padding: 0.5rem;
}

div.apa-user-info h3,
div.apa-user-info p {
	border-top: 1px solid #bee2e8;
	padding: 0.5rem 0;
	margin: 0;
}

div.apa-user-info em {
	font-size: 80%;
	color: $lightblue;
}

div#content div.cell.apa-user-info {
	padding: 1.5rem 2rem 3rem 2rem;
	background: white;
}

div.apa-user-info {
	margin-right: 2rem;
	color: #929292;
	span.label {
		display: block;
		color: #00a0bc;
		&.phone {
			// phone is part of the contact info block yet we want
			// it to appear as its own block.
			padding-top: 0.5rem;
			border-top: 1px solid #bee2e8;
			margin-top: 0.5rem;
		}
	}
}

#content .apa-dossier {
	h3 { // dossier title
		background: #e0f1f6;
		color: $darkblue;
		text-transform: none;
		margin: 0;
		padding: 1rem 2rem;
		border-top: 2px solid #94d1df;
	}
	ul { // dossier metadata
		padding: 1rem 2rem 0 2rem;
	}
	p { // "consulter le dossier"
		padding: 0 2rem 1rem 2rem;
	}
}

div.apa-historique,
div.apa-instruction,
div.apa-droits {
	& > p { // "Pas de demande"
		padding: 2rem;
		margin: 0;
	}
}

// apa-historique, apa-instruction & apa-droits pages
.page-apa-historique,
.page-apa-instruction,
.page-apa-droits {
	#sidebar {
		padding-top: 1.5rem;
	}
	#columns > div {
		padding-top: 1.5rem;
		// fake right column with a linear gradient
		background: linear-gradient(to left, #6ac0d0 0px, #6ac0d0 33.33%, white 33.33%, white 100%);
		> div {
			// and put the contact image on top of it
			background: url(img/illu-contact.png) bottom 0px right -80px no-repeat;
		}

	}
	#columns div.cell > div {
		& > h2 {
			padding-left: 2rem;
		}
		h2 + div {
			padding: 0 0 1rem 0;
			&::after {
				content: "";
				display: table;
				clear: both;
			}
		}
	}
	#content div.grid-2-3 {
		padding-left: 2rem;
	}
	#content div.grid-1-3.contact {
		background: transparent;
		color: white;
		padding: 0 2rem;
		h2 {
			color: white;
			padding: 0;
		}
	}
	#content div.individu {
		max-width: 25rem;
		color: #929292;
		h3, p {
			border-top: 1px solid #bee2e8;
			padding: 0.5rem 0;
			margin: 0;
			strong {
				font-weight: normal;
			}
		}
		span.label {
			font-weight: normal;
			color: $lightblue;
		}
	}
	.contact {
		margin-top: 1rem;
		.name {
			font-weight: bold;
		}
	}
	.dossier {
		color: #929292;
		h3 {
			margin-top: 1rem;
			color: $darkblue2;
			font-weight: bold;
		}
		p {
			border-top: 1px solid #9e9e9e;
			padding-top: 1rem;
			max-width: 90%;
		}
	}
}

// misc
.last-bold ul li:last-child {
	font-weight: bold;
}

ul.checkmarks li {
	list-style-image: url(img/tick.png);
	line-height: 1.6rem;
	padding-bottom: 0.5rem;
}
