/*
 * Upcuan v1.0.0.3
 * Transparent top navbar + transparent homepage hero content surface.
 * The configured admin gradient is applied to the navbar only after scroll.
 */

/* Keep every navbar surface transparent while the page is at the top. */
#header.upc-header:not(.header-scrolled),
#header.upc-header:not(.header-scrolled) .upc-header-inner,
#header.upc-header:not(.header-scrolled) .upc-navbar,
#header.upc-header:not(.header-scrolled) .upc-utility-nav,
#header.upc-header:not(.header-scrolled) .upc-tools,
#header.upc-header:not(.header-scrolled) .upc-account-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Once scrolled, the header follows the two gradient colours configured in
   Website > Appearance. Child wrappers remain transparent so no white strip
   can cover the gradient. */
#header.upc-header.header-scrolled {
  background-color: var(--upc-header-color, #274685) !important;
  background-image: linear-gradient(
    to right,
    var(--upc-gradient-header-start, rgba(39,70,133,.94)) 0%,
    var(--upc-gradient-header-end, rgba(61,179,197,.94)) 100%
  ) !important;
  box-shadow: 0 2px 18px rgba(0,0,0,.08) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#header.upc-header.header-scrolled .upc-header-inner,
#header.upc-header.header-scrolled .upc-navbar,
#header.upc-header.header-scrolled .upc-utility-nav,
#header.upc-header.header-scrolled .upc-tools,
#header.upc-header.header-scrolled .upc-account-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Remove the pale/white rectangle that can be inherited by the homepage
   hero's centered container from OJS/core/custom styles. The hero gradient
   itself remains on .hero-section and therefore stays visible behind it. */
#hero.hero-section > .container.hero-container,
#hero.hero-section .hero-container,
#hero.hero-section .hero-row,
#hero.hero-section .hero-copy,
#hero.hero-section .upc-homepage-image-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

/* Defend against site-level CSS that assigns an overlay using pseudo-elements
   to the hero's inner wrappers. */
#hero.hero-section > .container.hero-container::before,
#hero.hero-section > .container.hero-container::after,
#hero.hero-section .hero-row::before,
#hero.hero-section .hero-row::after,
#hero.hero-section .hero-copy::before,
#hero.hero-section .hero-copy::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}