/*
 * DG Quiz — frontend TEEMA-CSS (sininen lakana).
 *
 * Tama tiedosto sisaltaa visuaalisen tematiikan ja peittaa teeman
 * header/footerin kun ollaan dg_test-sivulla. Erillaan rakenne-CSS:sta
 * (quiz.css) jotta voidaan vaihtaa tai overridaata helposti per testi.
 *
 * Vari- ja typografiapaletti matchaa vanhan rengascenter.fi
 * Game of Tyres -testin: dark blue + lime green + Montserrat.
 */

/* ============================================================
 * Teeman header/footer piiloon dg_test-singlella.
 * Kohdistetaan body.single-dg_test:n alla yleisilla selektoreilla
 * jotta toimii eri teemoissa (basicteema, twentytwenty*, custom).
 * ============================================================ */
body.single-dg_test #wpadminbar,
body.single-dg_test header.site-header,
body.single-dg_test footer.site-footer,
body.single-dg_test #masthead,
body.single-dg_test #colophon,
body.single-dg_test .site-header,
body.single-dg_test .site-footer,
body.single-dg_test .site-branding,
body.single-dg_test .main-navigation,
body.single-dg_test .navigation,
body.single-dg_test .breadcrumb,
body.single-dg_test .breadcrumbs,
body.single-dg_test .yoast-breadcrumbs,
body.single-dg_test #breadcrumb-navxt,
body.single-dg_test #dg-bottom-bar,
body.single-dg_test .dg-bottom-bar {
    display: none !important;
}

/* Sallitaan WP admin bar toolbar logged-in -tilassa, mutta no top-padding bodylle. */
body.single-dg_test.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
 * Sininen lakana — body-tason tausta + perusvarit.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;0,800;0,900;1,700;1,800&display=swap');

body.single-dg_test {
    background-color: #091E33;
    color: #FFFFFF;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Reset teeman wrapper-divit, mutta JATA plugin-container (.dg-quiz) rauhaan
 * jotta sen omat margin/padding/max-width-saannot vaikuttavat. */
body.single-dg_test #page,
body.single-dg_test #content,
body.single-dg_test main:not(.dg-quiz),
body.single-dg_test #main,
body.single-dg_test article:not(.dg-quiz),
body.single-dg_test .site-content,
body.single-dg_test .entry-content {
    background-color: transparent !important;
    color: #FFFFFF;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
 * Container — ulkokehys (1088px) + sisaltoalue (800px).
 * Vanhan rakenteen mukaisesti: dark blue tausta + 6px blue border
 * + radius. Brand-logo asetellaan absoluuttisesti alas-keskelle
 * (ulos kehyksesta), joten container tarvitsee position: relative
 * ja riittavasti tilaa alapuolella.
 * ============================================================ */
body.single-dg_test .dg-quiz {
    width: 1088px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    margin-bottom: 120px;
    padding: 0 0;
    background-color: #091E33;
    color: #FFFFFF;
    border: solid 6px #122D48;
    border-radius: 8px;
    position: relative;
    box-sizing: border-box;
}

/* Sisaltoalue — 800px + iso top-padding (matchaa vanhan firstView:n 805px / padding 120/30/90/30). */
body.single-dg_test .dg-quiz-view {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 30px 90px;
    box-sizing: border-box;
}

/* ============================================================
 * Typografia — vihrea otsikko, vahva painotus.
 * ============================================================ */
body.single-dg_test .dg-quiz h1,
body.single-dg_test .dg-quiz-title {
    color: #ECFF02;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 44px;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 30px;
    letter-spacing: 0.01em;
}

body.single-dg_test .dg-quiz-question-title {
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.25;
    text-align: center;
    margin: 0 0 30px;
    text-transform: none;
}

body.single-dg_test .dg-quiz-result-title {
    color: #ECFF02;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 38px;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 24px;
}
body.single-dg_test .dg-quiz-result-title-upper {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    opacity: 1;
    text-transform: uppercase;
}
body.single-dg_test .dg-quiz-result-title-main {
    display: block;
}

body.single-dg_test .dg-quiz-text,
body.single-dg_test .dg-quiz-result-text {
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 24px;
}
body.single-dg_test .dg-quiz-text p,
body.single-dg_test .dg-quiz-result-text p {
    color: #FFFFFF;
    margin: 0 0 16px;
}

/* ============================================================
 * Kuvat — keskelle, max-width.
 * ============================================================ */
body.single-dg_test .dg-quiz-start-image,
body.single-dg_test .dg-quiz-result-image {
    text-align: center;
    margin: 0 auto 30px;
}
body.single-dg_test .dg-quiz-start-image img,
body.single-dg_test .dg-quiz-result-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* Ylalogo (RC profiilikuva tms.) pyoreana ylhaalla keskella,
 * matchaa vanhan .logo-container:in (130px round, top -75px). */
body.single-dg_test .dg-quiz-top-logo {
    position: absolute;
    left: 50%;
    top: -75px;
    transform: translateX( -50% );
    width: 130px;
    height: 130px;
    z-index: 10;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: #091E33;
}
body.single-dg_test .dg-quiz-top-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Brand-logo (Michelin / kampanjan brandi) absoluuttisesti
 * alas-keskelle, ulos kehyksesta — sama paikka kuin vanhassa
 * .brand-logo (bottom: -75px). Dark blue tausta peittaa kehyksen
 * jaksottaa kohdalta. */
body.single-dg_test .dg-quiz-brand-logo {
    position: absolute;
    left: 50%;
    bottom: -85px;
    transform: translateX( -50% );
    width: 250px;
    max-width: 80%;
    padding: 15px 20px;
    background-color: #091E33;
    z-index: 10;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.single-dg_test .dg-quiz-brand-logo img {
    max-width: 200px;
    max-height: 100px;
    width: auto;
    height: auto;
}

/* ============================================================
 * Napit — vihrea skewed (replica vanhasta).
 * ============================================================ */
body.single-dg_test .dg-quiz-button-container {
    text-align: center;
    margin: 30px 0;
}

body.single-dg_test .dg-quiz-button {
    display: inline-block;
    position: relative;
    background-color: transparent;
    border: 0;
    padding: 16px 36px;
    color: #091E33;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.45s linear;
    z-index: 0;
}
body.single-dg_test .dg-quiz-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ECFF02;
    transform: skew(-20deg);
    transition: background-color 0.45s linear;
    z-index: -1;
}
body.single-dg_test .dg-quiz-button span {
    position: relative;
    z-index: 1;
}
body.single-dg_test .dg-quiz-button:hover,
body.single-dg_test .dg-quiz-button:focus {
    color: #091E33 !important;
    background-color: transparent !important;
}
body.single-dg_test .dg-quiz-button:hover::before,
body.single-dg_test .dg-quiz-button:focus::before {
    background-color: #FFFFFF;
}
/* Override rakenne-CSS:n .dg-quiz-button-primary:hover span { color:#fff } -saanto
 * joka muutoin tekisi tekstin nakymattomaksi valkoista taustaa vasten. Tassa
 * teemassa nappi pysyy aina tummansinisena tekstina (#091E33). */
body.single-dg_test .dg-quiz-button:hover span,
body.single-dg_test .dg-quiz-button:focus span,
body.single-dg_test .dg-quiz-button-primary:hover span,
body.single-dg_test .dg-quiz-button-primary:focus span {
    color: #091E33 !important;
}
body.single-dg_test .dg-quiz-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* "Aloita uusi testi" -nappi tulossivulla — laimea muunnos. */
body.single-dg_test .dg-quiz-restart {
    color: #ECFF02;
}
body.single-dg_test .dg-quiz-restart::before {
    background-color: transparent;
    border: 2px solid #ECFF02;
    transform: skew(-20deg);
}
body.single-dg_test .dg-quiz-restart:hover {
    color: #091E33 !important;
}
body.single-dg_test .dg-quiz-restart:hover::before {
    background-color: #ECFF02;
    border-color: #ECFF02;
}

/* ============================================================
 * Vastausvaihtoehdot — listaa vastaava muoto.
 * ============================================================ */
body.single-dg_test .dg-quiz-answers {
    max-width: 700px;
    margin: 0 auto 30px;
    padding: 0;
    list-style: none;
}

body.single-dg_test .dg-quiz-answer {
    margin: 0 0 12px;
}

body.single-dg_test .dg-quiz-answer label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background-color: rgba( 255, 255, 255, 0.04 );
    border: 2px solid rgba( 255, 255, 255, 0.3 );
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

body.single-dg_test .dg-quiz-answer label:hover,
body.single-dg_test .dg-quiz-answer input[type="radio"]:focus + label {
    border-color: #ECFF02;
    background-color: rgba( 236, 255, 2, 0.08 );
}

body.single-dg_test .dg-quiz-answer input[type="radio"]:checked + label {
    border-color: #ECFF02;
    background-color: rgba( 236, 255, 2, 0.16 );
    color: #FFFFFF;
}

body.single-dg_test .dg-quiz-answer-letter {
    color: #ECFF02;
    font-weight: 800;
    font-style: italic;
    min-width: 1.5em;
    font-size: 20px;
}

/* ============================================================
 * Edistymispalkki.
 * ============================================================ */
body.single-dg_test .dg-quiz-progress {
    max-width: 700px;
    margin: 0 auto 30px;
}
body.single-dg_test .dg-quiz-progress-bar {
    height: 8px;
    background-color: #ECFF02;
    border-radius: 0;
}
body.single-dg_test .dg-quiz-progress-text {
    color: rgba( 255, 255, 255, 0.7 );
    font-size: 14px;
    text-align: center;
    margin-top: 8px;
}

/* ============================================================
 * Tulokset — kortin sijaan flat-layout sinisellä.
 * ============================================================ */
body.single-dg_test .dg-quiz-result {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    color: #FFFFFF;
}

body.single-dg_test .dg-quiz-result-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 30px 0;
}

body.single-dg_test .dg-quiz-result-link {
    flex: 0 1 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background-color: rgba( 255, 255, 255, 0.06 );
    border: 1px solid rgba( 236, 255, 2, 0.4 );
    border-radius: 6px;
    color: #FFFFFF;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}
body.single-dg_test .dg-quiz-result-link:hover,
body.single-dg_test .dg-quiz-result-link:focus {
    border-color: #ECFF02;
    background-color: rgba( 236, 255, 2, 0.12 );
    transform: translateY( -2px );
    color: #FFFFFF;
}

body.single-dg_test .dg-quiz-result-link-label {
    color: #ECFF02;
    font-weight: 700;
    font-size: 16px;
}

/* ============================================================
 * Jakolinkit.
 * ============================================================ */
body.single-dg_test .dg-quiz-share {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba( 255, 255, 255, 0.2 );
    justify-content: center;
}
body.single-dg_test .dg-quiz-share-label {
    color: #FFFFFF;
    font-weight: 700;
}

/* ============================================================
 * Error-tila.
 * ============================================================ */
body.single-dg_test .dg-quiz-error {
    color: #FF8A8A;
    border-color: #FF8A8A;
    background-color: rgba( 255, 138, 138, 0.08 );
}

/* ============================================================
 * Mobile.
 * ============================================================ */
@media ( max-width: 768px ) {
    body.single-dg_test .dg-quiz {
        padding: 24px 16px 40px;
    }
    body.single-dg_test .dg-quiz h1,
    body.single-dg_test .dg-quiz-title {
        font-size: 30px;
    }
    body.single-dg_test .dg-quiz-question-title {
        font-size: 22px;
    }
    body.single-dg_test .dg-quiz-result-title {
        font-size: 28px;
    }
    body.single-dg_test .dg-quiz-result-title-upper {
        font-size: 16px;
    }
    body.single-dg_test .dg-quiz-button {
        padding: 14px 28px;
        font-size: 16px;
    }
    body.single-dg_test .dg-quiz-answer label {
        padding: 14px 18px;
        font-size: 16px;
    }
}