/* ============================================================
   Navigation — istf2011
   Desktop: fixed top bar, CSS hover dropdowns
   Mobile:  hamburger drawer, tap-to-expand sections
   ============================================================ */

/* --- Banner ------------------------------------------------- */
#bannerContent {
  background: url('../images/global/navigation/city.jpg') repeat-x;
  height: 60px;
  width: 100%;
  max-width: var(--content-width);
  padding: 20px;
  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%;
}

/* Home link — left, fills remaining space */
.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); }

/* Dropdown items — right-aligned */
.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: #616161; }

/* Dropdown panel — hidden by default */
.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 + keyboard open — desktop pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .has-dropdown:hover > ul       { display: block; }
  .has-dropdown:focus-within > ul { display: block; }
}

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

/* --- Hamburger button --------------------------------------- */
#menuToggle {
  display: none; /* hidden on desktop */
  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;
}
/* Animate to X when open */
#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 breakpoint ------------------------------------- */
@media (max-width: 768px) {
  #navBar > .nav-inner {
    height: 40px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Show hamburger, hide nav list by default */
  #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);
    /* slide-down: let height be natural */
  }
  #navLinks.is-open { display: flex; }

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

  /* Stack dropdowns full-width */
  .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;
    background: var(--color-nav-bg);
    font-size: 9pt;
  }
  .has-dropdown > button::after {
    content: ' ▸';
    float: right;
    transition: transform 0.2s;
  }
  .has-dropdown > button[aria-expanded="true"]::after {
    transform: rotate(90deg);
  }

  /* Dropdown panel — static, indented, always closed until aria-expanded */
  .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;
  }

  /* Nav spacer grows to match taller mobile bar */
  #navBarSpacer { height: 40px; }
}

/* --- Footer ------------------------------------------------- */
footer#footerBar {
  text-align: right;
  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); }