/* Sidebar overlay (desktop only)
*/

@media (min-width: 992px) {
  body:not(.home) #masthead {
    position: relative;
    z-index: 1000;
  }

  /* Toggle strip below the dark header menu */
  .sidebar-toggle-strip {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding-left: 0;
    padding-right: 0;
  }

  .sidebar-toggle-strip__inner {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;

    --sidebar-toggle-shift: 0px;
  }

  .sidebar-toggle-strip .sidebar-overlay-toggle {
    transform: translateX(var(--sidebar-toggle-shift, 0px));
    will-change: transform;
  }

  .sidebar-overlay-toggle {
    background: rgb(242, 236, 221);
    width: auto;
    margin-left: 0;
    border-radius: 5px;
  }

  body.page:not(.page-template-page-without-sidebar) #secondary.widget-area {
    position: fixed;
    top: var(--site-header-height, 0px);
    left: 0;
    height: calc(100vh - var(--site-header-height, 0px));
    width: min(360px, 90vw);

    /* Start hidden */
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;

    z-index: 999;
    overflow-y: auto;

    transition:
      transform 200ms ease-out,
      visibility 0s linear 200ms;

    background: #fff;
  }

  body.page:not(.page-template-page-without-sidebar).sidebar-overlay-open
    #secondary.widget-area {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      transform 200ms ease-out,
      visibility 0s;
  }

  /* Backdrop for sidebar */

  body.page:not(.page-template-page-without-sidebar) .sidebar-overlay-backdrop {
    position: fixed;
    top: var(--site-header-height, 0px);
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  body.page:not(.page-template-page-without-sidebar).sidebar-overlay-open
    .sidebar-overlay-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}