* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
}
a { color: #1565c0; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }

h1 { font-size: 26px; margin: 10px 0; }
h2 { font-size: 21px; margin: 20px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
h3 { font-size: 17px; margin: 15px 0 8px; }

/* ===== HEADER + LOGO ===== */
header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
  text-align: center;
}
.logo { display: block; margin: 0 auto; width: 150px; max-width: 100%; }

/* ===== RESPONSIVE MENU ===== */
nav { background: #7b7b7b; }
.menu-toggle {
  display: none;
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: bold;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
nav ul li { display: inline-block; }
nav ul li a {
  display: block;
  color: #fff;
  padding: 12px 18px;
  text-decoration: none;
}
nav ul li a:hover { background: #a01c1c; }

/* ===== HERO WITH BACKGROUND IMAGE ===== */
.hero {
  background: #444;
  background-size: cover;
  padding: 45px 15px;
  text-align: center;
  color: #fff;
}
.hero h1 { color: #fff; }
.hero p { margin: 0 0 20px; }

/* ===== RESPONSIVE SEARCH BAR ===== */
.search-box {
  max-width: 640px;
  margin: 0 auto;
}
.search-box input[type="text"] {
  width: 70%;
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 15px;
  vertical-align: middle;
}
.search-box button {
  width: 28%;
  padding: 12px;
  border: none;
  background: #ffb300;
  color: #333;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  vertical-align: middle;
}
.search-box button:hover { background: #ffa000; }

/* ===== CONTENT ===== */
main { background: #fff; padding: 20px 0 30px; }
.center { text-align: center; }

blockquote {
  margin: 15px 0;
  padding: 10px 15px;
  border-left: 4px solid #c62828;
  background: #fafafa;
  font-style: italic;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}
table th, table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
table th { background: #eee; }

ul { padding-left: 20px; }

/* ===== POPUP BUTTON ===== */
.btn-open {
  display: inline-block;
  padding: 12px 25px;
  background: #2e7d32;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}
.btn-open:hover { background: #1b5e20; }

/* ===== ARTICLE ===== */
article.post {
  border: 1px solid #ddd;
  padding: 15px;
  margin-top: 20px;
  background: #fff;
}

footer {
  background: #333;
  color: #ccc;
  text-align: center;
  padding: 20px 15px;
  font-size: 13px;
}
footer a { color: #ffb300; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .menu-toggle { display: block; text-align: left; }
  nav ul { display: none; }
  nav ul.show { display: block; }
  nav ul li { display: block; border-top: 1px solid #a01c1c; }
  .logo { width: 120px; }
  h1 { font-size: 21px; }
  .search-box input[type="text"],
  .search-box button { width: 100%; margin-bottom: 8px; }
  table { font-size: 13px; }
}