/* ==========================================================================
   Custom Sticky Header — sticky-header.css

   Design tokens (--csh-*) are injected as an inline <style> block by PHP
   using values from the Customizer. The fallback values here apply only if
   the inline block fails to load (e.g. when viewing the raw CSS file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Token Fallbacks
   (Real values come from the PHP inline block — see csh_build_token_css())
   -------------------------------------------------------------------------- */
:root {
  --csh-sticky-bg          : rgba(255, 255, 255, 1);
  --csh-sticky-z           : 999;
  --csh-sticky-shadow      : 0 2px 8px rgba(0, 0, 0, 0.1);
  --csh-sticky-border      : none;
  --csh-bar-bg             : inherit;
  --csh-mobile-sticky-bg   : rgba(255, 255, 255, 1);
  --csh-logo-fade-duration : 0.18s;
  --csh-logo-fade-easing   : ease;
  --csh-bar-transition     : background-color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Desktop Sticky — outer wrapper
   `left: 0` anchors the fixed element to the true viewport left edge.
   Without it, `position: fixed` uses the element's original in-flow offset,
   which leaves a visible gap on the left at some viewport widths.
   -------------------------------------------------------------------------- */
@media (min-width: 922px) {
  #ast-desktop-header.sticky {
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    background-color : var(--csh-sticky-bg);
    z-index          : var(--csh-sticky-z);
    box-shadow       : var(--csh-sticky-shadow);
    border-bottom    : var(--csh-sticky-border);
  }
}

/* --------------------------------------------------------------------------
   Desktop Sticky — inner row background gap fix
   Astra renders the visible coloured bar on .ast-primary-header-bar and
   .site-primary-header-wrap, not on the outer #ast-desktop-header wrapper.
   Setting background-color: inherit here makes them match the outer wrapper
   automatically, closing the left/right edge gap.
   -------------------------------------------------------------------------- */
@media (min-width: 922px) {
  #ast-desktop-header.sticky .ast-primary-header-bar,
  #ast-desktop-header.sticky .site-primary-header-wrap {
    background-color : var(--csh-bar-bg);
    transition       : var(--csh-bar-transition);
  }
}

/* --------------------------------------------------------------------------
   Mobile / Tablet Sticky
   Only applies when csh_mobile_enabled is checked in the Customizer.
   The JS removes .sticky from #ast-mobile-header when mobile is disabled,
   so these rules are effectively inactive in that case.
   -------------------------------------------------------------------------- */
@media (max-width: 921px) {
  #ast-mobile-header.sticky {
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    background-color : var(--csh-mobile-sticky-bg);
    z-index          : var(--csh-sticky-z);
    box-shadow       : var(--csh-sticky-shadow);
  }

  #ast-mobile-header.sticky .ast-primary-header-bar,
  #ast-mobile-header.sticky .site-primary-header-wrap,
  #ast-mobile-header.sticky .ast-mobile-header-wrap {
    background-color : var(--csh-bar-bg);
    transition       : var(--csh-bar-transition);
  }
}

/* --------------------------------------------------------------------------
   Logo Swap
   JS injects <img class="csh-sticky-logo"> adjacent to the default logo
   and adds .csh-default-logo to the existing logo <img>.
   CSS handles the toggle — no JS DOM writes on every scroll event.
   -------------------------------------------------------------------------- */

/* Sticky logo hidden by default */
.csh-sticky-logo {
  display : none;
}

/* Default logo always visible unless a sticky logo is configured */
.csh-default-logo {
  display : block;
}

/* Desktop — swap on scroll */
@media (min-width: 922px) {
  #ast-desktop-header.sticky .csh-sticky-logo  { display : block; }
  #ast-desktop-header.sticky .csh-default-logo { display : none;  }
}

/* Mobile — swap on scroll */
@media (max-width: 921px) {
  #ast-mobile-header.sticky .csh-sticky-logo  { display : block; }
  #ast-mobile-header.sticky .csh-default-logo { display : none;  }
}