/*
Theme Name: Association Saed
Description: Thème pour le site de l'association Saed
Version: 1.0
Author: Damien Foulon
Author URI: https://www.damienfoulon.fr/
*/

/* Fonts */
@import "assets/fonts/fonts.css";

/* Components */
@import "partials/header/header.css";
@import "partials/hero/hero.css";
@import "partials/adoptions-list/adoptions-list.css";
@import "partials/about/about.css";
@import "partials/contact/contact.css";
@import "partials/blog/blog.css";
@import "partials/footer/footer.css";

/* CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    background: none;
    text-align: inherit;
    text-decoration: none;
    font: inherit;
    color: inherit;
    list-style: none;
    outline: none;
}

input, button, select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
}

a, button {
    overflow: visible;
    cursor: pointer;
}

a.underline {
    border-bottom: 2px solid var(--color-white);

    &:hover {
        border-bottom: 2px solid transparent;
    }
}

/* Accessibility */
.screen-reader-text,
.screen-reader-response {
    display: block;
    width: 0;
    height: 0;

    position: absolute;

    opacity: 0;
    overflow: hidden;
}

:root {
    --header-height: ;
    --viewport-height: 100vh;

    /* Sizes */
    --h1: 3.125rem;
    --h2: ;
    --h3: ;

    /* Colors */
    --color-black: #000;
    --color-white: #FFF;
    --color-glassbackground: #FFFFFF19;
    --color-error: #ff746c;

    /* Spaces */
    --lateral-space: 2em;
}

body {
    display: flex;
    width: 100%;
    min-height: var(--viewport-height);

    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    font-family: '', sans-serif;
    font-size: 1vw;
    font-weight: 400;
    line-height: 1.5;

    background: linear-gradient(100deg, #040404 10%, #6E6476 43%, #FFFFFF 100%);
}

/* Icons */
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "saed";
    font-style: normal;
    font-weight: normal;
    -webkit-font-Soothing: antialiased;
    -moz-osx-font-Soothing: grayscale;
}

/* Text */
b,
strong {
    font-weight: 700;
}

em,
i {
    font-style: italic;
}

u {
    text-decoration: underline;
}

sup,
sub {
    font-size: .5em;
    line-height: 1;
}

h1,
.formatted h1 {
    font-size: 4em;
}

h2,
.formatted h2 {
    font-size: 2.47em;
}

h3,
.formatted h3 {
    font-size: 1.52em;
}

h4,
.formatted h4 {
    font-size: 0.94em;
}

h5,
.formatted h5 {
    font-size: 0.58em;
}

.formatted p:not(:first-child),
.formatted ul:not(:first-child),
.formatted h2:not(:first-child),
.formatted h3:not(:first-child),
.formatted h4:not(:first-child) {
    margin-top: 1em;
}

.formatted ol,
.formatted ul {
    padding: 0 0 0 1em;
}

.formatted a:not([class]) {

}

.formatted a:not([class]):hover {

}

.formatted img,
.formatted iframe {
    display: block;
    max-width: 100%;
}

.formatted img {
    height: auto;
}

/* Buttons */

.btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: .75em 1.5em;
    width: auto;
    border-radius: .5rem;
    flex-basis: auto;
    cursor: pointer;
    transition: gap .5s ease;
    font-family: Lato-Bold;
}

.btn:hover {
    gap: 1.5em;
    transition: gap .5s ease;
}

.btn-primary {
    border: 1px solid transparent;
    background: var(--color-white);
    color: var(--color-black);
}

.btn-secondary {
    border: 1px solid var(--color-white);
}

.btn-glass {
    border: 1px solid transparent;
    background: var(--color-glassbackground);
    backdrop-filter: blur(.3em);
}

/* Images */
.media--contain,
.media--cover {
    position: relative;

    overflow: hidden;
}

.media--contain img,
.media--cover img,
.media--contain video,
.media--cover video {
    display: block;
    width: auto;
    height: auto;

    position: absolute;
    top: -10000%;
    left: -10000%;
    bottom: -10000%;
    right: -10000%;

    margin: auto;
}

.media--contain img,
.media--contain video {
    max-width: 100%;
    max-height: 100%;
}

.media--cover img,
.media--cover video {
    min-width: 1000%;
    min-height: 1000%;

    transform: scale(.1);
}

/* Sliders */
.slick-list,
.slick-track {
    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.slick-list {
    width: 100%;

    overflow: hidden;
}

/* GlassUI */
.glass-ui {
    background: var(--color-glassbackground);
    backdrop-filter: blur(.3em);
}

/* 404 Error */
.error-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100vh - 8em);
    color: var(--color-white);
    margin-top: 8em;
    gap: 1em;

    h1 {
        font-family: LeagueSpartan-SemiBold;
        font-size: 3em;
    }

    p {
        font-size: 1.5em;
    }

    img {
        width: 45%;
        height: auto;
    }
}

/* Section */
section {
    gap: 5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% - 8em);
    color: var(--color-white);
    margin: 5em 4em;

    .section-title {
        font-family: Lato-Black;
        font-size: 2em;
        color: var(--color-white);
        padding: .5em 1em;
        border-radius: 1em;

        @media screen and (max-width: 768px) {
            font-size: 5em;
        }
    }
}

gmp-map {
    height: 400px;
    width: 400px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100%;

    .input-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1em;
        width: 100%;

        .submit-form-button {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 1em;
            padding: .75em 1.5em;
            border-radius: .5rem;
            border: .1em solid var(--color-white);

            @media screen and (max-width: 768px) {
                font-size: 3em;
            }
        }

        p {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 1em;
            width: 100%;

            label {
                width: 100%;

                span {
                    width: 100%;
                }
            }

            @media screen and (max-width: 768px) {
                flex-direction: column;
            }
        }

        label.input-label {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: .5em;
            width: 100%;

            @media screen and (max-width: 768px) {
                font-size: 3em;
            }


            input {
                display: flex;
                width: 100%;
                padding: .5em 2em;
                border-radius: .5em;
                color: var(--color-white);
                position: relative;
                font-size: 1.5em;
                border: .1em solid var(--color-white);
            }

            .submit-form-button {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 1em;
                padding: .75em 1.5em;
                border-radius: .5rem;
                border: .1em solid var(--color-white);
            }

            textarea {
                display: flex;
                width: 100%;
                padding: .5em 2em;
                border-radius: .5em;
                color: var(--color-white);
                font-size: 1.5em;
                resize: vertical;
                border: .1em solid var(--color-white);

                &::-webkit-resizer {
                    color: var(--color-white);
                }
            }
        }
    }

    .wpcf7-not-valid-tip {
        color: var(--color-error);
    }
}

/* Adoption Page */
section.adoptions-page {
    margin-top: 5em;

    @media screen and (max-width: 768px) {
        margin-top: 20em;
    }
}

/* Single Adoption */
section.single-adoption {
    margin-top: 15em;

    @media screen and (max-width: 768px) {
        margin-top: 25em;
    }

    .container-adoption {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2em;
        width: 100%;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }

        .adoption-picture-container,
        .adoption-info-container {
            width: 50%;

            @media screen and (max-width: 768px) {
                width: 100%;
            }
        }

        .adoption-picture-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2em;
            border-radius: 1em;
            gap: 1em;

            img {
                width: 100%;
                height: auto;
            }
        }

        .adoption-info-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 2em;
            gap: .5em;

            h1 {
                font-family: Lato-Black;
                font-size: 2em;
                color: var(--color-white);
                border-radius: 1em;

                @media screen and (max-width: 768px) {
                    font-size: 5em;
                }
            }

            h2 {
                font-family: Lato-Bold;
                font-size: 1.5em;
                color: var(--color-white);
                border-radius: 1em;

                @media screen and (max-width: 768px) {
                    font-size: 4.5em;
                }
            }

            h3 {
                font-family: Lato-Bold;
                font-size: 1.25em;
                color: var(--color-white);
                border-radius: 1em;

                @media screen and (max-width: 768px) {
                    font-size: 4em;
                }
            }

            p {
                @media screen and (max-width: 768px) {
                    font-size: 3em;
                }
            }
        }
    }

    .form-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2em;

        h2 {
            font-family: Lato-Black;
            font-size: 2em;
            color: var(--color-white);
            border-radius: .5em;
            width: fit-content;
            padding: .5em .5em;

            @media screen and (max-width: 768px) {
                font-size: 3em;
            }
        }

        .wpcf7 {
            width: 100%;
        }
    }
}

/* Single Article */
section.single-article {
    margin-top: 15em;

    .article-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2em;

        .article-title {
            font-family: Inter-ExtraBold, sans-serif;
            padding: .25em 1em;
            border-radius: .5em;
            width: 100%;
            text-align: center;
        }

        .article-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }
    }
}

/* Footer */

/* Tablet */
@media (max-width: 1279px) {

}

/* Mobile */
@media (max-width: 767px) {

}