/*
Theme Name: Kanal K 2022 (Headless)

Version: 2.4.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Theme für Kanal K Webseite 2022
Author: Benedikt Fischer / Kanal K
Desgin: Philipp Condrau @bueraucondrau
Author URI: kanalk.ch

Change History:
*   2.1.0   20241125    New Name: Kanal K 2022 (Headless)
*   2.2.0   20241125    Canonical Tag in Sitemap (/sitemap-sendungen.xml)
*   2.3.0   20241126    /sitemap-sendungen.xml deprecated --> new: /sitemap-broadcast.xml (only with matching broadcastType)
*   2.3.1   20241126    /sitemap-pages.xml mit Landing Pages und Canonical
*   2.4.0   20241126    sitemap: all posts are separate (posts-podcasts, posts-news und posts-rest)
*   2.5.0   20251117    Umbau Screen update

*/
:root {
    --color-red: #d46e70;
    --color-yellow: #f5dc70;
    --color-blue: #70c0eb;
    --color-pink: #dbb3c5;
    --color-black: #000000;
    --color-black-op75: rgba(0,0,0,0.75);
    --color-white: #ffffff;
    --color-transparent: rgba(255,255,255,0.75);
    --color-random1: #dbb3c5;
    --color-random2: #d46e70;
    --outer-sides-margin: 30px;
    --center-sides-margin: 100px;
    --inner-sides-margin: 150px;
    --inline-sides-margin: 20px;
    --content-top-margin: 120px;
    --bottom-margin: 30px;
    --box-margin: 10px;

    --expandlist-width: 230px;

    --border-width-bold: 2px;
    --border-width-thin: 1px;

    --transition-time1: 600ms;
    --transition-time2: 900ms;
    --marquee-time: 20s;
    --header-height: 100px;
    --hamburger-width: 68px;
    --hamburger-height: 54px;
    --hamburger-slize-size: 6px;
    --logo-width: 160px;
    --logo-icon-width: 90px;
    --player-width: 60px;
    --player-height: 80px;

    font-size: 20px;
}
body {
    font-family: 'Inter', sans-serif !important;
    margin: 0;
}

header {
    position: fixed;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
}
header ul > li {
    margin-right: 20px;
}
header ul > li > a {
    color: var(--color-black)
}
header ul > li > a:hover {
    color: var(--color-random1)
}

#player {
    height: 80vh;
    position: relative;
    border-top: solid transparent var(--border-width-thin);
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
    width: 33%;
    z-index: 8;
    border: solid var(--color-black) var(--border-width-thin);
    transition: opacity ease var(--transition-time1), z-index ease 0s;
}
#player #controls {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-random1);
}
#player #controls .button {
    transition: height 200ms ease, width 200ms ease;
    width: calc(var(--player-width) * 2.4);
    height: calc(var(--player-height) * 2.4);
    cursor: pointer;
}
#player #controls .button > div {
    position: absolute;
    width: inherit;
    height: inherit;
    /* display: flex; */
    transition: transform ease var(--transition-time1);
}
#player.paused #controls .button > div.played,
#player.playing #controls .button > div.paused {
    transform: scale(0);
}
.playbtn0{fill:#FFFFFF;}
.playbtn1{fill:none;stroke:#000000;stroke-width:1.935;}
.playbtn2{
    fill: var(--color-random1);
    /*fill: red;*/
}
.pausebtn0{fill:#FFFFFF;}
.pausebtn1{clip-path:url(#SVGID_00000065753925646411997700000009801681283185754242_);fill:none;stroke:#000000;stroke-width:1.949;}
.pausebtn2{clip-path:url(#SVGID_00000080926556255617903790000006957571781104978822_);fill:none;stroke:#000000;stroke-width:1.949;}
.pausebtn3{fill:var(--color-random1);}
.pausebtn4{clip-path:url(#SVGID_00000044172448817915622310000010513251034784851359_);fill:none;stroke:#000000;stroke-width:1.949;}
.pausebtn5{clip-path:url(#SVGID_00000100372738143405588290000017155972106918694300_);fill:none;stroke:#000000;stroke-width:1.949;}
.pausebtn6{clip-path:url(#SVGID_00000094596956643008159960000018272910916167512194_);fill:none;stroke:#000000;stroke-width:1.949;}
.pausebtn7{clip-path:url(#SVGID_00000147931553261244218230000003265233686017392258_);fill:none;stroke:#000000;stroke-width:1.949;}

#player #songanzeige {
    position: absolute;
    width: calc(100% + 2 * var(--border-width-thin));
    border: solid var(--color-black) var(--border-width-thin);
    overflow: hidden;
    border-color: transparent;
    background-color: transparent;
    transform: translate(-0%, 0);
    bottom: var(--outer-sides-margin);
}
#player #songanzeige > div > .meta {
    padding: 0 var(--inline-sides-margin);
}
#player #songanzeige > div > .meta > .current, #player #songanzeige > div > .meta > .podcasttitle {
    border: solid var(--color-black) var(--border-width-thin);
    background-color: var(--color-white);
    margin: 0 calc(var(--box-margin) * -1);
    padding: var(--border-width-bold) var(--box-margin);
    font-weight: 600;
}
#player #songanzeige > div > .meta .program-current a,
#player #songanzeige > div > .meta .program-next a,
#player #songanzeige > div > .meta .stream-link a {
    color: initial;
    text-decoration: none;
}
#player #songanzeige > div > .meta div.current > .song {
    font-style: italic;
}

@media (max-width: 992px), (max-height: 600px) {
    #player {
        height: calc(100vh - 330px);
        margin-bottom: 10vh;
        width: 100%;
        width: calc(100% - var(--border-width-thin) * 1.6);
        top: calc(var(--header-height) - var(--border-width-thin));
        top: 0;
        z-index: 5;
        display: block;
        border: none;
    }

    #player #songanzeige {
        width: 100vw;
        transform: translateY(100%);
        background-color: var(--color-random1);
        overflow: hidden;
        padding: 0;
    }

    #player #songanzeige .meta > .current {
        padding: 0rem var(--box-margin);
    }

    #player #controls {
        /*background-color: transparent;*/
        border-color: transparent;
    }

    #player .box {
        display: none;
    }
}