/* Layout Scaffolding and Page Structure */

.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 40px; /* Matches main-content horizontal padding for perfect alignment */
  background: transparent;
  z-index: 1000;
  pointer-events: none; /* Transparent wrapper lets mouse events pass through */
}

/* Reactivate pointer events on the pills inside the header */
.site-header > * {
  pointer-events: auto;
}

.site-header-right {
  display: flex;
  justify-content: flex-end;
}

/* Main Page Layout Container */
.page-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 140px; /* Places content exactly 40px under the header pills (100px bottom + 40px gap) */
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
}

/* Universal Footer Layout */
.site-footer {
  width: 100%;
  height: 100px;
  margin-top: 0;
  padding: 0;
}