/* =========================================
   StayHome Esports – Bootstrap 4 Theme
   Background: #051014 | Text: #FFFFFF
   ========================================= */

:root{
  --bg: #051014;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.70);

  --neo: #0b7ec7;
  --neo-2: #143d59;

  --border: rgba(11,126,199,0.28);
  --panel: rgba(5,16,20,0.78);
}

/* Reset / Base */
*{ box-sizing: border-box; }

html, body{
  height: 100%;
  background: #051014 !important;
  color: #ffffff !important;
}

/* fixed background layer so NOTHING can turn white */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(11,126,199,0.18), transparent 65%),
    radial-gradient(700px 380px at 15% 15%, rgba(11,126,199,0.10), transparent 62%),
    radial-gradient(700px 380px at 85% 18%, rgba(11,126,199,0.08), transparent 65%),
    #051014;
  z-index: -2;
}

a{ text-decoration: none; }
.text-muted{ color: var(--muted) !important; }
.text-neo{ color: var(--neo) !important; }

/* Ensure sections don't get a light background from somewhere */
.section, .section-alt, header, footer, main{
  background: transparent !important;
}

/* =========================================
   Navbar
   ========================================= */
.nav-glass{
  background: linear-gradient(180deg, rgba(5,16,20,0.92), rgba(5,16,20,0.60)) !important;
  border-bottom: 1px solid rgba(11,126,199,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Links */
.navbar .nav-link{
  color: rgba(255,255,255,0.86) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
  position: relative;
  padding: .5rem .75rem;
}

.navbar .nav-link:hover,
.navbar .nav-link.active{
  color: #ffffff !important;
}

.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:.75rem;
  right:.75rem;
  bottom:-8px;
  height:2px;
  width: calc(100% - 1.5rem);
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--neo), transparent);
  transition: transform 180ms ease;
  opacity: .9;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
  transform: scaleX(1);
}

/* =========================================
   Navbar – nicer typography + spacing
   ========================================= */

/* Nav container spacing */
@media (min-width: 992px){
  .navbar-nav.nav-left .nav-item,
  .navbar-nav.nav-right .nav-item{
    margin: 0 6px; /* Abstand zwischen Punkten */
  }
}

/* Links: font, spacing, hover */
.navbar .nav-link{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  color: rgba(255,255,255,0.82) !important;

  padding: .55rem .95rem !important; /* mehr Klickfläche + Abstand */
  border-radius: 999px;             /* pill look */
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* Hover: subtle pill glow */
.navbar .nav-link:hover{
  color: #ffffff !important;
  background: rgba(11,126,199,0.10);
  transform: translateY(-1px);
}

/* Active: stronger highlight */
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active{
  color: #ffffff !important;
  background: rgba(11,126,199,0.14);
  box-shadow: 0 0 0 1px rgba(11,126,199,0.25);
}

/* Underline effect aus deinem alten Code deaktivieren (weil Pill Style) */
.navbar .nav-link::after{
  display: none !important;
}

/* Dropdown toggle arrow tighter + aligned */
.navbar .dropdown-toggle::after{
  margin-left: .45rem;
  vertical-align: 0.15rem;
}

/* Optional: macht die Nav insgesamt etwas ruhiger */
.navbar-nav{
  gap: 6px; /* wirkt in modernen Browsern, schadet nicht */
}

/* === CENTER BRAND + SPACE FOR MENUS (DESKTOP) === */
@media (min-width: 992px){
  /* navbar gets a bit higher because logo is larger */
  .nav-split{
    position: relative;
    min-height: 76px;
  }

  /* real centered logo */
 .brand-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900; /* unter Dropdown (1050), über Navbar */
  pointer-events: none; /* verhindert Hover-Konflikte */
}

  /* IMPORTANT: create "safe space" so left/right menus don't collide with center logo */
  .nav-left{ padding-right: 170px; }
  .nav-right{ padding-left: 170px; }
}

/* Brand */
.brand-logo {
  width: 190px;
  height: 190px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 0 18px rgba(11,126,199,0.45));
  margin-top: 53%;
}

.brand-logo-sm{
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 0 12px rgba(11,126,199,0.40));
}

.brand-text{
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}

/* Dropdowns (dark/neo) */
.dropdown-menu{
  background: rgba(5,16,20,0.95);
  border: 1px solid rgba(11,126,199,0.25);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  padding: .4rem;
}

.dropdown-item{
  color: rgba(255,255,255,0.85);
  border-radius: 10px;
  padding: .55rem .75rem;
}

.dropdown-item:hover,
.dropdown-item:focus{
  color: #ffffff;
  background: rgba(11,126,199,0.14);
}

.dropdown-divider{
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* =========================================
   FIX: Dropdown über Hero / H1 anzeigen
   ========================================= */

/* Navbar immer über Content */
.navbar,
.nav-glass{
  position: relative;
  z-index: 1000;
}

/* Dropdown selbst noch höher */
.dropdown-menu{
  z-index: 1050;
}

/* Falls ein Parent overflow hidden hat → neutralisieren */
.navbar,
.navbar-collapse,
.navbar-nav,
.nav-item{
  overflow: visible !important;
}


/* =========================================
   Hero
   ========================================= */
.hero{
  padding: 4.8rem 0 2.5rem;
  position: relative;
  z-index: 1;
}

.badge-neo{
  display: inline-flex;
  align-items: center;
  background: rgba(11,126,199,0.12);
  border: 1px solid rgba(11,126,199,0.35);
  color: rgba(255,255,255,0.92);
  padding: .55rem .75rem;
  border-radius: 999px;
}

/* Stats */
.hero-stats{ gap: 14px; }
.stat{
  padding: .85rem 1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,61,89,0.20), rgba(5,16,20,0.45));
  border: 1px solid rgba(11,126,199,0.18);
  min-width: 140px;
}
.stat-value{
  font-weight: 900;
  letter-spacing: .5px;
  color: #fff;
}
.stat-label{
  color: var(--muted);
  font-size: .92rem;
}

/* =========================================
   Sections / Layout
   ========================================= */
.section{ padding: 3.5rem 0; }

.section-alt{
  background: linear-gradient(180deg, rgba(11,126,199,0.06), transparent 55%) !important;
  border-top: 1px solid rgba(11,126,199,0.10);
  border-bottom: 1px solid rgba(11,126,199,0.10);
}

/* =========================================
   Cards / Components
   ========================================= */
.card-neo{
  background: linear-gradient(180deg, rgba(20,61,89,0.22), rgba(5,16,20,0.58)) !important;
  border: 1px solid rgba(11,126,199,0.22) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  color: #ffffff;
}

.icon-chip{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(11,126,199,0.14);
  border: 1px solid rgba(11,126,199,0.35);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(11,126,199,0.10);
  font-size: 1.15rem;
}

.vlist li{
  display: flex;
  align-items: flex-start;
  padding: .35rem 0;
  color: rgba(255,255,255,0.92);
}
.vcheck{
  color: var(--neo);
  font-weight: 900;
}

/* Pills */
.pill{
  display: inline-flex;
  align-items: center;
  padding: .28rem .60rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  font-size: .82rem;
}

/* =========================================
   Buttons (Bootstrap 4 Overrides)
   ========================================= */
.btn-glow{
  box-shadow: 0 0 0 1px rgba(11,126,199,0.25), 0 14px 36px rgba(11,126,199,0.18);
}

.btn-primary{
  background-color: var(--neo) !important;
  border-color: rgba(11,126,199,0.55) !important;
  color: #fff !important;
}
.btn-primary:hover{
  background-color: #0a70b1 !important;
  border-color: rgba(11,126,199,0.75) !important;
}
.btn-primary:focus,
.btn-primary.focus{
  box-shadow: 0 0 0 0.2rem rgba(11,126,199,0.25) !important;
}

.btn-outline-light{
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.btn-outline-light:hover{
  color: #051014 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* =========================================
   Events
   ========================================= */
.event{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: .9rem;
  border-radius: 18px;
  background: rgba(5,16,20,0.45);
  border: 1px solid rgba(11,126,199,0.18);
  margin-bottom: 10px;
}

.event-date{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,126,199,0.16);
  border: 1px solid rgba(11,126,199,0.35);
  font-weight: 900;
  color: #ffffff;
}

.event-title{ font-weight: 800; color: #fff; }
.event-meta{ color: var(--muted); font-size: .92rem; }

.event-tag{
  margin-left: auto;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
  font-weight: 700;
  font-size: .82rem;
}

/* =========================================
   Callout
   ========================================= */
.callout{
  padding: 1rem;
  border-radius: 18px;
  background: rgba(11,126,199,0.10);
  border: 1px solid rgba(11,126,199,0.28);
}
.callout-title{ font-weight: 900; margin-bottom: 4px; color: #fff; }
.callout-text{ color: var(--muted); }

/* =========================================
   Forms (Bootstrap 4 Overrides)
   ========================================= */
.form-label,
label{
  color: rgba(255,255,255,0.88);
}

.form-control-neo{
  background: rgba(5,16,20,0.70) !important;
  border: 1px solid rgba(11,126,199,0.22) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
}

.form-control-neo::placeholder{
  color: rgba(255,255,255,0.45) !important;
}

.form-control-neo:focus{
  background: rgba(5,16,20,0.82) !important;
  border-color: rgba(11,126,199,0.60) !important;
  box-shadow: 0 0 0 0.2rem rgba(11,126,199,0.18) !important;
  color: #fff !important;
}

/* =========================================
   News Page Styling (fits card-neo)
   ========================================= */

.news-card{
  overflow: hidden; /* runde Ecken sauber */
}

.news-head{
  background: linear-gradient(180deg, rgba(11,126,199,0.08), rgba(5,16,20,0.0));
}

.news-title{
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .2px;
}

.news-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
}

.news-meta-item{
  color: rgba(255,255,255,0.70);
}

.news-meta-sep{
  color: rgba(255,255,255,0.25);
  margin: 0 2px;
}

.news-divider{
  height: 1px;
  background: rgba(11,126,199,0.18);
}

.news-content{
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.65;
}

/* Falls in content HTML wie <p> drin ist */
.news-content p{
  margin-bottom: .9rem;
}

.news-content a{
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-decoration-color: rgba(11,126,199,0.55);
}
.news-content a:hover{
  color: #ffffff;
  text-decoration-color: rgba(11,126,199,0.85);
}

/* =========================================
   Mini blocks
   ========================================= */
.mini .mini-title{
  font-weight: 900;
  margin-bottom: 2px;
  color: #ffffff;
}
.mini .mini-text{ color: var(--muted); }

/* =========================================
   Footer
   ========================================= */

.footer-neo{
  position: relative;
  background: linear-gradient(180deg, rgba(5,16,20,0.35), rgba(5,16,20,0.92)) !important;
  border-top: 1px solid rgba(11,126,199,0.18);
  overflow: hidden;
}

/* Subtle glow in footer background */
.footer-neo::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(700px 280px at 30% 0%, rgba(11,126,199,0.14), transparent 60%),
    radial-gradient(700px 280px at 80% 10%, rgba(11,126,199,0.10), transparent 65%);
  pointer-events:none;
  z-index: 0;
}

.footer-neo .container{
  position: relative;
  z-index: 1;
}

.footer-brand{
  gap: 12px;
}

.footer-logo{
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(11,126,199,0.22);
  filter: drop-shadow(0 0 14px rgba(11,126,199,0.28));
}

.footer-title{
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
}

.footer-sub{
  font-size: .92rem;
}

.footer-text{
  max-width: 420px;
  line-height: 1.6;
}

/* Section headings */
.footer-head{
  font-weight: 900;
  letter-spacing: .4px;
  color: #ffffff;
  margin-bottom: 12px;
}

/* Links */
.footer-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 12px;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.footer-link:hover{
  color: #ffffff;
  background: rgba(11,126,199,0.10);
  transform: translateY(-1px);
}

/* Little list text */
.footer-list{
  font-size: .95rem;
  line-height: 1.6;
}

/* Divider */
.footer-divider{
  height: 1px;
  background: rgba(11,126,199,0.18);
}

/* Bottom mini links */
.footer-mini-links{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-mini-link{
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  text-decoration: none;
}

.footer-mini-link:hover{
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(11,126,199,0.6);
}

.footer-dot{
  color: rgba(255,255,255,0.25);
}

/* Mobile spacing */
@media (max-width: 575.98px){
  .footer-neo .container{ padding-left: 18px; padding-right: 18px; }
}