/* Regular Weight */
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

/* SemiBold Weight */
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

.material-symbols-outlined {
	color: var(--color-inlinebutton);
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
}

:root {
	/* COLORS */

	--color-text: #fff;
	--color-darktext: #000;
	--color-faintshadow: #00000040;
	--color-links: #42ddf7;
	--color-inlinebutton: #434b75;

    --color-accent-blue: #127ab0;
    --color-accent-green: #008811;
    --color-accent-lilac: #6a64bf; 
    --color-accent-turqoise: #2e8182;
    --color-accent-salmon: #fd8c73;

	/* NEW THEME */
	--color-interactions: #63718e; /* buttons, progress bar */
	--color-interactions-hover: #4b566c;
	--color-background: #cfd8ed;
	
	--color-cancel: #d51d1d;
	--color-active-cancel: #e8e6e6;
	--color-start: #27B16F;
	--color-active-start: #1f8f59;

	--color-bg-light: #21599b;
	--color-bg-dark: #1b3d70;

    --background-gradient: linear-gradient(to bottom, var(--color-bg-light), var(--color-bg-dark));
    --background-overlay: linear-gradient(to top, #000000b0, #00000000);

	/* FONTS */
	--font-materialsymbols: 'Material Symbols Outlined';
	--font-main: 'Poppins';

    /* SIZINGS */
    --font-size-h1: 28px; /* Semibold weight */
    --font-size-h2: 24px; /* Semibold weight */
    --font-size-h3: 20px; /* Regular weight */
    --font-size-storytitle: 16px; /* Semibold weight */
    --font-size-storydescr: 16px; /* Regular weight */
    --font-size-buttons: 14px; /* Inline buttons, subtle buttons etc. */
    --font-size-iconbtn: 18px;

	/* WEIGHTS */
	--font-weight-regular: 400;
	--font-weight-semibold: 600;

    /* BORDER-RADIUS */
    --border-radius: 8px;

    /* BOX SHADOW */
    --box-shadow: 0 2px 4px 0 #00000040;
	--box-shadow-test: 0 2px 4px var(--color-faintshadow);

	/* TRANSITIONS */
	--transition-standard: all 0.3s ease-in-out;
}

/* CSS RESET */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ----------- */
/* PAGE STYLES */
/* ----------- */

html, body {
    font-family: 'Poppins';
    font-weight: var(--font-weight-regular);
    min-height: 100dvh;
}

body {
	background: var(--color-background);
    height: max-content;
    background-size: cover;
    background-repeat: no-repeat;
	color: var(--color-inlinebutton);

    padding: 3vh 5vw;
	position: relative;
}


/* ---------- */
/* TYPOGRAPHY */
/* ---------- */

h1,
h2,
h3 {
	font-weight: var(--font-weight-semibold);
}

h1 {
	/* Font */
	font-size: var(--font-size-h1);

	/* Positioning */
	text-align: center;

	/* extra padding for more space */
	padding-bottom: 0.5em;
}

h2 {
	/* Font */
	font-size: var(--font-size-h2);
}

h3 {
	/* Font */
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-regular);
}

p {
	/* Font */
	font-size: var(--font-size-storydescr);
	font-weight: var(--font-weight-regular);
	/* Positioning */
}

/* ------------------------------ */
/* HTML ELEMENTS (LINKS, BUTTONS) */
/* ------------------------------ */

p a {
    font-size: var(--font-size-storydescr);
    font-weight: var(--font-weight-regular);

    color: var(--color-accent-blue);

    cursor: pointer;
}

ul li {
    list-style: none;
}

label {
    &:hover {
        cursor: pointer;
    }
}

button {
	cursor: pointer;
}

.back-button {
    position: absolute;
    left: 5vw;
    top: 4vh;
    color: var(--color-text);
}

.fullbutton {
    color: var(--color-text);
    text-decoration: none;
    background-color: var(--color-accent-lilac);
	box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: .5em 2em;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    /* max-width: max-content; */
    text-align: center;
    display: block;
}

.introtext {
    margin-top: 1em;
}


/* ------ */
/* POPUPS */
/* ------ */

.popup {
	height: 100dvh;
	width: 100dvw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(2px);
	background-color: #00000040;

	> div {
		background-color: var(--color-text);
		color: var(--color-darktext);
		position: absolute;
		padding: 1em 1em;
		border-radius: var(--border-radius);
		box-shadow: var(--box-shadow);
		position: relative;
		width: 80%;
		min-height: max-content;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		video {
			position: relative;
			width: 100%;
			max-height: 50vh;
			margin-top: 1em;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);

			transform: rotateY(180deg);
			-webkit-transform:rotateY(180deg); /* Safari and Chrome */
			-moz-transform:rotateY(180deg); /* Firefox */
		}
	}
}


/* -------------------- */
/* INFORMATION SECTIONS */
/* -------------------- */

/* privacy statement */

.accordion {
	border-radius: var(--border-radius);
	margin: 1em 0 2em;
	max-width: 420px;

	summary {
		display: inline-flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		padding: 0.5em;
		background-color: var(--color-accent-blue);
		border-radius: var(--border-radius);

		color: var(--color-text);

		p {
			color: var(--color-text);

			&::after {
				content: 'keyboard_arrow_down';

				font-family: var(--font-materialsymbols);
				font-size: var(--font-size-h3);

				display: inline-block;
				vertical-align: middle;
				margin-left: 0.25em;

				transition: var(--transition-standard);
			}
		}
	}

	section {
		background-color: var(--color-text);
		color: var(--color-darktext);
		border-radius: 0 0 var(--border-radius) var(--border-radius);
		padding: 1em;

		p {
			padding: 0.25em 0 1em;
		}

		a {
			background-color: var(--color-inlinebutton);
			font-size: var(--font-size-buttons);
			padding: 0.5em;
			border-radius: var(--border-radius);
			color: var(--color-text);
			text-decoration: none;
		}

		button {
			background-color: transparent;
			border: none;

			color: var(--color-inlinebutton);
			font-family: var(--font-main);
			font-size: var(--font-size-storydescr);

			&::after {
				content: 'keyboard_arrow_up';
				font-family: var(--font-materialsymbols);
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	&[open] {
		summary {
			border-radius: var(--border-radius) var(--border-radius) 0 0;

			p {
				&::after {
					rotate: 180deg;
				}
			}
		}
	}
}

/* attention span test */

.information-block {
	background-color: var(--color-text);
	color: var(--color-darktext);
	border-radius: var(--border-radius);
	margin: 1em 0 2em 0;
	max-width: 420px;

	p {
		padding: 1em 1em 0 1em;
	}

	.section-button {
		display: flex;
		justify-content: end;
		align-items: center;
		padding: 1em;

		a {
			background-color: var(--color-inlinebutton);
			font-size: var(--font-size-buttons);
			border-radius: var(--border-radius);
			color: var(--color-text);

			padding: 0.5em;
			text-decoration: none;
		}
	}

	.header-container {
		display: flex;
		justify-content: space-between;

		background-color: var(--color-accent-green);
		border-radius: var(--border-radius) var(--border-radius) 0 0;
	}

	h3 {
		color: var(--color-text);
		padding: 0.5em;
		margin: 0;
	}

	.time {
		display: inline-flex;
		justify-content: end;
		color: var(--color-text);
		padding: 0.5em;
		align-items: center;

		&::before {
			content: 'schedule';
			font-family: var(--font-materialsymbols);
			display: inline-block;
			vertical-align: middle;
			padding: 0 0.25em 0 0;
		}
	}

	img {
		position: relative;
		width: 15%;
	}
}

.word-recognition,
.first-words {
	.section-button {
		display: flex;
		justify-content: space-between;
	}
}

.word-recognition {
	.header-container {
		background-color: var(--color-accent-lilac);
	}
}

.first-words {
	.header-container {
		background-color: var(--color-accent-turqoise);
	}
}

/* CUSTOMIZATION */

.characters {
    margin: 1.5em 0;
}

.carousel {
    text-align: center;

    .carousel-main {
        background-image: linear-gradient(to bottom right, var(--color-text), var(--color-accent-blue), var(--color-accent-lilac)); /* panda */
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);
        margin: 1.2em 0 1em;
        display: flex;
        flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 20rem;
		font-size: 3rem;

        .icon {
			font-size: 11rem;
        }

        .icon-title {
            margin: -0.9em 0 .5em;
			font-size: 3rem;
        }
    }
}

.carousel-nav {

	label {
		display: inline-flex;
		justify-content: center;
		align-items: center;

		background-color: var(--color-bg-dark);
		border-radius: var(--border-radius);
		box-shadow: var(--box-shadow);
		font-size: var(--font-size-h2);
		padding: .5em 1em;

		input[type=radio] {
			appearance: none;
		}

		&:has(input[type=radio]:checked) {
			background-color: var(--color-bg-light);
			border: 2px solid var(--color-text);
		}
	}
}

.motion,
.iconInput {
		margin: 1.5em 0;
	}

	/* Motion controls */

	.motion-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.motionToggle {
		width: 60px;
		height: 30px;
		background-color: #ccc;
		border: none;
		border-radius: 1.2em;
		cursor: pointer;
		padding: 0.1rem;
		display: flex;
		justify-content: start;
	}

	.motionToggle input {
		display: none;
	}

	.motionToggle::before {
		content: '';
		display: block;
		height: 100%;
		aspect-ratio: 1/1;
		background-color: white;
		border-radius: 50%;
	}

	.motionToggle:has(input:checked) {
		background-color: green;
		justify-content: end;
	}


/* -------------- */
/* RESPONSIVENESS */
/* -------------- */

@media (max-width: 650px) {
	.accordion {
		min-width: 100%;
	}
	
	.modules {
		max-width: 100%;

		.information-block {
			min-width: 100%;
		}
	}
}

@media  (min-width: 650px) {
	.modules {
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 25px;

		.information-block {
			min-width: 50%;
			max-width: 420px;
		}
	}

	.steps {
		& > div {
			flex-direction: row !important;
			align-items: stretch !important;
			gap: 20px !important; 

			& > div {
				max-width: 420px;
			}
		}
	}

	.popup {
		div {
			width: 70%;
		}
	}
}

@media (min-width: 900px) {
	/* body {
		padding: 5vh 20vw;
	} */
}