/*!
Theme Name: oli_s.
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oli_s
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

oli_s. is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/

:root {
    --bg: #eeeeee;
    --fg: #dbdbdb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #131313;
        --fg: #eeeeee;
    }
}

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

@font-face {
    font-family: 'SuisseIntl';
    src: url('fonts/SuisseIntl-Medium-WebS.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

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

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

img {
    height: auto;
    max-width: 100%;
    display: block;
    border-style: none;
}

embed,
iframe,
object {
    max-width: 100%;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

body {
    font-family: 'SuisseIntl', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--bg);
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    transition: 1s ease-out;
}

a:hover {
    filter: blur(5px);
    opacity: .7;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
}

p {
    margin-bottom: 1.5em;
}

p, h1, h2, h3, h4, h5, h6, span, a {
    mix-blend-mode: difference;
    color: var(--fg);
    filter: blur(0.25px);
}

/*--------------------------------------------------------------
# Header # Footer
--------------------------------------------------------------*/

#site-header, #site-footer {
    font-size: 1.3rem;
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    z-index: 100;
    background: transparent;
    mix-blend-mode: difference;
    color: var(--bg);
}

#header-right {
    display: flex;
    gap: 2rem;
}

#site-footer {
    top: inherit;
    bottom: 0;
}


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#primary {
    flex: 1;
    padding: 4rem 2rem 2rem 2rem;
}

.entry-title {
    display: none;
}

/*--------------------------------------------------------------
# Work
--------------------------------------------------------------*/

.work-list {
    list-style: none;
    margin: 0 0 0 1rem;
    padding: 0;
    font-size: 1rem;
}

.work-item a {
    display: block;
    padding: 0.2rem 0;
}

.work-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.work-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0;
    padding: 0;
    opacity: 0;
    filter: blur(3px);
    overflow: hidden;
    transition: .7s ease;
}

.work-item:hover .work-image img {
    max-width: 101%;
    max-height: 101%;
    opacity: 1;
    filter: blur(0);
}

/*--------------------------------------------------------------
# Projekt
--------------------------------------------------------------*/

.projekt-layout {
    display: block;
}

.projekt-left {
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 4rem);
    width: 36%;
    max-width: 500px;
    padding-right: 2rem;
    mix-blend-mode: difference;
}

.projekt-credits {
    position: fixed;
    bottom: 3rem;
    left: 2rem;
    width: calc(36% - 4rem);
    max-width: 500px;
    font-size: 0.7rem;
    opacity: 0.9;
    mix-blend-mode: difference;
}

.projekt-right {
    max-width: 1080px;
    margin-left: calc(36% + 2rem);
    padding: 0;
}

.projekt-right img,
.projekt-right video,
.projekt-right iframe,
.projekt-right figure {
    margin-bottom: 1rem;
}

.projekt-nav-prev,
.projekt-nav-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    mix-blend-mode: difference;
    color: var(--bg);
    font-size: 2rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 1 !important;
    filter: blur(0.2px) !important;
}

.projekt-nav-prev {
    left: 3rem;
}

.projekt-nav-next {
    right: 3rem;
}

.projekt-nav-arrow {
    transition: 1s ease-out;
}

.projekt-nav-prev:hover .projekt-nav-arrow,
.projekt-nav-next:hover .projekt-nav-arrow {
    opacity: .7;
    filter: blur(3px);
}

.projekt-nav-title {
    font-size: 1rem;
    opacity: 0;
    filter: blur(3px);
    max-width: 150px;
    pointer-events: none;
    transition: .4s ease-out;
}

.projekt-nav-prev:hover .projekt-nav-title,
.projekt-nav-next:hover .projekt-nav-title {
    opacity: .9;
    filter: blur(0.25px);
}

@media (max-width: 768px) {
    .projekt-left {
        width: 100%;
        position: static;
    }
    .projekt-right {
        margin-left: 0;
        width: 100%;
    }
    .projekt-credits {
        position: static;
        width: 100%;
        margin-top: 2rem;
    }
}

/*--------------------------------------------------------------
# Front Page
--------------------------------------------------------------*/

body.home #primary {
    padding: 0;
}

body.home .entry-title {
    display: none;
}

/* Featured Image verstecken — wird nicht mehr genutzt */
body.home .post-thumbnail {
    display: none;
}

#hero-media {
    display: flex;
    justify-content: center;
    margin: 0;
}

#hero-media figure,
#hero-media img,
#hero-media video {
    width: 100%;
    max-width: 1920px;
    height: auto;
    display: block;
    margin: 0;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

.wp-caption {
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    word-wrap: normal !important;
}

#primary[tabindex="-1"]:focus {
    outline: 0;
}