/* Tuodaan UEF:n virallinen fontti Open Sans (Regular 400 & ExtraBold 800) Google Fontsista  */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');

body {
    /* Vaihdettu Arialista Open Sansiin [cite: 240] */
    font-family: 'Open Sans', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    /* Valkoinen on materiaaleissa ensisijainen pohjaväri[cite: 166].
       Pidetään tausta hyvin vaaleana tai valkoisena. */
    background-color: #ffffff;
    /* Tekstissä käytetään mustaa [cite: 166] */
    color: #000000;
}

.brand-header {
    margin: 0 0 16px 0;
}

.brand-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.brand-logos img {
    height: 54px;
    width: auto;
    object-fit: contain;
}

h1,
h2 {
    /* Otsikoissa käytetään Open Sans ExtraBoldia [cite: 243] */
    font-weight: 800;
    /* Otsikot mustalla [cite: 154] */
    color: #000000;
    margin-bottom: 1em;
}

.section {
    background: #f9f9f9;
    /* Kevyt harmaa erottamaan osiot, tukiväri [cite: 166] */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    /* Pehmeät muodot sopivat UEF:n graafiseen tyyliin [cite: 370] */
    /* Jos halutaan korostaa brändiväriä, voidaan lisätä vasen reuna: */
    border-left: 5px solid #009FB8;
    /* UEF Turkoosi [cite: 147] */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin: 10px 0 5px;
    font-weight: 800;
    /* Korostukset ExtraBoldilla [cite: 243] */
}

/* Monivalintaoptiot (checkbox/radio) allekkain */
label.option {
    display: block;
    font-weight: 400;
    margin: 6px 0;
}

/* Radiobutton-vaihtoehdot peräkkäin */
label.radio-option {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    margin: 6px 14px 6px 0;
}

/* Joissain pitkissä kysymyksissä radiot allekkain */
.radio-vertical label.radio-option {
    display: flex;
    margin: 6px 0;
}

label.option input[type="radio"],
label.option input[type="checkbox"] {
    margin-right: 10px;
}

label.radio-option input[type="radio"] {
    margin-right: 10px;
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    /* Varmistetaan fontti myös inputeissa */
}

/* Lisätään fokus-tila brändivärillä */
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: #009FB8;
    /* UEF Turkoosi [cite: 147] */
    box-shadow: 0 0 5px rgba(0, 159, 184, 0.5);
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #009FB8;
    /* UEF Turkoosi valintaruutuihin [cite: 147] */
}

button {
    /* Vaihdettu perussininen UEF Turkoosiin [cite: 147] */
    background-color: #009FB8;
    color: white;
    /* Valkoinen teksti [cite: 157] */
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    /* Hieman pyöristetty */
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    /* Napit usein lihavoitu selkeyden vuoksi */
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    /* Hover-tilassa käytetään tummempaa "Turkoosi 2" -sävyä [cite: 153] */
    background-color: #067493;
}

/* Suostumussivun rasti/teksti siistimmin riveille */
#consentPage .consent-checkbox-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

#consentPage input[type="checkbox"] {
    margin-top: 4px;
}

.slider-container {
    margin: 10px 0;
}

/* Liukukytkimen asteikko: ääripäät lähelle liukua */
.slider-scale {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 5px 0;
    font-size: 0.9em;
}

.slider-scale span {
    white-space: nowrap;
}

.slider-scale input[type="range"] {
    flex: 1;
    min-width: 0;
}

.error {
    color: #d32f2f;
    /* Standardi virheväri, mutta voidaan pitää punaisena */
    font-size: 0.9em;
    display: none;
    font-weight: 800;
}

.hidden {
    display: none;
}

.form-nav {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.form-nav button {
    width: auto;
    flex: 1;
}

/* EQ VAS (0-100) pystyasteikko + liuku */
.eqvas-scale-wrap {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.eqvas-ruler {
    position: relative;
    height: 420px;
    width: 70px;
    border-left: 2px solid #000000;
}

.eqvas-ticks {
    position: absolute;
    left: -2px;
    top: 0;
    height: 100%;
    background-repeat: repeat-y;
}

.eqvas-ticks-minor {
    width: 10px;
    opacity: 0.35;
    background-image: repeating-linear-gradient(to bottom, #000000 0 1px, transparent 1px 1%);
}

.eqvas-ticks-medium {
    width: 14px;
    opacity: 0.55;
    background-image: repeating-linear-gradient(to bottom, #000000 0 1px, transparent 1px 5%);
}

.eqvas-ticks-major {
    width: 22px;
    opacity: 1;
    background-image: repeating-linear-gradient(to bottom, #000000 0 2px, transparent 2px 10%);
}

.eqvas-labels span {
    position: absolute;
    left: 30px;
    top: calc((100 - var(--v)) * 1%);
    transform: translateY(-50%);
    font-size: 0.9em;
    line-height: 1;
}

.eqvas-labels .eqvas-label-top {
    top: 0;
    transform: translateY(0);
}

.eqvas-labels .eqvas-label-bottom {
    top: 100%;
    transform: translateY(-100%);
}

.eqvas-slider {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 12px;
    height: 420px;
    margin: 0;
    display: block;
    accent-color: #009FB8;
}

/* Firefox: use the non-standard vertical range appearance when available.
   Without this, Firefox keeps the control horizontal, and width: 12px makes it look like only a thumb. */
@supports (-moz-appearance: slider-vertical) {
    .eqvas-slider {
        -moz-appearance: slider-vertical;
        appearance: auto;
    }
}

.eqvas-current {
    margin-top: 10px;
    font-weight: 800;
}