/*!
 * Theme Name: Carlos Rivero
 * Theme URI: https://github.com/carlblock
 * Description: Carlos Rivero
 * Version: 1.0.0
 * Author: Carl Block
 * Author URI: https://github.com/carlblock
 * Tags: Carlos Rivero
 *
 * License: MIT
 * License URI: http://opensource.org/licenses/mit-license.php
 */

@font-face {
  font-family: "ABCMonumentGroteskSemiMono";
  src: url("assets/fonts/ABCMonumentGroteskSemiMono-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Avara-BoldItalic';
    src: url('assets/fonts/Avara-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Avara-Bold';
    src: url('assets/fonts/Avara-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

:root {
    --color-primary: #fff;
    --color-secondary: #000;
    --font-heading: 'Avara-BoldItalic';
    --font-body: 'ABCMonumentGroteskSemiMono';
}

/**
General
 */

html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 20px;
    }
}

body {
    font-family: "ABCMonumentGroteskSemiMono", system-ui, sans-serif;
    color: #fff;
    background-color: #000;
}


a {
    color: #fff;
    text-decoration: none;
}
ul {
    list-style: none;
    padding: 0;
}

main {
    margin: 0 25px;
}

/**
Header
 */

header {
    margin: 0 25px 25px 25px;
    font-size: 14px;
    nav {
        display: flex;
        align-items: center;
    }
    .menu {
        display: flex;
        gap: 1em;
        margin-left: auto;
        text-transform: uppercase;
        li {
            width: 50%;
            &.current-menu-item {
                a {
                    color: #8A9888;
                    text-decoration: underline;
                }
            }
        }

    }
    .header__title {
        font-family: 'Avara-Bold', serif;
    }
}
@media (min-width: 768px) {
    header {
        font-size: 20px;
        .menu {
            width: 50%;
            gap: 2em;
        }
    }
}

/**
About Page
 */
@media (min-width: 768px) {
    .about-container {
        display: flex;
        gap: 0;
    }
}

.about-column {
    flex: 1;
}

.about-column--image {
    text-align: left;
}

.about-column--image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin-bottom: 2em;
}
@media (min-width: 768px) {
    .about-column--image img {
        max-width: 35vw;
        padding-right: 25px;
    }
}


/**
Featured projects block for frontpage
 */
.featured-projects {
    margin-top: 10vh;
    margin-bottom: 80px;
    .swiper-slide {
        width: auto;
    }
    .featured-project-item {
        display: inline-block;
        position: relative;
        .featured-project-item__title {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        h2 {
            font-family: 'Avara-BoldItalic', serif;
        }
        video {
            width: 100%;
            height: auto;
            max-width: 80vw;
        }
        a:hover video {
            filter: grayscale(1)contrast(150%) brightness(1.5);
        }
        a:hover video::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence baseFrequency="0.9" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="1"/></svg>');
            pointer-events: none;
        }
    }
}

@media (min-width: 768px) {
    .featured-projects {
        margin-top: 8vh;
    }
}


/**
Video player
 */
.video-player {
    margin-bottom: 25px;
}

/**
Arrow down
 */
.arrow-down-block {
    img {
        width: 8px;
        height: auto;
    }
}

/**
Embed container
 */
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**
Work pages
 */
article {
    h1, h2, h3 {
        font-family: var(--font-heading), serif;
    }
    h1 {
        font-size: 20px;
    }
    h1 + p {
        margin-top: -0.67em;
    }
    a {
        color: #8A9888;
        text-transform: uppercase;
        text-decoration: underline;
    }
    p {
        font-size: 15px;
        line-height: 100%;
    }
    .image-slideshow {
        .swiper {
            overflow: visible;
        }
        .swiper-slide {
            width: auto;
        }
        img {
            max-height: 800px;
        }

    }
}