/* ------------------------------
   Header appearance states
------------------------------ */
.site-header {
  background-color: transparent;
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

body.has-scrolled .site-header {
  background-color: rgba(20, 40, 60, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

body.has-scrolled.header-settled .site-header {
  background-color: rgba(18, 22, 26, 0.9);
}

/* ------------------------------
   Top offset variables (set by JS)
------------------------------ */
:root{
  --fps-header-h: 0px;
  --fps-admin-h: 0px;
  --fps-top-offset: 160px; /* safe fallback until JS runs */
}

/* Push content below sticky header while background stays full-bleed */
.fps-topband{
  padding-top: var(--fps-top-offset) !important;
}

/* ------------------------------
   Platform diagram interactions
------------------------------ */
.fps-diagram-panel{
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fps-diagram-panel:hover{
  transform: translateY(-8px);
}

/* Icons: only if you have applied class "fps-icon" to the icon widgets */
.fps-icon{
  transition: color 0.25s ease, transform 0.25s ease;
}

.fps-diagram-panel:hover .fps-icon{
  color: #58B368 !important;
  transform: scale(1.06);
}