/* ==========================================================================
   DIVLAB HEADER — the stylesheet for dvl-header.js
   --------------------------------------------------------------------------
   Small on purpose. The behaviour is in the script; this file exists for the
   two things a script cannot do for itself.
   ========================================================================== */

/* ==========================================================================
   1. NO CSS TRANSITION ON THIS ELEMENT, EVER
   --------------------------------------------------------------------------
   This is load-bearing, not tidying.

   A RUNNING CSSTransition silently overrides an inline style. The value is
   present in the style attribute and `getComputedStyle` reports the
   transition's own value instead, so the element does not move and nothing
   anywhere reports an error. dvl-stage.css documents the same trap, and it
   is what the "header leaks into the next section" bug turned out to be.

   Elementor is the source here: `.e-con` carries a five-property transition
   shorthand through a `:where()` rule, which has ZERO specificity but still
   applies, and the Theme Builder header sits inside one.

   dvl-stage.css already carries this rule — but that stylesheet only loads
   on the homepage, and dvl-header.js runs on every page. Repeated here so
   the other pages are covered. Harmless where both are present: they say
   the same thing.
   ========================================================================== */
.dvl-header,
header.elementor-location-header {
  transition: none !important;
}

/* ==========================================================================
   2. THE NOTCH INSET, CARRIED INTO JAVASCRIPT
   --------------------------------------------------------------------------
   env() cannot be read from script. The script needs the top inset to know
   how far to travel: a fixed element at top:0 sits at the top of the LAYOUT
   viewport, which on a notched iOS device is ABOVE the status bar, so
   translating by exactly the header's height leaves whatever overhangs the
   safe area still showing in the bezel.

   Declaring it as a custom property on :root is the standard way across that
   gap — the script reads it with getComputedStyle. Resolves to 0px on every
   device without a notch, which is the common case.

   Also declared in dvl-stage.css for the homepage; same value, so either
   file may define it. */
:root {
  --dvl-safe-top: env(safe-area-inset-top, 0px);
}

/* ==========================================================================
   3. WILL-CHANGE — ON .dvl-header ONLY, AND NEVER ON THE WRAPPER
   --------------------------------------------------------------------------
   THIS SELECTOR IS NOT A STYLE CHOICE. Read before adding the wrapper back.

   The markup nests:

       <header class="elementor-location-header">   position: relative
         <div class="dvl-header">                   position: FIXED

   `will-change: transform` makes an element the CONTAINING BLOCK for any
   position:fixed descendant — the same containment a real transform creates,
   which is the entire point of the hint. Put it on the wrapper and
   .dvl-header silently stops being fixed to the VIEWPORT and becomes fixed
   to the WRAPPER, which is an ordinary zero-height box in normal flow.

   The header then scrolls up out of the viewport with the document and never
   returns, with no error and nothing in the style attribute to explain it.
   That was the bug. It needs no script to reproduce — this one declaration
   does it.

   The same applies to `transform`, `filter`, `perspective`, `contain` and
   `backdrop-filter`. None of them may be applied to an ancestor of the
   header.

   Left on permanently here, which is the thing `will-change` is usually
   warned against — but that warning is about promoting many elements, or
   ones that rarely animate. This is ONE element, already position:fixed and
   so a compositing candidate regardless, animating on essentially every
   scroll. Toggling the hint around each tween would cost a layer rebuild per
   scroll, which is worse than holding it.
   ========================================================================== */
.dvl-header {
  will-change: transform;
}

/* ==========================================================================
   4. REDUCED MOTION
   --------------------------------------------------------------------------
   The script returns early and never constructs, so the header simply stays
   where it is. This rule only guarantees that nothing is left promoted or
   displaced if the preference is changed after load.
   ========================================================================== */
   The wrapper IS listed here, unlike in section 3, and that is deliberate
   and safe: `transform: none` and `will-change: auto` are the values that
   REMOVE containment. They are the one pair that may be applied to an
   ancestor of the fixed header — and asserting them is useful insurance
   against a theme or plugin putting a transform there. */
@media (prefers-reduced-motion: reduce) {
  .dvl-header,
  header.elementor-location-header {
    transform: none !important;
    visibility: visible !important;
    will-change: auto;
  }
}

/* ==========================================================================
   5. POINTER EVENTS & INTERACTION
   --------------------------------------------------------------------------
   The Theme Builder wrapper has pointer-events: none so its zero-height box
   doesn't trap clicks. The actual header and all interactive children inside
   it must have pointer-events: auto !important so they are clickable on every
   breakpoint.
   ========================================================================== */
.dvl-header,
header.elementor-location-header .dvl-header,
.dvl-header a,
.dvl-header button,
.dvl-header .dvl-burger,
header.elementor-location-header a,
header.elementor-location-header button {
  pointer-events: auto !important;
}