/* ==========================================================================
   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);
    background-color: var(--color-white);

    /* WCAG 1.4.10 reflow: at 400% zoom on a desktop, viewport shrinks to
       roughly 320×256 (1280×1024 baseline) up to 480×270 (1920×1080).
       Mobile portrait is tall, mobile landscape is wide — only zoomed
       desktop matches both small width AND small height. */
    @media (max-width: 600px) and (max-height: 400px) {
      position: relative;
  }

  &::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;
    }
  }

}