/* Big Enough Productions — v0.6.4 floating shared Header.
   This file is deliberately loaded AFTER the existing page and menu styles.
   At page top we preserve the approved translucent header/hero relationship.
   Only the persistent scroll state gains an opaque glass/navy backdrop. */

/* Header always occupies the same viewport position. It was already absolute
   over the cinematic Heros of Home / About / Productions; leave those Heros
   untouched instead of introducing a layout jump when scrolling. */
.bep-shell > .bep-header {
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%;
  z-index:600!important;
  transition:height .2s ease,background-color .2s ease,box-shadow .2s ease;
  overflow:visible;
}
/* Non-cinematic WordPress pages previously had a header in normal flow.
   Keep their content at exactly the same vertical offset. */
.bep-sticky-header-spacer {height:88px;pointer-events:none;}

/* Admin toolbar must remain clickable and above the fixed navigation. */
body.admin-bar .bep-shell > .bep-header {top:32px!important;}

.bep-shell > .bep-header.bep-is-scrolled {
  height:76px!important;
  background:rgba(3,22,52,.96)!important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(243,198,70,.22)!important;
  box-shadow:0 9px 28px rgba(1,11,28,.34);
}
.bep-header .bep-brand {
  transition:transform .2s ease;
  transform-origin:left center;
}
.bep-header.bep-is-scrolled .bep-brand {transform:scale(.83);}

/* The search box is a header companion, not a descendant. Fix its viewport
   placement too, including after the header becomes compact. */
.bep-shell > .bep-search-panel {
  position:fixed!important;
  top:92px!important;
  z-index:610!important;
}
.bep-shell > .bep-header.bep-is-scrolled ~ .bep-search-panel {top:76px!important;}
body.admin-bar .bep-shell > .bep-search-panel {top:124px!important;}
body.admin-bar .bep-shell > .bep-header.bep-is-scrolled ~ .bep-search-panel {top:108px!important;}

/* Interior section links should not disappear behind persistent navigation. */
html {scroll-padding-top:104px;}
.bep-about section[id], .bep-productions section[id] {scroll-margin-top:104px;}

@media(max-width:1120px){
  .bep-sticky-header-spacer {height:82px;}
  .bep-shell > .bep-header.bep-is-scrolled {height:70px!important;}
  .bep-shell > .bep-header.bep-is-scrolled .bep-brand {transform:scale(.88);}
  /* Mobile accordion must anchor to the header bottom even when resized. */
  .bep-header .bep-nav.is-open {top:100%!important;}
  .bep-header .bep-nav.bep-nav-mega.is-open {
    max-height:calc(100dvh - 82px);
    overscroll-behavior:contain;
  }
  .bep-header.bep-is-scrolled .bep-nav.bep-nav-mega.is-open {max-height:calc(100dvh - 70px);}
  .bep-shell > .bep-search-panel {top:82px!important;right:12px;left:12px;}
  .bep-shell > .bep-header.bep-is-scrolled ~ .bep-search-panel {top:70px!important;}
  .bep-search-panel input {max-width:55vw;}
  body.admin-bar .bep-shell > .bep-search-panel {top:114px!important;}
  body.admin-bar .bep-shell > .bep-header.bep-is-scrolled ~ .bep-search-panel {top:102px!important;}
  html {scroll-padding-top:92px;}
  .bep-about section[id],.bep-productions section[id]{scroll-margin-top:92px;}
}
@media(max-width:782px){
  body.admin-bar .bep-shell > .bep-header {top:46px!important;}
  body.admin-bar .bep-shell > .bep-search-panel {top:128px!important;}
  body.admin-bar .bep-shell > .bep-header.bep-is-scrolled ~ .bep-search-panel {top:116px!important;}
}
@media(max-width:700px){
  .bep-sticky-header-spacer {height:72px;}
  .bep-shell > .bep-header.bep-is-scrolled {height:62px!important;}
  .bep-shell > .bep-header.bep-is-scrolled .bep-brand {transform:scale(.90);}
  .bep-header .bep-nav.bep-nav-mega.is-open {max-height:calc(100dvh - 72px);}
  .bep-header.bep-is-scrolled .bep-nav.bep-nav-mega.is-open {max-height:calc(100dvh - 62px);}
  .bep-shell > .bep-search-panel {top:72px!important;}
  .bep-shell > .bep-header.bep-is-scrolled ~ .bep-search-panel {top:62px!important;}
  body.admin-bar .bep-shell > .bep-search-panel {top:118px!important;}
  body.admin-bar .bep-shell > .bep-header.bep-is-scrolled ~ .bep-search-panel {top:108px!important;}
  html {scroll-padding-top:82px;}
  .bep-about section[id],.bep-productions section[id]{scroll-margin-top:82px;}
}
@media(prefers-reduced-motion:reduce){
  .bep-shell > .bep-header,.bep-header .bep-brand{transition:none!important;}
}