:root { --primary:#2e7d32; --primary-dark:#1b5e20; --primary-light:#4caf50; --secondary:#ff9800; --accent:#f44336; --dark:#263238; --light:#f5f7f9; --white:#fff; --gray:#78909c; --shadow:0 4px 6px rgba(0,0,0,.1); --transition:all .3s ease; }

/* Base */
body { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; margin:0; padding:0; background:var(--light); color:#333; line-height:1.6; }
a { text-decoration:none; color:var(--primary); transition:var(--transition); }
a:hover { color:var(--primary-dark); }

/* Navbar / Header */
header, .navbar { background:var(--primary-dark); color:var(--white); padding:1rem 2rem; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; box-shadow:var(--shadow); }
.navbar-brand { font-size:1.5rem; font-weight:700; display:flex; align-items:center; }
.navbar a, header nav a { color:var(--white); margin:0 .8rem; font-weight:500; padding:.5rem 0; position:relative; }
.navbar a:hover::after, header nav a:hover::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--secondary); }

/* Layout */
main { display:flex; flex-wrap:wrap; max-width:1200px; margin:2rem auto; padding:0 1.5rem; gap:2rem; }
.sidebar { flex:1 1 250px; background:var(--white); padding:1.5rem; border-radius:10px; box-shadow:var(--shadow); position:sticky; top:1rem; height:fit-content; }
.sidebar h3 { margin-top:0; color:var(--primary); padding-bottom:.5rem; border-bottom:2px solid var(--primary-light); }
.sidebar ul { list-style:none; padding-left:0; margin:1rem 0; }
.sidebar ul li { margin:.7rem 0; padding-left:.5rem; border-left:3px solid transparent; transition:var(--transition); }
.sidebar ul li:hover { border-left-color:var(--primary); }
.sidebar ul li a { color:var(--dark); font-weight:500; display:block; padding:.3rem 0; }
.sidebar ul li a:hover, .sidebar ul li a.active { color:var(--primary); font-weight:600; }

/* Content */
.main-content, .content { flex:3 1 700px; background:var(--white); padding:2rem; border-radius:10px; box-shadow:var(--shadow); }
.main-content h1, .main-content h2, .main-content h3 { color:var(--primary-dark); margin-top:1.5rem; margin-bottom:1rem; }
.main-content h1 { font-size:2.2rem; padding-bottom:.5rem; border-bottom:2px solid var(--primary-light); }
.main-content p { margin-bottom:1.2rem; line-height:1.7; }
.main-content ul { list-style:disc; margin-left:1.5rem; margin-bottom:1.5rem; }
.main-content ul li { margin-bottom:.7rem; }
.faq-item { background:#e8f5e9; padding:1.2rem; border-radius:8px; margin-bottom:1.2rem; border-left:4px solid var(--primary); }
.faq-item strong { color:var(--primary-dark); }

/* Park Cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:2rem; margin:2rem 0; }
.card { background: var(--white); border-radius: 10px; box-shadow: var(--shadow); padding: 1.5rem; text-align: center; transition: var(--transition); border: 1px solid #e0e0e0; display: block;overflow: hidden;}
.card-content {display: flex;flex-direction: column;height: 100%;justify-content: space-between;}
.card:hover { transform:translateY(-8px); box-shadow:0 10px 20px rgba(0,0,0,.15); }
.card img { width:100%; height:200px; object-fit:cover; border-radius:8px; margin-bottom:1rem; }
.card h2 { color:var(--primary-dark); margin:.8rem 0; font-size:1.4rem; }
.card p { font-size:.95rem; color:#555; margin-bottom:1.2rem; flex-grow:1; }
.card a.btn { display:inline-block; padding:.7rem 1.5rem; background:var(--primary); color:#fff; border-radius:6px; margin-top:.5rem; font-weight:600; transition:var(--transition); }
.card a.btn:hover { background:var(--primary-dark); transform:translateY(-2px); }

/* Hero */
.hero-section { background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url('https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center/cover; color:#fff; padding:5rem 2rem; text-align:center; border-radius:10px; margin-bottom:2rem; }
.hero-section h1 { font-size:2.8rem; margin-bottom:1rem; text-shadow:2px 2px 4px rgba(0,0,0,.5); }
.hero-section p { font-size:1.3rem; margin-bottom:2rem; max-width:800px; margin-left:auto; margin-right:auto; }
.hero-section a.btn { padding:1rem 2rem; background:var(--secondary); color:#fff; border-radius:8px; font-weight:700; font-size:1.1rem; transition:var(--transition); }
.hero-section a.btn:hover { background:#e65100; transform:translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,.2); }

/* Breadcrumbs */
.breadcrumbs { font-size:.9rem; margin-bottom:1.5rem; color:#666; padding:.8rem 1rem; background:#f5f5f5; border-radius:6px; }
.breadcrumbs a { color:var(--primary); font-weight:500; }
.breadcrumbs span { color:var(--gray); margin:0 .5rem; }

/* Related Parks */
.related-parks { margin:3rem auto; padding:2rem; background:#f1f8e9; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.05); border-left:5px solid var(--primary); }
.related-parks h3 { color:var(--primary-dark); margin-bottom:1.5rem; font-size:1.5rem; }
.related-parks ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:1rem; }
.related-parks ul li a { background:var(--primary); color:#fff; padding:.7rem 1.2rem; border-radius:6px; text-decoration:none; transition:var(--transition); display:inline-block; font-weight:500; }
.related-parks ul li a:hover { background:var(--primary-dark); transform:translateY(-2px); }

/* Footer */
footer { text-align:center; padding:2rem 1rem; background:var(--dark); color:var(--white); margin-top:3rem; border-radius:10px 10px 0 0; }
footer a { color:#bbdefb; font-weight:500; }
footer a:hover { color:var(--white); text-decoration:underline; }

/* Responsive */
@media(max-width:992px) {
  main { flex-direction:column; padding:0 1rem; }
  .sidebar { margin-bottom:2rem; position:relative; top:auto; height:auto; }
}
@media(max-width:768px) {
  .navbar { flex-direction:column; text-align:center; padding:1rem; }
  .navbar>div { margin-top:1rem; }
  .hero-section { padding:3rem 1rem; }
  .hero-section h1 { font-size:2.2rem; }
  .hero-section p { font-size:1.1rem; }
  .grid { grid-template-columns:1fr; }
  .related-parks ul { flex-direction:column; }
  .related-parks ul li { margin-bottom:.8rem; }
}
@media(max-width:480px) {
  .hero-section h1 { font-size:1.8rem; }
  .hero-section p { font-size:1rem; }
  .main-content, .content { padding:1.5rem; }
  .card { padding:1.2rem; }
}