/* Import link for the Josefin Slab font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&display=swap');
/* Import link for the Sacramento font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

/* PAGE DOCUMENT PROPERTIES */
html {
    overflow-x: hidden; /* Prevents the browser from displaying a horizontal scrollbar as a result of negative margin values */
    scroll-behavior: smooth; /* Enables smooth scrolling when navigating through anchor links */
}

/* NAVBAR */
.nav-bar {
    position: sticky; /* Creates a sticky element that stays in the same spot in the browser screen when scrolling */
    top: 0; /* Tells the browser to stick the element at the top of the page based on user scrolling */
    z-index: 9; /* Ensures the navbar stays above other content */
}

ul {
    display: flex; /* Creates a flex container which will expand of shrink elements to fill space available to them and place the elements side by side horizontally */
    list-style-type: none; /* Removes the default bullet points from the list */
    align-items: center; /* Aligns the flex items vertically in the center */
    margin: -8px -8px 0px -8px; /* The margin order is --> top, right, bottom, left. The negative margins will stretch the background beyond the edge of the browser screen */
    background-color: rgb(1,128,106);
    border-bottom: 5px solid rgb(247, 177, 188);
}

a {
    display: block; /* Displays anchor elements vertically on a new line, this was added so the drop down menu displays vertically and not horizontally on the screen */
    font-family: 'Josefin Slab', serif; /* Applies the Josefin Slab font to the links */
    font-size: 25px;
    font-weight: 800; /* Sets the font weight of the links to bold */
    color: rgb(247, 177, 188); /* Sets the text color of the links to pink */
    text-align: center; /* Centers the text within the link */
    width: 100px;
    padding: 20px;
    text-decoration: none; /* Removes the underline from the links */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s ease-out;
}
/* Only-of-type affects the only child element nested within an element. This will keep the background color blue while hovering and the text white when we move the mouse over anchor elements in the rollover-menu div */
a:hover, .drop:hover a:only-of-type {
    background-color: rgb(149, 238, 223);
    color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s ease-in;
}

.rollover-menu {
    display: none; /* Prevents the anchor links in this div from showing on the web browser until otherwise specified */
    position: absolute; /* Positions the element relative to the position of it's parent element */
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Creates a trigger effect when the user hovers their mouse over the Recipes link. The trigger will display all elements within the rollover-menu class div element */
.drop:hover .rollover-menu {
    display: block;
}

.rollover-menu a {
    color: rgb(0, 80, 67);
}

.rollover-menu a:hover {
    color: white;
    box-shadow: 0px 8px 16px 0px rgba(90, 90, 90, 0.2);
}

.rollover-menu a:nth-child(1) {
    border-top: 5px solid rgb(238, 118, 136);
}

/* FOOTER */
footer {
    align-items: center;
    margin: 0px -8px -8px -8px;
    background-color: rgb(1,128,106);
    border-top: 5px solid rgb(247, 177, 188);
    bottom: 0; /* Positions the footer at the bottom of the page */
}

table {
    width: 100%;
}

td {
    width: 33%;
}

td p {
    font-family: 'Josefin Slab', serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: rgb(247, 177, 188);
}

/* BODY */
.container {
    display: inline-block; /* Allows the container to be sized according to its content and sit inline with other elements */
    background-size: 100%;
    padding-top: 60px;
    padding-left: 30px;
}

/* HEADER */
h1 {
    font-family: 'Sacramento', cursive;
    font-size: 80px;
    color: rgb(0, 80, 67);
    text-align: center;
}

h2, h3, h4 {
    font-family: 'Josefin Slab', serif;
    text-align: center;
}

h2 {
    color: rgb(0, 80, 67);
    font-size: 60px;
    text-decoration: underline;
    text-decoration-color: rgb(247, 177, 188);
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 15px;
    text-decoration: underline;
    text-transform: uppercase;
}

/* PARAGRAPHS */
p {
    font-family: 'Josefin Slab', serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: rgb(0, 80, 67);
}

/* IMAGES */
.column {
    float: left;
    width: 48%;
    padding: 10px;
}

/* Styling for screens 1200px or smaller */
@media screen and (max-width: 1200px) {
    .column {
        width: 100%;
        padding: 0px;
        margin-left: -15px;
    }
}

/* Specifically styles the first 7 img tag elements contained in elements with the class "column" */
.column img:nth-of-type(-n + 7) {
    width: 500px;
    height: 350px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.recipe-container {
    width: 500px;
    height: 350px;
    margin: 100px auto 180px;
    perspective: 1000px;
}

/* Styling for screens 600px or smaller */
@media screen and (max-width: 600px) {
    .column img:nth-child(-n + 7) {
        width: 350px;
        height: 225px;
    }

    .recipe-container {
        width: 350px;
        height: 225px;
    }
}

.recipe-card-background {
    background-color: rgb(149, 238, 223);
}

/* Alternates the blue tile background for smaller screen sizes */
@media screen and (max-width: 1200px) {
    #pork {
        background-color: rgb(255, 255, 255);
    }
    #biscuits {
        background-color: rgb(149, 238, 223);
    }
}

/* Featured Recipe */

/* Styles the featured recipe h3 tag */
#featured-header {
    font-family: 'Sacramento', cursive;
    font-size: 60px;
    color: rgb(0, 80, 67)
}

#featured-main-text {
    text-align: justify;
    padding-top: 20px;
    margin-left: 40px;
}

/* Sets margin left to 0 because it is not needed on a small screen and centers the text */
@media screen and (max-width: 1200px) {
    #featured-main-text {
        margin-left: 0;
    }
}

/* Sets the featured image size and position for very large screens */
@media screen and (min-width: 1600px) {
    #featured img {
        width: 700px;
        height: auto; 
        margin-left: -100px;
        margin-top: -20px;
    }
}

/* Adjusts the position of the featured image to be centered in its div when the width is 1599px or less */
@media screen and (max-width: 1599px) {
    #featured img {
        margin-left: 0px;
        margin-top: 40px;
    }
}

@media screen and (max-width: 600px) {
    #featured .recipe-card-background {
        height: 300px;
    }
    #featured img {
        margin-top: -65px;
    }
}

#featured-button {
    display: block;
    margin: 60px auto 0px;
    background-color: rgb(1, 128, 106);
    border-radius: 35px;
    border: none;
    font-family: 'Josefin Slab', serif;
    font-size: 30px;
    font-weight: bold;
    padding: 15px 25px;
    color: white;
    cursor: pointer;
}

#featured-button:hover {
    background-color: rgb(247, 177, 188);
}

/* IMAGE FLIP */

/* Positions the slip effect, defines transition time, and defines a 3D effect */
.flip {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: 0.5s ease-in-out;
    transform-style: preserve-3d;
}

.flip:hover {
    transform: rotateY(-180deg);
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-back {
    background-color: rgb(149, 238, 223);
    border: 2px solid white;
    transform: rotateY(180deg);
}

.text-container {
    padding-top: 70px;
}

/* Removes padding on small screens */
@media screen and (max-width: 600px) {
    .text-container {
        padding-top: 0px;
    }
}

/* RECIPE BUTTON */

input[type="button"] {
    background-color: #fff;
    border: none;
    border-radius: 20px;
    font-family: 'Josefin Slab', serif;
    font-weight: bold;
    font-size: 22px;
    padding: 11px 17px;
    color: rgb(1, 128, 106);
    cursor: pointer;
}

input[type="button"]:hover {
    background-color: rgb(247, 177, 188);
    color: white;
}

/* CONTACT FORM */

#contact {
    display: block;
    margin-bottom: 70px;
}

form {
    display: table;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
}

form input {
    font-family:'Courier New', Courier, monospace;
    font-size: 15px;
    color: rgb(165, 165, 165);
    border: 2px solid rgb(165, 165, 165);
    border-radius: 5px;
    padding: 3px;
    margin: 10px 15px 10px 0px;
    transition: 0.3s ease-out;
}

form input:focus {
    border: 2px solid rgb(1, 128, 106);
    color: black;
    outline: none;
    transition: 0.3s ease-out;
}

label {
    font-family: 'Josefin Slab', serif;
    font-size: 20px;
    font-weight: bold;
    margin: 10px;
}

textarea {
    width: 100%;
    height: 200px;
    padding: 12px 20px;
    box-sizing: border-box;
    resize: both;
    border: 3px solid rgb(165, 165, 165);
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    color: rgb(165, 165, 165);
    font-size: 15px;
    transition: 0.3s ease-out;
}

textarea:focus {
    border: 3px solid rgb(1, 128, 106);
    color: black;
    outline: none;
    transition: 0.3s ease-out;
}

input[type="submit"] {
    background-color: rgb(1, 128, 106);
    border: none;
    border-radius: 35px;
    font-family: 'Josefin Slab', serif;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 25px;
    margin-top: 20px;
    color: #fff;
    cursor: pointer;
    float: right;
}

input[type="submit"]:hover {
    background-color: rgb(247, 177, 188);
    color: white;
}

/* MODAL STYLES */

.recipe-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(255, 255, 255, 0.5); /* White w/ opacity */
}

.recipe-content {
    position: relative;
    background-color: rgb(255, 255, 255);
    top: 15vh;
    left: 27vw;
    width: 45vw;
    height: 70%;
    box-shadow: 0 2px 10px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.close-btn {
    color: rgb(1, 128, 106);
    font-size: 50px;
    font-weight: 600;
    cursor: pointer;
    float: right;
    padding-right: 10px;
}

.modal-header {
    padding-top: 20px;
}

.modal-body {
    padding: 20px;
    height: calc(100% - 80px); /* Adjust height to account for header */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds modal height */
}

.row {
    display: flex;
    justify-content: center;
}

.rp-column-1 {
    width: 33%;
}

.rp-column-2 {
    width: 67%;
}

.recipe-list {
    margin-left: -30px;
    font-family: 'Josefin Slab', serif;
    font-size: 18px;
    display: block; /* Overwrides flex property and ensures each list item starts on a new line */
    border: none;
    background-color: transparent;
    line-height: 1.5;
    text-align: center;
}

.recipe-directions {
    padding: 0px 20px;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
}