/* banita.css */
:root {
  --red: #C1121F;
  --black: #000000;
  --anthracite: #1A1A1A;
  --lightgray: #F5F5F5;
}

body {
  background-color: var(--lightgray);
}

.brand-red {
  color: var(--red);
}
.brand-bg-red {
  background-color: var(--red);
}
.brand-hover-red:hover {
  background-color: #e01b26;
}
.brand-black {
  color: var(--black);
}
.brand-anthracite {
  color: var(--anthracite);
}
.brand-lightgray {
  background-color: var(--lightgray);
}
.transition {
  transition: all 0.2s;
}
/* Highlight border at top for cards */
.card-border-red {
  border-top: 4px solid var(--red);
}

/* (OPTIONAL) Utility for focus ring using Banita red (used by Tailwind, but you can add for non-TW code) */
.focus-red:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
/* Slideshow hero images */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hero-slide.active {
  opacity: 1;
  z-index: 1;
}