@import "fonts";

$col-white: #fff;
$col-bg: #0b1b2e;
$col-accent: #845368;


/* Global */

*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background-color: $col-bg;
	color: $col-white;

	line-height: 1.5;
	font-size: 16px;
	font-family: "moderat", sans-serif;
}

img {
	display: block;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}
h1 { font-size: 2.178rem }

.text-bold {
	font-weight: bold;
}

section {
	padding-top: 3rem;
}


/* Specific */

.checklist {
	display: flex;
	gap: 1em;
	overflow: scroll;
	margin-top: 3em;
	padding: 0 2em;

	.card {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		width: 15em;
		border: .15em solid $col-accent;
		border-radius: 1em;
		padding: 2em;
		background-color: $col-bg;

		img {
			width: 100%;
		}

		.title {
			position: relative;
			font-weight: bold;
			font-size: 1.138rem;
			padding: 1em 0;

			&:after {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 25%;
				height: 1px;
				background-color: #fff;
			}
		}
	}
}

.partners {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	img {
		width: clamp(20rem, 80vw, 0);
		padding: 1.5em;
	}
}

.faq-list {
	width: 100%;

	.faq {
		position: relative;
		display: grid;
		grid-template-columns: auto auto;
		column-gap: 1em;
		width: 100%;
		padding: 2em;
		cursor: pointer;

		// Hide bottom border.
		// It is -2px to avoid float rounding errors
		// which cause the border to appear in some widths.
		margin-bottom: -2px;

		&:before,
		&:last-child:after {
			content: "";
			position: absolute;
			left: 10%;
			width: 80%;
			border-width: 1px 0 0 0;
			border-style: solid;
			border-color: #8392a3;
		}
		&:before { top: 0 }
		&:last-child:after { bottom: 0 }

		&.active {
			background-color: $col-accent;
			border-radius: 2rem;
			z-index: 1;

			&:before { border: 0 }
		}

		.mark {
			text-align: right;
		}

		.question {
			margin-bottom: 1em;
			font-size: 1.138rem;
		}
	}
}

footer {
	$logo-radius: 4.5em;
	position: relative;
	text-align: center;
	font-size: 1.138rem;
	padding: $logo-radius+1 2em 2em 2em;
	margin-top: $logo-radius+6;

	border-top: 1px solid #5d6e81;

	&:before {
		content: "";
		position: absolute;
		top: -$logo-radius;
		left: 50%;
		transform: translatex(-$logo-radius);
		height: $logo-radius*2;
		width: $logo-radius*2;
		border: 1px solid #5d6e81;
		border-radius: 50%;
		background-image: url("/static/pedf-logo-white.svg");
		background-position: center;
		background-size: 75%;
		background-repeat: no-repeat;
		background-color: $col-bg;
	}
}