/* =========================================
   ADMIN BAR OFFSET
   ========================================= */
body.admin-bar .site-header,
body.admin-bar .site-header-mobile {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .site-header-mobile {
    top: 46px;
  }
}

/* =========================================
   WIPE SYSTEM — header animation foundation
   ========================================= */
.site-header,
.site-header-mobile {
  --wipe: 0%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  isolation: isolate;
  background: transparent;
  z-index: 9999;
}

.site-header > *,
.site-header-mobile > * {
  position: relative;
  z-index: 2;
}

.site-header::before,
.site-header-mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  pointer-events: none;
}

.site-header::after,
.site-header-mobile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #ffffff;
  clip-path: inset(calc(100% - var(--wipe)) 0 0 0);
  will-change: clip-path;
  pointer-events: none;
}

/* =========================================
   LOGO LAYERS
   ========================================= */
.site-logo-wipe {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  max-height: 100%;
  line-height: 0;
  max-width: 77px;
}

.site-logo-measure {
  display: block;
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 77px;
}

.site-logo-layer {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 77px;
  pointer-events: none;
}

.site-logo--black {
  clip-path: inset(0 0 var(--wipe) 0);
  will-change: clip-path;
}

.site-logo--white {
  clip-path: inset(calc(100% - var(--wipe)) 0 0 0);
  will-change: clip-path;
}

.site-header-mobile__logo {
  display: flex;
  align-items: center;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  flex: 0 1 auto;
}

.site-header-mobile__logo-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.site-header-mobile__inner {
  height: 100%;
  min-height: 0;
}