/*
Theme Name: Juha Räisänen
Theme URI: https://juharaisanen.fi/
Author: Tuomo Räisänen
Author URI: https://www.linkedin.com/in/tuomor%C3%A4is%C3%A4nen/
Description: Lapsiteema Twenty Twenty-Five -teemalle. Design system: Nordic Ethereal (Stitch).
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-jr
Template: twentytwentyfive

© 2026 Juha Räisänen
*/

.jr-news,
.jr-biography,
.jr-gallery,
.jr-tour,
.jr-music,
.jr-contact {
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--80)
        var(--wp--preset--spacing--50);
}

.jr-footer {
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60)
        var(--wp--preset--spacing--50);
}

.jr-hero {
    min-height: 95vh;
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60)
        var(--wp--preset--spacing--50);
}

.jr-hero__overlay {
    background-color: #131313;
}

.jr-news__header,
.jr-tour__header,
.jr-gallery__header {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--60);
}

.jr-news__image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.jr-biography__column-label {
    flex-basis: 33%;
}

.jr-biography__column-content {
    flex-basis: 67%;
}

.jr-gallery__column-main,
.jr-gallery__column-grid {
    flex-basis: 50%;
}

.jr-gallery__image-main {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.jr-gallery__image-wide {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.jr-gallery__image-square {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.jr-music__column-content {
    flex-basis: 45%;
}

.jr-music__column-embed {
    flex-basis: 55%;
}

.jr-music__spotify-embed {
    display: block;
    width: 100%;
}

.jr-footer__column-main {
    flex-basis: 40%;
}

.jr-footer__column-pages,
.jr-footer__column-press {
    flex-basis: 30%;
}

.jr-footer__copyright-bar {
    margin-top: var(--wp--preset--spacing--60);
    margin-bottom: 0;
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: 0;
}

/* ── Peräkkäiset samataustaiset lohkot: poistetaan tuplapadding ─── */
/*
 * Kun kaksi pureblocks-lohkoa on peräkkäin ja molemmilla on sama
 * tumma taustaväri (base), padding-top tuplaantuisi. Nollataan se.
 */

.wp-block-pureblocks-jr-split + .wp-block-pureblocks-jr-split,
.wp-block-pureblocks-jr-split + .wp-block-pureblocks-jr-music,
.wp-block-pureblocks-jr-split + .wp-block-pureblocks-jr-news,
.wp-block-pureblocks-jr-split + .wp-block-pureblocks-jr-tour,
.wp-block-pureblocks-jr-split + .wp-block-pureblocks-jr-gallery,
.wp-block-pureblocks-jr-split + .wp-block-pureblocks-jr-biography,
.wp-block-pureblocks-jr-split + .wp-block-pureblocks-jr-contact,
.wp-block-pureblocks-jr-music + .wp-block-pureblocks-jr-split,
.wp-block-pureblocks-jr-music + .wp-block-pureblocks-jr-music,
.wp-block-pureblocks-jr-music + .wp-block-pureblocks-jr-news,
.wp-block-pureblocks-jr-music + .wp-block-pureblocks-jr-tour,
.wp-block-pureblocks-jr-music + .wp-block-pureblocks-jr-gallery,
.wp-block-pureblocks-jr-music + .wp-block-pureblocks-jr-biography,
.wp-block-pureblocks-jr-music + .wp-block-pureblocks-jr-contact,
.wp-block-pureblocks-jr-news + .wp-block-pureblocks-jr-split,
.wp-block-pureblocks-jr-news + .wp-block-pureblocks-jr-music,
.wp-block-pureblocks-jr-news + .wp-block-pureblocks-jr-news,
.wp-block-pureblocks-jr-news + .wp-block-pureblocks-jr-tour,
.wp-block-pureblocks-jr-news + .wp-block-pureblocks-jr-gallery,
.wp-block-pureblocks-jr-news + .wp-block-pureblocks-jr-biography,
.wp-block-pureblocks-jr-news + .wp-block-pureblocks-jr-contact,
.wp-block-pureblocks-jr-tour + .wp-block-pureblocks-jr-split,
.wp-block-pureblocks-jr-tour + .wp-block-pureblocks-jr-music,
.wp-block-pureblocks-jr-tour + .wp-block-pureblocks-jr-news,
.wp-block-pureblocks-jr-tour + .wp-block-pureblocks-jr-tour,
.wp-block-pureblocks-jr-tour + .wp-block-pureblocks-jr-gallery,
.wp-block-pureblocks-jr-tour + .wp-block-pureblocks-jr-biography,
.wp-block-pureblocks-jr-tour + .wp-block-pureblocks-jr-contact,
.wp-block-pureblocks-jr-gallery + .wp-block-pureblocks-jr-split,
.wp-block-pureblocks-jr-gallery + .wp-block-pureblocks-jr-music,
.wp-block-pureblocks-jr-gallery + .wp-block-pureblocks-jr-news,
.wp-block-pureblocks-jr-gallery + .wp-block-pureblocks-jr-tour,
.wp-block-pureblocks-jr-gallery + .wp-block-pureblocks-jr-gallery,
.wp-block-pureblocks-jr-gallery + .wp-block-pureblocks-jr-biography,
.wp-block-pureblocks-jr-gallery + .wp-block-pureblocks-jr-contact,
.wp-block-pureblocks-jr-biography + .wp-block-pureblocks-jr-split,
.wp-block-pureblocks-jr-biography + .wp-block-pureblocks-jr-music,
.wp-block-pureblocks-jr-biography + .wp-block-pureblocks-jr-news,
.wp-block-pureblocks-jr-biography + .wp-block-pureblocks-jr-tour,
.wp-block-pureblocks-jr-biography + .wp-block-pureblocks-jr-gallery,
.wp-block-pureblocks-jr-biography + .wp-block-pureblocks-jr-biography,
.wp-block-pureblocks-jr-biography + .wp-block-pureblocks-jr-contact,
.wp-block-pureblocks-jr-contact + .wp-block-pureblocks-jr-split,
.wp-block-pureblocks-jr-contact + .wp-block-pureblocks-jr-music,
.wp-block-pureblocks-jr-contact + .wp-block-pureblocks-jr-news,
.wp-block-pureblocks-jr-contact + .wp-block-pureblocks-jr-tour,
.wp-block-pureblocks-jr-contact + .wp-block-pureblocks-jr-gallery,
.wp-block-pureblocks-jr-contact + .wp-block-pureblocks-jr-biography,
.wp-block-pureblocks-jr-contact + .wp-block-pureblocks-jr-contact {
    padding-top: 0;
}

/* ── Smooth scroll ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ── Site header ─────────────────────────────────────────────────── */

.jr-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--wp--preset--color--base, #131313);
    border-bottom: 1px solid var(--wp--preset--color--outline-variant, #444748);
    padding: var(--wp--preset--spacing--30, 20px) var(--wp--preset--spacing--50, 30px)
        var(--wp--preset--spacing--30, 20px) var(--wp--preset--spacing--50, 30px);
    will-change: transform;
    transition: transform 0.3s ease;
}

.jr-site-header.is-hidden {
    transform: translateY(-100%);
}

.jr-site-header__inner {
    max-width: 1340px;
    margin-inline: auto;
    width: 100%;
    gap: var(--wp--preset--spacing--40, 1rem);
}

/* ── Site title (brand) ──────────────────────────────────────────── */

.jr-site-header__brand,
.jr-site-header__brand a {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--contrast, #e5e2e1) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.jr-site-header__brand a:hover,
.jr-site-header__brand a:focus-visible {
    color: var(--wp--preset--color--electric-pink, #ff007f) !important;
}

/* ── Navigation links ────────────────────────────────────────────── */

.jr-site-header__nav .wp-block-navigation-item__content {
    color: var(--wp--preset--color--muted, #c4c7c7);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0;
}

.jr-site-header__nav .wp-block-navigation-item__content:hover,
.jr-site-header__nav .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--electric-pink, #ff007f);
}

/* ── Burger button ───────────────────────────────────────────────── */

.jr-site-header__nav .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--contrast, #e5e2e1);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.jr-site-header__nav .wp-block-navigation__responsive-container-open svg {
    display: block;
}

/* ── Navigation breakpoint override: mobile below 1025px ─────────── */
/*
 * WP core/navigation defaults to ~600px. Override to 1025px so that
 * tablets and smaller desktops also get the hamburger menu.
 */

@media (max-width: 1024px) {
    .jr-site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .jr-site-header__nav .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
}

@media (min-width: 1025px) {
    .jr-site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: contents !important;
    }

    .jr-site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
}

/* ── Mobile overlay ──────────────────────────────────────────────── */
/*
 * The overlay lives inside .jr-site-header__nav (WP Interactivity API
 * manages open/close state there — do NOT move it to <body>).
 * Because the header has NO transform in its resting state, position:fixed
 * children correctly use the viewport as their containing block.
 */

.jr-site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background-color: var(--wp--preset--color--base, #131313) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    z-index: 100000 !important;
    overflow: auto !important;
}

/* Close button — top-right corner of the open overlay */
.jr-site-header__nav .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: var(--wp--preset--spacing--30, 20px) !important;
    right: var(--wp--preset--spacing--50, 30px) !important;
    color: var(--wp--preset--color--contrast, #e5e2e1) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.jr-site-header__nav .wp-block-navigation__responsive-container-close svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
}

/* Inner wrappers: stretch to fill so absolute close-btn anchors correctly */
.jr-site-header__nav .wp-block-navigation__responsive-close {
    position: relative !important;
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.jr-site-header__nav .wp-block-navigation__responsive-dialog {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Content area */
.jr-site-header__nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    width: 100%;
}

/* Link list */
.jr-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--wp--preset--spacing--40, 1rem) !important;
}

/* Large centered link typography */
.jr-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: var(--wp--preset--color--contrast, #e5e2e1) !important;
    transition: color 0.2s ease;
    padding: 0.15em 0 !important;
}

.jr-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.jr-site-header__nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--electric-pink, #ff007f) !important;
}