/** Shopify CDN: Minification failed

Line 64:0 Unexpected "-"
Line 193:0 Expected "}" to go with "{"

**/
/* -----------------------------------------------------------------------------
   Nonprofit Search Widget Styles
   Filename: assets/nonprofit-widget.css
   ----------------------------------------------------------------------------- */

/* Container */
#nonprofit-search {
  margin-top: var(--spacing-6);
  padding: var(--spacing-5) 0;
  border-top: 1px solid var(--color-border-muted);
}

/* Heading */
#nonprofit-search h3 {
  font-size: var(--type-beta);
  margin-bottom: var(--spacing-10);
  color: var(--color-text);
}

/* Search field */
/* ── Search field container ── */
#nonprofit-search .product-form__field {
  /* box around the input */
  border: 1px solid var(--color-border);
  border-radius: var(--radii-base);
  background: var(--color-surface);
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-10);
  display: block;
}

/* ── The text input itself ── */
#nonprofit-search .product-form__input {
  /* fill the container */
  width: 100%;
  max-width: none;

  /* normal Barcelona text/caret colors */
  background: #FFF;
  color: #000;
  caret-color: #000;

  /* sizing & spacing */
  font-size: var(--type-gamma);
  padding: 0;          /* we already padded the wrapper */
  border: none;
  box-shadow: none;
  cursor: text;
}

/* ── Make sure the placeholder is always visible ── */
#nonprofit-search .product-form__input::placeholder {
  color: var(--color-text-subdued);
  opacity: 1;   /* override any dimming */
}

/* Focus state */
- #nonprofit-search #npoSearchInput:focus {
+ #nonprofit-search .product-form__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Results grid */
#nonprofit-search #npoResults {
  margin-top: var(--spacing-4);
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: 1fr;
}

/* Two columns on wider screens */
@media screen and (min-width: var(--breakpoint-sm)) {
  #nonprofit-search #npoResults {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Individual nonprofit items */
#nonprofit-search #npoResults .npo-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radii-base);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  max-height: 250px;          /* scrollbar if too tall */
  overflow: auto;
}

/* Title */
#nonprofit-search #npoResults .npo-item h4 {
  margin: 0 0 var(--spacing-2);
  font-size: 3rem;         /* bump up title size */
  line-height: 1.3;
  color: var(--color-text);
}

/* Logo */
#nonprofit-search #npoResults .npo-item img {
  max-height: 50px;
  margin-bottom: var(--spacing-2);
  object-fit: contain;
}

/* Description */
#nonprofit-search #npoResults .npo-item p {
  margin: 0 0 var(--spacing-3);
  color: var(--color-text-subdued);
  flex: 1;
  font-size: 5rem);
}

/* Button (match Barcelona secondary style) */
#nonprofit-search #npoResults .npo-item .button--secondary {
  align-self: flex-end;
  margin-top: var(--spacing-2);
}

/* ===== OPTIONAL: limit to only 3 items shown ===== */
#nonprofit-search #npoResults .npo-item:nth-child(n + 4) {
  display: none;
}
/* assets/nonprofit-widget.css */

/* 1) Make search field match Barcelona surface + text colours */
#nonprofit-search #npoSearchInput {
  /* text */
  color: var(--color-text) !important;
  /* background (light in light mode, dark in dark mode) */
  background-color: var(--color-surface) !important;
  /* caret */
  caret-color: var(--color-text) !important;
  /* border to match other inputs */
  border: 1px solid var(--color-border) !important;
}

/* 2) Placeholder styling */
#nonprofit-search #npoSearchInput::placeholder {
  color: var(--color-text-subdued) !important;
  opacity: 1 !important;
}

/* 3) Focus outline */
#nonprofit-search #npoSearchInput:focus {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}
/* ===== Nonprofit Widget Overrides ===== */

/* 1) Target your search box very explicitly */
#nonprofit-search input#npoSearchInput,
#nonprofit-search input[type="text"] {
  background-color: var(--color-surface) !important;
  color:            var(--color-text)    !important;
  border:           1px solid var(--color-border) !important;
  caret-color:      var(--color-text)    !important;
}

/* 2) Vendor-prefixed placeholder so it’s never hidden */
#nonprofit-search input#npoSearchInput::placeholder,
#nonprofit-search input#npoSearchInput::-webkit-input-placeholder,
#nonprofit-search input#npoSearchInput::-moz-placeholder,
#nonprofit-search input#npoSearchInput:-ms-input-placeholder,
#nonprofit-search input#npoSearchInput::-ms-input-placeholder {
  color:   var(--color-text-subdued) !important;
  opacity: 1                         !important;
}

/* 3) A clear focus ring */
#nonprofit-search input#npoSearchInput:focus {
  outline:        2px solid var(--color-primary) !important;
  outline-offset: 2px;
}/* —— Make nonprofit item titles significantly larger —— */
#nonprofit-search .npo-item h4 {
  font-size: 2.5rem !important;   /* bump this number up or down to taste */
  line-height: 1.1;               /* tighten up the lines a bit */
  margin-bottom: var(--spacing-3);/* keeps a little space below each title */
}
/* ↑↑↑ Overrides ↑↑↑ */
/* Make the nonprofit titles much larger */
#nonprofit-search #npoResults h4 {
  font-size: 3rem !important;   /* tweak 3rem up/down to taste */
  line-height: 1.1 !important;  /* tighten the spacing a bit */
  margin-bottom: var(--spacing-3) !important;
}