/*
Theme Name: Spiekermann Child
Description: Child theme of Spiekermann.
Author: mipodi
Template: spiekermann
Version: 1.0.0
Text Domain: spiekermann-child
*/

html {
    height: 100%;
}

/* Apply background only on front page */
body.home {
    background-image: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    min-height: 100%;
    background-color: #659D99;
}

/* Background video container (inserted by theme via wp_body_open) */
.bg-video {
    position: fixed;
    inset: 0;
    z-index: 9980; /* below ::before (9990) and header/menu (9999) */
    pointer-events: none;
    overflow: hidden;
}

.bg-video__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    display: block;
}

/* Fallback image inside the <video> (for very old browsers) */
.bg-video__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Background video pause/play toggle */
.bg-video__toggle {
    position: fixed;
    z-index: 9999;
    right: 2.5rem;
    bottom: 3.5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    pointer-events: auto; /* clickable even though bg-video has pointer-events: none */
    outline: none;
}

.bg-video__toggle-label {
    font-family: Anaheim, sans-serif;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0.03em;
    white-space: pre-line; 
    line-height: 0.9;
    font-weight: 600;
}

.bg-video__toggle-icon {
    width: 2.25rem;
    height: 2.25rem;
    border: none; /* no ring around the pause icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bg-video__toggle-bar {
    width: 6px;
    height: 2.25rem;
    background-color: #ffffff;
    margin: 0 2px;
}

.bg-video__toggle:focus,
.bg-video__toggle:focus-visible {
    outline: none;
}

/* Simple play state: dim one bar to visually suggest play vs pause */
.bg-video__toggle.is-paused .bg-video__toggle-bar:first-child {
    opacity: 0.2;
}

/* Landscape vs portrait placement tweaks */
@media (orientation: landscape) {
    .bg-video__toggle {
        right: 3rem;
        bottom: 30%;
    }
}

@media (orientation: portrait) {
    .bg-video__toggle {
        right: 1.5rem;
        bottom: 30%;
    }
}

/* Respect user reduced-motion preference: hide video, show static image instead */
@media (prefers-reduced-motion: reduce) {
    .bg-video {
        display: none;
    }
    .bg-video__toggle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) and (orientation: landscape) {
    body.home {
        background-image: url("background-image/ri_snail_landscape.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

@media (prefers-reduced-motion: reduce) and (orientation: portrait) {
    body.home {
        background-image: url("background-image/ri_snail_portrait.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

/* Low-data connections: hide video and use lightweight WebP placeholders */
@media (prefers-reduced-data: reduce) {
    .bg-video,
    .bg-video__toggle {
        display: none;
    }
}

@media (prefers-reduced-data: reduce) and (orientation: landscape) {
    body.home {
        background-image: url("background-image/ri_snail_landscape_low.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

@media (prefers-reduced-data: reduce) and (orientation: portrait) {
    body.home {
        background-image: url("background-image/ri_snail_portrait_low.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

/* JS-based low-data mode: navigator.connection.saveData => adds .has-low-data on <html> */
html.has-low-data .bg-video,
html.has-low-data .bg-video__toggle {
    display: none;
}

@media (orientation: landscape) {
    html.has-low-data body.home {
        background-image: url("background-image/ri_snail_landscape_low.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

@media (orientation: portrait) {
    html.has-low-data body.home {
        background-image: url("background-image/ri_snail_portrait_low.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

/* Gradient overlay covering the top 50% background image*/
body.home::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 50%; 
    pointer-events: none;
    z-index: 9990; /* below header/logo/nav (those use 9999) */
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 48%,
        rgba(255,255,255,0.8) 67%,
        rgba(255,255,255,0.61) 83%,
        rgba(255,255,255,0) 100%
    );
    mix-blend-mode: soft-light;
}

/* Hide footer on front page */
body.home footer{
    display: none;
}

/* Change logo to white only on front page */
body.home .custom-logo-link img {
    filter: brightness(0) invert(1);
}

/* Move logo to bottom left only on front page */
body.home .custom-logo-link {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    padding: .75rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

/* Ri geo locations */
body.home .custom-logo-link::after {
    content: "malmö\A bremen\A cyberspace";
    display: block;
    white-space: pre; /* preserve explicit line breaks (\A) */
    color: white;
    font-size: 1rem; /* 14px */
    line-height: 1;
    font-weight: 600;
    margin: 0;
    text-align: left;
}

/* Move menu to bottom on front page (all viewports) */
body.home .wp-block-navigation {
    position: fixed;
    /* left: 0; */
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: .75rem .75rem;
    color: white;
    background-color: transparent;
}

/* Front page: use an em dash separator between menu items */
body.home .wp-block-navigation__container {
    gap: 0; /* separators handle spacing */
}

body.home .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
    content: "—";
    display: inline-block;
    margin: 0 .75rem;
    color: inherit;
}

/* On small screens, move the navigation/menu button to bottom-right on all pages */
@media (max-width: 600px) {
    body .wp-block-navigation {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 9999;
        padding: .75rem .75rem;
        background-color: #E4E7EB;
        border-radius: 0.2rem 0 0 0; /* top-left only */
    }

    /* Place the responsive close button just above the first menu item, bottom-right.
       Target both the container and its inner button, and override theme positioning. */
    body .wp-block-navigation__responsive-container-close,
    body .wp-block-navigation__responsive-container-close button {
        position: fixed !important;
        inset: auto !important;
        right: 0.75rem !important;
        bottom: 13.25rem !important; /* tweak this value to move it up/down */
        z-index: 10000;
        padding: 0.25rem 0.5rem;
        background: transparent;
        border: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* Add an "x" icon after the close label */
    body .wp-block-navigation__responsive-container-close::after,
    body .wp-block-navigation__responsive-container-close button::after {
        content: "×";
        display: inline-block;
        font-size: 1.25rem;
        line-height: 1;
        margin-left: 0.25rem;
    }
}

/* Menu always font weight 500 */
body .wp-block-navigation a {
    font-weight: 500;
    text-decoration: none; /* we'll control underline on hover/active */
    text-decoration-skip-ink: auto;
}

/* When Navigation switches to responsive (collapsed), make the "Meny" label one weight heavier */
/* Target common responsive container classes and the toggle/button label */
body .wp-block-navigation__responsive-container,
body .wp-block-navigation__responsive-container-open,
body .wp-block-navigation__responsive-container-close {
    font-weight: 600;
}

/* Consistent underline thickness for navigation links (all pages, all browsers) */
body .wp-block-navigation a:hover,
body .wp-block-navigation a:focus-visible {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em; /* closer to text, consistent across browsers */
}

/* Keep active/current menu item underlined with the same thickness */
body .wp-block-navigation a[aria-current="page"],
body .wp-block-navigation a[aria-current="true"] {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

body .wp-block-navigation__responsive-container .wp-block-navigation__toggle,
body .wp-block-navigation__responsive-container-open .wp-block-navigation__toggle,
body .wp-block-navigation__responsive-container-close .wp-block-navigation__toggle {
    font-weight: 600;
}

/* Preferred: detect responsive state via :has() on the navigation block (modern browsers) */
@supports(selector(:has(*))) {
    body:has(.wp-block-navigation .wp-block-navigation__responsive-container) .wp-block-navigation,
    body:has(.wp-block-navigation .wp-block-navigation__responsive-container-open) .wp-block-navigation,
    body:has(.wp-block-navigation .wp-block-navigation__responsive-container-close) .wp-block-navigation {
        font-weight: 600;
    }
}

/* Also ensure the menu items inside the responsive container use the heavier weight */
body .wp-block-navigation__responsive-container a,
body .wp-block-navigation__responsive-container .wp-block-navigation__container a,
body .wp-block-navigation__responsive-container-open a,
body .wp-block-navigation__responsive-container-close a {
    font-weight: 600;
}

@supports(selector(:has(*))) {
    body:has(.wp-block-navigation .wp-block-navigation__responsive-container) .wp-block-navigation a,
    body:has(.wp-block-navigation .wp-block-navigation__responsive-container-open) .wp-block-navigation a,
    body:has(.wp-block-navigation .wp-block-navigation__responsive-container-close) .wp-block-navigation a {
        font-weight: 600;
    }
}

/* Right-align menu items in the mobile responsive menu */
@media (max-width: 600px) {
    /* Make sure the container is a vertical flex stack aligned to the right */
    body .wp-block-navigation__responsive-container .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Each item hugs the right edge */
    body .wp-block-navigation__responsive-container .wp-block-navigation-item {
        align-self: flex-end !important;
    }

    /* Ensure link text itself is right-aligned */
    body .wp-block-navigation__responsive-container a {
        text-align: right !important;
        width: 100%;
    }
}

/* Show only for screen readers and search engines */
body.home h1 {
    position: absolute;
    left: -9999px;
}

/* Paragragh placed in top left corner */
body.home .wp-block-columns {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 9999;
    color: #1C2934;
    font-size: 2.875rem; /* 46px */
    text-transform: uppercase;
    font-weight: 400;
    font-family: Anaheim, sans-serif;
    line-height: 1.28;
    max-width: 33.75rem; /* 540px */
}

@media (max-width: 600px) {
    /* Reduce top-left paragraph font when nav collapses (narrow view) */
    body.home .wp-block-columns {
        font-size: 1.25rem; /* 20px */
        font-weight: 600;
        line-height: 1.3;
        max-width: 15.1875rem; /* 243px */
    }

    .custom-logo-link img,
    body .custom-logo-link img {
        width: 64px;
        height: 64px;
    }

    body.home .custom-logo-link::after {
    font-size: 0.75rem; /* 12px */
    line-height: 1;
    font-weight: 500;
    margin: 0;
    text-align: left;
    }
}