/* ==================================================================
   Atlas Sun Systems — sticky header

   The source header is pinned to the top of the viewport and reclaims
   its own height once the reader starts moving: the top bar folds to
   nothing, the bar goes 96px -> 80px, the logo 72px -> 56px, and the
   resting hairline is traded for a soft shadow. All of it over 500ms,
   which is what makes it read as one movement rather than four.

   Only the scroll state is scripted; every value here is CSS.
   ================================================================== */

/* Pinned, not merely relative. `body` is on the selector because the child
   theme sets `position: relative` here at the same specificity and loads
   after this file. Sticky still establishes the containing block the mega
   menu panels are anchored to, so that behaviour is unchanged. */
body header.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* 1 · The top bar folds away.
      Its height is content-driven, and `auto` cannot be transitioned, so the
      script measures it once into --atlas-topbar-h and CSS animates between
      that and zero. */
.elementor .site-header-topbar-s {
    height: var(--atlas-topbar-h, auto);
    overflow: hidden;
    transition: height .5s ease, opacity .5s ease;
}

.atlas-header-scrolled .site-header-topbar-s {
    height: 0;
    opacity: 0;
}

/* 2 · The hairline becomes a shadow.
      Elementor draws the resting border as a box-shadow, so the two are the
      same property and cross-fade instead of stacking. */
.elementor .site-header-main-s {
    transition: box-shadow .5s ease;
}

.atlas-header-scrolled .site-header-main-s {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

/* 3 · The bar and the logo give back height.
      Desktop only — the mobile bar is already compact, and shrinking it
      further would make the logo jump on every scroll. */
.elementor .header-bar-inner-s { transition: min-height .5s ease; }
.elementor .header-logo-s { transition: height .5s ease, width .5s ease; }

@media (min-width: 1024px) {
    .atlas-header-scrolled .header-bar-inner-s { min-height: 80px; }

    /* 111x72 in the source; the width follows so the mark keeps its shape. */
    .atlas-header-scrolled .header-logo-s {
        height: 56px;
        width: 86px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor .site-header-topbar-s,
    .elementor .site-header-main-s,
    .elementor .header-bar-inner-s,
    .elementor .header-logo-s { transition: none; }
}