/*=============================================
    STICKY HEADER — browning
    Widget: classes/widgets/Header/header.php
    Script: assets/js/header-sticky.js

    The header drops out of the flow past a set scroll depth, then hides on the
    way down and slides back on the way up.

    THREE THINGS HERE EXIST TO STOP IT SHAKING, and none of them are decoration:

      1. The reveal is a `transform`, never `top` or `margin-top`. A transform
         is composited — it neither reflows nor repaints the page, so it holds
         60fps while the page under it is scrolling. Animating `top` re-lays out
         the document on every frame, which is the classic juddering header.

      2. .main-header__spacer holds the header's height in the flow the instant
         it goes fixed. Without it the page yanks upward by the header's height
         at the switch, which reads as a jolt exactly when the eye is on it.

      3. .is-instant kills the transition for the single frame the header goes
         fixed on. It enters already translated out of view, so without this it
         would visibly animate up and away at the moment it sticks.

    Loaded only where the widget is used (get_style_depends).
=============================================*/

.main-header__spacer {
    display: none;
}

.main-header__spacer.is-active {
    display: block;
}

.main-header.is-sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--mh-sticky-z, 999);
    width: 100%;
    background-color: var(--mh-sticky-bg, #16293a);
    box-shadow: var(--mh-sticky-shadow, 0 .7vw 2vw rgba(10, 20, 30, .18));
    transform: translateY(0);
    transition: transform var(--mh-sticky-speed, .35s) cubic-bezier(.22, 1, .36, 1);
    /* promotes the header to its own layer, so the scrolling page under it
       never forces it to repaint mid-slide */
    will-change: transform;
}

.main-header.is-sticky.is-hidden {
    transform: translateY(-100%);
}

/* ============ Compact bar ============
   WHAT ACTUALLY SETS THE HEIGHT. The theme gives .main-header no height of its
   own on desktop — the bar is as tall as its tallest child, and that child is
   the logo (346x111 natural). Trimming padding therefore does nothing on its
   own: the logo has to come down with the bar.

   So the height is stated outright and the three wrappers are told to fill it.
   .main-header__container is already a centred grid, so everything inside lands
   on the middle of whatever height is set, and there is no need to know where
   the theme keeps its vertical spacing. */
.main-header.is-sticky {
    height: var(--mh-sticky-h, 96px);
}

.main-header.is-sticky .main-header__nav,
.main-header.is-sticky .main-header__inner,
.main-header.is-sticky .main-header__container {
    height: 100%;
}

/* width:auto keeps the ratio against the capped height. Kept a little under the
   bar so the logo sits inside it rather than filling it edge to edge. */
.main-header.is-sticky .main-header__logo img {
    max-height: var(--mh-sticky-logo, 62px);
    width: auto;
}

/* the band is drawn to the full-size logo's proportions and reads as a stray
   rule once the logo is this small */
.main-header.is-sticky .main-header__logo-band {
    display: none;
}

/* the frame it goes fixed on — see note 3 in the header */
.main-header.is-instant {
    transition: none;
}

/* Nothing moves on its own here: the header still sticks, it just appears and
   disappears rather than sliding. */
@media (prefers-reduced-motion: reduce) {

    .main-header.is-sticky {
        transition: none;
    }
}