/* ==========================================================
   SUGARPOP DESKTOP PROGRESSIVE HEADER

   Normal Sugarpop pages:
   natural -> hidden -> compact -> natural

   Billboard pages keep their dedicated reduced-header contract.
   Mobile behavior remains unchanged.
   ========================================================== */

@media (width >= 769px) {
  /* Final desktop authority for the shared Sugarpop header.
     navigation.css intentionally neutralizes sticky behavior,
     so progressive-header restores it after navigation.css. */

  .sticky-header {
    position: sticky;
    top: 0;
    transform: translateY(0);
    transition: transform 0.5s ease;
  }

  .sticky-header.header-hidden {
    transform: translateY(-100%);
  }

  .sticky-header.header-compact:not(.billboard-header-reduced) {
    min-height: 0;
    transform: translateY(0);
  }

  .sticky-header.header-compact.header-hidden:not(
    .billboard-header-reduced
  ) {
    transform: translateY(-100%);
  }

  .sticky-header.header-compact:not(.billboard-header-reduced)
    .logo-wrapper {
    height: auto !important;
    min-height: 0;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .sticky-header.header-compact:not(.billboard-header-reduced)
    .header-caption,
  .sticky-header.header-compact:not(.billboard-header-reduced)
    .centered-flex,
  .sticky-header.header-compact:not(.billboard-header-reduced)
    .daymaker-header-container,
  .sticky-header.header-compact:not(.billboard-header-reduced)
    .quick-nav-container {
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }

  .sticky-header.header-compact:not(.billboard-header-reduced)
    .quick-nav {
    min-height: 0;
  }

  .sticky-header:not(.billboard-header-reduced)
    .header-caption,
  .sticky-header:not(.billboard-header-reduced)
    .centered-flex,
  .sticky-header:not(.billboard-header-reduced)
    .daymaker-header-container,
  .sticky-header:not(.billboard-header-reduced)
    .quick-nav-container {
    transition:
      max-height 240ms ease,
      margin 240ms ease,
      padding 240ms ease,
      opacity 180ms ease,
      transform 240ms ease;
  }

  .sticky-header:not(.billboard-header-reduced)
    .header-caption {
    max-height: 80px;
  }

  .sticky-header:not(.billboard-header-reduced)
    .centered-flex {
    max-height: 80px;
  }

  .sticky-header:not(.billboard-header-reduced)
    .daymaker-header-container {
    max-height: 100px;
  }

  .sticky-header:not(.billboard-header-reduced)
    .quick-nav-container {
    max-height: 120px;
  }
}

/* ==========================================================
   SUGARPOP MOBILE / TABLET PROGRESSIVE HEADER

   One controller owns the top header at every viewport:
   natural -> hidden-compact -> compact -> natural

   The floating footer navigation owns only its own visibility.
   Billboard keeps its dedicated reduced-header behavior.
   ========================================================== */

@media (width <= 768px) {
  .sticky-header:not(.billboard-header-reduced) {
    position: sticky;
    top: 0;
    transform: translateY(0);
    transition: transform 0.5s ease;
  }

  .sticky-header.header-hidden:not(
    .billboard-header-reduced
  ) {
    transform: translateY(-100%);
  }

  .sticky-header.header-compact:not(
    .billboard-header-reduced
  ) {
    min-height: 0;
    transform: translateY(0);
  }

  .sticky-header.header-compact.header-hidden:not(
    .billboard-header-reduced
  ) {
    transform: translateY(-100%);
  }

  .sticky-header.header-compact:not(
    .billboard-header-reduced
  )
    .logo-wrapper {
    height: auto !important;
    min-height: 0;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  .sticky-header.header-compact:not(
    .billboard-header-reduced
  )
    .header-caption,
  .sticky-header.header-compact:not(
    .billboard-header-reduced
  )
    .centered-flex,
  .sticky-header.header-compact:not(
    .billboard-header-reduced
  )
    .daymaker-header-container,
  .sticky-header.header-compact:not(
    .billboard-header-reduced
  )
    .quick-nav-container {
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }

  .sticky-header.header-compact:not(
    .billboard-header-reduced
  )
    .quick-nav {
    min-height: 0;
  }

  .sticky-header:not(.billboard-header-reduced)
    .header-caption,
  .sticky-header:not(.billboard-header-reduced)
    .centered-flex,
  .sticky-header:not(.billboard-header-reduced)
    .daymaker-header-container,
  .sticky-header:not(.billboard-header-reduced)
    .quick-nav-container {
    transition:
      max-height 240ms ease,
      margin 240ms ease,
      padding 240ms ease,
      opacity 180ms ease,
      transform 240ms ease;
  }

  .sticky-header:not(.billboard-header-reduced)
    .header-caption {
    max-height: 80px;
  }

  .sticky-header:not(.billboard-header-reduced)
    .centered-flex {
    max-height: 80px;
  }

  .sticky-header:not(.billboard-header-reduced)
    .daymaker-header-container {
    max-height: 100px;
  }

  .sticky-header:not(.billboard-header-reduced)
    .quick-nav-container {
    max-height: 120px;
  }
}