/* Simam Digital hub search.

   Loaded only by the three index pages that carry card grids. The markup is
   injected by simam-search.js rather than written into the pages, so if the
   script is blocked or fails there is no dead input box on screen -- the
   visitor just gets the full, unfiltered list, which is the correct fallback.

   Two CSS stacks exist on this site and blog.html does not load
   simam-solutions.css, so every custom property here carries a literal
   fallback and nothing depends on Bootstrap or on the Mobirise theme. */

.simam-search {
  padding: 1.4rem 0 .2rem;
  /* the nav is sticky, so anything scrolled to must clear it */
  scroll-margin-top: 96px;
}

.simam-search-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Added by the script when the bar sits inside a container that already
   applies the page gutter, so the field lines up with the cards below it. */
.simam-search-nested .simam-search-inner {
  max-width: none;
  padding: 0;
}

.simam-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 620px;
  padding: .1rem .1rem .1rem .95rem;
  border: 1px solid var(--line, #dbe4f0);
  border-radius: 10px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.simam-search-field:focus-within {
  border-color: var(--blue, #1d61f1);
  box-shadow: 0 0 0 3px rgba(29, 97, 241, .16);
}

.simam-search-field svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted, #5b6472);
}

/* The Mobirise theme sets aggressive input styling, so this resets rather
   than inherits. */
.simam-search-input,
input.simam-search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: .85rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink, #101828);
  -webkit-appearance: none;
  appearance: none;
}

.simam-search-input::placeholder { color: var(--muted, #5b6472); opacity: 1; }
.simam-search-input::-webkit-search-cancel-button { display: none; }

.simam-search-clear {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: .45rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #5b6472);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.simam-search-clear:hover,
.simam-search-clear:focus-visible {
  background: var(--soft, #f5f8fc);
  color: var(--ink, #101828);
}

.simam-search-status {
  margin: .7rem 0 0;
  min-height: 1.35em;
  color: var(--muted, #5b6472);
  font-size: .93rem;
}

.simam-search-status b { color: var(--ink, #101828); }

.simam-search-empty {
  margin: 1.4rem 0 .4rem;
  padding: 1.25rem;
  border: 1px solid var(--line, #dbe4f0);
  border-radius: 10px;
  background: var(--soft, #f5f8fc);
  color: var(--muted, #5b6472);
}

.simam-search-empty strong { display: block; margin-bottom: .3rem; color: var(--ink, #101828); }

.simam-search-hidden { display: none !important; }

/* The featured grid places two of its cards explicitly and fixes its row
   heights, which leaves holes once part of it is filtered out. While a search
   is running it becomes an ordinary auto-flow grid. */
body.simam-searching .case-featured-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: auto;
}

body.simam-searching .case-feature-large,
body.simam-searching .case-feature-wide {
  grid-row: auto;
  grid-column: auto;
}

body.simam-searching .case-feature { min-height: 320px; }

/* A filtered-in card may never have been scrolled past, so the reveal layer
   would still be holding it at zero opacity. The script adds the reveal
   classes, and this is the belt-and-braces half of that. */
body.simam-searching .sm-reveal,
body.simam-searching .reveal-on-scroll {
  opacity: 1;
  transform: none;
}

@media (max-width: 720px) {
  .simam-search-field { max-width: none; }
}

/* The dark hub sections invert the field so it does not glare. */
.case-immersive-section .simam-search-field,
.case-founder-archive .simam-search-field { background: #101828; }