@charset "utf-8";

// Branding
$autonomic-red: #EE4A33;
$coopcloud-blue: #202674;
$coopcloud-blue-mid: #485FC7;
$coopcloud-pink: #ff4f88;
$white: white;
$text-color: #1C1C1C;
$bg-color: #EFEFEF;

$footer-background-color: $coopcloud-blue;
$footer-background-color-mid: $coopcloud-blue-mid;
$footer-color: true;
$footer-padding: 3rem 1.5rem 3rem;

$danger: $autonomic-red;

// HACK: Changing button behaviour globally as quick fix for the "visit: autonomic.zone" button
$button-border-width: 2px;
$button-hover-border-color: $white;
$button-focus-border-color: $white;
$button-active-border-color: $white;
$button-ghost-border-color: $white;
$button-ghost-hover-color: $white;
$button-text-hover-color: $white;
$button-focus-box-shadow-size: 0;



@import "./bulma/bulma.sass";

@mixin define-manrope-family($weight, $uri) {
    font-family: 'Manrope';
    src: url($uri) format("woff2");
    font-weight: $weight;
}

@mixin thick-hr {
    height: 4px;
}

@font-face { 
    @include define-manrope-family(bold, '../font/manrope.bold.woff2')
}

@font-face { 
    @include define-manrope-family(300, '../font/manrope.light.woff2')
}

@font-face { 
    @include define-manrope-family(medium, '../font/manrope.medium.woff2')
}

@font-face {
    font-family: "lora";
    src: url("../font/Lora-Italic.woff2");
    font-weight: 300;
    font-style: italic;
}


body {
    background-color: $bg-color;
    color: $text-color;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display:grid;
    grid-template-rows: auto 1fr auto;
}

body >* {
    font-family: 'Manrope', sans-serif !important;
}

.question {
    padding: 10px;
    h2 {
        font-weight: bold;
        font-size: 2em;
        margin-bottom: 9px;
    }
    p {
        padding: 0;
        margin: 0;
    }
}

.hr-header {
    @include thick-hr();
}

button {
    border-radius: 0 !important;
    font-family: 'Manrope', sans-serif !important;
}

button.grey-button {
    color: $text-color !important;
    background-color: rgba(0,0,0,0) !important;
    border-color: $text-color !important;
    a {
        color: $text-color;
    }
    &:hover {
        border-color: black !important;
    }
}

button#faq-button {
    margin: 50px 0 30px 0;
}

#get-involved {
    margin: 20px 0;
    >.hero-body {
        margin: 20px 0;
    }
    p {
        line-height: 1 !important;
    }
    p:not(:last-child) {
        padding-bottom: 20px;
    }

}

#community-project {
    font-family: "lora";
}

hr {
    background-color: $text-color;
    border: none;
    height: 1px;
}

.is-autonomic {
    background-color: $autonomic-red;
    color: $white;
    
    p {
        font-weight: 300;
    }
    h1 {
        color: $white !important;
    }
    hr {
        @include thick-hr();
        background-color: $white;
    }
    a {
        color: $white;
    }
    .content {
        padding-bottom: 20px;
    }
    #who-is-involved {
        padding-bottom: 40px;
    }
}

#header {
    background-color: $coopcloud-pink;
    padding: 2rem 1rem;
    margin: 0;
    gap: 2rem;
    @media (max-width: 1024px) { flex-direction: column; }

    .logo { flex-grow: initial; }
    .nav-link {
        color: $text-color;
        margin: 1rem;
        font-size: 1.5rem;
        text-transform: uppercase;
        &:hover { text-decoration: underline; }
    }
}

footer .content a {
    color: $white;
    text-decoration: none;
}

footer .separator {
    padding: 0 10px;
}

// Do not show server image when using mobile viewport
// Is a little bigger than the actual mobile viewport in bulma due to the text overlapping with the server icon
@media all and (min-width: 769px) {
    #server-hero {
        background-image: url("/svg/hero-server.svg");
        background-repeat: no-repeat;
        background-size: 20%;
        background-position: calc(100% - 20px) ;
    }
}

.blog-archive {
    padding: 3rem 3rem;
    @media (max-width: 450px) { padding: 3rem 1rem; }

    .blog-listing {
        display: grid;
        grid-template-columns: 1fr 2fr;
        @media (max-width: 768px) { grid-template-columns: 1fr; }
        gap: 2rem;
        
        .text {
            h3 {
                padding-bottom: 5px;
                @media (max-width: 480px) { padding-bottom: 11px; }
                text-transform: uppercase;
                a:hover { text-decoration: underline; }
            }
    
            .post-date {
                text-transform: uppercase;
            }
    
            p {
                font-weight: 300;
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
            }
        }
    }
}

.blog-post {
    padding: 4rem 6rem;
    @media (max-width: 450px) { padding: 2.5rem  1.4rem 1rem; }
    
    figure {
        img.hero {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            max-height: 50vh;
            object-fit: cover;
            object-position: center;
        }

        figcaption {
            font-weight: 100;
            text-align: center;
            margin: 1em 0;

            @media (min-width: 768px) {
                font-weight: 300;
                color: white;
                padding: 5px;
                background: #00000063;
                position: relative;
                bottom: 34px;
                width: max-content;
                margin: 0;
            }
        }
    }
    
    .content {
        h3 { text-transform: uppercase; }
        p {
            font-size: 1.2rem;
            font-weight: 100;
        }
    }
    
    .post-metadata {
        text-transform: uppercase;
    }
}

// Styling for the exapndable divs


#case_studies-slide-body{
    max-height: 1000px;
    overflow: hidden;
    transition:         max-height 1s ease;
    -moz-transition:    max-height 1s ease;
    -ms-transition:     max-height 1s ease;
    -o-transition:      max-height 1s ease;
    -webkit-transition: max-height 1s ease;
}
.expanded {
    height: auto !important;
    max-height: 4000px !important;
}
.contracted {
    background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0.25) 90%, rgba(239, 239, 239, 1)) !important;
}
#case_studies-slide-more {    
    cursor: pointer;
    text-align: right;
    position: absolute;
    margin: 10px;
    left: 50%;
}

// Styling for divider

hr.divider {
    border-top: 1px solid #1C1C1C;
    border-radius: 3px;
    height: 1px;
    padding: 0;
}

// Styling for img thumbnails

div.thumbnail {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    -o-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-radius: 999px;
}

.who-is-involved-content {
    .autonomic {
        display: flex;
        justify-content: space-between;
        @media (max-width: 800px) {
            .column.is-one-quarter.is-full-mobile {
               flex: unset;
            }
        }
    }

    .cofunders {
        margin-top: 3rem;
        p { margin-bottom: 0 !important; }

        .client-logos {
            margin-top: 4rem;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            @media (max-width: 480px) { grid-template-columns: 1fr 1fr; }
            place-items: center;
            gap: 1rem;

            img {
                object-fit: contain;
                padding: 1.5rem;
                height: 150px;
            }
        }
    }
}

.highlight {
    margin-bottom: 1rem;
}