/* Shared header fixes + active nav indicator (used by index.html + galeria.html) */

/* 1) Header background (Salient paints multiple layers; override them all) */
:root {
  --nasoni-header-bg-scrolled: rgba(26, 26, 26, 0.72);
}

/* Theme sometimes toggles classes/inline styles; don't depend on `.transparent` only */
body:not(.site-scrolled) #header-outer,
body:not(.site-scrolled) #header-outer.light-text,
body:not(.site-scrolled) #header-outer::before,
body:not(.site-scrolled) #header-outer::after,
body:not(.site-scrolled) #header-space,
body:not(.site-scrolled) #header-space::before,
body:not(.site-scrolled) #header-space::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Salient often paints the *white* on inner header layers (not #header-outer itself) */
body:not(.site-scrolled) #header-outer header#top,
body:not(.site-scrolled) #header-outer.light-text header#top,
body:not(.site-scrolled) #header-outer header#top .container,
body:not(.site-scrolled) #header-outer header#top .row,
body:not(.site-scrolled) #header-outer header#top .col,
body:not(.site-scrolled) #header-outer header#top .col.span_3,
body:not(.site-scrolled) #header-outer header#top .col.span_9,
body:not(.site-scrolled) #header-outer header#top nav,
body:not(.site-scrolled) #header-outer header#top .logo-spacing {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Material: `#search-outer::before` is full-bleed `#fff`. Hide visually without `content:none` (that shrinks the header). */
body:not(.site-scrolled) #header-outer:not(.material-search-open) #search-outer:not(.material-open)::before {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.site-scrolled) #header-outer #search-outer {
  background: transparent !important;
  background-color: transparent !important;
}

body:not(.site-scrolled) #search-outer .bg-color-stripe {
  display: none !important;
  background-color: transparent !important;
}

/* Salient “color stripe” — white `#fff` + tall box in Material; never paint it (JS also forces `display:none`). */
body:not(.site-scrolled) #header-outer .bg-color-stripe,
body:not(.site-scrolled) #header-outer .bg-color-stripe::before,
body:not(.site-scrolled) #header-outer .bg-color-stripe::after {
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* When scrolled: dark translucent + blur (beat Salient `.transparent { background-color: transparent }`) */
body.site-scrolled #header-outer,
body.site-scrolled #header-outer.transparent,
body.site-scrolled #header-outer.light-text,
body.site-scrolled #header-outer.transparent.light-text,
body.site-scrolled #header-outer::before,
body.site-scrolled #header-outer::after,
body.site-scrolled #header-space,
body.site-scrolled #header-space::before,
body.site-scrolled #header-space::after {
  background: var(--nasoni-header-bg-scrolled) !important;
  background-color: var(--nasoni-header-bg-scrolled) !important;
}

/* Galeria mobile: remove the spacer “white bar” behind the transparent header.
   The visual gap is caused by `#header-space` occupying height at the top of the page. */
body.nasoni-galeria #header-space,
body.nasoni-galeria #header-space::before,
body.nasoni-galeria #header-space::after {
  background: transparent !important;
  background-color: transparent !important;
}

/* On galeria, the hero already has its own top padding; drop the spacer entirely to avoid a visible band. */
body.nasoni-galeria #header-space {
  display: none !important;
  height: 0 !important;
}

/* Keep inner layout transparent when scrolled. The right column (`.span_9`) is taller than the slim bar
   (logo + “between menu” layout); giving it the same rgba as `#header-outer` drew a second translucent slab
   beside the logo that hung below the bar. Only `#header-outer` (and its ::before/::after) should tint. */
body.site-scrolled #header-outer header#top,
body.site-scrolled #header-outer header#top .container,
body.site-scrolled #header-outer header#top .row,
body.site-scrolled #header-outer header#top .col,
body.site-scrolled #header-outer header#top nav,
body.site-scrolled #header-outer header#top .logo-spacing {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Salient uses a tall `.bg-color-stripe` (e.g. 30vh) on transparent headers — coloring it when scrolled
   draws an extra slab next to the logo; the real bar is `#header-outer`, so hide the stripe when scrolled. */
body.site-scrolled #header-outer .bg-color-stripe {
  display: none !important;
}

body.site-scrolled #header-outer.transparent,
body.site-scrolled #header-outer {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Improve nav readability when header is dark */
body.site-scrolled #header-outer nav ul.sf-menu > li > a,
body.site-scrolled #header-outer nav ul.sf-menu > li > a .menu-title-text {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Ensure WPML flag doesn't get dimmed by theme states */
body.site-scrolled #header-outer nav ul.sf-menu img.wpml-ls-flag {
  opacity: 0.95;
}

/* 2) Active navbar indicator */
#header-outer nav {
  position: relative;
}

#header-outer nav ul.sf-menu {
  position: relative;
  z-index: 5;
}

/* Remove theme underline lines under menu text (we replace them with the active-element bar). */
#header-outer nav ul.sf-menu li a,
#header-outer nav ul.sf-menu li a .menu-title-text {
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

#header-outer nav ul.sf-menu li a::after,
#header-outer nav ul.sf-menu li a .menu-title-text::after,
#header-outer nav ul.sf-menu li a span::after {
  content: none !important;
  display: none !important;
}

#header-outer nav .active-element {
  --active-element-show: 0;
  position: absolute;
  left: 0;
  height: 2px;
  width: 36px;
  border-radius: 2px;
  opacity: var(--active-element-show);
  pointer-events: none;
  z-index: 1; /* stays behind centered logo image */
  filter: none;
  /* Smooth slide between links (WAAPI click animation uses `.is-animating`, which disables transitions). */
  transition:
    left 0.45s cubic-bezier(0.2, 0.9, 0.2, 1),
    width 0.45s cubic-bezier(0.2, 0.9, 0.2, 1),
    top 0.25s ease,
    opacity 0.2s ease;

  /* Default bar color: readable on hero image and dark header */
  background-color: rgba(255, 255, 255, 0.88);

  /* Hide underline behind center logo area */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 var(--nav-logo-left, 0px),
    transparent var(--nav-logo-left, 0px),
    transparent var(--nav-logo-right, 0px),
    #000 var(--nav-logo-right, 0px),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 var(--nav-logo-left, 0px),
    transparent var(--nav-logo-left, 0px),
    transparent var(--nav-logo-right, 0px),
    #000 var(--nav-logo-right, 0px),
    #000 100%
  );
}

/* Slightly brighter when scrolled for crispness */
body.site-scrolled #header-outer nav .active-element {
  background-color: rgba(255, 255, 255, 0.92);
}

#header-outer nav .active-element.is-animating {
  transition: none;
  will-change: transform, width, left, top;
}

/*
 * Galeria: only in Salient’s “ext header” band (1000–1410px) is the hamburger required; the theme hides
 * `#top .span_9 > .slide-out-widget-area-toggle` elsewhere. A global `display:flex !important` forces the icon
 * on wide desktop next to the full menu — don’t do that.
 */
@media only screen and (min-width: 1000px) and (max-width: 1410px) {
  body.nasoni-galeria:not(.site-scrolled) #header-outer #top .span_9 > .slide-out-widget-area-toggle,
  body.nasoni-galeria.site-scrolled #header-outer #top .span_9 > .slide-out-widget-area-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 200;
  }
}

/* Twin logos: Salient normally keys off the first row’s `data-midnight`; gallery hero is custom HTML. */
body.nasoni-galeria:not(.site-scrolled) #header-outer #logo img.dark-version {
  opacity: 0 !important;
}
body.nasoni-galeria:not(.site-scrolled) #header-outer #logo .starting-logo {
  opacity: 1 !important;
}
body.nasoni-galeria.site-scrolled #header-outer #logo img.dark-version {
  opacity: 1 !important;
}
body.nasoni-galeria.site-scrolled #header-outer #logo .starting-logo {
  opacity: 0 !important;
}