/* 
Author: Brian Thompson
Date: 11/15/2023
File Name: styles.css
*/

/* CSS Reset */
body, header, main, footer, nav, ul, h1, h2, h3, h4, section, div, p, button {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Style rule for responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Style rules for body */
body {
    background-color: #13503b;
    color: #eaeee4;
    font-family: 'Roboto Slab', serif;
}


/* Style rule for all elements */
* {
    box-sizing: border-box;
}

/* Style rules for mobile viewport */

/* Hide tablet desktop styles */
.tablet-desktop, .desktop {
    display: none;
}

/* Style rules for header */
header {
    background-color: #dce3d2;
    padding: 1% 0;
}

/* Style rules for heeader image (logo) */
header img {
    padding-left: 10%;
    padding-right: 10%;
    margin: 0 auto;
    display: block;
}

/* Style rules for navigation */
nav {
    padding: 0.5%;
    margin-bottom: 1%;
    background-color: #a9b4a9;
 }
 
 nav ul {
     list-style-type: none;
     text-align: center;
 }
 
 nav li {
     font-size: 1.1em;
     font-weight: bold;
     border-top: 1px solid #023a21;
 }
 
 nav li:first-child {
     border-top: none;
 }
 
 nav li a {
     display: block;
     color: #023a21;
     padding: 0.5em 1em;
     text-decoration: none;
 }

/* Style rules for main */
main {
    margin: 1% 10%;
}

main p {
    padding: 1% 0;
}

h1, h2 {
    color: #dce3d2;
}


h3 {
    padding: 0.5% 0;
}


h1 {
    font-size: 1.5em;
}

.shadow-text {
    text-shadow: 2px 2px 4px #000;
}

#target-audience {
    margin-top: 1.5%;
}


.clear-both {
    clear: both;
}

.plant-bullet {
    margin-top: 0.5%;
    margin-right: 0.5%;
}

.external-link-red {
    color: #921a1a;
    font-weight: bold;
}

.external-link-yellow {
    color: #dfd760;
    font-weight: bold;
}

.border-shadow {
    border: 2px solid #a9b4a9;
    box-shadow: 0 0 4px #dce3d2;
}

.white-background {
    background-color: #fff;
    border-radius: 4px;
    margin: 1% 0;
}

.beige-background {
    background-color: #dce3d2;
    color:#023a21;
    padding: 2%;
}

.beige-background h2 {
    color:#023a21;
}

.vines {
    width: 100%;
    opacity: 0.8;
}

.full-image {
    display: block;
    margin: 1% auto;
    border: 2px solid #a9b4a9;
    box-shadow: 0 0 4px #dce3d2;
}

.hidden {
    display: none;
}

.transform-big {
    text-decoration: none;
}

#confirmation-box {
    text-align: center;
    border: 4px solid #a9b4a9;
    box-shadow: 0 0 2px #c7d3ae;
}

#confirmation-content {
    margin-top: 2%;
}

#contact-content {
    margin-bottom: 2%;
}

#confirmation-content {
    font-size: 1.25em;
    padding: 0;
}

#confirmation-map {
    width: 65%;
    height: auto;
}

#contact-content a {
    text-decoration: none;
}

#open-image {
    margin-top: 4%;
}

.yellow-button {
    font-weight: bold;
    background-color: #dfd760;
    color:#023a21;
    padding: 1%;
    border-radius: 4px;
    font-size: 1.1em;
    text-align: center;
    width: 150px;
    height: auto;
    margin-top: 1.5%;
    text-decoration: none;
}

#confirmation-box a {
    text-decoration: none;
}

#location {
    text-align: center;
}

#ok-button {
    font-weight: bold;
    background-color: #dfd760;
    color: #023a21;
    padding: 1%;
    border-radius: 4px;
    width: 30%;
    text-align: center;
    margin: 1.5% auto;
}

#location > ul {
    list-style-type: none;
    margin: 0 auto;
}

.tel-link a {
    text-decoration: none;
    color: #eaeee4;
}

.btn {
    padding: 1%;
    border: 2px solid #c7d3ae;
    clear: both;
}

.contact-email-link {
    text-decoration: none;
    color: #eaeee4;
}

#hero-image {
    margin:0;
    width:100%;
    height: auto;
}

.map {
    border: 2px solid #a9b4a9;
    width: 70%;
    height: 70%;
    margin: 1% 0;
}

#visit-info {
    margin: 5% 0;
    border: 2px solid #a9b4a9;
}

#plant-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 0.5%;
}


#plant-flex > section {
    flex: auto;
    width: 90%;
}

.plants img {
    display: block;
    margin: 0 auto;
    border: 2px solid #a9b4a9;
    box-shadow: 0 0 2px #dce3d2;
}

.plants {
    text-align: center;
}

.plants h4 {
    padding-top: 1%;
}

.plants p {
    max-width: 250px;
    font-size: 0.85em;
    margin: 0 auto;
}

#workshop {
    border: 2px solid #c7d3ae;
    margin-bottom: 2%;
    padding: 1.5% 2%;
}

#workshop li {
    list-style-position: inside;
}

#workshop a {
    text-decoration: none;
    color:#023a21;
    margin: 1% auto;
}

#resource-image img, .workshop-image {
    margin:  1% auto;
    border: 2px solid #a9b4a9;
    box-shadow: 0 0 4px #dce3d2;
}

.darken-image {
    filter: brightness(70%);
}


/* Style rules for form */
.form-image-container {
    position: relative;
    text-align: center;
}

.centered {
    color: #fff; 
    font-size: 1.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

button, input, select, textarea {
    font-family: inherit;
    border: 1px solid #023a21;
}

#input-email-address {
    width: 10%;
}

#content-registration h1 {
    text-align: center;
    padding-bottom: 2%;
}

#form-content {
    border: 2px solid #c7d3ae;
    color:#023a21;
    background-color: #dce3d2;
    background-image: linear-gradient(#c7d3ae, #dce3d2);
    margin: auto;
    max-width: 80%;
    padding-bottom: 2%;
}

#form-content a {
    text-decoration: none;
}

input[type="text"], input[type="email"], input[type="number"], select, input[type="tel"] {
    display: block;
    padding-left: 0.5%;
    padding-bottom: 0.5%;
}

input[type="text"], input[type="email"], input[type="number"], select, input[type="tel"], textarea {
    width: 100%;
}

input[type="checkbox"] {
    display:inline-block;
    padding-bottom: 0.5%;
}

#form-input {
    padding: 3% 5%;
}

.btn {
    border: none;
    margin: 2% auto;
    display: block;
    padding: 2%; 
    background-color: #023a21;
    font-size: 1.5em;
    border-radius: 10px; 
    color: #dce3d2;
    font-weight: bold;
    width: 150px;
    text-align: center;
}

#cancel {
    margin-bottom: 2%;
}

/* Style rules for footer */
footer {
    clear: both;
    height: 100%;
    width: 100%;
    overflow: auto;
    color: #023a21;
    background-color: #a9b4a9;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center; 
    font-size: 0.85em;
    padding-top: 2%;
    padding-bottom: 2%;
}

footer p {
    padding: 0;
    color: #023a21;
}

footer p a {
    color: #023a21;
    text-decoration: none;
}

footer img {
    padding-top: 2%;
    width: 30px;
    height: auto;
}


/* Query for Tablet Viewport*/
@media screen and (min-width:630px), print { 

    /* Hide mobile only styles */
    .mobile {
        display: none;
    }

    /* Display tablet desktop styles */
    .tablet-desktop {
        display: block;
    }


    /* Tablet Viewport: Style rules for nav area */
    nav li {
        border-top: none;
        display: inline-block;
        border-right: 1px solid #023a21;
    }

    nav li:last-child {
        border-right: none;
    }

    nav li a {
        padding: 0.1em 0.75em;
    }

    /* Tablet Viewport: Style rules for main content */
    .float-image {
        float: right;
        margin: 0 0 1% 2%;
        max-width: 80%;
    }

    #visit-info {
        border-width: 4px;
        margin: 2% 0 1% 0;
        box-shadow: 0 0 4px #dce3d2;
    }

    .map {
        width: 100%;
        height: auto;
    }

    #hours li {
        padding-top: 0.5%;
    }

    .flex-2 {
        clear: both;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.5em; 
        padding: 1%;
    }


    .flex-2 > div, #plant-flex > section {
        flex: auto;
        width: 45%;
    }

    #education-logo {
        background-color: #fff;
        border-radius: 4px;
        float: left;
        margin-right: 5%;
        margin-top: 1%;
    }

    .education-info {
        border-top: 2px solid #dce3d2;
        margin-top: 1%;
        margin-bottom: 1%;
    }

    #workshop {
        border: none;
    }

    #workshop-info {
        padding-left: 5%;
    }

    /* Style rules for form */
    button, input, select, textarea {
        font-size: 100%; 
    }

    input[type="text"], input[type="email"], input[type="number"], select, input[type="tel"], textarea {
        width: 80%;
    }

    #form-input {
        margin: 2% 10% 2% 20%; 
    }

    #content-registration h1 {
        font-size: 2em;
    }

}

/* Media Query for Desktop Viewport */
@media screen and (min-width: 1015px), print {

    /* Display desktop styles */
    .desktop {
        display: block;
    }

    /* Style rules for navigation */
    nav li a:hover {
        color: #c7d3ae;
        background-color: #023a21;
        transform: scale(1.2);
    }

    /* Style rules for main content */
    h1 {
        font-size: 200%;
    }

    #plant-flex > section {
        flex: auto;
        width: 30%;
    }


    .transform-big  {
        display: inline-block;
        text-decoration: none;
    }

    #submit:hover, #cancel:hover, .transform-big:hover, #ok-button:hover {
        transform: scale(1.1);

    }

    #location {
        margin-top: 2%;
    }

    /* Destop Styles: for Form */
    .form-image-container {
        font-weight: bold;
        font-size: 150%;
    }

}

/* Media Query for Large Desktop Viewports */
@media screen and (min-width: 1921px) {
    
    #container {
        width: 1920px;
        margin: 0 auto;
    }

}

/* Media Query for Print */
@media print {
    body {
        background-color: #fff;
        color: #000;
    }
}