/* ===== Colors and sizes: change these to restyle the whole site ===== */
:root {
  --header-yellow: #ffe666;
  --button-yellow: #b88a00;   /* darker so white text reads */
  --button-dark:   #8c6800;   /* hover and pressed */
  --white: #ffffff;
  --black: #000000;

  /* rainbow bands, top to bottom  */
  --red:    #e8261c;
  --orange: #ff8a00;
  --yellow: #ffd800;
  --green:  #1fa83a;
  --blue:   #1f5fe0;
  --violet: #8b3fc6;
  --band-height: 4px;          /* thickness of each rainbow band */
  --rainbow-gap: 36px;         /* black space between header and rainbow */

  --button-height: 36px;
  --button-slant: -18deg;      /* how much the parallelograms lean */
  --font: Futura, "Futura PT", "Jost", "Century Gothic", sans-serif;
}

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
}

/* ===== Header ===== */
.site-header {
  background: var(--header-yellow);
  padding-top: 18px;
}

/* Stepped bands: yellow darkening to black in 6 even steps */
.dither {
  height: 36px;
  background: linear-gradient(
    to bottom,
    #dbc557 0%,      #dbc557 16.667%,
    #b6a449 16.667%, #b6a449 33.333%,
    #92833a 33.333%, #92833a 50%,
    #6d632c 50%,     #6d632c 66.667%,
    #49421d 66.667%, #49421d 83.333%,
    #24210f 83.333%, #24210f 100%
  );
}

/* ===== Menu layout: left group | main group | right group ===== */
.main-nav {
  padding: 0 24px 14px;
}

.menu {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* The phone-only Menu button is hidden on big screens */
.main-nav .menu-toggle {
  display: none;
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-left  { justify-self: start; }
.nav-main  { justify-content: center; }
.nav-right { justify-self: end; }

/* ===== Menu buttons ===== */
.main-nav a,
.menu-toggle {
  display: block;
  height: var(--button-height);
  padding: 0 18px;
  background: var(--button-yellow);
  border: 2px solid var(--white);
  transform: skewX(var(--button-slant));   /* makes the parallelogram */
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s, box-shadow 0.08s;
}

/* The text is skewed back so it stays upright */
.main-nav a span,
.menu-toggle span {
  display: block;
  line-height: calc(var(--button-height) - 4px);
  transform: skewX(calc(var(--button-slant) * -1));
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Hover: darker */
.main-nav a:hover,
.menu-toggle:hover {
  background: var(--button-dark);
}

/* Pressed: while clicking, and on the page you're currently on.
   The thick white edge on top and left plus a small shift = 3D press. */
.main-nav a:active,
.main-nav a[aria-current="page"],
.menu-toggle:active,
.menu-toggle[aria-expanded="true"] {
  background: var(--button-dark);
  box-shadow: inset 3px 3px 0 var(--white);
  transform: skewX(var(--button-slant)) translate(1px, 2px);
}

/* ===== Rainbow ===== */
.rainbow {
  height: calc(var(--band-height) * 6);
  margin-top: var(--rainbow-gap);
  background: linear-gradient(
    to bottom,
    var(--red)    0%,      var(--red)    16.667%,
    var(--orange) 16.667%, var(--orange) 33.333%,
    var(--yellow) 33.333%, var(--yellow) 50%,
    var(--green)  50%,     var(--green)  66.667%,
    var(--blue)   66.667%, var(--blue)   83.333%,
    var(--violet) 83.333%, var(--violet) 100%
  );
}

/* ===== Main black area ===== */
main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  text-align: center;
}

.motto {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.4;
  text-wrap: balance;   /* if it must wrap (phones), split it into even lines */
}

/* ===== Medium screens (tablets, small laptops): stack the three groups ===== */
@media (max-width: 1100px) {
  .menu {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }
  .nav-left, .nav-main, .nav-right {
    justify-self: center;
    justify-content: center;
  }
}

/* ===== Phones: buttons hide behind the Menu button ===== */
@media (max-width: 760px) {
  .site-header { padding-top: 14px; }
  .main-nav { padding: 0 20px 12px; }

  .main-nav .menu-toggle {
    display: block;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* Closed: no buttons. Open: all buttons in a 2-column grid */
  .menu { display: none; }

  .main-nav.open .menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    gap: 10px 14px;
    margin-top: 14px;
  }

  .main-nav.open ul { display: contents; }   /* lets every button join one grid */

  .main-nav.open a { text-align: center; }
  .main-nav.open .nav-right li { grid-column: 1 / -1; }   /* Contact gets its own full row */

  .rainbow { --rainbow-gap: 28px; }
  main { padding: 32px 20px; }
}