@font-face {
	font-family: Inter-ExtraLight;
	src: url(./assets/fonts/Inter-ExtraLight.woff2);
}

@font-face {
	font-family: Inter-Light;
	src: url(./assets/fonts/Inter-Light.woff2);
}

@font-face {
	font-family: Inter-Regular;
	src: url(./assets/fonts/Inter-Regular.woff2);
}

@font-face {
	font-family: Inter-Italic;
	src: url(./assets/fonts/Inter-Italic.woff2);
}

@font-face {
	font-family: Inter-Medium;
	src: url(./assets/fonts/Inter-Medium.woff2);
}

@font-face {
	font-family: Inter-MediumItalic;
	src: url(./assets/fonts/Inter-MediumItalic.woff2);
}

@font-face {
	font-family: Inter-Bold;
	src: url(./assets/fonts/Inter-Bold.woff2);
}

h2 {
	font-family: Inter-ExtraLight;
	font-size: 54px;
	line-height: 64px;
	font-weight: 100;
}

h3,
.nav-mobile {
	font-family: Inter-Light;
	font-size: 32px;
	line-height: 45px;
	font-weight: 100;
}

p,
article.infocolumns h2,
article.references h2 {
	font-family: Inter-Light;
	font-size: 24px;
	line-height: 36px;
	font-weight: 100;
}

figure h2 {
	font-family: Inter-Italic;
	font-size: 18px;
	line-height: 27px;
	font-weight: 100;
}

figure p {
	font-family: Inter-MediumItalic;
	font-size: 14px;
	line-height: 22px;
	font-weight: 100;
}

article.infocolumns p,
article.references p {
	font-family: Inter-Regular;
	font-size: 18px;
	line-height: 27px;
	font-weight: 100;
}

small,
article.references aside p,
article.references aside ul,
.nav-desktop,
.footer {
	font-family: Inter-Medium;
	font-size: 14px;
	line-height: 22px;
	font-weight: 100;
}

article.references aside h2 {
	font-family: Inter-Bold;
	font-size: 14px;
	line-height: 22px;
	font-weight: 100;
}

/* CSS Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.logo {
	opacity: 0;
	animation: fadeIn 0.6s ease forwards;
}

.nav-desktop {
	opacity: 0;
	animation: fadeIn 0.6s ease forwards;
	animation-delay: 0.1s;
}

#dataviz-loader {
	opacity: 0;
	animation: fadeIn 0.6s ease forwards;
	animation-delay: 0.2s;
}

.dataviz-label {
	opacity: 0;
	animation: fadeIn 0.7s ease forwards;
	animation-delay: 0.3s;
}

.dataviz-dash {
	opacity: 0;
	animation: fadeIn 0.6s ease forwards;
	animation-delay: 0.4s;
}

section {
	opacity: 0;
	animation: fadeIn 0.6s ease forwards;
	animation-delay: 0.5s;
}


/* Loader SVG animation */
@keyframes grow {
	0%, 100% {
      transform: scaleY(1.0);
    }
    50% {
      transform: scaleY(0.5);
    }
}

.rect1 { 
	transform-origin: 0px 258.9px;
	animation: grow 2.0s ease infinite;
	animation-delay: 0.0s;
}

.rect2 { 
	transform-origin: 0px 258.9px;
	animation: grow 2.0s ease infinite;
	animation-delay: 0.5s;
}

.rect3 { 
	transform-origin: 0px 258.9px;
	animation: grow 2.0s ease infinite;
	animation-delay: 1.0s;
}
/*-----------------------------------------*/

/* Global */
html {
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	scroll-behavior: smooth;
}

body {
	width: 100%;
	margin: 0 auto 0 auto;
	background-color: #F2F3F4;
}


/* All sections displayed as grid */
.intro,
.dataviz-dash,
.header,
article figure,
article.references,
article.infocolumns {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 16px;
}

section,
.dataviz-dash {
	padding: 41px 76px 41px 76px;
}

.dataviz-article {
	padding: 0 76px 41px 76px;
}


article.dataviz-article h2,
section h2,
section h3 {
	margin: 0 0 0.75em 0;
}

article.dataviz-article p,
article.references aside p {
	margin: 0 0 1em 0;
}

section article.infocolumns,
section article.references {
	margin: 0 0 5em 0;
}

section article p {
	margin: 0 0 3em 0;
}

article.references aside ul {
	padding: 0 0 0 0.85em;
}

section article figure {
	margin: 4em 0 5em 0;
}

/*-----------------------------------------*/

/* Header */
.header-wrap {
	position: sticky;
	top: 0;
	background-color: #FFFFFF;
	z-index: 999;
}

.header {
	padding: 0 76px 0 76px;
	height: 124px;
	align-content: center;
}

.logo,
.logo a {
	grid-column: 1 / span 3;
	display: inherit;
	align-items: center;
}

.logo img {
	height: 56px;
	width: auto;
}

.nav-desktop {
	height: 56px;
	grid-column: 4 / span 8;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.nav-desktop a,
.nav-mobile a {
	padding-top: 10px;
	text-decoration: none;
	color: #000000;

	border-top: 1.5px #ffffff solid;
	transition: border 0.5s ease;
}

.nav-mobile a {
	padding-top: 10px;
	text-decoration: none;
	color: #000000;

	border-top: 1.5px #F2F3F4 solid;
	transition: border 0.5s ease;
}

.nav-desktop a:hover,
.nav-mobile a:hover,
.nav-desktop a:active,
.nav-mobile a:active {
	border-top: 1.5px black solid;
}

.hamburger,
.nav-mobile {
	display: none;
}

#als-data-repository,
#als-functional-rating-scale,
#als_motor_phenotypes,
#neurofilament {
	scroll-margin-top: 124px;
}

/* Footer */
.footer {
	height: 124px;
	padding: 0 calc(76px * 2.5) 0 calc(76px * 2.5);

	display: flex;
	justify-content: space-between;

	background-color: #ffffff;
}

.footer ul {
	padding: 0;
	align-content: center;
	list-style-type: none;
}


/* Data visualization (DV) */
.dataviz-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
}

.dataviz {
	width: 100%;
	height: calc(100vh - 124px - 186px);
}

canvas {
	border-radius: 0;
}


.dataviz-label {
	position: absolute;
	z-index: 1;
	top: calc(124px - 14px + 41px);

	margin: 0 calc(76px - 14px) 0 calc(76px - 14px);
	padding: 12px 14px 5px 14px;
}

.dataviz-label p {
	margin: 0;
	padding: 0;
	border-top: 1.5px black solid;
}

/* Loader graphic */
#dataviz-loader {
	position: absolute;
	z-index: 1;

	top: calc(124px + 190px);

	margin: 0 50vw 0 50vw;
  	transform: translateX(-50%);
}

#dataviz-loader svg {
	width: 50px;
	height: 50px;
}

/* loader SVG colors */
.base, .rect1 {
	fill: #9e9e9e;
}

.rect2 {
	fill: #d9d9d9;
}

.rect3 {
	fill: #efefef;
}

/* DV dashboard */
.dataviz-dash ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.dataviz-dash-box {
	grid-column: span 3;
	border-top: 1.5px black solid;
	transition: color 0.5s ease;
}

.dataviz-dash-box small {
	line-height: 29px;
}

.dataviz-dash-box h2 {
	line-height: 52px;
}

.dataviz-dash-box label {
	margin: 0;
}

#cb_fsr {
	accent-color: #2c9cd1;
}

#cb_opm {
	accent-color: #af80a6;
}

#cb_nfl {
	accent-color: #dbd56e;
}

#box_fsr,
#box_opm,
#box_nfl {
	color: #000;
}

.dataviz-dash:has(#cb_fsr:not(:checked)) #box_fsr,
.dataviz-dash:has(#cb_opm:not(:checked)) #box_opm,
.dataviz-dash:has(#cb_nfl:not(:checked)) #box_nfl {
    color: #ccc;
}

#num_fsr,
#num_opm,
#num_nfl {
	margin: 0;
}

article.dataviz-article {
	grid-column: span 12;
}

/* Sections – Sub */
.value-prop-fsr {
	background-color: #CBCCE8;
}

.value-prop-opm {
	background-color: #E3D7E1;
}

.value-prop-nfl {
	background-color: #E8E5B1;
}

.value-prop-fsr h2,
.value-prop-opm h2,
.value-prop-nfl h2 {
	margin: 0;
}

/* Article */
article figure {
	margin: 0;
}
article figure img {
	grid-column: 1 / span 6;
	width: 100%;
}

article figure figcaption {
	grid-column: 8 / span 4;
}


/* Article – Reference */
article.references p {
	grid-column: 1 / span 6;
}

article.references aside {
	grid-column: 9 / span 4;
}

article.infocolumns div {
	grid-column: span 4;
}


/* 1280px as max width + 76px padding * 2 (left and right) */
@media screen and (min-width: 1432px) {

	.header,
	section,
	.dataviz-dash,
	.dataviz-article {
		padding-right: calc((100vw - 1280px) / 2);
		padding-left: calc((100vw - 1280px) / 2);
	}

	.footer {
		padding-right: calc((100vw - 1280px) / 2 + (76px * 1.5));
		padding-left: calc((100vw - 1280px) / 2 + (76px * 1.5));
	}

	.dataviz-label {
		margin-left: calc((100vw - 1280px) / 2 - 14px);
		margin-right: calc((100vw - 1280px) / 2 - 14px);
	}
}

/* Mobile version portrait */
@media screen and (max-width: 875px) {

	/* Global grid: collapse to 1 column */
	.intro,
	.dataviz-dash,
	.header,
	article figure,
	article.references,
	article.infocolumns {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	body.no-scroll {
		overflow: hidden;
	}

	/*------------------------------*/
	/* Global spacing */
	section,
	.dataviz-dash {
		padding: 35px 24px 35px 24px;
	}

	.dataviz-article {
		padding: 0 24px 35px 24px;
	}

	article.dataviz-article h2,
	section h2,
	section h3 {
		margin: 0 0 0.75em 0;
	}

	article.dataviz-article p,
	section article figure img,
	section article.infocolumns,
	article.references aside p,
	section article.references,
	.nav-mobile a {
		margin: 0 0 0.75em 0;
	}

	section article figure {
		margin: 4em 0 2em 0;
	}

	section article p {
		margin: 0 0 2em 0;
	}

	article.references aside ul {
		padding: 0 0 0 0.9em;
	}

	/*------------------------------*/

	/* Header */

	.header {
		padding: 0 24px 0 24px;
		height: 72px;
		grid-template-columns: 1fr 1fr;
		column-gap: 0;
	}

	.logo {
		grid-column: 1;
	}

	.logo img {
		height: 39px;
		width: auto;
	}

    /* Collapse nav when mobile */
    .nav-desktop {
        display: none;
    }
	
	.hamburger {
		grid-column: 2;
        display: block;
		justify-self: end;
		cursor: pointer;
		width: 40px;
    	height: 40px;
		align-self: center;
    }

	.hamburger .line {
		stroke: black;
		stroke-width: 2px;
		stroke-linecap: butt;

		transform-origin: center;
    	transform-box: fill-box;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}


	/* Cross animation when active */
	.hamburger.active .top {
		transform: translateY(9px) rotate(-45deg);
	}

	.hamburger.active .bottom {
		transform: translateY(-9px) rotate(45deg);
	}

	.hamburger.active .middle {
		opacity: 0;
	}

	.nav-mobile {
		display: none;
		flex-direction: column;
		background-color:  #F2F3F4;
		height: 100vh;
		height: 100vh;
		padding: 32px 24px 32px 24px;
	}

	.nav-mobile.active {
		display: flex;
	}

	#als-data-repository,
	#als-functional-rating-scale,
	#als_motor_phenotypes,
	#neurofilament {
		scroll-margin-top: 72px;
	}

	/* Footer */
	.footer {
		height: auto;
		padding: 24px;
		flex-direction: column;
		gap: 16px;
	}

	.footer ul {
		align-content: start;
	}

	/* Data visualization wrap */
	.dataviz-label {
		margin: 0 calc(24px - 7px) 0 calc(24px - 7px);
		padding: 8px 7px 3px 7px;
		top: calc(72px - 8px + 24px);
	}

	.dataviz {
		height: 300px;
		
	}

	/* DV Loader position */
	#dataviz-loader {
		top: calc(124px + 80px);
	}

	/* DV dashboard breaks into a table*/
	.dataviz-dash {
		grid-template-columns: repeat(10, 1fr);
		column-gap: 0;
	}

	.dataviz-dash-box {
		grid-column: 1 / span 9;
		grid-row: span 1;
	}

	/* Box containing all checkboxes */
	#box_cb {
		grid-column: 10;
		grid-row: 1 / span 3;

		border: none;
	}

	#box_cb label{
		display: none;
	}

	#box_cb ul {
		height: 100%;
		display: grid;
		
	}

	#box_cb li {
		grid-row: span 1;
		border-top: 1.5px black solid;
		height: 50px;
		align-content: center;
	}

	#cb_fsr,
	#cb_opm,
	#cb_nfl {
		float: right;
	}

	/* Boxes displaying numbers */
	#box_fsr,
	#box_opm,
	#box_nfl {
		display: grid;
		grid-template-columns: 2fr 6fr;
		align-items: center;
	}

	#box_fsr small,
	#box_opm small,
	#box_nfl small {
		grid-column: 2;
		grid-row: 1;

		font-family: Inter-Light;
		font-size: 18px;
		line-height: 28px;
	}

	#num_fsr,
	#num_opm,
	#num_nfl {
		grid-column: 1;
		grid-row: 1;

		font-family: Inter-Light;
		font-size: 18px;
		line-height: 28px;
	}


	/* Article */
	article figure img {
		grid-column: 1;
		grid-row: 1;
	}

	article figure figcaption {
		grid-column: 1;
		grid-row: 2;
	}


	/* Article – Reference */
	article.references p {
		grid-column: 1;
		grid-row: 1;
	}

	article.references aside {
		grid-column: 1;
		grid-row: 2;
	}

	article.infocolumns div {
		grid-column: 1;
	}

	

	/* Typography scaling */
	h2 {
		font-size: 32px;
		line-height: 40px;
	}

	h3,
	.nav-mobile {
		font-size: 24px;
		line-height: 32px;
	}

	p,
	article.infocolumns h2,
	article.references h2 {
		font-size: 18px;
		line-height: 28px;
	}

	article.infocolumns p,
	article.references p,
	figure h2 {
		font-size: 14px;
		line-height: 20px;
	}

	small,
	article.references aside p,
	article.references aside ul,
	article.references aside h2,
	figure p {
		font-size: 11px;
		line-height: 16px;
	}
}