/* ==========================================================================
   Nacht der Biosignale - T4 Template Custom Theme (Zero-Helix Migration)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@400;600;700&display=swap');

:root {
  --ndb-primary: #f14833;
  --ndb-primary-hover: #d63b27;
  --ndb-primary-glow: rgba(241, 72, 51, 0.35);
  --ndb-accent: #007bff;
  --ndb-bg-dark: #0a0d14;
  --ndb-card-bg: rgba(18, 24, 38, 0.85);
  --ndb-card-border: rgba(255, 255, 255, 0.12);
  --ndb-text: #e2e8f0;
  --ndb-text-muted: #94a3b8;
  --ndb-font-main: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ndb-font-heading: 'Outfit', 'Open Sans', sans-serif;
}

/* --- Global Background & Typography --- */
html, body {
  background-color: #0a0d14 !important;
  background-image: url('/images/background/stars-1845140.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  color: var(--ndb-text) !important;
  font-family: var(--ndb-font-main) !important;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

/* Ensure T4 section wrappers are transparent to reveal body stars background */
.t4-wrapper, 
.t4-content, 
.t4-content-inner, 
.t4-main-body, 
#t4-main-body, 
.t4-section,
#t4-mainbody {
  background-color: transparent !important;
  background-image: none !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ndb-font-heading) !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.85rem; border-bottom: 2px solid var(--ndb-primary); padding-bottom: 0.4rem; display: inline-block; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; color: var(--ndb-primary) !important; }

a {
  color: #38bdf8;
  text-decoration: none;
  transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
}
a:hover, a:focus {
  color: var(--ndb-primary);
  text-decoration: none;
  text-shadow: 0 0 8px var(--ndb-primary-glow);
}

/* --- T4 Header & Sticky Navigation --- */
.t4-header, header#t4-header, header {
  background: rgba(10, 13, 20, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  position: sticky !important;
  top: 0;
  z-index: 1030;
  padding: 0.5rem 0;
}

.t4-header .navbar-brand img, header .logo img {
  max-height: 55px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Navigation Links */
.t4-navbar .nav-link, ul.navbar-nav > li > a {
  color: #f1f5f9 !important;
  font-family: var(--ndb-font-heading) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 0.6rem 1rem !important;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.t4-navbar .nav-link:hover, ul.navbar-nav > li > a:hover,
.t4-navbar .nav-item.active .nav-link, ul.navbar-nav > li.active > a {
  color: var(--ndb-primary) !important;
  background: rgba(241, 72, 51, 0.1) !important;
}

/* --- Container & Main Content Glassmorphism --- */
#t4-mainbody, .t4-mainbody, main, .t4-section-inner {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.card, .module, .t4-card, div.well, .module-inner, article, .item-page, .com-content-article {
  background: var(--ndb-card-bg) !important;
  border: 1px solid var(--ndb-card-border) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
  color: var(--ndb-text) !important;
}

/* --- Tables & Program Overview Styling --- */
table, .dark_table, .fancy_table_1 {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid var(--ndb-card-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
}

table th, .dark_table th, .fancy_table_1 th {
  background: rgba(241, 72, 51, 0.18) !important;
  color: #ffffff !important;
  font-family: var(--ndb-font-heading) !important;
  font-weight: 700 !important;
  padding: 0.85rem 1rem !important;
  border-bottom: 2px solid var(--ndb-primary) !important;
  text-align: left;
}

table td, .dark_table td, .fancy_table_1 td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: var(--ndb-text) !important;
  vertical-align: middle !important;
}

table tr:hover, .dark_table tr:hover, .fancy_table_1 tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* --- Stream Links & Triangle Badges --- */
.triangle, span.triangle {
  display: inline-block !important;
  color: var(--ndb-accent) !important;
  border: 2px solid var(--ndb-accent) !important;
  border-radius: 50% !important;
  padding: 4px 9px 4px 11px !important;
  font-size: 0.85rem !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

a:hover .triangle, span.triangle:hover {
  transform: scale(1.15) !important;
  background-color: rgba(0, 123, 255, 0.2) !important;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5) !important;
}

/* --- Buttons --- */
.btn-primary, .btn-main {
  background-color: var(--ndb-primary) !important;
  border-color: var(--ndb-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 0.5rem 1.25rem !important;
  transition: all 0.25s ease !important;
}

.btn-primary:hover, .btn-main:hover {
  background-color: var(--ndb-primary-hover) !important;
  border-color: var(--ndb-primary-hover) !important;
  box-shadow: 0 0 15px var(--ndb-primary-glow) !important;
}

/* --- Footer --- */
.t4-footer, footer, #t4-footer {
  background: rgba(6, 8, 13, 0.95) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 2rem 0 !important;
  color: var(--ndb-text-muted) !important;
  font-size: 0.9rem !important;
}

.t4-footer a, footer a {
  color: #cbd5e1 !important;
}
.t4-footer a:hover, footer a:hover {
  color: var(--ndb-primary) !important;
}