/* Utility styles */

.fg-red {
    color: red;
}

.fg-white {
    color: white;
}

.white-links a {
    color: white;
}

.bold {
    font-weight: bold;
}

/* Page styles */

body {
    /* Make the page take up the full screen even without enough content for it */
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

main {
    /* Set up a background wallpaper which has been darkened */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://res.cloudinary.com/dp1ehadna/image/upload/v1727699466/pile-8737346_1920_compressed_rdixpb.jpg") no-repeat center/cover fixed;
}

/* Multi-page styles */

.signingbutton {
    background-color: #F4C542; 
    color: black;
    width: 260px;
    height: 50px; 
    border: 2px solid black; 
    border-radius: 5px; 
    font-size: 16px;
    font-weight: bold; 
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.signingbutton:hover {
    background-color: #F4C542; 
    color: black; 
    border-color: black;
}

.welcome {
    text-align: center;
    justify-content: center;
}

#add-review, #edit-review {
    /* Set up form styles for add and edit reviews */
    background-color: transparent;
    color: white;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

/* Dropdown Arrow */

.dropdown-arrow {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px 12px;
    padding-right: 24px;
    /* Space for arrow */
    font-size: 16px;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10"><path fill="none" stroke="%23333" stroke-width="2" d="M1 1l5 5 5-5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 10px;
}

/* Header styles */

header, nav {
    background-color: rgb(202, 17, 0);
    color: white;
}

header .nav-link, header .nav-brand {
    color: white;
}

.navbar-toggler {
    /* Place a border around the nav-menu on mobile view */
    border-color: #fff;
}

.navbar-toggler-icon {
    /* Provides an icon for the navbar on mobile view */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-collapse {
    /* Place menu items in the center of the dropdown view on mobile */
    text-align: center;
}

header img {
    width: 150px;
}

.navbar-brand {
    /* Set up the style for the site logo in the navbar */
    font-family: "Roboto Slab", "Roboto", "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 13px;
    height: 39.6px;
    background-color: white;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.navbar-brand:hover {
    color: black;
}

/* Footer styles */

footer {
    background-color: rgb(202,  17, 0);
    color: white;
    text-align: center;
}

footer i {
    color: white;
}

/* Index page */

#index-logo {
    /* Set up a bigger site logo for the index page */
    font-family: "Roboto Slab", "Sacramento", "Roboto", "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 50px;
    background-color: white;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

#index-logo i {
    margin-top: auto;
    margin-bottom: auto;
}

.index-box {
    color: white;
}

/* Register page */

#signup_form ul {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 0px;
    order: 1; /* Move password requirements underneath the confirm password section */
}

.login li, #signup_form li {
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

#signup_form label {
    width: 150px;
}

#signup_form p:nth-of-type(4) {
    /* Hide 4th element of the Django template form used */
    display: none;
}

.text-overlay {
    padding: 10px 0px;
    display: inline-block; /* Ensures effect only takes up the width of the text */
    border-radius: 5px; /* Adds rounded corners */
}

#signup_form button {
    /* Move sign up button underneath the password requirements section */
    order: 2;
}

/* Sign in and Log Out pages */

.login label {
    width: 125px;
}

.box-structure {
    color: white;
    font-weight: 600;
    text-align: center;
}

/* About Page */

.member-list {
    /* Table style for project contributor list */
    background-color: black;
    width: 100%;
    max-width: 800px;
    border: 1px solid white;
}

.member-list tr {
    border-bottom: 1px solid white;
}

.member-list th, .member-list td {
    border-right: 1px solid white;
    padding: 10px 5px;
}

.member-list a {
    color: white;
}

.card {
    display: block;
}

/* Reviews page */

.set-vertical-align {
    vertical-align: middle;
}

#table-element {
    /* Hide table display on small screems */
    display: none;
}

#review-area .card {
    width: 270px;
}

/* Edit review page */

#edit-review label {
    display: block;
}

#edit-review input {
    width: 100%;
}

#edit-review select {
    width: 100%;
}

#edit-review .edit-button {
    width: 100%;
}

#sort-form legend {
    font-size: 200%;
}

#sort-form fieldset {
    border: 2px solid grey;
}

/* Media queries */

@media only screen and (min-width: 400px) {
    
    /* Edit review page */

    #edit-review label {
        width: 130px;
    }
}

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

    /* Reviews page */

    #review-area .card {
        width: 400px;
    }

    /* Edit review page */

    #edit-review .edit-button {
        width: 140px;
    }
}

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

    /* Review page */

    #review-area .card {
        width: 600px;
    }
}

@media only screen and (min-width: 992px) {
    
    /* Review page */

    #table-element {
        /* Enable table display */
        display: block;
        text-align: center;
    }

    #review-area .card {
        /* Disable cards display */
        display: none;
    }
}