/*
 * components.css — buttons, chips, search form, shared primitives.
 */

.bushraa-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--bushraa-radius-md);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.bushraa-btn--primary {
  background-color: var(--bushraa-brand-primary);
  color: #ffffff;
}

.bushraa-btn--primary:hover,
.bushraa-btn--primary:focus-visible {
  background-color: var(--bushraa-brand-primary-dark);
  color: #ffffff;
  text-decoration: none;
}

.bushraa-search-form {
  display: flex;
  align-items: stretch;
  gap: var(--bushraa-gap-2);
  width: 100%;
}

.bushraa-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--bushraa-border-subtle);
  border-radius: var(--bushraa-radius-md);
  background-color: #ffffff;
  color: var(--bushraa-text-strong);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bushraa-search-form__input::placeholder {
  color: var(--bushraa-text-muted);
  opacity: 1;
}

.bushraa-search-form__input:focus-visible {
  outline: none;
  border-color: var(--bushraa-brand-primary);
  box-shadow: 0 0 0 3px rgba(2, 48, 71, 0.16);
}

.bushraa-search-form__submit {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--bushraa-brand-primary);
  border-radius: var(--bushraa-radius-md);
  background-color: var(--bushraa-brand-primary);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.bushraa-search-form__submit:hover,
.bushraa-search-form__submit:focus-visible {
  background-color: var(--bushraa-brand-primary-dark);
  border-color: var(--bushraa-brand-primary-dark);
  outline: none;
  transform: translateY(-1px);
}

/* Category chip — reused by blog card now; article hero in Phase 7. */
.bushraa-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--bushraa-border-subtle);
  border-radius: 999px;
  background-color: transparent;
  color: var(--bushraa-text-strong);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.bushraa-chip:hover,
.bushraa-chip:focus-visible {
  background-color: var(--bushraa-surface-muted);
  border-color: var(--bushraa-border-elevated);
  color: var(--bushraa-text-strong);
  text-decoration: none;
}

/* Utility clamps — used by blog card for title / excerpt, reusable on
 * article hero deck in Phase 7. Kept small on purpose. */
.bushraa-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bushraa-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}