/* ====================================
   HEADER STYLING (STATE-BASED CONTROL)
   Controls logo visibility, header background,
   button and burger styling across 3 scroll states.
==================================== */

/* === 1) LOGO VISIBILITY === */
/* Default: only logo-1 is visible; others are hidden until activated */
.logo-2,
.logo-3 {
  display: none;
}

.logo-1,
.logo-2,
.logo-3 {
  transition: opacity 0.3s;
}

/* Force logo display when active */
.logo-active {
  display: block !important;
  opacity: 1 !important;
}

/* === 2) HEADER BACKGROUND === */
/* Smooth background transition between scroll states */
.site-header {
  transition: background 0.3s;
}

/* Transparent background for top and mid scroll states */
.site-header.state-0 {
  background: transparent;
}
.site-header.state-1 {
  background: transparent;
}

/* Solid background after scroll threshold */
.site-header.state-2 {
  background: #f9f9f7;
}

/* === 3) HEADER BUTTON STYLING === */
/* Color and background change by scroll state */
.header-btn {
  transition: color 0.3s, background-color 0.3s;
}

.header-btn.state-0,
.header-btn.state-1 {
  color: #082337 !important;
  background-color: #deecec !important;
}

.header-btn.state-2 {
  color: #deecec !important;
  background-color: #082337 !important;
}

/* === 4) BURGER ICON COLOR === */
/* Adjust burger icon visibility depending on background contrast */
.header-burger {
  transition: color 0.3s;
}

.header-burger.state-0,
.header-burger.state-1 {
  color: #deecec !important;
}

.header-burger.state-2 {
  color: #082337 !important;
}