/*
 * Header front-end styles.
 *
 * Controls the main Elementor sticky header, its compact state on scroll,
 * and the logo swap between the large and small header versions.
 */

/*
 * Main header container.
 *
 * This class must be added to the main Elementor header container.
 * It controls the transition between the normal header and the compact sticky header.
 */
.bm-main-header {
  transition:
    min-height 0.25s ease,
    padding 0.25s ease,
    box-shadow 0.25s ease;
}

/*
 * Compact sticky header state.
 *
 * Elementor adds the .elementor-sticky--effects class after the scroll distance
 * defined in Advanced > Motion Effects > Effects Offset.
 *
 * This state reduces the header height, reduces vertical padding,
 * and adds a subtle shadow to separate the header from the page content.
 */
.bm-main-header.elementor-sticky--effects {
  min-height: 48px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/*
 * Shared logo image behavior.
 *
 * Only logo images are targeted here, instead of all images inside the header.
 * This avoids accidentally resizing icons or other header images.
 */
.bm-main-header .bm-logo-header-large img,
.bm-main-header .bm-logo-header-small img {
  width: auto;
}

/*
 * Large logo before scroll.
 *
 * The large logo is visible in the normal header state.
 */
.bm-main-header .bm-logo-header-large {
  display: block;
}

/*
 * Small logo before scroll.
 *
 * The small logo is fully removed from the layout before the sticky state.
 * This is a real layout swap, not just a visual opacity change.
 */
.bm-main-header .bm-logo-header-small {
  display: none;
}

/*
 * Large logo in compact sticky state.
 *
 * The large logo is removed from the layout once the header becomes compact.
 * This allows the header height to actually shrink.
 */
.bm-main-header.elementor-sticky--effects .bm-logo-header-large {
  display: none;
}

/*
 * Small logo in compact sticky state.
 *
 * The small logo replaces the large logo in the layout.
 */
.bm-main-header.elementor-sticky--effects .bm-logo-header-small {
  display: block;
}

/*
 * Small logo image size in compact sticky state.
 *
 * This keeps the sticky header visually compact.
 */
.bm-main-header.elementor-sticky--effects .bm-logo-header-small img {
  max-height: 42px;
  width: auto;
}

/*
 * Smooth main menu font-size transition.
 */
.bm-main-header .bm-menu-header .elementor-nav-menu {
  transition: font-size 0.25s ease;
}

/*
 * Reduce main menu font size in compact sticky header state.
 */
.bm-main-header.elementor-sticky--effects .bm-menu-header .elementor-item {
  font-size: 20px !important;
}

.bm-main-header.elementor-sticky--effects .bm-contact-header .elementor-button-text,
.bm-main-header.elementor-sticky--effects .elementor-button-icon i{
  font-size: 20px !important;
}