@import url(/styles.css);

#email-contact-form {
    display: flex;
    flex-direction: column;
}

.contact-section {
    display: grid;
    grid-template:
        "header header"
        "deets   form"
    ;
    grid-template-rows: auto min-content;
    grid-template-columns: min-content auto;
}

#reply-contact-fields{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.art-heading{
    grid-area: header;
    justify-content: center;
    justify-items: center;
    text-align: center;
}

#contact-details{
    align-items: center;
    justify-content: space-evenly;

    margin: 3rem 1.5rem 3rem 3rem;
    grid-area: deets;
}

.contactGroup > p{
    font-size: 1em;
    font-weight: bold;
    width:fit-content;
    border-radius: 15px 15px 0px 0px;
    border:5px solid var(--navbar-backgroud);
    background-color: var(--navbar-backgroud);
    color: rgb(255, 255, 255);
    padding: 0.5em;
}

.contactGroup > a{
    border-radius: 0px 15px 15px 15px;
    border: 2px solid var(--navbar-backgroud);
    font-family:inherit;
    font-size: 1.2em;

    font-style: normal;
	background-color: var(--background-colour-sections);
	color: var(--navbar-backgroud);
	text-align: center;
    text-decoration: none;
    text-justify: auto;

	font-weight: bold;
	text-decoration: none;

	padding: 0.5em 1em;
	transition: 0.5s;
}

.contactGroup > a:hover{
    background-color: var(--navbar-backgroud);
    color: yellow;
}

form{
    grid-area: form;
    margin: 3rem 3rem 3rem 1.5rem;

    width:minmax(20em,90%);
}

#email-contact-form{

    border: 5px solid var(--navbar-backgroud);
    border-radius: 15px;

    display: grid;
    grid-template:
        "name   name"
        "reply  reply"
        "message message"
        "submit  submit"
    ;
    grid-template-rows: auto auto min-content;
    grid-template-columns: auto auto;
}

legend{
    margin:0.5rem;
    padding:8px;
    font-size: 1.2em;
}

legend, label, #submit{
    font-weight: bold;
}

#name{
    grid-area:name;
}

#reply-contact-fields {
    display:flex;
    flex-direction: row;    /*adjust for narrow*/
    grid-area: reply;
}

#reply-contact-fields > .input-label-pair{
    width: 50%;
}

#message-div{
    grid-area:message;
    display:flex;
    flex-direction: column;
}

#message-div > textarea{
    margin:0px;
    resize: none;
}

#email-contact-form > slot{
    grid-area:feedback;
}

#submit{
    grid-area:submit;
    margin: 1rem;
    width: 45%;
    justify-self: end;

    background: var(--navbar-backgroud);
    border: 2px solid var(--navbar-backgroud);
    color:var(--lightText-colour);

    transition: 0.3s ease-out;
}

#submit:hover{
    background-color: var(--background-colour-sections);
    color:black;

}

.round{
    border-radius: 10px;

    border: 2px solid var(--lightText-colour);
    padding: 12px;
}

.input-label-pair{
    display:flex;
    flex-direction: column;

    margin: 0px 0.5rem;
    padding:0.5rem;
/*     background-color: var(--accent-colour);

    border-radius: 5px;
    border:2px solid var(--background-colour-main-page) */
}

.input-label-pair > label{
    width:fit-content;
    border-radius: 15px 15px 0px 0px;
    border:5px solid var(--navbar-backgroud);
    background-color: var(--navbar-backgroud);
    color: rgb(255, 255, 255);
    padding: 0.3em;
}

.input-label-pair > input,
.input-label-pair > textarea{
    border-radius: 0px 15px 15px 15px;
    border: 2px solid var(--navbar-backgroud);
    font-family:inherit;
    font-size: medium;
    max-height: 10em;
}

.input-label-pair:focus-within > input,
.input-label-pair:focus-within > textarea{
    outline:5px solid var(--navbar-backgroud);
    outline-offset: -1px;   /*Avoids gap around rounded corners*/
    background-color: rgb(203, 203, 203);
}

.input-label-pair:focus-within > label{
    outline:5px solid var(--navbar-backgroud);
    outline-offset: -1px;
}

.contactGroup{
    justify-self: center;
    align-self: flex-start;
    display: grid;
    grid-template-areas: 
    "icon head"
    "icon detail";
    grid-template-columns: min-content auto;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 1em;

    margin: 1em;
    font-size: large;

}

.contactGroup > img{
    height: 4em;
    aspect-ratio: auto 1;

    grid-area: icon;
    align-self: center;
}

.contactGroup > #text{
    grid-area: head;
    margin:0px
}

.contactGroup > a{
    grid-area: detail;
}


@media screen and (max-width:30rem) {
    #emailGroup > a{
        font-size: 0.9em;
    }
}

@media screen and (max-width:50rem) {
    #reply-contact-fields>.input-label-pair{
        width:auto;
    }
    #reply-contact-fields{
        flex-direction: column;
    }

    .contactGroup{
        grid-template-areas: 
        "icon"
        "head"
        "detail";
        grid-template-columns: max-content;
        grid-template-rows: auto;

        align-self: center;
        align-items: center;
        justify-items: center;
        height: auto;
        font-size: medium;
    }

    .contactGroup > a{
        border-radius: 15px;
    }

    .contactGroup > img {
        height: 5em;
    }
}

@media screen and (max-width:80rem) {
    .contact-section {
        display: grid;
        grid-template:
            "header"
            "deets"
            "form"
        ;
        grid-template-columns: auto;
        
        grid-row-gap: 1em;

        justify-items:center;
    }

    #contact-details, #email-contact-form{
        margin:2rem 0.5rem;
        width:100%
    }
    
}