/* ===== keep original styles (Select2 + preview) ===== */
/* Clickable feel for blurbs */
.selectable-blurb { 
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s;
  box-shadow: none; /* remove shadow by default */
}


/* Preview inside the form: two columns (kept from original) */
#selected-blurb-preview .sb-preview-wrap {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
#selected-blurb-preview .sb-preview-left { flex: 1 1 200px; }
#selected-blurb-preview .sb-preview-right { flex: 0 0 auto; display:flex; align-items:center; }
#selected-blurb-preview img { max-width:60%; height:auto; border-radius:6px; }

/* General Select2 container cleanup */
.select2-container {
  max-width: 100% !important;
  font-size: 14px;
}

/* Compact Select2 multi-select with horizontal scroll for tags */
.select2-container--default .select2-selection--multiple {
  min-height: 38px !important;
  height: 40px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  padding: 2px 6px !important;
  line-height: 1.3 !important;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Tags inside box stay inline */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-block !important;
  margin: 2px 4px 2px 0;
  padding: 2px 6px;
  font-size: 13px;
  background: #f0f0f0;
  border: 1px solid #bbb;
  border-radius: 4px;
  white-space: nowrap;
}

/* Dropdown menu (options list) */
.select2-container .select2-dropdown {
  font-size: 14px;
  border-radius: 6px;
}
.select2-results__option {
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
}
.select2-results__option--highlighted {
  background: #0073e6 !important;
  color: #fff !important;
}

/* ===== filter UI styles ===== */
.sb-filter-wrap {
  margin-bottom: 18px;
  position: relative;
  z-index: 200;
}

/* Button list (desktop) */
..sb-filter-buttons {
  display:flex;
  gap:80px !important; /* wider spacing between buttons */
  flex-wrap:wrap;
  align-items:center;
  justify-content:center; /* center the buttons */
}


.sb-filter-btn {
  border: 1px solid #d0d0d0;
  background: #fff; /*  button color background. */
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px; /* FONT SIZE OF FILTER BUTTONS */
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
  line-height:1;
}
.sb-filter-btn:hover { transform: translateY(-2px); }
.sb-filter-btn.sb-active,
.sb-filter-btn:active,
.sb-filter-btn[aria-pressed="true"] {
  background: #111827;     /* dark active */
  color: #fff; /* active text color*/
  border-color: #111827;
}

/* Mobile select (hidden on desktop) */
.sb-filter-mobile {
  display:none;
  width: 100%;
}
/*//// Dropdown box mobile //////*/

.sb-filter-mobile select {
  width:100%;
  padding: 12px 12px;   /* taller padding */
  border-radius: 8px;
  font-size: 18px;       /* slightly larger text for mobile */
  border:1px solid #ccc;
}



/* Sticky behavior for Dropdown box mobile */
.sb-filter-wrap.sb-filter-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 15px;
  background: #fff;
  padding: 10px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  z-index: 999;
}

.sb-filter-wrap.sb-filter-sticky .sb-filter-mobile {
  position: relative; /* ensure dropdown stays visible */
  z-index: 1000;
}



/* ===== grid layout for blurbs =====
   Use CSS variable --sb-cols (set by JS)
   Fallback to 3 columns
*/
.sb-blurbs-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(var(--sb-cols, 3), 1fr);
  align-items: start;
}
/*//////////////////////////////////////////////*/

/* Custom row widths */
.sb-blurbs-grid {
  margin: 0 auto; /* center the row */
  width: 85%;
}

@media (max-width: 980px) {
  .sb-blurbs-grid {
    width: 90%;
  }
}



/* Flatten Divi column wrappers so only blurbs become grid items */
.sb-blurbs-grid .et_pb_column {
  display: contents !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make blurbs inside the grid behave as direct grid items */
.sb-blurbs-grid .et_pb_blurb {
  width: 100% !important;
}

.sb-blurbs-grid .et_pb_blurb {
  text-align: center;
  margin: 0 auto;
}


/*//////////////////////////////////////////////*/


/* Each blurb item */
.sb-blurbs-grid .selectable-blurb {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  box-shadow: none;  /* set shadow on blurbs     box-shadow: 0 2px 8px rgba(0,0,0,0.04); */
  transition: transform .18s, box-shadow .18s;
}

.selectable-blurb:hover { 
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12); /* only on hover */
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .sb-blurbs-grid .selectable-blurb {
    padding: 4px!important; /* padding for each blurb Mobile */
  }
}

/* Hidden by filter */
.sb-hidden-by-filter { display: none !important; opacity: 0; }

/* Support for images inside blurbs so they scale to grid cell */
.sb-blurbs-grid .selectable-blurb img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:6px;
}

/* Responsive breakpoints that map to the JS column logic */
@media (min-width:1200px){
  .sb-blurbs-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width:992px) and (max-width:1199px){
  .sb-blurbs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width:768px) and (max-width:991px){
  .sb-blurbs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:767px){
  .sb-filter-buttons { display:none; }
  .sb-filter-mobile { display:block; }
  .sb-blurbs-grid { grid-template-columns: repeat(2, 1fr); gap:12px; }
}

/* small visual niceties for labels inside blurbs (if you want to show a small category badge) */
.selectable-blurb .sb-cat-badge {
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  background: rgba(0,0,0,0.06);
  color: #111;
  margin-bottom:8px;
}

/* Make sure Divi modules inside grid don't stretch weirdly */
.sb-blurbs-grid .et_pb_blurb {
  height:100%;
}

/* //////////////////////////////////// */

/* Flatten Divi column wrappers so only blurbs become grid items */
.sb-blurbs-grid .et_pb_column {
  display: contents !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* //////////////////////////////////// */

/* Ensure buttons are accessible/visible when sticky */
.sb-filter-sticky .sb-filter-buttons {
  overflow-x:auto;
  padding-bottom:4px;
}

/* small helper for Code/Text module usage */
.sb-filter-wrap .screen-reader-text {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}




/*
.sb-filter-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 15px;
  z-index: 999;
  background: #fff;
}
*/

/* Mobile sticky filter */
.sb-filter-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 15px;            /* spacing from top */
  z-index: 9999;
  background: #fff;
}



/* Force blurbs inside the grid to act as grid children */
.sb-blurbs-grid {
  display: grid !important;
  gap: 18px; /* gab between each blurb desktop*/
  grid-template-columns: repeat(var(--sb-cols, 3), 1fr);
  justify-items: center;   /* center each blurb */
}

.sb-blurbs-grid .et_pb_blurb {
  width: 100% !important;
  text-align: center;
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .sb-blurbs-grid {
    gap: 4px!important; /* gab between each blurb mobile*/
  }
}

/* === FILTER + STICKY CLEANUP ===
   Works for desktop + mobile
   Keeps popup scroll lock intact
=================================== */

/* --- Sticky filter wrapper (desktop & mobile) --- */
.sb-filter-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;                /* spacing from top */
  z-index: 9999;
  background: #fff;
  padding: 18px 18px;   /*  size of the filter button box wrapper*/
  transition: box-shadow 0.3s ease;
  box-shadow: none;         /* no shadow by default */
}

/* Shadow appears only after scroll (handled by JS adding .scrolled) */
.sb-filter-wrap.scrolled {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px; /*  radious of the filter button box wrapper*/
}

/* --- Allow sticky only inside filter + grid area (safe) --- */
.sb-filter-wrap,
.sb-blurbs-grid {
  overflow: visible !important;
}

/* --- Mobile: force fixed if Divi sticky is disabled --- */
@media (max-width: 767px) {
  .sb-filter-wrap {
    position: fixed;
    top: 15px;
    left: 0;
    right: 0;
    background: #fff;
	padding: 18px 18px !important;   /*  size of the filter button box wrapper*/
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  /* Push content down so blurbs not hidden behind filter */
  .sb-blurbs-grid {
    margin-top: 80px; /* adjust based on filter height */
  }
}

/* --- Desktop sticky refinement --- */
@media (min-width: 768px) {
  .sb-filter-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 15px;
    background: #fff;
    z-index: 9999;
  }
}

/* /////////////////////////////////////// */


/* =========================================================
   FIXED: Select2 multi-select overlay + column behavior
   - Prevent fields from being forced to half width
   - Keep Select2 tags in DOM but visually clipped (no column push)
   - Center the "+ N items selected" overlay vertically and fully cover tags
   - Ensure dropdown is visible when opened
   ========================================================= */

/* -----------------------
   Selection area base
   ----------------------- */
.select2-container--default .select2-selection--multiple {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  max-height: 44px !important;
  height: 44px !important;
  padding: 6px 36px 6px 8px !important; /* leave room for caret on right */
  overflow: hidden !important;          /* clip overflowing tags */
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transform: none !important;           /* neutralize any inherited transforms */
}

/* -----------------------
   Prevent columns from expanding (safe)
   - Do NOT force max-width:50% globally (that caused the "half" fields)
   - Allow the Fluent Form layout to define columns; just ensure children don't exceed
   ----------------------- */
.fluent_form_12 .ff-el-group,
.fluent_form_12 .ff-t-cell,
.fluent_form_12 .ff-el {
  flex: 1 1 0 !important;
  min-width: 0 !important;     /* allow shrinking inside flex */
  max-width: 100% !important;  /* allow column layout to control width */
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Keep Select2 itself confined to its column */
.fluent_form_12 .select2-container,
.fluent_form_12 .select2 {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* -----------------------
   Tags: keep in DOM but compact
   ----------------------- */
.select2-container--default .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

.select2-container--default .select2-selection__choice {
  flex: 0 0 auto !important;
  margin: 2px 6px 2px 0 !important;
  white-space: nowrap !important;
  z-index: 1 !important; /* keep tags below overlay */
}

/* Keep inline search usable (not shoved right) */
.select2-container--default .select2-search--inline {
  display: inline-flex !important;
  align-items: center !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
  width: auto !important;
  min-width: 36px !important;
  max-width: 60% !important;
  box-sizing: border-box !important;
}

/* -----------------------
   Overlay: "+ N items selected" (centered)
   ----------------------- */
.select2-container .sb-infield-summary {
  position: absolute !important;
  top: 50% !important;
  left: 8px !important;
  right: 8px !important;
  /* transform: translateY(-50%) !important; */  /* reliable centering */
  transform: translateY(calc(-50% + 20px)) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px !important;
  pointer-events: none !important;     /* allow interactions below */
  z-index: 60 !important;              /* above tags, below the open dropdown */
  background: #fff !important;         /* fully hide tags visually */
  color: #6b6b6b !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 4px !important;
}

/* If it looks slightly off: tweak translateY by 1px steps:
   transform: translateY(-50%) -> translateY(calc(-50% + 1px)) */

/* Hide overlay while dropdown is open so tags & search are usable */
.select2-container.select2-container--open .sb-infield-summary {
  display: none !important;
}

/* Hide overlay when empty */
.select2-container .sb-infield-summary:empty {
  display: none !important;
}

/* -----------------------
   Dropdown display & stacking
   ----------------------- */
.select2-container.select2-container--open {
  overflow: visible !important;
}
.select2-dropdown {
  position: absolute !important;
  z-index: 99999 !important;  /* above overlays & other UI */
}

/* Small outside fallback (if overlay can't be attached) */
.sb-select2-summary-outside {
  margin-top: 6px;
  font-size: 13px;
  color: #333;
  font-style: italic;
}





/*//////////////////////////////////////////////*/


/* =========================================================
   CLEANED Select2 + overlay rules (replace old duplicated blocks)
   - Prevent Select2 from expanding horizontally
   - Keep tags in DOM but visually clip them
   - Make the in-field overlay fully cover tags
   - Ensure dropdown is not clipped when opened
   ========================================================= */

/* ---------- Base: make sure Select2 container respects column width ---------- */
/* Keep the container width-100 so it never pushes adjacent columns */
.fluent_form_12 .select2-container,
.fluent_form_12 .select2-container--default,
.fluent_form_12 .select2 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* ---------- Selection area: use flex so tags + search field behave predictably ---------- */
.fluent_form_12 .select2-selection--multiple {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  min-height: 44px !important;
  max-height: 44px !important;
  height: 44px !important;
  padding: 6px 36px 6px 8px !important; /* leave room for caret on right */
  overflow: hidden !important;         /* visually clip tags (they remain in DOM) */
  position: relative !important;
  box-sizing: border-box !important;
}

/* The rendered area holds tags AND the inline search field */
.fluent_form_12 .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;        /* allow the search field to take remaining space */
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* Tags stay inline but do not grow the field */
.fluent_form_12 .select2-selection__choice {
  flex: 0 0 auto !important;
  margin: 2px 6px 2px 0 !important;
  white-space: nowrap !important;
  z-index: 1;
}

/* Make the inline search input flexible and visible (prevent it being shoved to the far right) */
.select2-container--default .select2-search--inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
  width: auto !important;
  min-width: 36px !important;
  max-width: 60% !important; /* keeps it usable without stretching whole field */
  box-sizing: border-box !important;
}

/* ---------- Overlay that visually replaces tags with "+ N items selected" ---------- */
/* The overlay sits on top of the selection area and hides under the dropdown when open.
   It does not remove or hide the tag DOM elements (so Select2/FluentForm still works). */
.select2-container .sb-infield-summary {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  pointer-events: none !important; /* allow clicks to pass through */
  z-index: 50 !important;           /* above tags but below the open dropdown */
  background: #fff !important;      /* fully cover tags visually */
  color: #6b6b6b !important;
  font-style: italic !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 4px !important;
}

/* Hide overlay when select2 dropdown is open (so tags and search are usable) */
.select2-container.select2-container--open .sb-infield-summary {
  display: none !important;
}

/* Hide empty overlays */
.select2-container .sb-infield-summary:empty { display: none !important; }

/* ---------- Let the actual dropdown render visible (avoid clipping) ---------- */
/* If dropdown is appended inside the select2 container (dropdownParent), ensure it is visible */
.select2-container .select2-dropdown {
  position: absolute !important;
  z-index: 99999 !important; /* very high so it sits above overlays and other elements */
}

/* Make sure open container itself allows visible overflow */
.select2-container.select2-container--open {
  overflow: visible !important;
}

/* ---------- Fluent Form wrapper tweaks to avoid column push ---------- */
.fluent_form_12 .ff-el-group,
.fluent_form_12 .ff-el {
  min-width: 0 !important;
  overflow: visible !important; /* allow dropdown to overflow without being clipped */
}

/* ---------- Safety: keep fallback small outside summary if overlay cannot attach ---------- */
.sb-select2-summary-outside {
  margin-top: 6px;
  font-size: 13px;
  color: #333;
  font-style: italic;
}

/* =========================================================
   End of consolidated Select2 / overlay rules
   ========================================================= */