/* ssaw Stage 11.10 / Global header module
 * Scope: PC/SP header layout, secondary header copy, fade-in behavior.
 * Loaded globally at the original cascade position.
 */

/* ========================================================================
   01. Header layout
   Source: #ssaw-header-subcopy-layout-v1 (Stage 10.43)
   Behavior-preserving extraction: declarations are unchanged.
======================================================================== */
/*
 * Main row keeps the current visual width as closely as possible.
 * The old logo-side tagline is removed and its space is redistributed
 * across the navigation gaps. A restrained secondary row explains the shop.
 */
@media screen and (min-width:1024px){
  body .body-wrap{
    padding-top:98px!important;
  }

  #headNav{
    height:98px!important;
  }

  #headNav .head-wrap{
    display:grid!important;
    grid-template-columns:max-content max-content max-content!important;
    justify-content:center!important;
    align-items:center!important;
    box-sizing:border-box!important;
    width:max-content!important;
    max-width:calc(100% - 48px)!important;
    height:72px!important;
    margin:0 auto!important;
    padding:0!important;
    column-gap:34px!important;
  }

  #headNav .h1-wrap{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    justify-self:start!important;
    box-sizing:border-box!important;
    width:max-content!important;
    min-width:0!important;
    max-width:none!important;
    height:72px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  #headNav .head-logo{
    flex:0 0 auto!important;
  }

  #headNav .sdn{
    display:flex!important;
    align-items:center!important;
    justify-self:center!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    height:72px!important;
    margin:0!important;
    padding:0!important;
    gap:28px!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  #headNav .sdn>*{
    flex:0 0 auto!important;
    margin:0!important;
  }

  #headNav .sdn>.ssaw-header-contact-link{
    margin-left:0!important;
  }

  #headNav .head-nav-wrap{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    justify-self:start!important;
    box-sizing:border-box!important;
    width:max-content!important;
    min-width:0!important;
    max-width:none!important;
    height:72px!important;
    margin:0!important;
    padding:0!important;
    column-gap:8px!important;
    overflow:visible!important;
  }

  #headNav #hs{
    margin-right:4px!important;
  }

  #headNav .ssaw-header-subcopy{
    position:absolute!important;
    top:72px!important;
    right:0!important;
    left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:26px!important;
    margin:0!important;
    padding:0 20px!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    background:#000030!important;
    color:rgba(255,255,255,.9)!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1.15!important;
    letter-spacing:.18em!important;
    white-space:nowrap!important;
  }

  #headNav .sm{
    top:98px!important;
    max-height:calc(100vh - 98px)!important;
  }

  #headNav #hs form{
    top:98px!important;
  }
}

@media screen and (min-width:1024px) and (max-width:1279px){
  #headNav .head-wrap{
    max-width:calc(100% - 32px)!important;
    column-gap:18px!important;
  }

  #headNav .sdn{
    gap:16px!important;
  }

  #headNav .sdn>*{
    font-size:12px!important;
    letter-spacing:.04em!important;
  }

  #headNav .head-nav-wrap{
    column-gap:6px!important;
  }

  #headNav #hs{
    margin-right:2px!important;
  }
}

@media screen and (min-width:768px) and (max-width:1023px){
  body .body-wrap{
    padding-top:98px!important;
  }

  #headNav{
    height:98px!important;
  }

  #headNav .ssaw-header-subcopy{
    position:absolute!important;
    top:72px!important;
    right:0!important;
    left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:26px!important;
    margin:0!important;
    padding:0 16px!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    background:#000030!important;
    color:rgba(255,255,255,.9)!important;
    font-size:11px!important;
    font-weight:700!important;
    line-height:1.15!important;
    letter-spacing:.14em!important;
    white-space:nowrap!important;
  }

  #spNav{
    top:98px!important;
    height:calc(100vh - 98px)!important;
    height:calc(100dvh - 98px)!important;
    max-height:calc(100vh - 98px)!important;
    max-height:calc(100dvh - 98px)!important;
  }
}

@media screen and (max-width:767px){
  body .body-wrap{
    padding-top:72px!important;
  }

  #headNav{
    height:72px!important;
  }

  #headNav .ssaw-header-subcopy{
    position:absolute!important;
    top:48px!important;
    right:0!important;
    left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:24px!important;
    margin:0!important;
    padding:0 10px!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    background:#000030!important;
    color:rgba(255,255,255,.96)!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1.15!important;
    letter-spacing:.12em!important;
    white-space:nowrap!important;
  }

  #spNav{
    top:72px!important;
    height:calc(100vh - 72px)!important;
    height:calc(100dvh - 72px)!important;
    max-height:calc(100vh - 72px)!important;
    max-height:calc(100dvh - 72px)!important;
  }
}

/* ========================================================================
   02. Header secondary-copy animation
   Source: #ssaw-header-subcopy-fadein-v1 (Stage 10.43)
   Behavior-preserving extraction: declarations are unchanged.
======================================================================== */
#headNav .ssaw-header-subcopy{
  opacity:0;
  transform:translateY(4px);
  animation:ssawHeaderSubcopyFadeIn 4s cubic-bezier(.22,.61,.36,1) .9s forwards;
  will-change:opacity,transform;
}

@keyframes ssawHeaderSubcopyFadeIn{
  0%{
    opacity:0;
    transform:translateY(4px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:reduce){
  #headNav .ssaw-header-subcopy{
    opacity:1;
    transform:none;
    animation:none;
    will-change:auto;
  }
}

/* ========================================================================
   03. Mobile header visibility lock
   Keep the complete 72px mobile header visible while the page scrolls.
   The original Clear runtime may move #headNav upward on downward scroll;
   these declarations cancel only that movement and leave menus/sliders intact.
======================================================================== */
@media screen and (max-width:767px){
  #headNav{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    margin-top:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
  }
}