/* =========
   Crimson Night Theme (dark)
   ========= */
:root{
  --cn-crimson:#8B0000;
  --cn-dark-crimson:#5A0000;
  --cn-light-crimson:#A52A2A;
  --cn-gold:#FFD700;
  --cn-black:#000000;
  --cn-white:#FFFFFF;

  --cn-text:var(--cn-white);
  --cn-bg:var(--cn-black);
  --cn-card-bg:#0d0d0d;
  --cn-border:rgba(255,255,255,0.1);
  --cn-shadow:0 8px 24px rgba(0,0,0,0.35);

  /* Aliases for legacy compatibility */
  --gold: var(--cn-gold);
  --black: var(--cn-black);
}

html,body{
  height:100%;
}
body.bg-black.text-white{
  background-color:var(--cn-bg)!important;
  color:var(--cn-text)!important;
}

/* Brand helpers */
.text-gold{color:var(--cn-gold)!important;}
.bg-crimson{background-color:var(--cn-dark-crimson)!important;}
.bg-black{background-color:var(--cn-black)!important;}

/* Navbar */
.navbar.bg-black{
  background-color:var(--cn-black)!important;
  border-bottom:1px solid var(--cn-border);
}
.navbar .nav-link{
  color:rgba(255,255,255,0.85);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color:var(--cn-gold);
}
.navbar .nav-link.active{
  color:var(--cn-gold);
  font-weight:600;
}

/* ===== Hero Section (Banner) ===== */
.hero-section{
  /* Force a tall banner; min-height helps if content grows */
  min-height:60vh !important;
  height:60vh !important;
  background: url('../images/banners/crimson.jpg') no-repeat center center / cover !important;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
  border-bottom:2px solid var(--gold);
}

/* If you also keep the class "bg-dark", prevent it from overriding */
.hero-section.bg-dark{ background-color:transparent !important; }

/* If you used Bootstrap's py-5 on the hero, remove it so image fills area */
.hero-section.py-5{ padding-top:0 !important; padding-bottom:0 !important; }

/* Overlay for readability */
.hero-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:1;
}
.hero-section .container{
  position:relative;
  z-index:2;
}
.hero-section h1{
  font-size:3rem;
  font-weight:bold;
  margin-bottom:1rem;
}
.hero-section p{ font-size:1.2rem; }

/* Feature cards */
.card.feature-card{
  background:var(--cn-card-bg);
  border:1px solid var(--cn-border);
  color:var(--cn-white); /* ensure text is white */
  box-shadow:var(--cn-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card.feature-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
}

/* Title color */
.card.feature-card h2,
.card.feature-card h3{
  color:var(--cn-gold);
}

/* Force paragraph text to white (cards + crimson bands) */
.bg-crimson,
.bg-crimson p,
.card.feature-card p{
  color:var(--cn-white)!important;
}

/* Feature card links */
.card.feature-card a{
  color:var(--cn-gold)!important;
  text-decoration:none;
}
.card.feature-card a:hover{
  text-decoration:underline;
}

/* Footer */
.footer.bg-black{
  background-color:var(--cn-black)!important;
  border-top:2px solid var(--cn-gold); /* gold line above footer */
}

/* Utilities */
.section-tight{
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  /* Make mobile banner taller than 40vh so it still feels heroic */
  .hero-section{ height:60vh !important; min-height:60vh !important; }
  .hero-section h1{ font-size:2rem; }
  .hero-section p{ font-size:1rem; }
}