/* Button: hidden on desktop */
.kmf-filters-btn { display: none; }

@media (max-width: 992px) {
  .kmf-filters-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    margin: 0 0 12px 0;
  }

  #secondary{ display:none; }
}

.kmf-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.kmf-modal.is-open{ display: block; }

.kmf-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

.kmf-panel{
  position: absolute;
  top: 0;
  right: 16px;
  width: min(92vw, 420px);
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease;
}

.kmf-modal.is-open .kmf-panel{ transform: translateX(0); }

.kmf-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.kmf-body{
  padding: 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dark sidebar theme: black background, white text and borders */
.kmf-body{
  background: #000;
}

/* Target both the original sidebar and the cloned mobile sidebar */
#secondary,
#secondary-mobile,
.kmf-body #secondary,
.kmf-body #secondary-mobile{
  background: transparent; /* use .kmf-body background */
  color: #fff;
}

/* Links */
.kmf-body #secondary a,
.kmf-body #secondary-mobile a,
#secondary a,
#secondary-mobile a{
  color: #fff;
}
.kmf-body #secondary a:hover,
.kmf-body #secondary-mobile a:hover{
  color: #ddd;
}

/* Widget titles, list items, and borders */
.kmf-body #secondary .widget,
.kmf-body #secondary-mobile .widget,
.kmf-body #secondary .widget li,
.kmf-body #secondary-mobile .widget li{
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}

.kmf-body #secondary .widget-title,
.kmf-body #secondary-mobile .widget-title{
  color: #fff;
}

/* Form controls */
.kmf-body #secondary input,
.kmf-body #secondary select,
.kmf-body #secondary textarea,
.kmf-body #secondary-mobile input,
.kmf-body #secondary-mobile select,
.kmf-body #secondary-mobile textarea{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}

/* Ensure checkboxes/radios and labels remain visible */
.kmf-body #secondary label,
.kmf-body #secondary-mobile label{
  color: #fff;
}

/* Subtle separators */
.kmf-body #secondary hr,
.kmf-body #secondary-mobile hr{
  border-color: rgba(255,255,255,0.08);
}

/* Read more toggle styling for archive descriptions */

.kmf-archive-toggle{
  display: inline;
  margin: 10px 0;
  padding: 0;
  background: none;
  color: #fff;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.kmf-archive-toggle:focus{
  outline: 2px solid rgba(255,255,255,0.18);
  outline-offset: 2px;
}

/* Keep link appearance when hovered/active/focused (no bg or color change) */
.kmf-archive-toggle:hover,
.kmf-archive-toggle:active,
.kmf-archive-toggle:focus{
  background: none;
  color: inherit;
  text-decoration: underline;
  box-shadow: none;
}

.kmf-archive-more{ margin-top: 8px; }

.kmf-close{
  font-size: 26px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: #222;
}
.kmf-close:hover,
.kmf-close:active,
.kmf-close:focus{
  background: none;
  color: inherit;
  box-shadow: none;
  color: #222;
}
body.kmf-no-scroll{ overflow: hidden; }

/* Small-screen fallback: reduce inset and allow full-width minus gap */
@media (max-width: 420px) {
  .kmf-panel{
    right: 8px;
    width: calc(100% - 16px);
    max-width: none;
  }
}
