/**
 * SKF Search — front-end styles.
 *
 * Header toggle + slide-down search overlay with live suggestions.
 * Colours fall back to the SKF Theme brand tokens when present.
 */

/* ----------------------------------------------------------------- toggle */

.skf-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--skf-border, #dfe8e1);
  background: transparent;
  color: var(--skf-cta-green, #007a44);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.skf-search-toggle:hover,
.skf-search-toggle:focus-visible {
  background: var(--skf-cta-green, #007a44);
  border-color: var(--skf-cta-green, #007a44);
  color: #fff;
  outline: none;
}
.skf-search-toggle__icon { display: inline-flex; width: 20px; height: 20px; }
.skf-search-toggle__icon svg { width: 100%; height: 100%; fill: currentColor; }

/* Floating trigger — stacked directly above the SKF Share floating button. */
.skf-search-toggle--floating {
  position: fixed;
  right: 24px;
  bottom: 86px;
  z-index: 9990;
  width: 52px;
  height: 52px;
  border: 1px solid var(--skf-border, #dfe8e1);
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(10, 61, 46, .16);
}
.skf-search-toggle--floating .skf-search-toggle__icon { width: 24px; height: 24px; }
.skf-search-toggle--floating:hover,
.skf-search-toggle--floating:focus-visible { transform: translateY(-2px); }

/* ---------------------------------------------------------------- overlay */

body.skf-search-open { overflow: hidden; }

.skf-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(14px, 6vh) 16px 16px;
}
.skf-search-overlay[hidden] { display: none; }

.skf-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 43, 33, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.skf-search-overlay__panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(6, 43, 33, .35);
  padding: 12px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .16s ease, transform .16s ease;
}
.skf-search-overlay.is-open .skf-search-overlay__panel {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------- form */

.skf-search-form--overlay {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--skf-border, #dfe8e1);
  border-radius: 12px;
  padding: 6px 8px;
  background: #fff;
}
.skf-search-form--overlay:focus-within { border-color: var(--skf-green, #00a25a); }

.skf-search-form__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--skf-ink-soft, #4a5a50);
}
.skf-search-form__icon svg { width: 100%; height: 100%; fill: currentColor; }

.skf-search-form--overlay .skf-search-form__field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 17px;
  padding: 9px 4px;
  color: var(--skf-ink, #1f2a24);
}
.skf-search-form--overlay .skf-search-form__field::placeholder { color: #8a988f; }

.skf-search-form__submit {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--skf-cta-green, #007a44);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.skf-search-form__submit:hover { background: var(--skf-cta-green-dark, #006636); }

.skf-search-overlay__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 40, 28, .06);
  color: var(--skf-ink, #1f2a24);
  cursor: pointer;
}
.skf-search-overlay__close:hover { background: rgba(15, 40, 28, .12); }
.skf-search-overlay__close svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------------- results */

.skf-search-results {
  margin-top: 10px;
  max-height: min(62vh, 540px);
  overflow-y: auto;
  padding: 4px 2px 2px;
}
.skf-search-results[hidden] { display: none; }

.skf-search-results__status,
.skf-search-results__empty {
  margin: 10px 8px;
  color: var(--skf-ink-soft, #4a5a50);
  font-size: 14px;
}

.skf-search-group { margin: 6px 0 12px; }
.skf-search-group__label {
  margin: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--skf-ink-soft, #4a5a50);
}
.skf-search-group__list { list-style: none; margin: 0; padding: 0; }

.skf-search-result {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--skf-ink, #1f2a24);
}
.skf-search-result:hover,
.skf-search-result.is-active,
.skf-search-result:focus-visible {
  background: rgba(0, 122, 68, .07);
  outline: none;
}
.skf-search-result__title { display: block; font-weight: 600; }
.skf-search-result__excerpt {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--skf-ink-soft, #4a5a50);
}

/* ------------------------------------------------------- inline shortcode */

.skf-search-form--inline { display: flex; gap: 10px; max-width: 520px; }
.skf-search-form--inline .skf-search-form__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--skf-border, #dfe8e1);
  border-radius: 10px;
  font: inherit;
  color: var(--skf-ink, #1f2a24);
}
.skf-search-form--inline .skf-search-form__submit { padding: 11px 22px; }

/* ----------------------------------------------------------------- narrow */

@media (max-width: 600px) {
  .skf-search-overlay { padding: 10px; }
  .skf-search-overlay__panel { padding: 10px; border-radius: 14px; }
  .skf-search-form--overlay .skf-search-form__submit { padding: 9px 14px; }
  .skf-search-form--overlay .skf-search-form__field { font-size: 16px; }
  .skf-search-toggle--floating { right: 16px; bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .skf-search-overlay__panel { transition: none; }
  .skf-search-toggle { transition: none; }
}