/* ==========================================================================
   COMPONENTS.CSS — Reusable, theme-driven component classes
   ==========================================================================
   These are additive semantic classes (.btn, .card, .alert-*, etc.) built
   on top of the variables in theme.css. Existing page classes/IDs required
   by JavaScript are left untouched — these classes can be layered on
   alongside them without removing anything.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Text utilities
   --------------------------------------------------------------------------- */
.text-primary-theme   { color: var(--primary-color) !important; }
.text-secondary-theme { color: var(--secondary-color) !important; }
.text-muted-theme      { color: var(--text-muted-color) !important; }
.text-on-dark          { color: var(--text-on-dark-color) !important; }

/* ---------------------------------------------------------------------------
   Background utilities
   --------------------------------------------------------------------------- */
.bg-primary-theme    { background-color: var(--primary-color) !important; }
.bg-secondary-theme  { background-color: var(--secondary-color) !important; }
.bg-page             { background-color: var(--background-color) !important; }
.bg-muted            { background-color: var(--background-secondary-color) !important; }
.bg-gradient-primary { background-image: var(--gradient-primary) !important; }
.bg-gradient-info    { background-image: var(--gradient-info) !important; }

/* ---------------------------------------------------------------------------
   Buttons
   Matches the site's existing look: solid gradient primary CTA (".read_more"
   equivalent), green accent CTA (".greenbtn" equivalent), and a pill shape
   used throughout the nav/CTAs.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 15px;
  font-family: var(--font-family);
  font-weight: 400;
  text-decoration: none !important;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: all 0.3s;
}
.btn-pill { border-radius: var(--button-radius-pill); }

.btn-primary {
  background-image: var(--gradient-primary);
  color: var(--text-on-dark-color) !important;
}
.btn-primary:hover {
  background-color: var(--accent-color);
  background-image: none;
  color: var(--text-on-dark-color) !important;
}

.btn-secondary {
  background-color: var(--accent-color);
  color: var(--text-on-dark-color) !important;
}
.btn-secondary:hover {
  background-color: var(--accent-hover-color);
  color: var(--text-on-dark-color) !important;
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color);
}
.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: var(--text-on-dark-color) !important;
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.form-label {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--text-color);
  font-family: var(--font-family);
  font-weight: 500;
}
.form-control,
.form-select {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--input-radius);
}
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--secondary-color);
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.card {
  background-color: var(--background-color);
  border: 1px solid var(--border-color-light);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.card-header {
  background-image: var(--gradient-primary);
  color: var(--text-on-dark-color);
  padding: 10px 15px;
  font-weight: 700;
}
.card-body {
  padding: 15px;
  color: var(--text-color);
}

/* ---------------------------------------------------------------------------
   Alerts / badges
   (".up/.down/.upnotif" style notification badges use --gradient-info; these
   classes provide a standard Bootstrap-style alternative going forward.)
   --------------------------------------------------------------------------- */
.alert {
  padding: 10px 15px;
  border-radius: var(--input-radius);
  color: var(--text-on-dark-color);
  margin-bottom: 10px;
}
.alert-success { background-color: var(--success-color); }
.alert-warning { background-color: var(--warning-color); color: var(--text-color); }
.alert-danger  { background-color: var(--danger-color); }
.alert-info    { background-color: var(--info-color); }

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */
.navbar { background-image: var(--gradient-primary); }
.nav-link { color: var(--text-on-dark-color); }
.nav-link:hover { background-color: var(--text-on-dark-color); color: var(--primary-color-alt); }