/*
  Custom styles for the Ward 86 website. These styles complement Bootstrap’s
  default styling and apply the DA colour palette. If you wish to modify the
  palette simply adjust the CSS variables defined at the top of this file.
*/

:root {
  /* DA blue plus complementary colours inspired by the South African flag */
  --da-primary: #0054a6;
  --da-dark: #002f5f;
  --accent-green: #009e46;
  --accent-red: #d71921;
  --accent-yellow: #f6a400;
  --accent-white: #ffffff;
}

/* Wrap the hero image as a full‑width background and overlay content */
.hero {
  background: url("hero.png") center/cover no-repeat;
  color: var(--accent-white);
  min-height: 60vh;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* add a semi‑transparent overlay for contrast */
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* Accent bar uses the South African flag colours */
.accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-yellow), var(--accent-red));
}

/* Colour overrides for DA palette */
.bg-da-primary {
  background-color: var(--da-primary) !important;
}

.bg-da-dark {
  background-color: var(--da-dark) !important;
}

.btn-da-primary {
  background-color: var(--da-primary);
  color: var(--accent-white);
}

.btn-da-primary:hover,
.btn-da-primary:focus {
  background-color: #004488;
  color: var(--accent-white);
}

/* Card adjustments */
.card {
  border: none;
}
.card-title {
  color: var(--da-primary);
}

/* Footer styling */
footer {
  font-size: 0.9rem;
}