/*
Theme Name: Junttu 5
Theme URI:
Author:
Description: JJ goes WP
Version: 1
Text Domain: junttu.5
*/
@view-transition {
    navigation: auto
}

@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('css/fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('css/fonts/Lato-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --transition-style: cubic-bezier(0, 0, 0.3, 1);
    --transition-speed: .25s;

    --font-size-h1: clamp(1.375rem, 1.375rem + 1.5vw, 2.5rem);
    --font-size-h2: clamp(1.325rem, 1.325rem + 0.9vw, 2rem);
    --font-size-h3: clamp(1.3rem, 1.3rem + 0.6vw, 1.75rem);
    --font-size-h4: clamp(1.275rem, 1.275rem + 0.3vw, 1.5rem);
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;

    --header-link-padding-block: clamp(5px, 1cqw, .75rem);
    --header-height: calc(var(--font-size-h4) + var(--header-link-padding-block));

    --font-family-header: "BebasNeue-Regular";

    --box-shadow: .15rem .25rem .25rem var(--body-bg-50);
    --box-shadow-sm: .25rem .5rem .5rem var(--body-bg-50);
    --box-shadow-lg: .5rem 1rem 1rem var(--body-bg-50);

}

body {
    height: 100dvh;
    position: relative;
    font-family: "Lato", var(--body-font-family);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;

    text-shadow: -1px -1px 0 var(--body-bg-10);
}

body.highlight-img-higher-luminance,
body.highlight-img-lighter {
    text-shadow: none;
}

main,
main [id] {
    scroll-margin-top: 3.5rem
}

strong,
b {
    font-weight: 700;
    font-style: normal
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--font-family-header);
    line-height: 1;
    font-weight: normal;
    text-transform: uppercase;
    text-wrap: balance;
    letter-spacing: -.025rem;
    margin-left: -.15rem;

    overflow-wrap: normal;
    word-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;

    & b,
    & strong {
        font-weight: 400;
    }

    & a {
        box-shadow: none;
    }
}

h1,
.h1,
.site-title {
    font-size: var(--font-size-h1);
}

h2,
.h2 {
    font-size: var(--font-size-h2);
}

h3,
.h3 {
    font-size: var(--font-size-h3);
}

h4,
.h4 {
    font-size: var(--font-size-h4);
}

h5,
.h5 {
    font-size: var(--font-size-h5);
}

h6,
.h6 {
    font-size: var(--font-size-h6);
}

.page-number {
    font-size: var(--font-size-h5);
    color: var(--body-color-75);
}

.highlighter {
    color: var(--emphasis-color);
    font-weight: 900;
    text-shadow: -1px -1px 0 var(--body-bg-50);
}

a {
    color: var(--link-color);
    padding: .05rem .1rem;
    text-decoration: none;
    box-shadow: 0 1px 0 currentColor;
    background-image: linear-gradient(to right, var(--primary-color), var(--primary-color) 50%, transparent 50%);
    background-position: 100%;
    background-size: 300% 100%;
    transition: all .15s cubic-bezier(0, 0, 0.3, 0);

    &:where(:hover, :active, :focus) {
        box-shadow: none;
        color: var(--link-hover-color);

        @media (hover: hover) {
            background-position: 0 100%;
        }
    }
}

a[href*="mailto:"],
.email {
    overflow-wrap: normal;
    word-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
    -webkit-user-select: all;
    user-select: all
}

.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem 2rem;

    @media (width < 992px) {
        padding-inline: 1rem;
    }
}

.skip-link {
    box-shadow: none;

    &:focus {
        display: block;
        height: auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: .5rem 1rem !important;
        font-size: .875rem;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        z-index: 10001;
        position: relative !important;
        outline: none;
        transform: all var(--transition-speed) var(--transition-style);
    }
}

header {
    position: fixed;
    inset: 0 0 auto;
    /* Bootstrap uses these big numbers */
    z-index: 10000;
    width: 100%;

    transition: all var(--transition-speed) var(--transition-style);

    & .container {
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    & a,
    & button {
        display: block;
        padding: var(--header-link-padding-block) .5rem;
        line-height: 1;
        box-shadow: none;
        border-radius: .15rem;

        &:focus-visible {
            outline: none;
        }
    }

    & h1,
    & .h1 {
        margin-block: 0;
        padding-left: 1rem;
        font-size: var(--font-size-h4);

        @media (width < 992px) {
            padding-left: 0;
        }

        & a,
        & .title-span {
            padding: var(--header-link-padding-block) .5rem;
        }

        & svg {
            height: var(--font-size-h4);
            width: auto;
            filter: drop-shadow(var(--box-shadow));
            transform: rotate(-5deg);
        }
    }

    & .navbar {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    & .navmenu {
        position-anchor: --toggler;
        top: anchor(--toggler bottom);
        right: anchor(--toggler right);
        bottom: auto;
        left: auto;
        border: .05rem solid currentColor;
        background-color: var(--body-bg);
        border-radius: .15rem;
        box-shadow: var(--box-shadow-sm);

        @media (prefers-reduced-motion: no-preference) {
            -webkit-animation: navitranslate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
            animation: navitranslate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
        }

        @media (width > 576px) {
            display: block;
            position: relative;
            position-anchor: none;
            top: auto;
            right: auto;
            padding: 0;
            border: none;
            background-color: transparent;
            box-shadow: none;
        }

        @media (width > 992px) {
            padding-right: 1rem
        }

        &::-webkit-backdrop {
            margin-top: var(--header-height);
        }

        &::backdrop {
            margin-top: var(--header-height);
        }

        & ul {
            display: flex;
            flex-direction: column;
            align-items: end;

            @media (width > 576px) {
                flex-direction: row;
            }

            & a {
                display: block;
            }

            @media (width <=576px) {
                & li {
                    width: 100%;
                }

                & a {
                    text-align: right;
                    padding: .5rem .5rem .5rem 1rem;
                }
            }
        }
    }

    @media (width > 992px) {

        & .ostoskori,
        & .ostoskori+.bogo-language-switcher {
            padding-right: 1rem;
        }

        & .navbar:has(.ostoskori) .navmenu,
        & .navbar:has(.bogo-language-switcher) .navmenu,
        & .navbar:has(.bogo-language-switcher) .ostoskori {
            padding-right: 0 !important;
        }
    }
}

.skip-link:focus+header {
    margin-top: var(--header-height);
}

button.navbar-toggler {
    border: 0;
    line-height: 1;
    background-color: transparent;
    box-shadow: none;
    border-radius: .15rem;
    anchor-name: --toggler;

    @media (width > 576px) {
        margin: 0;

        &:not(.cart-toggler) {
            display: none;
        }
    }

    & svg {
        width: var(--font-size-h4);
        height: var(--font-size-h4);
        fill: var(--body-color);
        transition: -webkit-transform var(--transition-speed) var(--transition-style);
        transition: transform var(--transition-speed) var(--transition-style);
        transition: transform var(--transition-speed) var(--transition-style), -webkit-transform var(--transition-speed) var(--transition-style);

        &.hamburger-icon {
            -webkit-transform: translateY(.1rem);
            transform: translateY(.1rem);

            & rect {
                transition: all var(--transition-speed) var(--transition-style);
            }

            & .top,
            & .bottom {
                -webkit-transform-origin: center;
                transform-origin: center;
            }
        }
    }

    &.cart-toggler svg {
        transform: translateY(-0.2rem);
    }
}

body:has(#NavMenu:popover-open) .navbar-toggler {
    --icon-size: 48;
    --icon-bar-size: 12;
    --icon-translation-size: calc((var(--icon-size) - var(--icon-bar-size)) / 2);
    background-color: transparent;

    & .top {
        -webkit-transform: rotate(45deg) translate(0, calc(var(--icon-translation-size) * 0.07rem));
        transform: rotate(45deg) translate(0, calc(var(--icon-translation-size) * 0.07rem));
    }

    & .bottom {
        -webkit-transform: rotate(-45deg) translate(0, calc(var(--icon-translation-size) * -0.03rem));
        transform: rotate(-45deg) translate(0, calc(var(--icon-translation-size) * -0.03rem));
    }

    & .middle {
        opacity: 0;
    }
}

.navlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    text-transform: uppercase;
    font-size: var(--font-size-h4);
    font-family: "BebasNeue-Regular";

    & a {
        color: currentColor;
        box-shadow: none;
        letter-spacing: -.025rem;
    }
}

/* Bogo */
.bogo-language-switcher {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-family-header);
    font-size: var(--font-size-h4);

    @media (width > 576px) {
        flex-direction: row;
    }

    @media (width > 992px) {
        padding-right: 1rem;
    }

    & a {
        display: block;
        margin: 0;
        line-height: 1;
    }

    & .bogo-current,
    & .bogo-empty {
        display: none;
    }
}

main {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-inline: auto;

    & .wp-social-link {
        background-color: transparent !important;
    }

    & .wp-block-social-links:has(a[href*="apple.com"], a[href*="spotify.com"]) {
        list-style: none;
        margin: 0;
        padding: 1rem 0;
        display: flex;
        gap: 1ch;
    }

    & .wp-block-social-links a {
        display: inline-block;
        text-indent: -9999px;
        overflow: hidden;
        width: 2rem;
        height: 2rem;
        border-radius: 100%;
        background: transparent url('css/img/apple.svg') no-repeat 50% 50%;
        background-size: 85%;
        box-shadow: none;
        -webkit-filter: invert(1);
        filter: invert(1);

        &:where(:hover, :active, :focus) {
            -webkit-animation: iconlink 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite forwards;
            animation: iconlink 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite forwards;
        }
    }

    & .wp-block-social-links a[href*="spotify.com"] {
        background-image: url('css/img/spotify.svg');
    }

    & .wp-block-social-links a[href*="facebook.com"] {
        background-image: url('css/img/facebook.svg');
    }

    & .wp-block-social-links a[href*="mailto:"] {
        background-image: url('css/img/envelope.svg');
    }
}

section,
.section {
    .wrap {
        min-height: 100svh;
        padding-bottom: 3rem;
        position: relative;
        background-image: url('css/img/bbblurry.svg');
        background-repeat: repeat;
        background-position: 0 0;
        background-size: cover;

        &+.wrap {
            background-position: 0 100%;
        }

        &+.wrap+.wrap {
            background-position: 100% 0;
        }

        & .container {
            position: relative;
            display: grid;
            grid-template-rows: repeat(1, 1fr);
            grid-template-columns: repeat(12, 1fr);
            gap: 5%;
            row-gap: 1.5rem;
            padding-block: calc(var(--header-height) + 1.5rem) var(--header-height);
            z-index: 1;

            @media (width < 992px) {
                max-width: 65ch !important;
            }

            @media (width < 576px) {

                .home &,
                .single & {
                    padding-top: var(--header-height);
                }
            }

            @media (width > 992px) {
                padding-block: calc(var(--header-height) + 3rem) var(--header-height);
            }

            & .article-content {
                grid-column: auto/span 12;
                order: 2;

                @media (width > 992px) {
                    grid-column: auto/span 6;
                    order: 1;
                }
            }

            & .meta {
                font-size: .9rem;
            }

            & aside {
                grid-column: auto/span 12;
                order: 1;

                @media (width > 992px) {
                    grid-column: auto/span 6;
                    order: 2;
                    margin-top: 1rem;
                }
            }
        }
    }
}

section.nogrid,
.section.nogrid {
    & .container {
        position: relative;
        display: block;
        grid-template-rows: none;
        grid-template-columns: none;
        gap: 0;
        row-gap: 0;
        padding-block: calc(var(--header-height) + 1.5rem) var(--header-height);
        z-index: 1;

        @media (width > 992px) {
            padding-top: calc(var(--header-height) + 3rem);
        }

        & * {
            max-width: 65ch;
        }
    }
}

section.store,
.section.store {
    .container * {
        max-width: none;
    }
}


@media (width < 576px) and (orientation: portrait) {
    aside img.stretch {
        position: relative;
        width: 100vw;
        max-width: none;
        height: auto;
        right: 50%;
        left: 50%;
        margin: 0 -50vw !important;
    }
}

.navigation {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 1.5rem;

    & .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1ch;
        margin: 0 auto;
        font-size: .9rem;
    }

    & .nav-next {
        align-self: flex-end;
        text-align: right;
    }

    & a.page-numbers,
    & span.page-numbers {
        display: inline-block;
        width: 1.4rem;
        aspect-ratio: 1 / 1;
        text-align: center;
        place-content: center;
        align-content: center;
        font-size: .9rem;
        overflow: hidden;
        text-decoration: none;
        outline: 0.1rem solid var(--primary-color);
        border-radius: .15rem;
        transition: background var(--transition-speed) var(--transition-style);
    }

    & .page-numbers {
        color: var(--white-color);
    }

    & .page-numbers.current {
        color: currentColor;
        background-color: transparent;
        outline-color: transparent;
    }

    & .page-numbers.dots {
        background-color: transparent;
        color: currentColor;
        outline-color: transparent;
    }
}

button,
input[type="submit"] {
    min-width: 2ch;
    padding: 1rem 2ch;
    outline-color: transparent;
    background-color: var(--primary-color);
    border: none;
    border-radius: 0 .15rem .15rem 0;

    &:where(:hover, :active, :focus) {
        background-color: var(--primary-color-hover);
    }
}

.search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 3rem;
    background-color: var(--body-color);
    border-radius: .15rem;

    & input:not([type="submit"]) {
        min-width: 30ch;
        padding: 1rem .5rem;
        background-color: transparent;
        border: none;
        outline-color: transparent;
    }

    & label {
        position: absolute;
        inset: 1rem 0 0 .5rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        color: var(--body-bg-50);
        transition: all ease-in-out .5s;
        text-shadow: none;
    }

    & .search-field:where(:focus, :focus-within, :focus-visible) {
        color: var(--body-bg);
        border-radius: .1rem 0 0 .1rem;
        outline-offset: 0;
    }

    & .search-field:where(:focus, :focus-within)+label {
        inset: -.15rem 0 0 .5rem;
        font-size: .75rem;
        color: var(--primary-color-hover);
    }
}

footer.footer {
    position: fixed;
    inset: auto 0 0;
    z-index: 2;

    & .container {
        padding-block: .5rem;
    }

    & ul {
        display: flex;
        gap: .5ch;
    }

    & li {
        height: 1.6rem;
    }

    & svg {
        height: 100%;
        width: 100%;
        fill: currentColor;
    }

    & a {
        display: block;
        height: 100%;
        aspect-ratio: 1 / 1;
        padding: 0;
        background: none;

        &:where(:hover, :focus, :active, :focus-visible) {
            outline: none;

            & svg {
                fill: var(--primary-color);
            }
        }
    }
}

.backdrop {
    background-color: var(--body-bg-50);
}

@supports((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
    .backdrop {
        background-color: var(--body-bg-10);
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem)
    }
}

.article-img-wrap {
    position: relative;
    isolation: isolate;

    & img {
        z-index: 0;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: .25rem;
        box-shadow: var(--box-shadow-lg);

        @media (width > 992px) {
            width: 90%;
        }
    }

    & .highlight-item-caption {
        position: absolute;
        right: auto;
        bottom: .25rem;
        right: .25rem;
        padding: .5rem;
        background-color: var(--body-bg-50);
        color: var(--body-color-50);
        font-size: 75%;
        border-radius: .25rem;

        @media (width > 992px) {
            right: calc(10% + .25rem);
        }

        & a {
            color: var(--body-color-50);
        }
    }
}

.wp-block-image,
.article-img-wrap {
    & noscript img {
        position: absolute;
        inset: 0;
    }
}

@media (width > 992px) {
    .sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
        align-self: start;
        z-index: 1020;
    }
}

.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch !important;

    &>figure {
        width: calc(50% - 1rem);
        margin-inline: .5rem;
    }
}

.wp-has-aspect-ratio iframe {
    width: 100%;
    padding: 0;
    -o-object-fit: cover;
    object-fit: cover;
}

.wp-embed-aspect-16-9 iframe {
    aspect-ratio: 16 / 9;
}

.wp-embed-aspect-21-9 iframe {
    aspect-ratio: 21 / 9;
}

@-webkit-keyframes navitranslate {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2%);
        transform: translateY(-2%);
    }

    30% {
        opacity: 0.7;
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@keyframes navitranslate {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2%);
        transform: translateY(-2%);
    }

    30% {
        opacity: 0.7;
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@-webkit-keyframes iconlink {
    0% {
        outline: 1px solid black;
    }

    100% {
        outline: 1rem solid transparent;
    }
}

@keyframes iconlink {
    0% {
        outline: 1px solid black;
    }

    100% {
        outline: 1rem solid transparent;
    }
}

@-webkit-keyframes cartshow {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        fill: black;
        outline: 1px solid var(--primary-color);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        fill: white;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        fill: black;
        outline: 1rem solid transparent;
    }
}

@keyframes cartshow {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        fill: black;
        outline: 1px solid var(--primary-color);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        fill: white;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        fill: black;
        outline: 1rem solid transparent;
    }
}