/* ============================================================
   APEX BLOG FILTER & SEARCH WIDGET — Section 2
   ============================================================ */

/* Two-column layout: tabs column + search column. The exact split is
   normally driven by the widget's "Layout" style controls in Elementor
   (Tabs Column Width, default 70% / remaining 30% to search); these
   base rules are just a sane fallback so the widget still looks right
   even before those controls are touched. */
.apex-filter{
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
}

.apex-filter__tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex:0 1 70%;
  max-width:70%;
  min-width:0;
}

.apex-filter__tab{
  appearance:none;
  cursor:pointer;
  padding:9px 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dde5ed;
  color:#44546a;
  font-size:13px;
  font-weight:500;
  font-family:inherit;
  line-height:1.4;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}
.apex-filter__tab:hover{
  border-color:#006dbd;
  color:#006dbd;
}
.apex-filter__tab.is-active{
  background:#006dbd;
  border-color:#006dbd;
  color:#fff;
  font-weight:600;
}

.apex-filter__search{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #dde5ed;
  border-radius:10px;
  padding:0 16px;
  height:48px;
  flex:1 1 220px;
  min-width:0;
  max-width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.apex-filter__search:focus-within{
  border-color:#006dbd;
  box-shadow:0 0 0 3px rgba(0,109,189,.12);
}
.apex-filter__search svg{
  flex-shrink:0;
}
.apex-filter__search-input{
  border:0;
  outline:none;
  font:inherit;
  font-size:14px;
  color:#073762;
  width:100%;
  background:transparent;
}
.apex-filter__search-input::placeholder{
  color:#9aa8b8;
}

.apex-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:1024px){
  .apex-filter__tabs{ flex-basis:60%; max-width:60%; }
}

@media (max-width:768px){
  .apex-filter{ align-items:stretch; gap:16px; }
  .apex-filter__tabs{ flex-basis:100%; max-width:100%; }
  .apex-filter__search{ flex-basis:100%; max-width:100%; }
  .apex-filter__tab{ padding:10px 16px; }
}