/**
 * Title: Sticky Header Styles
 *
 * Description:
 * Creates a transparent sticky Elementor header over the hero section and
 * changes its background, navigation, hamburger, and WPML colors when the
 * header receives the "is-scrolled" class.
 */

/* =========================================================
   1. SITE CONFIGURATION
   Edit these values when adapting the component to another site.
   ========================================================= */

:root {
  /* Runtime value: JavaScript replaces 0px with the rendered header height. */
  --header-height: 0px;

  /* Header structure */
  --header-z-index: 9999;

  /* Header appearance */
  --header-background-default: transparent;
  --header-background-scrolled: var(--warm-ivor, #f4efe6);
  --header-shadow-default: none;
  --header-shadow-scrolled: 0 4px 18px rgb(0 0 0 / 8%);

  /* Header colors */
  --header-color-default: var(--color-white, #ffffff);
  --header-color-scrolled: var(--color-black, #222222);
  --header-accent-color: var(--color-red, #a21c26);

  /* Header transitions */
  --header-transition-duration: 400ms;
  --header-transition-easing: ease;

  /* WPML language switcher */
  --header-language-separator-spacing: 0.45em;
  --header-language-separator-opacity: 0.6;
  --header-language-hover-opacity: 0.65;
}

/* =========================================================
   2. STICKY OVERLAY HEADER
   ========================================================= */

header.elementor-location-header {
  position: sticky !important;
  top: 0;
  z-index: var(--header-z-index);

  width: 100%;
  margin-bottom: calc(var(--header-height) * -1);

  background-color: var(--header-background-default);
  box-shadow: var(--header-shadow-default);

  transition:
    background-color var(--header-transition-duration)
      var(--header-transition-easing),
    box-shadow var(--header-transition-duration)
      var(--header-transition-easing);
}

/* Keep Elementor's inner header container transparent. */
header.elementor-location-header > .e-con {
  background-color: transparent !important;
}

header.elementor-location-header.is-scrolled {
  background-color: var(--header-background-scrolled);
  box-shadow: var(--header-shadow-scrolled);
}

/* =========================================================
   3. HERO SECTION
   Assign the "hero-section" class to the main hero container.
   ========================================================= */

.hero-section {
  padding-top: var(--header-height);
}

/* =========================================================
   4. HORIZONTAL NAVIGATION
   ========================================================= */

header.elementor-location-header
  .elementor-nav-menu--main
  .elementor-item {
  color: var(--header-color-default);
  transition:
    color var(--header-transition-duration)
      var(--header-transition-easing);
}

header.elementor-location-header
  .elementor-nav-menu--main
  .elementor-item:hover,
header.elementor-location-header
  .elementor-nav-menu--main
  .elementor-item:focus {
  color: var(--header-accent-color);
}

header.elementor-location-header.is-scrolled
  .elementor-nav-menu--main
  .elementor-item {
  color: var(--header-color-scrolled);
}

header.elementor-location-header.is-scrolled
  .elementor-nav-menu--main
  .elementor-item:hover,
header.elementor-location-header.is-scrolled
  .elementor-nav-menu--main
  .elementor-item:focus {
  color: var(--header-accent-color);
}

/* Make submenu arrows inherit the associated link color. */
header.elementor-location-header
  .elementor-nav-menu--main
  .elementor-item
  .sub-arrow,
header.elementor-location-header
  .elementor-nav-menu--main
  .elementor-item
  .sub-arrow
  svg,
header.elementor-location-header
  .elementor-nav-menu--main
  .elementor-item
  .sub-arrow
  svg
  path {
  color: inherit;
  fill: currentColor;
}

/* =========================================================
   5. HAMBURGER TOGGLE
   ========================================================= */

header.elementor-location-header
  .elementor-nav-menu--burger
  .elementor-menu-toggle,
header.elementor-location-header
  .elementor-nav-menu--burger
  .elementor-menu-toggle.elementor-active {
  color: var(--header-color-default);
  background-color: transparent;

  transition:
    color var(--header-transition-duration)
      var(--header-transition-easing),
    background-color var(--header-transition-duration)
      var(--header-transition-easing);
}

header.elementor-location-header
  .elementor-nav-menu--burger
  .elementor-menu-toggle:hover,
header.elementor-location-header
  .elementor-nav-menu--burger
  .elementor-menu-toggle:focus {
  color: var(--header-accent-color);
  background-color: transparent;
}

header.elementor-location-header.is-scrolled
  .elementor-nav-menu--burger
  .elementor-menu-toggle,
header.elementor-location-header.is-scrolled
  .elementor-nav-menu--burger
  .elementor-menu-toggle.elementor-active {
  color: var(--header-color-scrolled);
  background-color: transparent;
}

header.elementor-location-header.is-scrolled
  .elementor-nav-menu--burger
  .elementor-menu-toggle:hover,
header.elementor-location-header.is-scrolled
  .elementor-nav-menu--burger
  .elementor-menu-toggle:focus {
  color: var(--header-accent-color);
}

/* Make both hamburger and close icons inherit the toggle color. */
header.elementor-location-header
  .elementor-nav-menu--burger
  .elementor-menu-toggle
  svg,
header.elementor-location-header
  .elementor-nav-menu--burger
  .elementor-menu-toggle
  svg
  path {
  fill: currentColor;
}

/* =========================================================
   6. WPML LANGUAGE SWITCHER
   ========================================================= */

header.elementor-location-header
  .wpml-ls-statics-shortcode_actions
  ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  margin: 0;
  padding: 0;

  list-style: none;
}

header.elementor-location-header
  .wpml-ls-statics-shortcode_actions
  li {
  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;

  white-space: nowrap;
}

header.elementor-location-header
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-link {
  background: transparent;
}

header.elementor-location-header
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-link,
header.elementor-location-header
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-native {
  color: var(--header-color-default);

  transition:
    color var(--header-transition-duration)
      var(--header-transition-easing),
    opacity 200ms ease;
}

header.elementor-location-header.is-scrolled
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-link,
header.elementor-location-header.is-scrolled
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-native {
  color: var(--header-color-scrolled) !important;
}

header.elementor-location-header
  .wpml-ls-statics-shortcode_actions
  li:not(:last-child)::after {
  content: "|";

  display: inline-block;
  margin: 0 var(--header-language-separator-spacing);

  color: var(--header-color-default);
  opacity: var(--header-language-separator-opacity);

  transition:
    color var(--header-transition-duration)
      var(--header-transition-easing);
}

header.elementor-location-header.is-scrolled
  .wpml-ls-statics-shortcode_actions
  li:not(:last-child)::after {
  color: var(--header-color-scrolled);
}

header.elementor-location-header
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-link:hover {
  opacity: var(--header-language-hover-opacity);
}

/* Preserve the original behavior: highlight the active language after scroll. */
header.elementor-location-header.is-scrolled
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-current-language
  .wpml-ls-link,
header.elementor-location-header.is-scrolled
  .wpml-ls-statics-shortcode_actions
  .wpml-ls-current-language
  .wpml-ls-native {
  color: var(--header-accent-color) !important;
}

/* =========================================================
   7. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  header.elementor-location-header,
  header.elementor-location-header
    .elementor-nav-menu--main
    .elementor-item,
  header.elementor-location-header
    .elementor-nav-menu--burger
    .elementor-menu-toggle,
  header.elementor-location-header
    .wpml-ls-statics-shortcode_actions
    .wpml-ls-link,
  header.elementor-location-header
    .wpml-ls-statics-shortcode_actions
    .wpml-ls-native,
  header.elementor-location-header
    .wpml-ls-statics-shortcode_actions
    li:not(:last-child)::after {
    transition-duration: 0.01ms !important;
  }
}