/* Flyout Menu CSS — paste into Appearance > Customize > Additional CSS */

/* Hamburger trigger button */
.flyout-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
height: 40px;
width: auto !important;
}
.flyout-trigger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #222;
}

.menu-bar-icon img {
height: 40px;
width: auto !important;
padding: 0px;
}

/* Dark overlay */
.flyout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 999;
}
.flyout-overlay.open { display: block; }

/* Sliding panel */
.flyout-panel {
  position: fixed;
  top: 0; right: 0;
  width: 260px;
  height: 100%;
  background: #fff;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .3s ease;
  padding-top: 56px;
}
.flyout-panel.open { transform: translateX(0); }

/* Close × button */
.flyout-close {
  position: absolute;
  top: 34px; right: 8px;
  background: none;
  border: none;
  color: #000;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* Nav links */
.flyout-panel ul { list-style: none; margin: 0; padding: 0; }
.flyout-panel ul li a {
  display: block;
  padding: 14px 28px;
  color: #000;
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s, padding-left .2s;
}
.flyout-panel ul li a:hover { color: #1d1d1d; padding-left: 36px; }