/* Pixel Brandworks Animated Header v1.3.2 – original PNG assets, no logo swapping. */
/* Exactly two target layouts. CSS transitions always finish independently of scroll. */
body.pbw-header-enabled #masthead {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: #fff;
  isolation: isolate;
  /* The expanded header is flat; a subtle navy shadow is reserved for scroll. */
  box-shadow: none;
  transition: box-shadow 360ms ease;
}

body.pbw-header-enabled #masthead.pbw-header-has-scrolled {
  box-shadow: 0 6px 24px rgba(0, 45, 91, .13);
}

/* Without this, the browser can reduce scrollY while the header shrinks,
   immediately re-triggering the opposite state near the scroll threshold. */
body.pbw-header-enabled #page {
  overflow-anchor: none;
}

/* Never animate an initial state while the plugin is booting. */
body.pbw-header-booting .pbw-animated-logo,
body.pbw-header-booting .pbw-animated-logo .pbw-logo-part,
body.pbw-header-booting #masthead .pbw-header-layout,
body.pbw-header-booting #masthead {
  transition: none !important;
}

body.pbw-header-enabled.admin-bar #masthead {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Shared motion curve for the symbol, words and actual header height. */
body.pbw-header-enabled #masthead .pbw-header-layout {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  align-items: center;
  overflow: visible !important;
  transition: padding-top 520ms cubic-bezier(.25, .8, .25, 1),
              padding-bottom 520ms cubic-bezier(.25, .8, .25, 1);
}

/* Elementor adds its own 20px block padding to .e-con-inner, independently
   of the outer .e-con padding. Keep the expanded header untouched and animate
   both padding layers when the logo moves into the compact state. Only the
   actual header content wrapper is tagged by our script. */
body.pbw-header-enabled #masthead .pbw-header-content-inner {
  transition: padding-top 520ms cubic-bezier(.25, .8, .25, 1),
              padding-bottom 520ms cubic-bezier(.25, .8, .25, 1);
}

body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-header-layout,
body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-header-content-inner {
  /* No additional vertical spacing at EITHER Elementor container layer. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.pbw-header-enabled #masthead .pbw-header-logo-widget {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 100%;
  overflow: visible !important;
}

.pbw-animated-logo {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 159px;
  height: 187px;
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-decoration: none !important;
  line-height: 1;
  box-sizing: border-box;
  transition: width 520ms cubic-bezier(.25, .8, .25, 1),
              height 520ms cubic-bezier(.25, .8, .25, 1);
}

.pbw-animated-logo__scene {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pbw-animated-logo .pbw-logo-part {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  transform-origin: top left;
  object-fit: contain;
  transition: width 520ms cubic-bezier(.25, .8, .25, 1),
              left 520ms cubic-bezier(.25, .8, .25, 1),
              top 520ms cubic-bezier(.25, .8, .25, 1),
              transform 520ms cubic-bezier(.25, .8, .25, 1);
}

/* State A: original emblem, PIXEL above, BRAND below, WORKS on the right. */
.pbw-animated-logo .pbw-logo-part--icon {
  width: 127.5px;
  left: 0;
  top: 29.6px;
}

.pbw-animated-logo .pbw-logo-part--pixel {
  width: 99.2px;
  left: .8px;
  top: 0;
}

.pbw-animated-logo .pbw-logo-part--brand {
  width: 118.7px;
  left: 40px;
  top: 166.2px;
}

.pbw-animated-logo .pbw-logo-part--works {
  width: 127.5px;
  left: 136.8px;
  top: 157.1px;
  transform: rotate(-90deg);
}

/* State B: same original elements, now re-arranged next to the smaller icon. */
body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-animated-logo {
  width: 310px;
  height: 56px;
}

body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--icon {
  width: 44px;
  left: 0;
  top: 8px;
}

body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--pixel {
  width: 64.3px;
  left: 56px;
  top: 21px;
}

body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--brand {
  width: 80.5px;
  left: 132px;
  top: 21px;
}

body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--works {
  width: 82.7px;
  left: 217px; /* ~4.5px visual gap to BRAND, not a word space */
  top: 21px;
  transform: rotate(0deg);
}

.pbw-animated-logo:focus-visible {
  outline: 2px solid #713189;
  outline-offset: 5px;
}

/* Elementor/Astra tablet breakpoint: 1024px. Use the compact arrangement
   at all widths where the large logo competes with responsive navigation. */
@media (max-width: 1024px),
       (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  body.pbw-header-enabled #masthead .pbw-header-layout,
  body.pbw-header-enabled #masthead .pbw-header-content-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: none !important;
  }
  /* On a device/orientation change, never show the large mark temporarily. */
  .pbw-animated-logo,
  .pbw-animated-logo .pbw-logo-part {
    transition: none !important;
  }
  .pbw-animated-logo,
  body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-animated-logo {
    width: 310px;
    height: 56px;
  }
  /* Override BOTH the initial layout and the desktop scroll selector.
     CSS owns responsive layout; JS only toggles desktop scroll state. */
  .pbw-animated-logo .pbw-logo-part--icon,
  body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--icon {
    width: 44px;
    left: 0;
    top: 8px;
  }
  .pbw-animated-logo .pbw-logo-part--pixel,
  body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--pixel {
    width: 64.3px;
    left: 56px;
    top: 21px;
  }
  .pbw-animated-logo .pbw-logo-part--brand,
  body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--brand {
    width: 80.5px;
    left: 132px;
    top: 21px;
  }
  .pbw-animated-logo .pbw-logo-part--works,
  body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-logo-part--works {
    width: 82.7px;
    left: 217px;
    top: 21px;
    transform: rotate(0deg);
  }
}

/* Phones, including wider phone screens when held in landscape orientation. */
@media (max-width: 767px),
       (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .pbw-animated-logo,
  body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-animated-logo {
    width: 226px;
    height: 41px;
  }
  .pbw-animated-logo__scene {
    width: 310px;
    height: 56px;
    transform: scale(.73);
    transform-origin: top left;
  }
}

@media (max-width: 360px) {
  .pbw-animated-logo,
  body.pbw-header-enabled #masthead.pbw-header-scrolled .pbw-animated-logo {
    width: 199px;
    height: 37px;
  }
  .pbw-animated-logo__scene { transform: scale(.64); }
}

/* Under 600px, WP's admin bar scrolls away instead of staying fixed.
   Keep the sticky header at the top rather than leaving an empty gap. */
@media (max-width: 600px) {
  body.pbw-header-enabled.admin-bar #masthead { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pbw-animated-logo,
  .pbw-animated-logo *,
  body.pbw-header-enabled #masthead .pbw-header-layout,
  body.pbw-header-enabled #masthead .pbw-header-content-inner,
  body.pbw-header-enabled #masthead {
    transition: none !important;
  }
}