@charset "UTF-8";

/*
Theme Name: Unitat
Theme URI: https://unitat.de
Author: Mathieu Hauck
Author URI: https://mathieu-hauck.de
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.0
Text Domain: unitat
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3d9d80");

@font-face {
    font-family: 'Scaffold';
    src: url("/wp-content/themes/unitat/fonts/ScaffoldLight.woff2") format("woff2"), url("/wp-content/themes/unitat/fonts/ScaffoldLight.woff") format("woff");
}

html,
body {
    padding: 0;
    margin: 0
}

body {
    font-family: 'Scaffold', sans-serif;
    font-size: 125%
}

#wrapper {
    padding: 0 2rem
}

#main {
    min-height: 100vh
}

.hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 0!important;
    height: 0!important;
    overflow: hidden;
}

.button-curacao {
    background-color: #00A8B0 !important
}


/* Navigation */

nav ul {
    padding: 0;
    list-style: none;
    display: flex
}
nav li {
    width: 33.3333%;
}
nav li a {
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    padding: .5rem 0;
    display: inline-block
}
nav li.highlight a {
    color: #00a8b0
}

.inner-nav {
    position: fixed;
    bottom: 0;
    padding: 1rem 0;
    text-align: center;
    left: 0;
    width: 100%;
}
.inner-nav ul {
    list-style: none;
    padding: 0; 
    margin: 0;
    display: flex;
}
.inner-nav li {
    width: 33.3333%;
    text-align: center;
}
.inner-nav li a {
    display: inline-block;
    width: 34px;
    height: 34px;
    padding: 8px
}
.inner-nav li a.txt:before {
    content: url(./img/TXT_schwarz.svg)
}
.inner-nav li a.img:before {
    content: url(./img/IMG_schwarz.svg)
}
.inner-nav li a.lst:before {
    content: url(./img/LST_schwarz.svg)
}
.inner-nav.img-active li a.txt:before {
    content: url(./img/TXT_weiss.svg)
}
.inner-nav.img-active li a.img:before {
    content: url(./img/IMG_weiss.svg)
}
.inner-nav.img-active li a.lst:before {
    content: url(./img/LST_weiss.svg)
}
.inner-nav li.active a.txt:before {
    content: url(./img/TXT_curacao.svg)
}
.inner-nav li.active a.img:before {
    content: url(./img/IMG_curacao.svg)
}
.inner-nav li.active a.lst:before {
    content: url(./img/LST_curacao.svg)
}

@media screen and (min-width: 768px){
    #main {
        min-height: calc(100vh - 53px)
    }
    .referenzen #main {
        min-height: calc(100vh - 129px)
    }
    .admin-bar #main {
        min-height: calc(100vh - 65px - 1em)
    }
    nav li {
        width: 16.6666%;
    }
    nav li:nth-child(3){
        margin-left: calc(33.3333% + 2.666rem);
        width: 33.3333%
    }
    .inner-nav {
        display: none
    }
    .referenzen header nav ul {
        background: #fff;
        position: fixed;
        top: 0;
        width: calc(100% - 4rem);
        margin: 0;
        padding: 1em 0;
        height: 6rem;
        box-sizing: border-box;
    }
}

/* Header */

header > a {
    display: block;
    text-align: center;
    position: relative;
    z-index: 1000
}
header > a img {
    display: inline-block;
    min-width: 180px;
    width: 100%;
    max-width: 200px
}

@media screen and (min-width: 768px){
    header > a {
        width: 50%;
        position:fixed;
        width: calc(33.3333% - 2.6666rem);
        margin: 0 calc(33.3333% - .6666rem) 0 calc(33.3333% - .6666rem);
    }
    header > a img {
        display: inline-block;
        width: 40%;
        min-width: 150px;
        max-width: 250px
    }
}

/* Content */

main {
    line-height: 1.25;
}
.referenzen main {
    display: flex;
    flex-wrap: wrap
}
main section {
    width: 100%
}
main section  h2 {
    text-transform: uppercase;
    font-size: 100%;
    font-weight: normal;
    margin-bottom: 3rem
}
main section p {
    
}
main section p strong {
    color: #00A8B0
}
main section img {
    width: 100%;
    height: auto;
}
main section:first-child > img {
    margin-top: 2rem
}
main section .image-container {
    line-height: 0;
}
main section .image-container img {
    width: 100%;
    margin: 0.25rem 0 0 0
}
main section .image-container img:first-child {
    margin: 0
}
main section figure.wp-block-table {
    margin: 0 0 2rem 0;
    padding: 0
}
main section table {
    border-spacing: 0;
    table-layout: fixed;
}
main section table td {
    vertical-align: top;
}
main section table td:first-child {
    padding-right: 2rem;
    white-space: nowrap;
    width: 103px;
    box-sizing: border-box;
}
main section table td:first-child ~ td {
    width: 100%
}

@media screen and (max-width: 768px){
    main section .image-container,
    main section .nav-container {
        height: auto !important
    }
}

@media screen and (min-width: 768px){
    main {
        display: flex;
        margin-top: 9.5rem;
        flex-wrap: nowrap;
    }
    .referenzen main {
        margin-top: 6rem
    }
    main section {
        width: calc(33.3333% - 1.3333rem);
        box-sizing: border-box
    }
    main section p {
        padding-right: 1rem
    }
    main section img {
        width: 80%
    }
    main section:nth-child(3) {
        margin: 0 2rem
    }
    main section:nth-child(3) > p:first-child {
        margin-top: 0
    }
    main section .image-container,
    main section .nav-container {
        position: fixed;
        width: calc(33.3333% - 2.6666rem);
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    main section .image-container {
        top: 0
    }
    main section .image-container .scroller {
        padding-top: 264px
    }
    main section .nav-container {
        height: calc(100% - 6rem)
    }
    main section .nav-container .referenzen {
        padding-bottom: 3rem
    }
}

@media screen and (min-width: 1024px){
    body:not(.referenzen) main {
        margin-top: calc(10vw + 3rem);
    }
}

@media screen and (min-width: 2000px){
    body:not(.referenzen) main {
        margin-top: 242px
    }
}

/* Binnennavigation */

.subnav ul {
    list-style: none;
    padding: 0;
    margin: 0
}
.subnav ul.referenzen li {
    margin-bottom: .5rem
}
.subnav ul a {
    text-decoration: none;
    color: #000
}
.subnav ul span {
    color: #999
}
.subnav ul.referenzen a,
.subnav ul.referenzen li > span {
    text-transform: uppercase;
}
.subnav ul li.active a {
    color: #00a8b0
}

body.referenzen section.subnav {
    order: 3
}

body.referenzen section.subnav ~ section {
    display: none
}

body:not(.referenzen) section:first-child > * {
    margin-top: 1em
}

@media screen and (min-width: 768px){
    body:not(.referenzen) section:first-child > * {
        margin-top: 0
    }
    section.subnav {
        order: 3
    }
    body.referenzen section {
        display: block !important
    }
    /*body.referenzen section.subnav {
        margin-top: -72px;
    }*/
}



/* Footer */
footer {
    margin: 4rem 0 0;
    font-size: 85%
}
.referenzen footer {
    margin-bottom: 4.5rem
}
footer nav ul {
    margin: 0
}
footer nav li {
    width: 50%;
}
footer nav li a {
    color: #666
}

body.cookies-not-set footer {
    padding-bottom: 100px
}

@media screen and (min-width: 768px){
    footer,
    .referenzen footer {
        width: 100%;
        margin: 0
    }
    footer nav ul {
        width: calc(33.3333% - 1.3333rem)
    }
}

@media screen and (max-width: 960px) and (min-width: 768px){
    footer nav ul{
        display: flex;
        width: calc(33.3333% - 6px)
    }
    footer nav ul li {
        width: auto;
    }
    footer nav ul li:last-child {
        margin-left: auto
    }
}