/* ============================================================================
   header.css — Header bar, logos, navigation dropdowns
   ============================================================================ */

/* ---- Header bar -------------------------------------------------------- */
.story-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

/* Purple spark under-bar: full-width hairline, purple only at 17-20% */
.story-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(128, 39, 108, 0.55) 17%,
    rgba(128, 39, 108, 0.55) 20%,
    transparent 20.4%,
    transparent 100%);
}

.header-logos {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-logos img       { height: 32px; object-fit: contain; }
.header-logos .hntb-logo { height: 32px; }
.header-logos .mbta-logo { height: 32px; }

.logo-separator {
  color: #ccc;
  font-size: 20px;
  font-weight: 300;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: rgb(128, 39, 108);
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  margin-left: 8px;
  line-height: 1.1;
}

.header-subtitle {
  font-size: 10px;
  font-weight: 400;
  color: #999;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  margin-left: 8px;
  margin-top: 0;
  line-height: 1.1;
}

.header-right { display: flex; align-items: center; }
.header-right > *:not(:last-child) { margin-right: 12px; }
.header-right .back-button { margin-left: 24px; }

.back-button {
  padding: 8px 16px;
  background: rgb(128, 39, 108);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s;
}
.back-button:hover { background: rgb(100, 30, 85); }

/* ---- Header nav (line / branch / section / contact) ---------------------- */
.section-nav,
.line-nav,
.branch-nav,
.contact-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}
.section-nav:hover { background: rgba(128, 39, 108, 0.1); }
.line-nav:hover,
.branch-nav:hover,
.contact-nav:hover { background: rgba(0, 0, 0, 0.05); }

.section-nav-arrow,
.line-nav-arrow,
.branch-nav-arrow,
.contact-nav-arrow {
  font-size: 12px;
  color: #666;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}
.section-nav-arrow      { color: rgb(128, 39, 108); }
.section-nav-arrow.open,
.line-nav-arrow.open,
.branch-nav-arrow.open,
.contact-nav-arrow.open { transform: rotate(0deg); }

.section-nav-current      { color: rgb(128, 39, 108); font-weight: 500; }
.line-nav-current,
.branch-nav-current,
.contact-nav-current      { color: #666; font-weight: 500; }

.section-dropdown-menu,
.line-dropdown-menu,
.branch-dropdown-menu,
.contact-dropdown-menu {
  position: fixed;
  z-index: 6000;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: none;
}
.section-dropdown-menu     { min-width: 200px; }
.line-dropdown-menu       { min-width: 180px; }
.branch-dropdown-menu     { min-width: 150px; }
.contact-dropdown-menu     { min-width: 200px; }

.section-dropdown-menu.active,
.line-dropdown-menu.active,
.branch-dropdown-menu.active,
.contact-dropdown-menu.active { display: block; }

.section-dropdown-item,
.line-dropdown-item,
.branch-dropdown-item,
.contact-dropdown-item {
  padding: 10px 16px;
  cursor: pointer;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 13px;
  transition: background 0.2s;
}
.section-dropdown-item     { color: #333; }
.line-dropdown-item       { color: #666; }
.branch-dropdown-item     { color: #666; }
.contact-dropdown-item     { color: #666; }

.section-dropdown-item:hover { background: rgba(128, 39, 108, 0.1); }
.line-dropdown-item:hover,
.branch-dropdown-item:hover,
.contact-dropdown-item:hover { background: rgba(0, 0, 0, 0.05); color: #333; }

.section-dropdown-item.active {
  color: rgb(128, 39, 108);
  font-weight: 500;
}
.line-dropdown-item.active,
.branch-dropdown-item.active {
  color: #333;
  font-weight: 500;
}