/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* --- MEATWORLD COLOR PALETTE --- */
:root {
  --mw-black: #0a0a0a;
  --mw-red: #c8102e;
  --mw-silver: #c0c0c0;
  --mw-purple: #5c2e7e;
  --mw-white: #ffffff;
}

/* --- GLOBAL BODY STYLES --- */
body {
  /* 
    Layer 1 (Top): The Gradient Shadow (Transparent at the top, fading to pure black at the bottom)
    Layer 2 (Bottom): Your seamless meat texture repeating infinitely
  */
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(15, 0, 0, 1) 100%),
     url('/assets/MW_WebBackground.png');
  
  /* The gradient doesn't repeat, but the meat texture tiles seamlessly */
  background-repeat: no-repeat, repeat;
  
  /* The gradient stretches to fill the entire page height, the meat stays its native size */
  background-size: 100% 100%, auto; 
  
  color: var(--mw-silver);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
}

/* --- NAVBAR STYLING --- */
.navbar-custom {
  background-color: var(--mw-black);
  border-bottom: 2px solid var(--mw-purple);
  box-shadow: 0 4px 10px rgba(92, 46, 126, 0.3); /* Subtle purple glow */
}

.nav-logo {
  height: 45px;
  width: auto;
}

/* Clean Block Font for Links */
.navbar-custom .nav-link {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  color: var(--mw-silver) !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.2s ease-in-out;
}

/* Hover States */
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
  color: var(--mw-red) !important;
}

/* Mobile Hamburger Button Styling */
.custom-toggler {
  border-color: var(--mw-silver);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28192, 192, 192, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.custom-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(192, 192, 192, 0.25);
}

/* Mobile Menu Dropdown Tweaks */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #141414;
    padding: 1rem;
    border: 1px solid var(--mw-purple);
    border-top: none;
    margin-top: 0.5rem;
  }
  .navbar-custom .nav-link {
    border-bottom: 1px solid rgba(92, 46, 126, 0.3);
  }
  .navbar-custom .nav-link:last-child {
    border-bottom: none;
  }
}

/* --- FOOTER STYLING --- */
.footer-custom {
  background-color: var(--mw-black);
  border-top: 2px solid var(--mw-red); /* Balances the purple navbar */
  padding: 1.5rem 1rem;
  box-shadow: 0 -4px 10px rgba(200, 16, 46, 0.15); /* Adds a faint red glow upwards */
}

/* Legal Links Styling (Matches Navbar Font) */
.footer-custom .footer-link {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  color: var(--mw-silver);
  text-decoration: none;
  margin-left: 1.5rem;
  transition: color 0.2s ease-in-out;
}

/* Stack spacing for mobile links */
@media (max-width: 767.98px) {
  .footer-custom .footer-link {
    margin: 0 0.75rem;
    display: inline-block;
  }
}

/* Hover State */
.footer-custom .footer-link:hover,
.footer-custom .footer-link:focus {
  color: var(--mw-purple); /* Hover to purple to contrast the red border */
}

/* Copyright Text */
.copyright-text {
  color: var(--mw-silver);
  opacity: 0.7;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

/* --- HOMEPAGE: HERO SECTION --- */
.hero-section {
  /* Replace 'hero-bg.jpg' with a dark, gritty piece of environment art */
  background: var(--mw-black)); /* ---url('/assets/hero-bg.jpg') center/cover no-repeat; --- */
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--mw-purple);
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--mw-white);
  font-size: clamp(4rem, 10vw, 8rem);
  letter-spacing: 4px;
  text-shadow: 4px 4px 0px var(--mw-red); /* Harsh red shadow for impact */
  margin-bottom: 0;
}

.hero-subtitle {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--mw-silver);
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 2rem;
}

/* --- CUSTOM BUTTONS --- */
.btn-custom-red {
  background-color: var(--mw-red);
  color: var(--mw-white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  padding: 0.75rem 2.5rem;
  border: 2px solid var(--mw-red);
  border-radius: 0; /* Sharp, blocky corners */
  transition: all 0.2s ease-in-out;
}

.btn-custom-red:hover {
  background-color: transparent;
  color: var(--mw-red);
  box-shadow: 0 0 15px rgba(200, 16, 46, 0.5);
}

.btn-outline-silver {
  color: var(--mw-silver);
  border: 2px solid var(--mw-silver);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  padding: 0.5rem 2rem;
  border-radius: 0;
  transition: all 0.2s ease-in-out;
}

.btn-outline-silver:hover {
  background-color: var(--mw-silver);
  color: var(--mw-black);
}

/* --- HOMEPAGE: PILLAR CARDS --- */
.pillar-card {
  background-color: #121212;
  border: 1px solid #2a2a2a;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-5px);
  border-color: var(--mw-purple);
  box-shadow: 0 10px 20px rgba(92, 46, 126, 0.15); /* Purple glow on hover */
}

.pillar-title {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--mw-red);
  font-size: 2.5rem;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}

.pillar-text {
  color: var(--mw-silver);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* --- LORE HUB NAV-PILLS --- */
.nav-pills-custom .nav-link {
  color: var(--mw-silver);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  border-radius: 0;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-pills-custom .nav-link:hover {
  color: var(--mw-red);
  border-color: var(--mw-purple);
  background-color: rgba(92, 46, 126, 0.1);
}

.nav-pills-custom .nav-link.active {
  background-color: var(--mw-red);
  color: var(--mw-white);
  border-color: var(--mw-red);
  box-shadow: 0 0 10px rgba(200, 16, 46, 0.5);
}

/* --- BESTIARY SPLIT-SCREEN LIST --- */
.bestiary-list .list-group-item {
  background-color: #121212;
  color: var(--mw-silver);
  border: 1px solid #2a2a2a;
  border-radius: 0;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.bestiary-list .list-group-item:hover {
  background-color: #1a1a1a;
  border-color: var(--mw-purple);
}

.bestiary-list .list-group-item.active {
  background-color: var(--mw-purple);
  color: var(--mw-white);
  border-color: var(--mw-purple);
}

/* --- GLOSSARY TABLE --- */
.table-meatworld {
  color: var(--mw-silver);
  border-color: #2a2a2a;
}

.table-meatworld thead th {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: var(--mw-red);
  border-bottom: 2px solid var(--mw-red);
}

/* Make sure the main content area acts as the anchor point */
main {
  position: relative;
}

/* --- SIR CLANCY FOREGROUND OVERLAY --- */
.clancy-overlay {
  position: absolute; /* Changed from fixed so he scrolls with the page */
  bottom: 0; /* Drops him to the very bottom of the main container, touching the footer */
  right: 5%;
  height: 65vh; 
  width: auto;
  z-index: 9999; 
  pointer-events: none; 
  filter: drop-shadow(-5px 5px 15px rgba(10, 10, 10, 0.9)); 
}

/* Hide or scale him down on mobile so he doesn't block the text */
@media (max-width: 991.98px) {
  .clancy-overlay {
    height: 40vh;
    right: -10%; 
    opacity: 0.4; 
  }
}

/* --- SIR CLANCY TEXT CLEARANCE --- */
@media (min-width: 992px) {
  /* Targets the right-side content panes on the Lore page only on desktop */
  #lore-tabContent .col-md-8 .tab-content {
    padding-right: 200px !important; 
  }
}