/* ================================================================
   home.css — styles for the homepage only.
   The article page still uses style.css, so the two never clash.
   Everything is flat: solid colors, square corners, no shadows.
   ================================================================ */

/* ----- 1. Reset + page shell ----- */
*,
*::before,
*::after {
  box-sizing: border-box; /* padding never makes a block wider than planned */
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100dvh;  /* full viewport height, even on mobile */
  background: #000000;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ----- 2. Header band: 30% of the viewport, navy, centered text ----- */
.hero {
  height: 30vh;          /* approximate share of the screen */
  min-height: 230px;     /* keeps the two lines fitting on short screens */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  background: #000B3D;   /* dark navy */
  text-align: center;
}

.site-name {
  margin: 0;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: #ffffff;
}

.tagline {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
}

/* ----- 3. Nav strip: one blank pale block, three gray links ----- */
.nav-strip {
  display: flex;
  gap: 4px;              /* the small gutter between blocks */
  height: 50px;
  background: #000000;
}

/* Left side: decorative empty block, no text */
.nav-blank {
  flex: 0 0 55%;
  background: #C8D1D9;   /* pale blue-gray */
}

/* Right side: three equal link blocks */
.nav-links {
  flex: 1;
  display: flex;
  gap: 4px;
}

.nav-links a {
  flex: 1;               /* equal widths */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: #737373;   /* medium gray */
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.nav-links a:hover {
  background: #5C5C5C;   /* still flat, just a little darker */
}

/* ----- 4. Stage: black area that fills whatever height is left ----- */
.stage {
  flex: 1;               /* takes all remaining viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: #000000;
}

/* The pale panel that holds the simulation */
.sim-panel {
  width: 100%;
  max-width: 800px;      /* about 800px wide on laptops */
  height: 340px;         /* fixed height as specified */
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: #C8D1D9;
}


/* The canvas fills the rest of the panel; its drawing size is set in JS */
#boid-canvas {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 0;
}

/* ----- 5. Small screens (below 900px) -----
   The simulation needs a laptop-sized canvas, so it is hidden here and
   the header becomes a plain, compact band. */
@media (max-width: 899px) {
  .hero {
    height: auto;
    min-height: 0;
    padding: 48px 20px;
    gap: 10px;
  }

  .site-name {
    font-size: 44px;
  }

  .tagline {
    font-size: 19px;
  }

  /* Stack the navigation instead of squeezing three labels into 45% */
  .nav-strip {
    height: auto;
    flex-direction: column;
  }

  .nav-blank {
    display: none;       /* no decorative blank block on phones */
  }

  .nav-links {
    flex-direction: column;
  }

  .nav-links a {
    padding: 16px 12px;
  }

  /* No laptop-sized canvas: hide the simulation panel completely */
  .stage {
    display: none;
  }
}