/* CSS Document */


/* GLOBAL */

body{
margin:0;
font-family:Arial, sans-serif;
background:#faf7f2;
color:#333;
}


/* HEADER */

header{
background:#3b2a21;
color:white;
padding:25px;
text-align:center;
}

nav a{
color:white;
margin:10px;
text-decoration:none;
font-weight:bold;
}

nav a:hover{
text-decoration:underline;
}


/* HERO BANNER */

.hero{

background-image:linear-gradient(
rgba(0,0,0,0.45),
rgba(0,0,0,0.45)
),
url("../images/hero.jpg");

background-size:cover;
background-position:center;

color:white;
padding:120px 20px;
text-align:center;

}

.hero-content h1{
font-size:56px;
margin-bottom:15px;
}

.hero-content p{
font-size:20px;
max-width:700px;
margin:auto;
}


/* HERO BUTTON */

.hero-button{

display:inline-block;
margin-top:25px;

background:#c88a3d;
color:white;

padding:12px 25px;

border-radius:5px;
text-decoration:none;
font-weight:bold;

}

.hero-button:hover{
background:#a8702e;
}


/* PAGE LAYOUT (3 COLUMNS) */

.page-layout{

display:grid;

grid-template-columns:220px 1fr 220px;

gap:30px;

width:90%;
max-width:1200px;

margin:auto;

padding:40px 0;

}


/* LEFT SIDEBAR */

.left-sidebar{

background:#f3efe8;
padding:20px;
border-radius:8px;

}

.left-sidebar h3{
margin-top:0;
margin-bottom:15px;
}

.left-sidebar ul{
list-style:none;
padding:0;
margin:0;
}

/* spacing between links */

.left-sidebar li{
margin-bottom:12px;
}

/* sidebar links */

.left-sidebar a{
text-decoration:underline;
color:#333;
font-size:15px;
}

.left-sidebar a:hover{
font-weight:bold;
}


/* MAIN CONTENT */

.main-content{
}

/* underline links inside articles */

.main-content a{
text-decoration:underline;
}

.main-content a:hover{
font-weight:bold;
}


/* RIGHT SIDEBAR (ADS) */

.right-sidebar{

background:#f3efe8;
padding:20px;
border-radius:8px;

}

.right-sidebar h3{
margin-top:0;
}

/* RIGHT SIDEBAR LINKS */

.right-sidebar a{
display:block;
margin-bottom:10px;
text-decoration:underline;
color:#333;
font-size:15px;
}

.right-sidebar a:hover{
font-weight:bold;
}

.right-sidebar a:hover{
text-decoration:underline;
}


/* SEARCH BOX */

.search-box{
text-align:center;
margin-bottom:25px;
}

.search-box input{

width:95%;
max-width:700px;

padding:14px;

font-size:18px;

border-radius:6px;

border:1px solid #ccc;

}


/* SORT BUTTONS */

.sort-buttons{
text-align:center;
margin-bottom:25px;
}

.sort-buttons button{

padding:10px 18px;

margin:5px;

border:none;

background:#3b2a21;
color:white;

border-radius:5px;

cursor:pointer;

font-size:15px;

}

.sort-buttons button:hover{
background:#5a3b2a;
}


/* COFFEE GRID */

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.card{

background:white;

padding:25px;

border-radius:10px;

box-shadow:0 4px 10px rgba(0,0,0,0.1);

text-decoration:none;

color:#333;

}

.card:hover{
transform:translateY(-3px);
}

/* MAP */

#map{
width:100%;
height:500px;
margin:auto;
}


/* GOOGLE MAP EMBED */

iframe{
width:100%;
height:450px;
border:0;
}


/* FOOTER */

footer{

background:#222;
color:white;

text-align:center;

padding:30px 20px;

}


/* FOOTER LINK GROUPS */

.footer-links{

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

margin-bottom:15px;

}


/* CONTENT LINKS */

.footer-links.content-links{
margin-bottom:18px;
}


/* LEGAL LINKS */

.footer-links.legal-links{

font-size:14px;

opacity:0.9;

}


/* FOOTER LINKS */

.footer-links a{

color:white;

text-decoration:none;

}

.footer-links a:hover{
text-decoration:underline;
}


/* COPYRIGHT */

footer p{

margin:10px 0 0 0;

font-size:14px;

}


/* MOBILE OPTIMIZATION */

@media (max-width:900px){

.page-layout{
grid-template-columns:1fr;
}

.left-sidebar{
order:2;
}

.right-sidebar{
order:3;
}

.main-content{
order:1;
}

.hero-content h1{
font-size:36px;
}

#map{
height:80vh;
}

iframe{
height:70vh;
}

.search-box input{
font-size:16px;
}

}