/*
Theme Name: Resilia
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 1.0
Text Domain: resilia
*/

:root {
    --text-color: #404040;
}

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal; 
    font-size: 16px;
    color: var(--text-color);
    background: #92A8BF;
    background: linear-gradient(171deg,rgba(146, 168, 191, 1) 0%, rgba(221, 223, 218, 1) 100%); 
}

header {
    position: fixed;
    width: 100%;
    top: 0px; left: 0px;
    z-index: 1000;
}

main {
    min-height: calc(100dvh - 96px -4rem);
    padding-top: 200px;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}


.content {
    
    display: flex;
    flex-direction: column;
    gap: 3rem;

    &.half {
        max-width: 30rem;
    }

    &.third {
        max-width: 60rem;
    }    

    > * {
        margin: 0;
        padding: 0;
    }

    h1 { font: 400 50px/59px "Work Sans", sans-serif; }
    h2 { font: 400 30px/35px "Work Sans", sans-serif; }
    h2 strong, h3 strong {
        font-weight: 400;
    }
    p { 
        font: 400 16px/24px "Work Sans", sans-serif; 
        &.small-text { font-size: .875rem; }
    }
    
    a { color: inherit; text-decoration: underline; }

    button, .wp-element-button, input[type=submit], .pagination > * { 
        background-color: white; transition: .4s ease-out; 
        color: inherit;
        font: inherit;
        border-radius: 9999px;
        box-shadow: none;
        text-decoration: none;
        padding: calc(.667em + 2px) calc(1.333em + 2px);
        border: 0;
        &:hover {
            background-color: var(--text-color); color: white;  
        }
    }

}

.content.double {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: initial;
    gap: 6rem;
    > * {
        flex-basis: 100%;
    }
    > div {
        flex-basis: 30rem;
    }
}

form {
    input[type=text], 
    input[type=email], 
    textarea {
        background: none;
        border: 0;
        border-bottom: 1px solid black;
        font-family: inherit;
        font-size: inherit;
        padding: .75rem 0;
        max-height: 3rem;
        outline: none;
    }
    label {
        font-size: .875rem;
    }
    .wpcf7-list-item { margin: 0; }
}

.category-filter {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: 3rem 1rem;

    .current {
        pointer-events: none;
        background-color: var(--text-color);
        color: white;
    }
}

.pagination {
    display: flex;
    gap: 1rem;
    > * {
        display: flex;
        aspect-ratio: 1 / 1;
        align-items: center;
        justify-content: center;
        &.current {
            pointer-events: none;
            background-color: var(--text-color);
            color: white;
        }
    }
}

#kit-digital {
    background-color: white;
    padding: 4rem 0;
}

.otgs-development-site-front-end {
    display:none;
}