/* ==========================================================================
   Header Component
   ========================================================================== */
[data-component-id="livmarli:header"] {
  --bg-opacity: 0;

  &.header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    transition: transform var(--transition-base);
  }

  /* WCAG 1.4.10 reflow: at 200%+ zoom on a desktop, the viewport shrinks
     enough that a sticky header consumes too much vertical space.
     200% on 1920×1080 = 960×540; 200% on 1280×1024 = 640×512.
     The dual constraint (small width AND small height) avoids triggering
     on mobile portrait (tall) or tablet landscape (wide). */
  @media (max-width: 960px) and (max-height: 540px) {
    &.header {
      position: relative;
    }
  }

  /* @media (min-width: 1024px) {  
    .header-center {
      position: relative;
      z-index: 10;
    }
  } */

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    opacity: var(--bg-opacity);
    /* transition: opacity var(--transition-base); */
    z-index: -1;
  }

  &.header--hidden {
    transform: translateY(-100%);
  }

  &::after {
    content: ''
  }

  &.is-scrolled {
    --bg-opacity: 1;
    &::before {
      opacity: 1;
    }
  }

  body:not(.front) & {
    --bg-opacity: 1;
  }
}