/*
 Theme Name:   Ridge Child
 Theme URI:    http://themetrust.com/themes/ridge/
 Description:  Ridge Child Theme
Author: ThemeTrust
Author URI: https://themetrust.com
 Template:     ridge
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  ridge-child
*/


/* fonts */
@font-face {
    font-family: 'JetbrainsMono';
    src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2'),
    url('./fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'JetbrainsMonoBold';
    src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2'),
        url('./fonts/JetBrainsMono-Bold.ttf')  format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'JetbrainsMonoSemiBold';
    src: url('./fonts/JetBrainsMono-SemiBold.woff2') format('woff2'),
        url('./fonts/JetBrainsMono-SemiBold.ttf')  format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* general */

html, .site-content, .content-area {
    background: white;
}

html {
    font-size: 58%;
    margin-top: 0 !important;
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 55%;
    }
}

footer {
    display: none;
}

body {
    font-family: "JetbrainsMono", monospace;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit !important;
    letter-spacing: 0.1rem;
}

.content-area {
    max-width: 1400px;
    padding: 0;
    margin: 0 auto;
}

p, li {
    font-size: 1.4rem;
    color: #000;
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
}

p {
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    font-weight:bold;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 1.8rem;
    font-weight:bold;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.5rem;
}

/* page layout */
.page-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
}

.page-content {
    padding: 5rem 5% 5rem 0;
    max-width: 500px;
    width: 40%;
    box-sizing: content-box;
}

.page-content h1 {
    font-size: 2.5rem;
    padding: 0;
    margin-top: 0;
    margin-bottom: 2.5rem;
}

.page-content h2 {
    font-size: 5rem;
}

.page-content h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    margin-top: 2.7rem;
}

.page-content h4 {
    font-weight: bold;
    margin-bottom: 3rem;
    margin-top: 2rem;
    font-size: 1.5rem;
}

.page-image {
    position:relative;
    align-self: stretch;
    height: 100vh;
    flex: 1 0 auto;
    width: 60%;
    max-width: 1050px;
}

.page-image img {
    max-height: 100vh;
    object-fit: cover;
    position: relative;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    max-width: fit-content;
}

.content-area p > a, .content-area li > a {
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {
    .page-content-wrapper {
        flex-direction: column;
    }

    .page-content {
        padding: 2rem 0;
        width:100%;
        max-width:500px;
    }

    .page-image {
        margin: auto;
        height: auto;
        width:100%;
        max-width:500px;
    }

    .page-image img {
        top: 0;
        transform: translate(-50%,0);
    }

    .gallery {
        margin-bottom: 0;
    }
}

/* typewriter */
#typewriter {
    display: inline-block;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.7);
    height: 6rem;
}

#typing-text {
    display:none;
}

body #home-banner #typing-placeholder {
    color: #000;
    width: auto;
    min-width: .425rem;
    height: 100%;
    line-height: 4rem;
    font-size: 2.8rem;
    letter-spacing: .425rem;
    border-right: .425rem solid #5C6E10;
    animation: blink-caret 1.4s step-end infinite;
}

@media screen and (max-width: 500px) {
    body #home-banner #typing-placeholder {
        font-size: 1.5rem;
        font-weight: bold;
    }

    #typewriter {
        padding: 1rem;
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #5C6E10 }
}

/* SIDEBAR */
.main-navigation ul {
    text-transform: none;
}

#site-header #secondary {
    border: none !important;
    margin-top: 0;
    padding-top: 0;
}

.site-header {
    top:0;
}

.site-header #secondary path {
    color: white !important;
}

.site-header .inside{
    height: calc(100% - 3rem);
    display: flex;
    flex-direction: column;
}

.site-header .widget-area {
    margin-top: 0;
}

.widget li a {
    opacity: 1;
}

.custom-navigation ul, .custom-navigation li {
    list-style: none;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 3rem;
    padding: 0;
}

ul.nav-menu {
    margin: 0;
}

ul.sub-menu > li {
    font-weight: 300;
}

#site-header .sub-menu {
    border:none;
    margin: 0 0 1rem 2rem;
    padding: 0;
}

.custom-navigation li:after {
    display:none;
}

#nav-sidebar #widget-area .widget {
    margin-top: 1rem;
    margin-bottom: 0;
}

.site-header #secondary .current-menu-item > a,
.site-header #secondary .custom-navigation li > a:hover,
.current-menu-item > a,
.custom-navigation li > a:hover {
    color: #5C6E10 !important;
}

#menu-toggle span, #menu-toggle span:before, #menu-toggle span:after {
    height: 2px;
}

#menu-toggle span:before {
    margin-top: -10px;
}

#menu-toggle span:after {
    margin-top: 10px;
}

.site-header #secondary svg {
    fill: #fff !important;
}

/* desktop menu */
@media screen and (min-width: 1025px) {
    #nav-sidebar {
        height: 100%;
        margin: 3rem 3rem 0 3rem;
    }

    #nav-sidebar .hidden-scroll {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    #site-header {
        padding-top: 3rem;
    }
}

/* mobile menu */
@media screen and (max-width: 1024px) {
    #nav-sidebar {
        margin: 0;
    }

    #nav-sidebar .hidden-scroll {
        text-align: center;
        overflow-y: auto;
    }

    #site-header .sub-menu {
        margin: 0;
    }

    .wp-block-social-links {
        justify-content: center;
    }

    .wp-block-social-links .wp-social-link.wp-social-link.wp-social-link {
        margin: 4px;
    }

    #site-navigation .sub-menu li {
        padding-left: 0;
    }

    .menu-item-has-children a {
        padding-right: 0;
    }

    .custom-navigation ul, .custom-navigation li{
        padding: 5px 0 !important;
    }

    #site-header.toggled-on #site-navigation li {
        border: none !important;
    }

    #nav-sidebar .secondary .widget:nth-child(2n+1) {
        margin-right: 0;
    }

    #site-header .logo img {
        max-height: 4.5rem;
    }

    #site-header.toggled-on #nav-sidebar {
        left: 0;
        padding-top: 6.5rem;
    }
}


/* homepage */
#home-banner {
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    padding: 3rem;
}

#home-banner .inner {
    top: calc(50% - 30px) !important;
    width: calc(100% - 4rem);
}

@media screen and (max-width: 1024px) {
    .page-content-wrapper, #home-banner {
        min-height: calc(100vh - 7.5rem);
        padding: 0 2rem 2rem;
    }

    #home-banner {
        height: calc(100vh - 7.5rem);
    }

    #menu-toggle {
        margin-right: 0 !important;
    }

    .site-branding {
        margin-left: 0;
        padding: 1rem 2rem;
    }
}

/* kontakt */
a[href^="mailto:"],
.tel{
    padding: 0.5rem 0 0.5rem 30px;
    position: relative;
    text-decoration: none !important;
    margin-bottom: -1rem;
    display: block;
}

a[href^="mailto:"]:before,
.tel:before {
    content: '';
    position:absolute;
    left:0;
    top:0.5rem;
    width:24px;
    height:24px;
    background-repeat:no-repeat;
    background-size: contain;
}

a[href^="mailto:"]:before {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='14' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.21377 1.03833L6.80247 7.38355C7.1228 7.74477 7.57944 7.94924 8.05652 7.94924C8.5336 7.94924 8.99706 7.74477 9.31057 7.38355L14.8039 1.15419C14.8516 1.09967 14.9061 1.0656 14.9606 1.03152C14.7289 0.929287 14.4699 0.874756 14.2041 0.874756H1.90895C1.64996 0.874756 1.4046 0.929284 1.17969 1.01789C1.19332 1.01789 1.20013 1.0247 1.21377 1.03833Z' fill='white'/%3E%3Cpath d='M15.8056 1.75415C15.7784 1.81549 15.7443 1.88364 15.6966 1.93816L10.2033 8.16753C9.65806 8.78774 8.87428 9.14214 8.04961 9.14214C7.22493 9.14214 6.44115 8.78774 5.89591 8.16753L0.307206 1.8223C0.293575 1.80867 0.28676 1.79504 0.279944 1.78141C0.109557 2.06766 0.00732422 2.40162 0.00732422 2.76284V11.3504C0.00732422 12.4 0.859261 13.2519 1.90885 13.2519H14.1972C15.2468 13.2519 16.0987 12.4 16.0987 11.3504V2.76284C16.0987 2.38799 15.9897 2.04722 15.8056 1.75415Z' fill='white'/%3E%3C/svg%3E");
    background-color: #5c6e10;
    border-radius: 50%;
    background-size: 15px;
    background-position: center;
}

.tel:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.35593 0 0 5.35593 0 12C0 18.6441 5.35593 24 12 24C18.6441 24 24 18.6441 24 12C24 5.35593 18.6441 0 12 0ZM18.2373 16.1356C17.8305 17.0847 16.8814 17.6949 15.8644 17.8983C14.9153 18.1017 14.1017 17.7627 13.2203 17.4915C12.4068 17.2203 11.661 16.8814 10.9831 16.4068C9.55932 15.5254 8.33898 14.3729 7.38983 13.0169C7.11864 12.6102 6.77966 12.2034 6.57627 11.7288C6.23729 11.1186 5.9661 10.5085 5.76271 9.8983C5.69491 9.62712 5.69491 9.35593 5.62712 9.08474C5.62712 8.0678 5.9661 7.11864 6.77966 6.44068C7.25424 6.10169 7.9322 5.8983 8.40678 6.16949C8.94915 6.50847 9.22034 7.25424 9.49152 7.79661C9.69491 8.20339 9.8983 8.81356 9.83051 9.28813C9.76271 9.76271 9.35593 10.1695 9.08474 10.5763C8.88136 10.8475 8.81356 11.0508 9.01695 11.322C10.0339 13.0169 11.4576 14.2373 13.2881 14.9831C13.5593 15.0508 13.7627 15.0508 13.8983 14.8475C14.2373 14.4407 14.5085 13.6949 15.0508 13.4915C15.661 13.2203 16.4068 13.5593 16.9492 13.8983C17.4237 14.1695 18.3051 14.5763 18.4407 15.1864C18.4407 15.5254 18.3729 15.7966 18.2373 16.1356Z' fill='%235C6E10'/%3E%3C/svg%3E");
}
.wp-block-social-links .wp-social-link svg {
    width:24px;
    height:24px;
}

.wp-block-social-links .wp-social-link a {
    width: calc(24px + 0.5em);
    height: calc(24px + 0.5em);
}


/* portfolio */
.content-area.portfolio {
    max-width: calc(3*50vh - 1rem);
    padding: 3rem;
    margin: 0 auto;
}

#portfolio-content .entry-header {
    display:none;
}

#projects {
    margin: 0;
}

#projects .thumbs {
    visibility:visible;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

#projects .project.small {
    max-width:100%;
    margin: 0;
}

#projects .project.small .inside {
    margin: 0;
}

#projects .project.small figcaption {
    height: 100%;
    background: rgba(255,255,255,0.5);
}

#projects .project.small figcaption .inner {
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

#projects .project.small figcaption .inner h2 {
    font-size: 2rem;
    font-weight: 600;
}

#projects .project.small figcaption .inner h4 {
    font-size: 1.6rem;
    font-weight:600;
    margin:0;
}

@media screen and (max-width: 1024px) {
    .content-area.portfolio {
        padding: 0 2rem 2rem;
    }
}

@media screen and (max-width: 767px) {
    .content-area.portfolio {
        max-width: 100vh;
    }

    #projects .thumbs {
        grid-template-columns: 1fr 1fr;
        max-width: 100% !important;
    }

    #projects .project.small figcaption .inner h2 {
        font-size: 1.6rem;
    }
    #projects .project.small figcaption .inner h4 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    #projects .project.small figcaption {
        display: block;
        position: relative;
        top: 0;
        transform: none;
    }
    #projects .project.small figcaption .inner {
        top: 0;
        transform: none;
    }

    #projects .project.small figcaption .subtitle,
    #projects .project.small figcaption .year {
        display:inline-block;
    }

    #projects .subtitle + .year:before {
        content: "|";
        margin: 0 5px 0 -2px;
    }
}


/* project */
.project-template-default .subtitle + .year {
    margin-top: -2rem;
}


.gallery, .slick-list, .slick-track, .slick-slide > div {
    height: 100%;
}

.slick-arrow {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    font-size: 0;
    background-color: #5C6E10;
    transition: opacity .1s ease-in;
    cursor:pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='256' height='256' viewBox='0 0 256 256' xml:space='preserve'%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='translate(128 128) scale(0.72 0.72)' style=''%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(-175.05 -175.05000000000004) scale(3.89 3.89)' %3E%3Cpath d='M 24.25 90 c -0.896 0 -1.792 -0.342 -2.475 -1.025 c -1.367 -1.366 -1.367 -3.583 0 -4.949 L 60.8 45 L 21.775 5.975 c -1.367 -1.367 -1.367 -3.583 0 -4.95 c 1.367 -1.366 3.583 -1.366 4.95 0 l 41.5 41.5 c 1.367 1.366 1.367 3.583 0 4.949 l -41.5 41.5 C 26.042 89.658 25.146 90 24.25 90 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: white; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: center;
}

.slick-arrow.slick-prev {
    transform: rotate(180deg);
}

.slick-arrow:hover,
.slick-arrow:focus {
    background-color: #5C6E10;
}

.slick-slider {
    touch-action: auto !important;
}

.gallery img {
    cursor:pointer;
}

.gallery-zoom.popup {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #ffffff;
    z-index: 1000;
}

.gallery-zoom .close {
    position:absolute;
    top:0;
    right:0;
    width:50px;
    height:50px;
    z-index:1001;
    cursor:pointer;
}

.gallery-zoom .close:before, .gallery-zoom .close:after {
    content: '';
    height: 2px;
    position: absolute;
    width: 30px;
    background-color: #000000;
    display: block;
    top: 50%;
    left:10px;
}

.gallery-zoom .close:before {
    transform: rotate(45deg);
}

.gallery-zoom .close:after {
    transform: rotate(-45deg);
}

@media screen and (max-width: 1024px) {
    .page-image .gallery-zoom img {
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* 404 */
.error404 .page-content{
    width: 50%;
    max-width: 50%;
}

@media screen and (max-width: 1100px) {
    .error404 .page-content{
        width: 100%;
        max-width: 100%;
    }
}