/* =============================================== */
/* GLOBAL RESETS & BASE STYLES                   */
/* =============================================== */
* {box-sizing:border-box;margin:0;padding:0;font-family:'Roboto',sans-serif;}
html, body {height: 100%;}
.page-wrapper {display: flex;flex-direction: column;min-height: 100%;}
main {flex-grow: 1;background:#b67d2b}
body {line-height:1.6;color:#333;}
.container {max-width:1200px;margin:auto;padding:0 1rem;}

/* =============================================== */
/* HEADER & PUBLIC NAVIGATION                    */
/* =============================================== */
header {background-color:#b67d2b;color:#fff;padding: 1rem 0;z-index: 1000;position: fixed;width: 100%;top: 0;left: 0;}
.navbar {display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;}
.navbar .public-logo {height: 40px;width: auto;}
.nav-links {list-style:none;display:flex;gap:1.5rem;}
.nav-links a {color:#fff;text-decoration:none;font-weight:500;}
.nav-links a:hover {text-decoration:underline;}
main {padding-top: 100px; }
#public-nav-toggle {display: none;background: none;border: none;color: #fff;cursor: pointer;z-index: 1001; }

/* =============================================== */
/* WELCOME HERO SECTION                          */
/* =============================================== */
.welcome-section {text-align:center;background:url('images/black.jpg') no-repeat center center;background-size:cover;color:#fff; scroll-margin-top: 100px;}
.welcome-section h1 {font-size:5rem;margin-bottom:1rem;font-family:'Pinyon Script', Arial;font-style:italic;font-weight:400;}
.welcome-section p {font-size:2rem;font-family:Georgia,Arial;}

/* =============================================== */
/* COMMUNITY UPDATES SECTION                     */
/* =============================================== */
.updates-section {background-color:#b67d2b;padding:2rem;color:#fff;}
.updates-section h1 {font-size:2.5rem;margin-bottom:1rem;font-family:'Pinyon Script', Arial;font-style:italic;font-weight:400;}

/* =============================================== */
/* UPCOMING EVENTS SECTION                       */
/* =============================================== */
.events-section {background:url('images/black.jpg') no-repeat center center;background-size:cover;padding:2rem;color:#fff;}
.events-section h1 {font-size:2.5rem;margin-bottom:1rem;font-family:'Pinyon Script', Arial;font-style:italic;font-weight:400;}

/* =============================================== */
/* PUBLIC MARKETPLACE SECTION                    */
/* =============================================== */
.marketplace-section {background-color:#b67d2b;padding:2rem;color:#fff;}
.marketplace-section h1 {font-size:2rem;margin-bottom:1rem;font-family:'Pinyon Script', Arial;font-style:italic;font-weight:400;}
.marketplace-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;}
.market-card {border:1px solid #ddd;padding:1rem;border-radius:6px;background-color:#fff;color:#333;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.market-card h3 {font-size:1.2rem;margin-bottom:0.5rem;font-family:Georgia,Arial;}
.market-card p {margin-bottom:0.5rem;font-size:1rem;font-family:Georgia,Arial;}

/* =============================================== */
/* FOOTER                                        */
/* =============================================== */
footer {color: #fff; background:#0b0f1f;padding:3rem 0;border-top:1px solid #1f2937;text-align:center;}

/* =============================================== */
/* RESPONSIVE MEDIA QUERIES                      */
/* =============================================== */
@media(max-width:900px){
  .navbar {flex-direction: row;align-items: center;padding: 1rem;}  
  #public-nav-toggle {display: block;}
  .nav-links {display: none;position: absolute;top: 100%;left: 0;width: 100%;background-color: #b67d2b;flex-direction: column;padding: 1rem;}
  .nav-links--expanded {display: flex;}
}

@media(max-width:600px){
  .welcome-section h1 {font-size:3rem;}
  .welcome-section p {font-size:1.25rem;}
  .updates-section, .events-section, .marketplace-section {padding:1rem;}
}

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