/* =========
   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; }

/* Compact hero (30vh instead of 60vh) */
.hero-section.hero--compact{
  height:30vh !important;
  min-height:30vh !important;
}
@media (max-width: 768px){
  .hero-section.hero--compact{
    height:30vh !important;
    min-height:30vh !important;
  }
}

/* Welcome section */
.welcome-section h1 {
  color: var(--cn-gold) !important;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Feature cards */
.card.feature-card{
  background:var(--cn-card-bg);
  border:2px solid var(--cn-gold);
  color:var(--cn-white);
  box-shadow:var(--cn-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  padding:2rem !important;
  height:100%;
}
.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);
  font-weight:600;
  margin-bottom:1rem;
}

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

.card.feature-card p{
  margin-bottom:1.5rem;
  font-size:0.95rem;
  line-height:1.6;
}

/* Feature list styling */
.card.feature-card ul,
.feature-list{
  list-style:none;
  padding-left:0;
  margin-bottom:0;
  text-align:left;
}

.card.feature-card li,
.feature-list li{
  margin-bottom:0.75rem;
  font-size:0.9rem;
  line-height:1.5;
  color:var(--cn-white);
}

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

/* Crimson section wrapper - proper spacing */
section.container-fluid {
  margin-top:3rem !important;
  margin-bottom:3rem !important;
  padding-left:2rem !important;
  padding-right:2rem !important;
}

.bg-crimson {
  margin-left:-2rem;
  margin-right:-2rem;
  padding:3rem 2rem !important;
}

@media (min-width: 768px) {
  section.container-fluid {
    margin-top:4rem !important;
    margin-bottom:4rem !important;
  }
  .bg-crimson {
    padding:4rem 2rem !important;
  }
}

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

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

/* Responsive */
@media (max-width: 768px) {
  .hero-section{ height:60vh !important; min-height:60vh !important; }
  .hero-section h1{ font-size:2rem; }
  .hero-section p{ font-size:1rem; }
}

/* News Cards */
.card.news-card{
  background:var(--cn-card-bg);
  border:2px solid var(--cn-gold);
  color:var(--cn-white);
  box-shadow:var(--cn-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card.news-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
}

/* Crimson Button */
.btn-crimson{
  background-color:var(--cn-dark-crimson);
  border-color:var(--cn-gold);
  color:var(--cn-gold);
  font-weight:600;
  transition:all .15s ease;
}
.btn-crimson:hover{
  background-color:var(--cn-crimson);
  border-color:var(--cn-gold);
  color:var(--cn-white);
}

/* Game Cards */
.game-card .thumb{
  aspect-ratio:16/9;
  width:100%;
  object-fit:cover;
  border-radius:.75rem;
  border:1px solid var(--cn-border);
}

/* Guild & Contact Utility Classes */
.badge-outline{
  border:1px solid var(--cn-gold);
  color:var(--cn-gold);
  background:transparent;
}
.cn-muted{
  color:rgba(255,255,255,.8);
}
.cn-accent{
  color:var(--cn-gold);
}
.cn-section{
  background:#0f0f0f;
  border:1px solid var(--cn-border);
}
.cn-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--cn-gold), transparent);
  opacity:.6;
}
.cn-scroll{
  background:#0b0b0b;
  border:1px solid var(--cn-border);
  border-radius:.75rem;
  position:relative;
  overflow:hidden;
}
.cn-scroll::before,
.cn-scroll::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.cn-scroll::before{
  background:radial-gradient(200px 40px at top center, rgba(255,215,0,.08), transparent 60%);
}
.cn-scroll::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.list-check li::marker{
  content:"✔  ";
  color:var(--cn-gold);
}
.cn-hover{
  cursor:help;
}
.cn-hover:hover{
  box-shadow:0 0 0 1px var(--cn-gold) inset;
}