/* Screen-reader-only utility */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Toggle button */
.header-call{display: flex; gap: .4rem;}
.header-search{display: flex; flex-direction: row; justify-content: center; margin-top: 20px;}
.header-search-btn {cursor:pointer;  gap:.4rem; color: #1F2D69; font-size: 14px; font-style: normal; font-weight: 700; line-height: 18px;
  display: flex; padding: 14px 50px !important; justify-content: center; align-items: center; 
  /* border-radius: 6px!important;  */
  background: #fff;
  border: 2px solid #fff; }
/* .header-search-btn:hover{color: #fff; background-color: transparent;} */
.header-search-btn .label { font-size:.95rem; }

/* Backdrop + panel */
.site-search-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9998; }
.site-search-panel {
  position:fixed; left:0; right:0; top:0;
  background:#fff; z-index:9999;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.site-search-panel[hidden] { display:block; } /* keep layout but hidden */
.search-open #site-search-panel { transform:translateY(0); opacity:1; pointer-events:auto; }

.site-search-inner { max-width:960px; margin:0 auto; padding:30px; position:relative; }
.site-search-close { position:absolute; right:12px; top:12px; background:none; border:0; font-size:20px; cursor:pointer; }

/* Form */
.articles-search { display:flex; gap:8px; align-items:center; margin-top:8px; }
.articles-search input[type="search"] { flex:1; padding:.7rem .9rem; border:1px solid #ccc; border-radius:8px; }
.articles-search button[type="submit"] { padding:.7rem 1.1rem; border:0; border-radius:8px; cursor:pointer; }

/* Suggested chips */
.articles-suggested { margin-top:12px; }
.articles-suggested .label { font-weight:600; margin-right:6px; }
.articles-suggested .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip {
  display:inline-block; padding:.4rem .75rem;
  border:1px solid #ddd; border-radius:999px; text-decoration:none; font-size:.95rem;
}


/* Suggested chips categories*/
.articles-suggested-categories { color: #fff;  max-width: 65%;  margin: 25px auto 0;}
.articles-suggested-categories .label { font-weight:600; margin-right:6px; display: none;}
.articles-suggested-categories .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; justify-content: center; padding-top:20px;}
.articles-suggested-categories .chips .chip {
  display:inline-block; padding:.4rem .75rem;
  background: #fff; border: 2px solid #fff; color: #1F2D69; border-radius:999px; 
  text-decoration:none; font-size:.95rem;
}
.articles-suggested-categories .chips .chip:hover{background: #1F2D69; border: 2px solid #1F2D69; color: #fff;}
/* Hide on mobile until expanded */

/* Prevent body scroll when open */
body.search-open { overflow:hidden; }


/* --- Mobile adjustments --- */
@media (max-width: 991px) {
  .header-flex { gap: 10px; }

  /* Keep items readable and tappable */
  .header-call a { font-size: 14px; }

  .header-search{display: flex; align-items: center;}

  /* Shrink search button footprint and hide text label on small screens */
  .header-search-btn { padding: 10px; border-radius: 999px; }
  .header-search-btn .label { display: none; }  /* icon-only on mobile */
}

@media (max-width: 768px) {
  .categories-toggle {
    display: inline-block;
    margin-bottom: 8px;
  }
  .articles-suggested-categories { text-align: center;}
  .articles-suggested-categories .chips {
    flex-wrap: wrap;
    gap: 8px;
    padding-top:0px;
  }
  .articles-suggested-categories .chips.collapsed {
    display: none;
  }
  .categories-toggle {
    display: inline-block;
    background: #fff;
    color: #1F2D69;
    border: none;
    padding: 8px 40px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 18px;
    margin-bottom: 8px;
  }
  .articles-suggested-categories .chips .chip{border-radius: 0px;}
  .articles-suggested-categories .chips{
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2px;
    margin-top: 0px;
  }

}

@media (min-width: 769px) {
  .categories-toggle {
    display: none;
  }
}