/*
 * 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.
 */


:root {
  /* Hue 21 */
  --primary-color: rgb(229, 79, 0);
  --primary-color-darker:  rgb(177, 62, 0);
}

.site-header {
  padding-top: 16px;
}

a {
  color: var(--primary-color)
}

a:hover {
  color: var(--primary-color-darker)
}

.btn-primary {
  background-color: var(--primary-color); /* Sets a custom background */
  font-weight: bold; /* Makes the text bold */
  border-color: var(--primary-color);
  --bs-btn-hover-bg: var(--primary-color-darker);
  --bs-btn-hover-border-color: var(--primary-color-darker);
}
.btn.disabled, .btn:disabled {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.hero {
  min-height: 60vh;
  background: url("app/assets/images/site-background-1.png");
}

main {
  margin-block: 1.5em;
}

.site-footer{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(215, 221, 232, 0.15);
}