/* =============================================================
   EIr Style Guide Tools — Search bar & Copy button
   All selectors prefixed .eir- to avoid theme conflicts.
   Font-family, base sizes inherit from the active theme.
   ============================================================= */

/* ── SEARCH BAR ── */
.eir-search-wrap {
  margin-bottom: 24px;
}

.eir-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--color-main-1, #8b7040);
  border-radius: 6px;
  padding: 8px 12px;
  max-width: 560px;
  transition: box-shadow .15s;
}

.eir-search-inner:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-main-1, #8b7040) 18%, transparent);
}

.eir-search-icon {
  width: 17px;
  height: 17px;
  color: #9e9488;
  flex-shrink: 0;
}

.eir-search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  /* Remove browser default search-input X on Chrome/Safari */
  -webkit-appearance: none;
}

.eir-search-input::-webkit-search-cancel-button { display: none; }

.eir-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: #9e9488;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  display: none;
  box-shadow: none;
  transition: color .1s;
}

.eir-search-clear:hover { color: var(--color-main-1, #6b4c2a); }

.eir-search-count {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #9e9488;
  min-height: 18px;
}

/* ── SEARCH HIGHLIGHTS ── */
mark.eir-hl {
  background: #fff3c4;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── DETAILS/SUMMARY OVERRIDE ──
   The eir-style-guide plugin sets .eir-sg-section-body { display:none }.
   When used inside a native <details open> element we must force display:block.
*/
details.eir-sg-section[open] > .eir-sg-section-body {
  display: block !important;
}

/* ── COPY BUTTON ── */
.eir-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  background: transparent;
  border: 1px solid var(--color-main-1, #8b7040);
  border-radius: 4px;
  color: var(--color-main-1, #6b4c2a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  box-shadow: none;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

.eir-copy-btn:hover {
  background: color-mix(in srgb, var(--color-main-1, #8b7040) 10%, transparent);
  color: var(--color-main-1, #6b4c2a);
  border-color: var(--color-main-1, #6b4c2a);
}

.eir-copy-btn.eir-copied {
  background: #e8f5ee;
  border-color: #2d8f4e;
  color: #2d8f4e;
}

.eir-copy-btn svg {
  flex-shrink: 0;
}