@import url('./mobile_first.css');

/*
 * AFTER IMPORT OF MOBILE FIRST CSS
 * DEFINE ALL TABLET AND DESKTOP STYLES
 * IN THIS FILE AS MAIN CSS FILE
 */

/* Feedback form for tablets and desktops*/
@media screen and (min-width: 700px) {

    .form-block {
        flex-direction: row;
    }

    .form-block label {
        margin-right: .5em;
    }

    .form-block > label {
        display: inline-block;
        flex: 0 0 18em;
        text-align: right;
        margin-right: 2em;
    }

    .form-block input, .form-block fieldset, .form-block textarea {
        flex: 1 1 0;
    }

    .form-block input[type="submit"] {
        margin-left: 20em;
    }

    .form-block textarea::placeholder {
        color: transparent;
    }

    .form-block input::placeholder {
        color: transparent;
    }
}

/* Header and footer for Screens bigger than 500px, toggle nav menu and additionally show address section in footer on the right */

@media screen and (min-width: 500px) {

    header nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    .topnav a {
        display: block;
    }

    .topnav a.icon {
        display: none;
    }

    .topnav.responsive a.icon {
        display: none;
    }

    main {
        margin-bottom: 40px;
    }

    .product {
        max-width: 220px;
    }

    img.product_images {
        width: 200px;
        height: auto;
    }

    header {
        margin-bottom: 50px;
    }

    h1 {
        font-size: 2.5em;
        margin-top: .5em;
        margin-bottom: .5em;
    }

    footer {
        position: static;
        height: 105px;
    }

    footer section.address {
        display: flex;
        flex: 0 200px;
    }

    footer section.address p {
        padding-left: 20px;
    }
}

/* Footer for screens bigger than 750px (tablets and desktop), additionally show testimonial section in the middle */

@media screen and (min-width: 750px) {

    .topnav a {
        padding: 5px 10px; /* Slightly widen the navigation elements on large (desktop) screens */
    }

    h1 {
        font-size: 3em;
    }

    footer section.testimonial {
        display: flex;
        flex: 1 300px;
    }

    footer section.address {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex: 1 auto; /* to properly center the dynamic testimonial block */
    }
}