/* #region root, body -----------------------------------------------*/

:root {
    --col-bg: #f8f8f8;
    --col-oranssi: #F95500;
    --col-sininen: #0047CC;
    --col-keltainen: #D9F503;
    --col-text: hsl(249, 100%, 9%);
    --col-linkki: #003089;
    --ff-sys: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --body-width: 75ch;
    --border-header: min(61px, 61 * (100vw - 2 * var(--body-margin)) / 405);
    --border-footer: min(50px, 50 * (100vw - 2rem) / 405);
    --body-margin: clamp(0.4ch, 4vw, 1.3rem);
    --breakpoint1: 600px;
    --breakpoint-videot: calc(600px + 5 * var(--body-margin));
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



body {
    background-color: var(--col-bg);
    color: var(--col-text);
    min-height: 100vh;
    font-family: var(--ff-sys);
    font-size: 16px;
    overflow-x: hidden;
}

body.theme-light {
    --col-bg: #f8f8f8;
    --col-oranssi: #F95500;
    --col-sininen: #0047CC;
    --col-keltainen: #009071;
    --col-text: hsl(249, 100%, 9%);
    --col-linkki: #003089;
    --col-linkki-hover: #0047cc;
}

body.theme-dark {
    --col-bg: #1c1b21;
    --col-oranssi: #ff691e;
    --col-sininen: #D9F503;
    --col-keltainen: #206eff;
    --col-text: #f8f8f8;
    --col-linkki: #6095f8;
    --col-linkki-hover: #b6cefb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --col-bg: #101010;
        --col-oranssi: #ff6010;
        --col-sininen: #0153ec;
        --col-keltainen: #D9F503;
        --col-text: #f8f8f8;
        --col-linkki: #6095f8;
    }

}

/*  vanhat värit

body.theme-light {
    --col-bg: #f8f8f8;
    --col-oranssi: #F95500;
    --col-sininen: #0047CC;
    --col-keltainen: #029474;
    --col-text: hsl(249, 100%, 9%);
    --col-linkki: #003089;
}

body.theme-dark {
    --col-bg: #1c1b21;
    --col-oranssi: #ff6010;
    --col-sininen: #0153ec;
    --col-keltainen: #D9F503;
    --col-text: #f8f8f8;
    --col-linkki: #6095f8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --col-bg: #101010;
        --col-oranssi: #ff6010;
        --col-sininen: #0153ec;
        --col-keltainen: #D9F503;
        --col-text: #f8f8f8;
        --col-linkki: #6095f8;
    }

} */

#wrapper {
    /* Kaikki muu paitsi footer */
    min-height: calc(100vh - var(--border-footer));
    max-width: var(--body-width);
    margin: 0 auto;
}

/* #endregion  */

/* #region Header, footer -----------------------------------------------*/

header {
    position: relative;
    box-sizing: content-box;
    font-family: var(--ff-sys);
    background-color: var(--col-oranssi);
    border-bottom: var(--col-bg) solid min(100px, 100 * (100vw - 2 * var(--body-margin)) / 405);
    color: var(--col-bg);
    height: var(--border-header);
}

.otsi {
    position: absolute;
    left: var(--body-margin);
    max-width: min(405px, 100vw - 2 * var(--body-margin));
}

.logoviivat {
    fill: var(--col-bg);
}

#theme-toggle {
    border-radius: 50%;
    background-color: hsl(0, 0%, 100%, .0);
    border: none;
    position: absolute;
    top: .4rem;
    right: .6rem;
    padding: .3rem;
    opacity: .4;
    width: 1.6rem;
    height: 1.6rem;
    transition: opacity 50ms, background-color 50ms;
    outline: none;

}

#theme-toggle svg {
    width: 1rem;
    border-radius: 50%;
    margin: auto;
}

#aurinko,
#kuu {
    fill: var(--col-bg);
    transition: fill 150ms;
}

.theme-light #aurinko {
    scale: 0;
}

.theme-dark #aurinko {
    scale: 1;
}

.theme-light #kuu {
    scale: 1;
}

.theme-dark #kuu {
    scale: 0;
}

#theme-toggle:hover,
#theme-toggle:active,
#theme-toggle:focus-visible {
    opacity: .8;
    /* 
    background-color: hsl(0, 0%, 100%, .3);
    box-shadow: 0 0 6px hsl(0, 0%, 100%, .6); */
    transition: opacity 50ms, background-color 50ms;
}

#theme-toggle:hover g,
#theme-toggle:active g,
#theme-toggle:focus-visible g {
    fill: var(--col-text);
    transition: fill 300ms;
}

#theme-toggle::after {
    content: attr(aria-label);
    background: var(--col-text);
    border: 1px solid var(--col-bg);
    border-radius: .3em;
    box-shadow: var(--col-text) 0 0 5px -1px;
    position: absolute;
    width: max-content;
    left: 0;
    top: 90%;
    padding: .3em .4em;
    font-size: .8rem;
    color: var(--col-bg);
    translate: -95%;
    display: block;
    opacity: 0.2;
    scale: 0;
    transform-origin: top right;
    transition: opacity 100ms, scale 0ms 100ms;
}

#theme-toggle:hover::after,
#theme-toggle:focus-visible::after {
    opacity: .8;
    scale: 1;
    transition: opacity 150ms ease-out, scale 150ms ease-out;
}



#wrapper-foot {
    max-width: var(--body-width);
    margin: 0 auto;
}

footer {
    position: relative;
    bottom: 0px;
    background-color: var(--col-oranssi);
    height: var(--border-footer);
    overflow: hidden;
}

.foot {
    position: relative;
    left: var(--body-margin);
    height: var(--border-footer);
}

/* #endregion */

/* #region Päävalikko -----------------------------------------------*/

nav {
    position: sticky;
    top: 0;
    z-index: 8000;
    border-top: var(--col-oranssi) solid 4px;
    border-bottom: var(--col-oranssi) solid 2px;
    background-color: var(--col-bg);
    backdrop-filter: blur(1px);
    box-shadow: 0 2px 10px var(--col-bg);
}

.main-navi {
    display: flex;
    gap: calc(var(--body-margin) - .3rem);
    list-style: none;
    margin: 0 0 0 var(--body-margin);
    padding: 0;
}

.main-navi li {
    padding: .4rem 0 .4rem 0;
}

nav a {
    position: relative;
    padding: .4rem var(--body-margin) .4rem;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 300;
    color: var(--col-oranssi);
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: var(--col-oranssi) solid 2px;
}

.main-navi a:link,
.main-navi a:visited {
    color: var(--col-oranssi);
}

.main-navi a:hover,
.main-navi a:focus {
    color: var(--col-sininen);
    border-bottom: var(--col-sininen) solid 2px;
}

.main-navi a.curr {
    font-style: italic;
    font-weight: 100;
    color: var(--col-oranssi) !important;
    border-bottom: var(--col-oranssi) solid 2px !important;
}

nav .menu-toggle {
    background: none;
    color: var(--col-oranssi);
    border: 0;
    padding: .4rem var(--body-margin) .4rem;
    position: absolute;
    display: none;
    z-index: 9999;
    right: 0;
}

.menu-toggle:hover {
    color: var(--col-sininen);
}

@media screen and (max-width: 600px) {

    nav {
        height: 2.2rem;
    }

    nav .menu-toggle {
        display: inline-block;
    }

    nav .menu-toggle[aria-expanded=true]:before {
        content: "\f00d"
    }

    nav .menu-toggle[aria-expanded=false]:before {
        content: "\f0c9"
    }

    .main-navi {
        flex-direction: column;
        min-width: 65vw;
        position: absolute;
        right: 0;
        background-color: var(--col-bg);
        backdrop-filter: blur(.5em);
        -webkit-backdrop-filter: blur(.5em);
        box-shadow: -2px 2px 10px var(--col-bg);
        gap: 0.5rem;
        padding: 0 0 1rem;
        overflow-y: auto;
        margin-top: 29px;
        border-left: 2px solid var(--col-oranssi);
        border-bottom: 2px solid var(--col-oranssi);
    }

    .main-navi[data-visible="false"] {
        transform: translate(110%);
        transition: transform 500ms cubic-bezier(.37, -0.01, .73, 1.24);
    }

    .main-navi[data-visible="true"] {
        transform: translate(0%);
        transition: transform 500ms cubic-bezier(.37, -0.01, .73, 1.24);
    }

    .main-navi>li:first-child {
        border-top: 2px solid #f955003b;
        padding-top: .8rem;
    }

    .main-navi a {
        border: none;
        padding-left: calc(2 * var(--body-margin));
    }
}

/* #endregion Päävalikko */

/* #region dropdown menu ----------------------------------------------*/

.menu-arkisto {
    position: absolute;
    top: 2rem;
    z-index: 1001;
    list-style: none;
    background: var(--col-bg);
    border: var(--col-oranssi) 2px solid;
    border-top: var(--col-bg);
    box-shadow: 0px 2px 3px 1px var(--col-bg);
    padding: .5rem 0 1rem 0;
}

@media screen and ((min-width: 600px) and (max-width: 720px)) {
    .menu-arkisto {

        right: 0;
    }
}

@media screen and ((max-width: 600px)) {

    .menu-arkisto {
        position: relative;
        top: 0;
        background: none;
        border: 0;
        box-shadow: none;
        margin-top: 3px;
        padding-bottom: 0;
    }

    .menu-arkisto li {
        margin-left: calc(1.5 * var(--body-margin));
        padding-left: calc(1.5 * var(--body-margin));
    }

    .menu-arkisto a {
        padding-left: 0;
    }
}

.menu-arkisto[data-visible="false"] {
    /* height: 0;
    padding: 0;
    transition: all 500ms ease-out;
    overflow: hidden; */
    display: none;
}

.menu-arkisto[data-visible="true"] {
    /* height: auto;
    padding: .5rem 0 1rem 0;
    transition: all 500ms ease-out; */
    display: block;
}

.menu-arkisto li {
    position: relative;
    left: -2px;
    border-left: var(--col-oranssi) 2px solid;
    padding: .4rem var(--body-margin);
}

.menu-arkisto li:hover {
    border-color: var(--col-sininen);
}

.menu-arkisto a {
    border-bottom: none !important;
    padding: 0;
}

@media screen and ((max-width: 600px)) {

    .menu-arkisto li {
        margin-left: calc(1.5 * var(--body-margin));
        padding-left: calc(1.2 * var(--body-margin));
        border-width: 1px;
    }

    .menu-arkisto a {
        padding-left: 0;
    }
}

.arkisto-toggle {
    font-size: .9rem;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--col-oranssi);
    letter-spacing: .09em;
    display: inline;
    border: 0;
    border-bottom: var(--col-oranssi) solid 2px;
    padding: .4rem var(--body-margin) .4rem;
    background: none;
}

.arkisto-toggle:hover {
    color: var(--col-sininen);
}

.arkisto-toggle[aria-expanded="false"] i:before {
    content: "\f0d7";
}

.arkisto-toggle[aria-expanded="true"] i:before {
    content: "\f0d8";
}

/* #endregion */

/* #region Main layout --------------------------------------*/

main {
    display: grid;
    align-items: start;
    grid-auto-flow: dense;
    grid-template-columns: [vasen-start mvasen-start full-start] 1fr [oikea-start mvasen-end] 1fr [vasen-end moikea-start] 1fr [oikea-end moikea-end full-end];
    /* grid-auto-rows: auto auto 1fr auto; */
    gap: var(--body-margin);
    padding-top: 1rem;
    line-height: 1.35rem;
    margin-bottom: 3rem;
}

@media screen and ((max-width: 750px)) {

    main {
        padding: 1rem .5rem;
    }
}

@media screen and ((max-width: 530px)) {

    main {
        grid-template-columns: [vasen-start mvasen-start full-start oikea-start moikea-start] 1fr [vasen-end mvasen-end oikea-end moikea-end full-end];
        grid-auto-rows: auto;
    }

    .fill {
        display: none;
    }

    .cvkuvat {
        aspect-ratio: 1.6;
        grid-auto-flow: column;
    }
}

main>div {
    border: 1px var(--col-div) solid;
    border-radius: 1rem;
    padding: calc(var(--body-margin) * .8) var(--body-margin);
    align-self: stretch;
    overflow: hidden;
}

main>div h3,
main>div em {
    color: var(--col-div);
}

main img {
    display: block;
    max-width: 100%;
}

.clear {
    border: none;
    padding: 0;
}

.vasen {
    grid-column: vasen;
}

.oikea {
    grid-column: oikea;
}

.mvasen {
    grid-column: mvasen;
}

.moikea {
    grid-column: moikea;
}

.full-width {
    grid-column: full;
}

.spanrow2 {
    grid-row: span 2;
}

.spanrow3 {
    grid-row: span 3;
}

.spanrow4 {
    grid-row: span 4;
}

.oranssi {
    --col-div: var(--col-oranssi);
}

.sininen {
    --col-div: var(--col-sininen);
}

.keltainen {
    --col-div: var(--col-keltainen);
}

.hrule {
    padding: 0;
    /* border: none; */
    /* background-color: var(--col-div); */
    overflow: clip;
}

.hrule>div {
    padding: 0 var(--body-margin) var(--body-margin);
}

/* #endregion */

/* #region Viewbox */

#viewbox {
    position: fixed;
    inset: 0;
    z-index: 9990;
    /*     background: url(pct/bg_black.svg); */
    background-color: hsla(0, 0%, 0%, 0.8);
    backdrop-filter: blur(.07rem);
    justify-content: center;
    align-items: center;
}

#viewbox[data-visible="true"] {
    display: flex;
    animation: viewbox 300ms forwards;
}

@keyframes viewbox {
    0% {
        display: flex;
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#viewbox[data-visible="false"] {
    display: none;
    animation: viewbox-pois 3000ms forwards;
}

@keyframes viewbox-pois {
    0% {
        display: flex;
        opacity: 1;
    }

    99% {
        display: flex;

    }

    100% {
        opacity: 0;
        display: none;
    }
}

.vb-ruksi,
.vb-vasen,
.vb-oikea {
    position: absolute;
    z-index: 9991;
    background: transparent;
    border: none;
    padding: .3rem .4rem;
    border-radius: .5rem;
    color: hsla(0, 0%, 90%, .4);
    font-size: 2rem !important;
    pointer-events: auto;
}

.vb-mono .vb-vasen,
.vb-mono .vb-oikea {
    display: none;
}

.vb-ruksi {
    right: var(--body-margin);
    top: var(--body-margin);
}

.vb-vasen {
    left: var(--body-margin);
    top: 48%;
    padding: .3rem 1rem .3rem .8rem;
}

.vb-oikea {
    right: var(--body-margin);
    top: 48%;
    padding: .3rem .8rem .3rem 1rem;
}

.vb-ruksi:hover,
.vb-ruksi:focus,
.vb-vasen:hover,
.vb-vasen:focus,
.vb-oikea:hover,
.vb-oikea:focus {
    background: hsla(0, 0%, 90%, .2);
    border: none;
    color: hsla(0, 0%, 90%, .9);
}


.vb-content>* {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    max-width: calc(100dvw - 5 * var(--body-margin));
    max-height: calc(100dvh - 5 * var(--body-margin));

    img {
        max-width: calc(100dvw - 5 * var(--body-margin));
        max-height: calc(100dvh - 5 * var(--body-margin));
    }

    figcaption {
        position: absolute;
        bottom: .2rem;
        width: 100%;
        padding: .2rem;
        text-align: center;
        font-size: .65rem;
        letter-spacing: 1q;
        background: #111;
        color: #eee;
        opacity: .6;
    }

    * {
        pointer-events: none;
    }
}

/* [data-content="vb-kansi"] .vb-kansi {
    display: block;
}

[data-content="vb-cvkuva1"] .vb-cvkuva1 {
    display: block;
}

[data-content="vb-cvkuva2"] .vb-cvkuva2 {
    display: block;
} */

:not(.vb-mono)>div>.vb-edellinen {
    display: block;
    left: 0;
    z-index: 1;
    scale: .7;
    width: auto;
    opacity: .4;
    transform-origin: left center;
    translate: -100% -50%;
    transition: all 1s ease;
}

:not(.vb-mono)>div>.vb-seuraava {
    display: block;
    left: 100%;
    z-index: 1;
    scale: .7;
    opacity: .5;
    transform-origin: right center;
    translate: 0% -50%;
    transition: all 1s ease;
}

.vb-keski {
    display: block;
    z-index: 2;
    scale: 1;
    opacity: 1;
    /* animation: vb-keskeen 500ms forwards; */
    transition: all 1s ease;
}

@keyframes viewbox {
    0% {
        display: flex;
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes vb-taakse {
    0% {
        transform-origin: right;
    }

    30% {
        opacity: 1;
    }

    100% {
        display: none;
    }
}

@keyframes vb-keskeen {
    0% {
        display: block;
        opacity: .4;
    }

    70% {
        opacity: 1;
    }
}

.vb-oudot {
    display: none;
    margin: auto;
    color: var(--col-bg);
    text-align: center;
}

[data-content="vb-oudot"] .vb-oudot {
    display: block;
}

/* #endregion */

/* #region Musiikkivideot ------------------------------------*/

.musiikkivideot {
    padding: var(--body-margin);
    display: grid;
    grid-template-columns: [full-start] repeat(auto-fit, minmax(200px, 1fr)) [full-end];
    gap: var(--body-margin);
    grid-auto-flow: dense;
    place-items: center;
}

.musiikkivideot>div {
    text-align: center;
    font-size: .9rem;
}

.musiikkivideot img {
    border-radius: .5rem;
}

.musiikkivideot p {
    font-size: .9em;
    opacity: .7;
}

.musiikkivideot iframe {
    max-width: 100%;
}

.video {
    grid-column: full;
}

.video[data-visible="false"] {
    overflow: hidden;
    max-height: 0px;
    transition: max-height .4s linear;
    text-align: center;
}

.video[data-visible="true"] {
    overflow: hidden;
    max-height: 400px;
    transition: max-height .5s linear;
}

@media screen and (max-width: 700px) {
    .band-logo {
        grid-column: full;
    }

    .band-logo img {
        margin-inline: auto;
        max-width: 50%;
    }
}

@media screen and (max-width: 475px) {
    .video-kuvat {
        display: none;
    }

    .video[data-visible="false"] {
        max-height: 400px;

    }

    .video p {
        display: none;
    }

    .band-logo img {
        margin-inline: auto;
        max-width: 70%;
    }

    .musiikkivideot iframe {
        max-height: calc(50cqi);
    }
}

.theme-dark .musiikkivideot a {
    color: var(--col-sininen);
}

.theme-dark .musiikkivideot a:hover {
    color: var(--col-linkki-hover);
}

/* #endregion */

/* #region Sivukohtaiset ------------------------------------*/

/* index ----------------------------- */

.piilorajat {
    overflow-x: hidden;
    border-radius: .2em;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 1rem;
}

.liukukuva {
    position: relative;
    z-index: 1000;
    display: inline;
    max-width: 190%;
    transform: translate(-48%);
    transition: transform 500ms;
    border: none;
    border-radius: .2em;
    box-shadow: 0 0 .3rem .2rem var(--col-bg);
}

.liukukuva:hover {
    transform: translate(0%);
    transition: transform 500ms;
}

/* CV ----------------------------- */

.cvkuvat {
    display: grid;
    align-self: self-start;
}

.cvkuvat a {
    position: relative;
}

.cvkuvat a:hover {
    z-index: 1;
}

.cvkuvat img {
    scale: 1;
    transition: scale 300ms, opacity 300ms;
}

.cvkuvat:hover img {
    opacity: .75;
}

.cvkuvat img:hover,
.cvkuvat img:focus {
    scale: 1.04;
    opacity: 1;
}

.cvkuvat-rivi {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 2fr 1fr 1.7fr 1.5fr;
    aspect-ratio: 4;
}

.cvkuvat-rivi a {
    overflow: hidden;
}

.cvkuvat-rivi img {
    max-height: 100%;
    max-width: none;
    position: relative;
}

/* JLK ----------------------------- */

.jlk-logo img {
    padding: .8rem;
    background: #0047CC;
    border-radius: 0 0 .9rem .9rem;
}

@media screen and ((max-width: 530px)) {

    .jlk-logo img {
        padding: 1.4rem;
    }
}

/* #endregion */

/* #region HTML elementit / teksti ----------------------------t*/

p {
    text-wrap: pretty;
    /* padding: .4rem 0 .4rem; */
    margin-bottom: .4rem;
}

p:last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

*+h1,
*+h2,
*+h3,
*+h4,
*+h5,
*+h6 {
    margin-top: .6em;
}

h3 {
    color: var(--col-div, var(--col-sininen));
    font-weight: 500;
    font-size: 1.3rem;
    margin-bottom: .8em;
}

.hrule h3 {
    margin: 0 0 .4em;
    padding: 4px var(--body-margin);
    background-color: var(--col-div);
    color: var(--col-bg);
    font-variant: small-caps;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1q;
}

h4 {
    color: var(--col-div, var(--col-sininen));
    font-weight: 500;
    font-size: 1.15rem;
    margin-bottom: .4em;
}

/* h4::before {
    content: "__ ";
} */

em {
    font-style: normal;
    font-weight: 300;
    font-size: 1.1em;
    color: var(--col-div, (--col-oranssi));
    font-variant: small-caps;
}

main a:link,
main a:visited {
    text-decoration: none;
    color: var(--col-linkki);
    font-weight: 400;
    letter-spacing: .05em;
    background: linear-gradient(to bottom, var(--col-linkki-hover), var(--col-linkki-hover)) no-repeat;
    background-position: left bottom;
    background-size: 0% 1px;
    transition: background-size 100ms;
}

main a:hover {
    color: var(--col-linkki-hover);
    background-size: 100% 1px;
    transition: background-size 300ms;

}

i.fa-external-link {
    font-size: .8em;
}

dt {
    font-weight: 300;
    font-size: .9em;
    letter-spacing: 2q;
}

dd {
    margin-left: var(--body-margin);
    margin-bottom: .5em;
}

/* #endregion */