/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */




 /* =========================
   BASE RESET + TYPOGRAPHY
========================= */

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

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #0f1220, #151a2e);
  color: #e8ecf3;
  line-height: 1.6;
  padding: 24px;
  grid-template-columns: 1fr;
  grid-template-areas:
          "header"
          "nav"
          "main";

}

/* links */
a {
  color: #7cc4ff;
  text-decoration: none;
  transition: 0.2s ease;
}

a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* =========================
   WRAPPER
========================= */

.site-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =========================
   HEADER
========================= */

header {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image: url("jax-banner-image.jpg");
    background-size: cover;
    background-position: center;
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(10px);
}

.site-title {
  font-size: 2rem;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.tagline {
  opacity: 0.75;
  font-size: 0.95rem;
}

/* =========================
   LAYOUT GRID
========================= */

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}

/* =========================
   SIDEBAR
========================= */

aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.sidebar-box h2 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #cfe6ff;
}

.sidebar-box ul {
  list-style: none;
}

.sidebar-box li {
  margin: 8px 0;
}

/* badge image */
.badge-row img {
  width: 100%;
  max-width: 180px;
  image-rendering: pixelated;
  border-radius: 8px;
}

/* =========================
   MAIN CONTENT
========================= */

main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

article {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

article h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

article h1 {
  font-size: 1.6rem;
  margin: 10px 0;
}

.post-meta {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: 14px;
}

/* content spacing */
article p {
  margin-bottom: 12px;
}

article ul {
  margin-left: 20px;
  margin-bottom: 12px;
}

/* image styling */
article img {
  max-width: 100%;
  border-radius: 12px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================
   FOOTER
========================= */

footer {
  text-align: center;
  padding: 16px;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* =========================
   RESPONSIVE
========================= */

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

  aside {
    order: 2;
  }
}