/* Icon band component */
.icon-band { background:#223243; color:#cfe8ff; padding:16px 0; border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.15); }
.icon-band .icon-band-list { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; row-gap:24px; list-style:none; padding:0; margin:0; }
.icon-band .icon-item { flex:1 1 140px; min-width:140px; text-align:center; }
.icon-band .icon-item i { font-size:28px; color:#58a6ff; }
.icon-band .icon-item h3 { margin:8px 0 4px; font-weight:600; font-size:16px; color:#e6f1ff; }
.icon-band .icon-item p { margin:0; font-size:14px; opacity:.85; }
.icon-band .icon-item .subtitle { color:#cde3ff; opacity:.9; }

/* Links inside items */
.icon-band .icon-item .icon-link { display:block; padding:12px 8px; border-radius:10px; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; text-decoration:none; color:inherit; }
.icon-band .icon-item .icon-link:hover { background:rgba(255,255,255,0.06); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.15); }

/* Tooltip */
.icon-band .icon-item .icon-link { position:relative; }
.icon-band .icon-item .icon-link::after {
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(100% + 8px);
  background:rgba(20,30,40,0.95);
  color:#e6f1ff;
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:5;
}
.icon-band .icon-item .icon-link:hover::after { opacity:1; }

/* Active state for roles band */
.roles-band .icon-item.active .icon-link { background:linear-gradient(180deg, rgba(88,166,255,0.20), rgba(88,166,255,0.10)); border:1px solid rgba(88,166,255,0.45); }
.roles-band .icon-item.active i { color:#7bb4ff; }

/* Single-line slider behavior for roles band */
.roles-band { position: sticky; top: calc(var(--nav-height, 90px)); margin-top: 12px; margin-bottom: 12px; z-index: 1200; }
.roles-band + main { padding-top: 28px; }

/* Ensure in-page anchors are not hidden behind navbar + roles band */
:target { scroll-margin-top: calc(var(--nav-height, 180px) + 48px); }
.roles-band .container { overflow-x:auto; overflow-y:hidden; position:relative; }
.roles-band .icon-band-list { flex-wrap:nowrap; justify-content:flex-start; gap:18px; scroll-snap-type:x mandatory; }
.roles-band .icon-item { flex:0 0 auto; min-width:160px; }
.roles-band .icon-item .icon-link { scroll-snap-align:start; }
.roles-band .container::-webkit-scrollbar { height:8px; }
.roles-band .container::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:8px; }
.roles-band .container::-webkit-scrollbar-track { background:transparent; }

/* Arrow buttons */
.roles-band .roles-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(20,30,40,0.65); color:#e6f1ff; border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.roles-band .roles-nav:hover { background:rgba(20,30,40,0.85); }
.roles-band .roles-nav i { font-size:16px; }
.roles-band .roles-nav.roles-nav-prev { left:8px; }
.roles-band .roles-nav.roles-nav-next { right:8px; }

@media (max-width: 576px) {
  .roles-band .roles-nav { display:none; }
}

@media (max-width: 576px) {
  .icon-band .icon-band-list { justify-content:center; }
}

/* Homepage: show roles-band in normal flow */
.home .roles-band { position: relative; top: 0; margin-top: 8px; z-index: 1200; }
.home .roles-band + main { padding-top: 0; }

/* When roles-band is placed inside the navbar, keep it in normal flow under menus */
.navbar .roles-band { position: relative; top: 0; margin-top: 10px; margin-bottom: 12px; z-index: 1200; }