/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ---------------------------------------------------------------------------
 * Brand palette — "Sage & Terracotta" to complement the kraft 📦 logo.
 * Only the header hero and the Search button use `is-primary`; the dark
 * header title/subtitle text is intentionally left untouched.
 * ------------------------------------------------------------------------- */

/* Header background — muted sage gradient (keeps the existing dark text). */
.hero.is-primary,
.hero.is-primary.is-bold {
  background-color: #BCC9AC;
  background-image: linear-gradient(141deg, #CBD6BE 0%, #BCC9AC 71%, #AEBE9C 100%);
}

/* Search button — terracotta with white label. */
.button.is-primary {
  background-color: #C2663F;
  border-color: transparent;
  color: #fff;
}
.button.is-primary:hover {
  background-color: #B25932;
  color: #fff;
}
.button.is-primary:focus,
.button.is-primary.is-focused {
  background-color: #B25932;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 0.125em rgba(194, 102, 63, 0.35);
}
.button.is-primary:active,
.button.is-primary.is-active {
  background-color: #9E4F2C;
  color: #fff;
}