/* ============================================================
   Navigation — flat-site template (2006–2010)
   Colors via CSS vars defined in istf.css per site.
   Desktop: fixed top bar, CSS hover dropdowns
   Mobile:  hamburger drawer, tap-to-expand sections
   ============================================================ */

/* --- Banner ------------------------------------------------- */
#bannerContent {
  /* background-image set per-site in istf.css */
  background-repeat: repeat-x;
  height: 60px;
  width: 100%;
  max-width: var(--content-width);
  box-sizing: border-box;
  color: white;
}

/* --- Fixed nav bar ------------------------------------------ */
#navBar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-nav-accent);
  z-index: 1000;
}

#navBar > .nav-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 4px;
}

#navBarSpacer {
  height: 32px;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-nav-accent);
}

/* --- Nav list ----------------------------------------------- */
#navLinks {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.nav-home { flex: 1; }
.nav-home a {
  display: block;
  padding: 4px 8px;
  color: white;
  text-decoration: none;
  font-size: 8pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-home a:hover { color: var(--color-nav-accent); }

.has-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.has-dropdown > button {
  display: block;
  padding: 4px 12px;
  height: 100%;
  background: var(--color-nav-bg);
  color: white;
  font-size: 8pt;
  font-family: var(--font-stack);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.has-dropdown > button:hover { background: color-mix(in srgb, var(--color-nav-bg) 60%, white); }

.has-dropdown > ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 210px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: black;
  z-index: 200;
}

.has-dropdown > ul li a {
  display: block;
  padding: 5px 8px;
  color: var(--color-nav-accent);
  text-decoration: none;
  font-size: 8pt;
  font-family: var(--font-stack);
  white-space: nowrap;
}
.has-dropdown > ul li a:hover { background: #616161; color: white; }

/* Hover/focus open — desktop pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .has-dropdown:hover > ul        { display: block; }
  .has-dropdown:focus-within > ul { display: block; }
}

/* aria-expanded open — all devices */
.has-dropdown > button[aria-expanded="true"] + ul { display: block; }

/* --- Hamburger ---------------------------------------------- */
#menuToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  margin-left: auto;
  flex-shrink: 0;
}
#menuToggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
#menuToggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menuToggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#menuToggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile ------------------------------------------------- */
@media (max-width: 768px) {
  #navBar > .nav-inner { height: 40px; flex-wrap: wrap; }

  #menuToggle { display: flex; }

  #navLinks {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-top: 1px solid var(--color-nav-accent);
    background: var(--color-nav-bg);
  }
  #navLinks.is-open { display: flex; }

  .nav-home { flex: none; width: 100%; }
  .nav-home a { padding: 10px 12px; border-bottom: 1px solid #222; white-space: normal; font-size: 9pt; }

  .has-dropdown { width: 100%; height: auto; flex-direction: column; align-items: stretch; }
  .has-dropdown > button {
    width: 100%; text-align: left; padding: 10px 12px;
    border-bottom: 1px solid #222; font-size: 9pt;
  }
  .has-dropdown > button::after { content: ' ▸'; float: right; transition: transform 0.2s; }
  .has-dropdown > button[aria-expanded="true"]::after { transform: rotate(90deg); }

  .has-dropdown > ul { position: static; min-width: 0; width: 100%; background: #111; display: none; }
  .has-dropdown > ul li a { padding: 8px 20px; font-size: 9pt; border-bottom: 1px solid #1a1a1a; }
  .has-dropdown > button[aria-expanded="true"] + ul { display: block; }

  #navBarSpacer { height: 40px; }
}

/* --- Footer ------------------------------------------------- */
footer#footerBar {
  width: 100%;
  max-width: var(--content-width);
  min-height: 60px;
  color: white;
  font-weight: normal;
  font-size: 8pt;
  font-family: var(--font-stack);
  padding: 0 20px;
  box-sizing: border-box;
  background: var(--color-nav-bg);
  border-top: 1px solid var(--color-nav-accent);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
footer#footerBar a         { color: white; text-decoration: none; font-weight: bold; font-size: 8pt; }
footer#footerBar a:visited { color: white; }
footer#footerBar a:hover   { color: var(--color-nav-accent); }