/* Page container */
body {
  margin: 0.75rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

/* ============================
   HEADER LAYOUT (NEW STRUCTURE)
   ============================ */

/* Header wrapper */
#header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;              /* space between header-row and announcement bar */
  margin-bottom: 0.75rem;   /* space before live-systems */
}

/* Top row: title on left, buttons on right */
#header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Title */
#header-row h1 {
  margin: 0;
  font-size: 1.6rem;        /* slightly larger for hierarchy */
}

/* Buttons row */
#top-links {
  display: flex;
  gap: 0.75rem;             /* spacing between SUPPORT / DISCORD / YOUTUBE */
}

/* Subnav (if used later) */
#subnav {
  display: flex;
  gap: 0.75rem;
}

/* ============================
   SECTION SPACING
   ============================ */

section {
  margin-bottom: 1.25rem;
}

#live-systems,
#weekly-features {
  margin-top: 0.75rem;
}

/* ============================
   MOBILE
   ============================ */

@media (max-width: 800px) {

  /* Header stacks cleanly */
  #header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  /* Buttons wrap nicely */
  #top-links {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Grid becomes single column with tighter spacing */
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Reduce section spacing */
  section {
    margin-bottom: 1rem;
  }

  #live-systems,
  #weekly-features {
    margin-top: 0.5rem;
  }
}