:root{
  --bg:#D3D3D3;
  --ink:#1f2937;
  --hover:#f3f4f6;
  --border:#e5e7eb;
  --brand:#2563eb;
  --radius:10px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* ===== NAV SHELL ===== */
.site-nav{
  border-bottom:none;
  background:var(--bg);
}

.menu{
  max-width:1800px;
  margin:0 auto;
  padding:0 .75rem;
}

/* ===== TOP MENU LAYOUT (responsive + works on iPhone) ===== */
.menu > ul{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  align-items:center;
  flex-wrap:wrap;           /* wraps on smaller screens */
  gap:0;                    /* gap handled by padding + divider */
  width:100%;

  /* when there is room, spread items across */
  justify-content:space-between;
}


/* make each top-level item a positioning anchor for submenu */
.menu > ul > li{ position:relative; }

/* more even spacing, usually nicer */
.menu > ul { justify-content: space-evenly; }

/* ===== TOP ITEM BUTTON/LINK ===== */
.menu a,
.menu button{
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  padding:.9rem 1rem;
  border-radius:.6rem;
  border:1px solid transparent;
  background:transparent;

  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  cursor:pointer;
}

.menu a:focus-visible,
.menu button:focus-visible{
  outline:none;
}

/* Hover/focus = blue text only */
.menu a:hover,
.menu a:focus-visible,
.menu button:hover,
.menu button:focus-visible{
  color:var(--brand);
  background:transparent;
}

/* ===== ACTIVE STATES (deduped) ===== */
.menu > ul > li.is-active > a,
.menu > ul > li.is-active > .submenu-toggle,
.has-submenu.open > .submenu-toggle{
  color:var(--brand);
}

/* ===== DROPDOWN ===== */
.submenu{
  position:absolute;
  left:0;
  top:calc(100% + .35rem);

  min-width:220px;
  background:var(--bg);
  border-radius:var(--radius);
  padding:.35rem;
  margin:0;
  list-style:none;

  display:none;
  z-index:9999;
}

.has-submenu.open > .submenu{ display:block; }

.submenu li a{
  display:block;
  padding:.65rem .75rem;
  border-radius:.5rem;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}

.submenu a:hover,
.submenu a:focus-visible{
  color:var(--brand);
  background:transparent;
}

/* active submenu item */
.submenu li.is-active > a{
  color:var(--brand);
}

/* ===== CHEVRON ICON ===== */
.chev{
  inline-size:.65rem;
  block-size:.65rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:2px;
  opacity:.7;
}

/* ===== VERTICAL DIVIDERS (no divider before logo) ===== */
/* Add divider after each item EXCEPT last two (so no divider before logo if logo is last) */
.menu > ul > li:not(:nth-last-child(-n+2))::after{
  content:"|";
  opacity:.6;
  margin:0 10px;
}

/* ===== MOBILE ===== */
@media (max-width:720px){
  .menu > ul{
    justify-content:flex-start; /* don't spread on tiny screens */
  }

  .menu a,
  .menu button{
    padding:.75rem .85rem;
  }

  /* stack to a single column if you want true mobile nav */
  /* uncomment if desired:
  .menu > ul{
    flex-direction:column;
    align-items:stretch;
  }
  .menu a, .menu button{
    width:100%;
    justify-content:space-between;
  }
  .submenu{
    position:static;
    min-width:0;
  }
  */

  /* dividers can look messy on wrap; optional: hide on mobile */
  /* uncomment if desired:
  .menu > ul > li::after{ content:none; }
  */
}