/**
 * Pipeline-taulukon accordion-otsikoiden tyylit.
 *
 * Parina toimii pipeline.js, joka pilkkoo otsikon
 * "Indikaatio | Kandidaatti | Vaihenumero" spaneiksi .candidate, .disease,
 * .phase-N ja .phase-N-mobile. Tässä tiedostossa noista rakennetaan sarakkeet
 * ja vaakasuora edistymispalkki.
 *
 * Kaikki säännöt on rajattu luokkiin, jotka JS lisää vasta onnistuneen
 * muunnoksen jälkeen:
 *   - body.pipeline-toggle-active : sivutason säännöt
 *   - .fusion-toggle-heading.pipeline-toggle : yksittäinen muunnettu otsikko
 * Näin mikään ei muutu, jos otsikot eivät ole odotetussa putkimuodossa.
 *
 * KATTAVUUS
 * Vanha pipeline-CSS ei ollut pelkästään Theme Optionsin merkityssä lohkossa
 * "PIPELINE TOGGLE", vaan hajallaan myös useiden media queryjen sisällä ilman
 * merkintää sekä yhtenä sääntönä tiedoston lopussa. Tämä tiedosto replikoi ne
 * kaikki:
 *
 *   Merkitty lohko             perustyylit, palkin runko, päätepallot
 *   @media max-width: 1180px   span.disease kapenee
 *   @media max-width: 1024px   pienempi teksti, pidemmät palkit, table th
 *   @media max-width: 800px    palkki korvautuu tekstillä (+ phase-2 lopussa)
 *
 * Breakpointit ovat 1180 / 1024 / 800 px, eivät 1620 px. Media queryjen
 * keskinäinen järjestys on merkitsevä, ks. kommentti 1024px-lohkon kohdalla.
 *
 * Arvot ovat identtiset vanhan CSS:n kanssa, joten ulkoasu säilyy ennallaan
 * ja päällekkäisyys vanhan kanssa on vaaratonta. Vanhan voi poistaa Theme
 * Optionsista hallitusti myöhemmin.
 *
 * Sivu-ID:tä ei esiinny tässä tiedostossa: vanhan CSS:n .page-id-14-rajaukset
 * on korvattu body.pipeline-toggle-active -luokalla.
 */

/* — Yleiset marginaalit ja paddingit — */
body.pipeline-toggle-active .panel-body.toggle-content {
	margin: 0 20px;
	padding: 30px 0 20px;
}

body.pipeline-toggle-active .fusion-toggle-heading {
	width: 100%;
	color: #111 !important;
	padding: 12px 0;
}

/* — Otsikon vasemmat sarakkeet — */
/* HUOM: .candidate sisältää indikaation ja .disease tuotekandidaatin.
   Nimet periytyvät vanhasta toteutuksesta, ks. pipeline.js. */
.fusion-toggle-heading.pipeline-toggle span.candidate,
.fusion-toggle-heading.pipeline-toggle span.disease {
	display: block;
	float: left;
	width: 20%;
	margin-left: 2.5%;
	font-size: 18px !important;
}

/* — Edistymispalkin perusrunko — */
.fusion-toggle-heading.pipeline-toggle span.phase-1,
.fusion-toggle-heading.pipeline-toggle span.phase-2,
.fusion-toggle-heading.pipeline-toggle span.phase-3,
.fusion-toggle-heading.pipeline-toggle span.phase-4 {
	display: block;
	float: left;
	width: 48%; /* oletus = maksimi (Clinical) */
	height: 4px;
	background-color: #014c8d;
	margin: 14px 1% 0;
}

/* — Palkin pituus vaiheittain: alkaa Researchista, päättyy vaiheeseen N — */
.fusion-toggle-heading.pipeline-toggle span.phase-1 { width: 8%; }  /* Research */
.fusion-toggle-heading.pipeline-toggle span.phase-2 { width: 23%; } /* Pharmaceutical development */
.fusion-toggle-heading.pipeline-toggle span.phase-3 { width: 36%; } /* Preclinical */
.fusion-toggle-heading.pipeline-toggle span.phase-4 { width: 48%; } /* Clinical (maksimi) */

/* — Palkin päätepallot — */
.fusion-toggle-heading.pipeline-toggle span.phase-1:before,
.fusion-toggle-heading.pipeline-toggle span.phase-2:before,
.fusion-toggle-heading.pipeline-toggle span.phase-3:before,
.fusion-toggle-heading.pipeline-toggle span.phase-4:before,
.fusion-toggle-heading.pipeline-toggle span.phase-1:after,
.fusion-toggle-heading.pipeline-toggle span.phase-2:after,
.fusion-toggle-heading.pipeline-toggle span.phase-3:after,
.fusion-toggle-heading.pipeline-toggle span.phase-4:after {
	content: "";
	background-color: #014c8d;
	display: block;
	border-radius: 50%;
}

/* Alkupallo (Research-pää) */
.fusion-toggle-heading.pipeline-toggle span.phase-1:before,
.fusion-toggle-heading.pipeline-toggle span.phase-2:before,
.fusion-toggle-heading.pipeline-toggle span.phase-3:before,
.fusion-toggle-heading.pipeline-toggle span.phase-4:before {
	width: 15px;
	height: 15px;
	position: relative;
	top: -6px;
	left: -2px;
}

/* Loppupallo (saavutettu vaihe) */
.fusion-toggle-heading.pipeline-toggle span.phase-1:after,
.fusion-toggle-heading.pipeline-toggle span.phase-2:after,
.fusion-toggle-heading.pipeline-toggle span.phase-3:after,
.fusion-toggle-heading.pipeline-toggle span.phase-4:after {
	width: 20px;
	height: 20px;
	position: relative;
	top: -23px;
	right: -2px;
	float: right;
}

/* — Avadan toggle-ikonin sijainti sarakerivillä — */
body.pipeline-toggle-active .fusion-toggle-icon-wrapper {
	position: absolute;
	top: 20px;
	left: 10px;
}

/* — Hover / active -värit — */
body.pipeline-toggle-active .fusion-accordian .panel-title a:hover .fa-fusion-box,
body.pipeline-toggle-active .fusion-accordian .panel-title .active .fa-fusion-box {
	background-color: #0385c7 !important;
}

/* — Otsikkorivin taulukon "siivous" (sarakeotsikot accordionin yläpuolella) — */
body.pipeline-toggle-active .table-1 * {
	border: none !important;
	background: transparent !important;
}

/* — Mobiilin vaihetarrat piilossa leveillä näytöillä — */
.fusion-toggle-heading.pipeline-toggle span.phase-1-mobile,
.fusion-toggle-heading.pipeline-toggle span.phase-2-mobile,
.fusion-toggle-heading.pipeline-toggle span.phase-3-mobile,
.fusion-toggle-heading.pipeline-toggle span.phase-4-mobile {
	display: none;
}

/* — Kapeampi työpöytä: kandidaattisarake kapenee — */
@media screen and (max-width: 1180px) {

	.fusion-toggle-heading.pipeline-toggle span.disease {
		width: 18%;
		margin-left: 2%;
	}
}

/* — Tabletti: pienempi teksti, pidemmät palkit —
   HUOM järjestys: tämän lohkon on oltava 1180px-lohkon JÄLKEEN, koska
   molemmat asettavat span.disease-leveyden samalla spesifisyydellä.
   Alle 1024px:ssä voittaa jälkimmäinen (17%), kuten vanhassa CSS:ssä. */
@media screen and (max-width: 1024px) {

	.fusion-toggle-heading.pipeline-toggle span.candidate,
	.fusion-toggle-heading.pipeline-toggle span.disease {
		width: 17%;
		margin-left: 2.5%;
		font-size: 14px !important;
	}

	/* Accordionin yläpuolella olevan sarakeotsikkotaulukon fonttikoko. */
	body.pipeline-toggle-active table th {
		font-size: 14px;
	}

	.fusion-toggle-heading.pipeline-toggle span.phase-1 { width: 6%; }
	.fusion-toggle-heading.pipeline-toggle span.phase-2 { width: 23%; }
	.fusion-toggle-heading.pipeline-toggle span.phase-3 { width: 40%; }
	.fusion-toggle-heading.pipeline-toggle span.phase-4 { width: 55%; }
}

/* — Mobiili: palkki korvataan tekstillä, sarakeotsikkorivi piiloon — */
@media screen and (max-width: 800px) {

	body.pipeline-toggle-active .table-1 {
		display: none !important;
	}

	.fusion-toggle-heading.pipeline-toggle span.phase-1,
	.fusion-toggle-heading.pipeline-toggle span.phase-2,
	.fusion-toggle-heading.pipeline-toggle span.phase-3,
	.fusion-toggle-heading.pipeline-toggle span.phase-4 {
		display: none;
	}

	.fusion-toggle-heading.pipeline-toggle span.phase-1-mobile,
	.fusion-toggle-heading.pipeline-toggle span.phase-2-mobile,
	.fusion-toggle-heading.pipeline-toggle span.phase-3-mobile,
	.fusion-toggle-heading.pipeline-toggle span.phase-4-mobile {
		display: block;
		float: left;
		width: 39%;
		font-size: 15px !important;
	}

	.fusion-toggle-heading.pipeline-toggle span.candidate {
		width: 19%;
		margin-left: 8%;
		font-size: 15px !important;
	}

	.fusion-toggle-heading.pipeline-toggle span.disease {
		width: 32%;
		margin-left: 2%;
		font-size: 15px !important;
	}

	/* Vanhassa CSS:ssä tämä oli erikseen 800px-lohkon lopussa. Säilytetään
	   yhdenmukaisuuden vuoksi, vaikka sillä ei ole näkyvää vaikutusta:
	   palkit ovat tässä leveydessä jo display:none (ks. lohkon alku). */
	.fusion-toggle-heading.pipeline-toggle span.phase-2 { width: 28%; }
}