/* Reset everything */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set font the whole body part */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* Style navigation bar */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #b36e29;
    color: #fff;
    /* Make the navigation bar always in top */
    z-index: 100;
}

.navigation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-links {
    display: flex;
    gap: 1rem;
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    /* Make the na-links change when i click in */
    transition: color 0.3s ease;
}

/* Make the nav-link change to brown and have underline when i click in */
.nav-links a:hover {
    color: brown;
    text-decoration: underline;
}

.nav-links button {
    background-color: #b36e29;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Style hero section */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    background-image: url(../images/bakery.jpg);
    background-size: cover;
    background-position: top;
    color: #6f4e37;
    text-align: center;
    font-weight: bold;
    /* hidden the thing over the frame */
    overflow: hidden;
    position: relative;
}

.hero-content {
    background-color: rgba(210, 180, 140, 0.8);
    padding: 20px 30px;
    border-radius: 12px;
    display: inline-block;
}

/* Style card post to edit to have flexible edit on column and row */
.posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* space between card */
    gap: 20px;
    padding: 2rem;
}

.card {
    background-color: #fff;
    padding: 1rem;
    border: 1px solid #DDD;
    border-radius: 5px;
    /* make the card move a litte bit when i put the mouse in */
    transition: transform 0.3s ease;
}

/* make the card move a litte bit when i put the mouse in */
.card:hover {
    /* move in horizontal way */
    transform: translateY(-10px);
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.read-more {
    color: #ff6600;
    text-decoration: none;
    /* appear underline on word when i click in */
    transition: text-decoration 0.3s ease;
}

.read-more:hover {
    /* appear underline on word when i click in */
    text-decoration: underline;
}

/* Styling post main content */
.post-container {
    display: grid;
    grid-template-areas: 
     /* First row: header spans two columns*/
     "header header" 
     /* Second row: main content on left, sidebar on right */
     "main sidebar"
     /* Third row: footer spans two columns */
     "footer footer";
    /* Two columns: main take 2 parts, sidebar take 1 part */
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    padding: 2rem;
}

/* Assign this element to the header area */
#post-header { grid-area: header;}
/* Assign this element to the main area */
#post-main { grid-area: main;}

.post-sidebar {
    /* Assign this element to the sidebar area */
    grid-area: sidebar;
    background-color: #b36e29;
    color: white;
    padding: 20px 30px;
}

.post-sidebar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

#post-header h2 {
    font-family: "Winky Rough", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

/* Footer */
footer {
    background-color: #e69a4e;
    color: #DDD;
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    bottom: 0;
}

/* Make the contact to the left to right instead of top to bottom */
#contact p, #contact li {
    display: inline-block;
    width: 100px;
}

/* removing underline from the link */
#contact li a {
    color: white;
    text-decoration: none;
}

/* RESONSIVE */
/* edit the image can be change the layout on the other devices */
@media (max-width: 600px) {
    .posts {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .posts {
        grid-template-columns: 1fr;
    }
}