/* 1) Load Montserrat once */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --font-brand: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 2) Global application */
html, body,
.zd-body,
.hc-header, .hc-footer,
.article-body, .article-title,
.zd-btn, .zd-input, .zd-select,
h1, h2, h3, h4, h5, h6,
p, a, li, span {
  font-family: var(--font-brand) !important;
}

/* 3) Specific overrides for the visible labels you mentioned */

/* Header brand/title (e.g., "GivEnergy Support") */
.hc-header .brand,
.hc-header .brand a,
.hc-header .hc-title,
.hc-header .title,
.hc-header .logo-text,
.hc-header .portal-title,
.hc-header .brand-name {
  font-family: var(--font-brand) !important;
  font-weight: 600; /* adjust if needed */
}

/* Search module heading (e.g., "Search Articles") */
.hc-search .hc-search-title,
.hc-search .title,
.hc-search h1,
.hc-search h2,
.hc-search .heading,
.hc-search .label,
.hc-hero .hc-search-title,
.hc-hero .title {
  font-family: var(--font-brand) !important;
  font-weight: 600; /* adjust to 500/700 per branding */
}

/* If the theme uses container-level font declarations, out-specify them */
.hc-container .hc-content,
.hc-nav .hc-menu,
.hc-sidebar .hc-section,
.hc-hero,
.hc-search,
.hc-header,
.hc-footer {
  font-family: var(--font-brand) !important;
}

/* Apply to the brand name */
.div_Header__brandName,
.div_Header__brandName a,
.div_Header__brandName span {
  font-family: var(--font-brand);
  font-weight: 600; /* tweak 500/700 per your branding */
  line-height: 1.2;
}

/* Ensure common descendants inherit Montserrat (out‑specific theme rules) */
.div_headerContainer *,
.div_headerContainer a,
.div_headerContainer span,
.div_headerContainer h1,
.div_headerContainer h2,
.div_headerContainer h3 {
  font-family: var(--font-brand) !important;
}

/* Apply to the specific element */
.Header__brandName,
.Header__brandName a,
.Header__brandName span {
  font-family: var(--font-brand) !important;
  font-weight: 600; /* adjust to 500/700 per branding */
  line-height: 1.2;
}

/* Single, consolidated rule */
.searchPanelSearchBox {
  border: 1px solid #6b7280;      /* visible grey */
  border-radius: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  background: transparent;        /* do NOT white out the box */
}

/* Input fills space and doesn’t draw its own border */
.searchPanelSearchBox .Input__inputCommon {
  position: static !important;
  flex: 1 1 auto;
  width: 100%;
  height: 28px;
  border: none !important;
  outline: none;
  background: transparent !important;
  font-size: 14px;
  line-height: 1.4;
  padding: 0;
}

/* Icon alignment */
.searchPanelSearchBox .Search__searchPanelIcon {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.searchPanelSearchBox .Search__searchPanelIcon svg {
  width: 18px;
  height: 18px;
}

/* Focus state keeps border, just changes color */
.searchPanelSearchBox:focus-within {
  border-color: #1f9d55;
  box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.12);
}

/* Neutralize absolute offsets if any exist elsewhere */
.searchPanelSearchBox .Input__inputCommon,
.searchPanelSearchBox .Search__searchPanelIcon {
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}