@import "reset.css";
@import "fonts.css";

:root {
    --main-color: #0e2b70ff;
    ---main-color-dark: #00192f;
    --success-green: #34700e;
    --success-green-dark: #163006;
    --error-red: #700e0e;
    --error-red-dark: #300606;
    --main-alt-color: #ffd55b;
    --main-alt-color-darker: #dda70d;
    --min-spacing: 1rem;
    --dark-green: rgb(25, 27, 15);
    --brown: #463521;
    --dark-green-semi: rgba(25, 27, 15, 0.8);
    --light-orange: #f4bf7b;
    --light-orange-semi: rgba(244, 191, 123, 0.8);
    --light-green: #cad184;
    --light-green-semi: rgba(202, 209, 132, 0.8);
    --light-red: #e6806f;
    --light-red-semi: rgba(230, 128, 111, 0.8);
    --light-blue: #a9c0df;
    --light-yellow: rgb(255, 255, 224);
    --light-yellow-semi: rgba(255, 255, 224, 0.8);
    --white-cloud: #f7f5f6;
}

body {
    width: 100%;
    background-color: var(--white-cloud);
    background-image: url(/images/antico-casale-sarzana.jpg);
    /*background-image: url(/images/antico_casale_1024.jpg);*/
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--brown);
    font-size: 1.2rem;
    font-family: sans-serif;
    text-align: center;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
button {
    font-family: "Elsie", serif;
    margin: 0;
}

h1 {
    margin-bottom: 2rem;
}

h3 {
    margin-top: 1.5rem;
}

.adminBody {
    background-color: var(--light-yellow-semi);
    height: 100vh;
    text-align: center;
    padding: 2rem;

    #adminAttendeesTable {
        width: 100%;
        margin: 0 auto;
    }
}

#langForm {
    background-color: var(--light-yellow-semi);
    padding: 1rem;

    button {
        cursor: pointer;
        padding: 0.5rem 0.5rem;
        background-color: var(--light-orange);
        border: 0.15rem solid var(--brown);
        border-radius: 1rem;
        color: var(--brown);
        font-weight: bold;
        text-align: center;
    }

    button:last-of-type {
        img {
            display: inline;
            width: 24px;
        }
    }
}

.headerContainer {
    background-color: var(--light-yellow-semi);
    padding: 1rem;

    h1 {
        margin: 0;
        padding: 1rem;
    }

    span {
        font-family: "Elsie", serif;
        font-size: 1.5rem;
    }
}

.attendeeFormContainer {
    display: flex;
    justify-content: center;
    align-items: center;

    .attendeeInfo,
    form {
        width: 90%;
        margin: 4rem auto;
        cursor: pointer;
        background-color: var(--light-red-semi);
        padding: 3rem 0;

        button {
            cursor: pointer;
            padding: 1rem 2rem;
            background-color: var(--light-orange);
            border: 0.15rem solid var(--brown);
            border-radius: 1rem;
            color: var(--brown);
            font-weight: bold;
        }

        input,
        textarea,
        select {
            padding: 0.5rem;
            background-color: var(--light-yellow);
            border: 2px solid var(--brown);
            border-radius: 1rem;
            margin-top: 1rem;
        }

        input[type="text"],
        textarea {
            width: 100%;
        }
        input[type="radio"] {
            accent-color: var(--brown);
        }

        h1 {
            margin: 0;
        }

        h2 {
            margin-bottom: var(--min-spacing);
        }

        ul {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-around;
            list-style-type: none;
            margin: var(--min-spacing) 0 0 0;
            padding: 0 var(--min-spacing);

            li {
                margin: var(--min-spacing) auto;
                width: 100%;
            }
        }

        .form-plus-one-radio-container {
            .plus-one-name-label {
                display: inline-block;
                padding-top: var(--min-spacing);
            }

            input[type="radio"][value="yes"]:checked ~ .plus-one-name-label,
            input[type="radio"][value="yes"]:checked ~ #plus-one-name {
                display: inline-block;
            }

            input[type="radio"][value="no"]:checked ~ .plus-one-name-label,
            input[type="radio"][value="no"]:checked ~ #plus-one-name {
                display: none;
            }
        }

        .form-attending-radio-container {
            label {
                cursor: pointer;
            }
        }

        #notes {
            margin-top: var(--min-spacing);
            width: 90%;
        }
    }

    .success-dialog:open {
        display: flex;
    }

    .success-dialog {
        justify-content: center;
        flex-flow: column wrap;
        width: 72%;
        background-color: var(--success-green);
        border: 0.5rem solid var(--success-green-dark);
        color: var(--success-green-dark);
        height: 40%;

        h4 {
            font-size: 2rem;
            color: var(--main-alt-color);
        }
        form {
            width: auto;
            margin: 1rem;
            cursor: pointer;
            background-color: transparent;
            padding: 0;
            border: none;
        }

        button {
            cursor: pointer;
            padding: 1rem 2rem;
            background-color: var(--main-alt-color-darker);
            border: 0.15rem solid var(--success-green-dark);
            border-radius: 1rem;
            color: var(--success-green-dark);
            font-weight: bold;
        }
    }
}

.gettingHereContainer,
.dressingCodeContainer,
.accomodationContainer,
.giftsContainer,
.surroundingsContainer,
.footerContainer {
    width: 100%;
    padding: 4rem var(--min-spacing);
    color: var(--brown);
}

.accomodationContainer {
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            margin-bottom: 1rem;
        }
    }
}

.surroundingsContainer {
    h3 {
        margin-top: 3rem;
    }
    ul {
        max-width: max-content;
        margin: 0 auto;
        padding: 1rem;
        text-align: left;

        li {
            padding-left: 1rem;
        }
    }
    details {
        summary {
            width: max-content;
            margin: 0 auto;
            cursor: pointer;
            padding: 1rem 2rem;
            background-color: var(--light-orange);
            border: 0.15rem solid var(--brown);
            border-radius: 1rem;
            color: var(--brown);
            font-weight: bold;
        }
    }
}

.gettingHereContainer,
.accomodationContainer,
.surroundingsContainer {
    background-color: var(--light-yellow-semi);
}

.dressingCodeContainer,
.giftsContainer,
.footerContainer {
    background-color: var(--light-orange-semi);
}

#loginForm {
    padding: 2rem;
    background-color: var(--light-yellow-semi);

    input {
        width: 100%;
        padding: 1rem;
        border: 0.25rem solid var(--brown);
        border-radius: 0.25rem;
        margin-top: var(--min-spacing);
    }

    button {
        cursor: pointer;
        padding: 1rem 2rem;
        background-color: var(--light-orange);
        border: 0.15rem solid var(--brown);
        border-radius: 1rem;
        color: var(--brown);
        font-weight: bold;
    }
}

#key-info {
    width: 100%;
    margin: 0;
    background-color: var(--light-green-semi);
    color: var(--brown);
    padding: 1rem;

    h2 {
        font-size: 2rem;
        margin-top: 0.5rem;
    }

    ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        list-style-type: none;
        margin: 0 0 var(--min-spacing) 0;
        padding: 0;

        h2 {
            font-size: 1.2rem;
        }
    }
}

@media screen and (min-width: 768px) {
    body {
        padding: 0;
        background-image: url(/images/antico-casale-sarzana.jpg);
        /*background-image: url(/images/antico_casale_1024.jpg);*/
    }

    .attendeeFormContainer {
        form {
            width: 70%;

            ul {
                li {
                    width: 80%;
                }
            }
        }

        textarea {
            width: 70%;
        }
    }

    .accomodationContainer,
    .gettingHereContainer,
    .accomodationContainer,
    .dressingCodeContainer,
    .giftsContainer,
    .surroundingsContainer {
        padding: 8rem 10rem;
        color: var(--brown);
    }

    .headerContainer {
        background-color: var(--light-yellow-semi);
        padding: 2rem;
    }

    #key-info {
        li {
            width: 49%;
        }
    }

    #loginForm {
        input {
            width: 50%;
        }
    }
}