/* TLC HOMEPAGE SMART HEADER
   Active only when the hamburger menu is visible.
   Other pages and desktop are unaffected.
*/

.tlc-home-smart-spacer {
  display: none;
}

html.tlc-home-smart-active body .tlc-home-smart-spacer {
  display: block;
  height: var(--tlc-home-total-height, 0px);
}

html.tlc-home-smart-active body .tlc-home-smart-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1202 !important;

  transition: transform 260ms cubic-bezier(.22, 1, .36, 1) !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform;
}

html.tlc-home-smart-active body header.tlc-home-smart-header {
  position: fixed !important;
  top: var(--tlc-home-bar-height, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1201 !important;

  transition: transform 260ms cubic-bezier(.22, 1, .36, 1) !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform;
}

/* Move both bars by exactly the same distance,
   so they disappear as one connected header. */

html.tlc-home-smart-active.tlc-home-smart-hidden
body .tlc-home-smart-bar,

html.tlc-home-smart-active.tlc-home-smart-hidden
body header.tlc-home-smart-header {
  transform:
    translate3d(
      0,
      calc(0px - var(--tlc-home-total-height, 0px) - 3px),
      0
    ) !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html.tlc-home-smart-active body .tlc-home-smart-bar,
  html.tlc-home-smart-active body header.tlc-home-smart-header {
    transition: none !important;
  }
}