/* ==========================================================================
   Nimmerland Gaming – Child-Style von "Black" (phpBB 3.3)
   Der Elternstyle wird komplett geladen; hier stehen nur die Änderungen:
   Hintergrundbild, Banner-Header und die Umfärbung von Blau -> Cyan/Orange.
   ========================================================================== */
@import url("../../black/theme/stylesheet.css");

:root {
	--nl-bg:          #05070a;   /* Seitenhintergrund                      */
	--nl-surface:     #10151c;   /* Panels, Beiträge, Foren-Zeilen          */
	--nl-surface-2:   #0d1218;
	--nl-surface-3:   #0a0e13;
	--nl-hover:       #161e29;
	--nl-line:        rgba(25, 195, 255, .22);
	--nl-cyan:        #19c3ff;   /* Akzent / Links                          */
	--nl-cyan-soft:   #8fdcff;   /* Überschriften                           */
	--nl-cyan-deep:   #0a3550;   /* dunkles Blau für Leisten, Buttons       */
	--nl-cyan-mid:    #0f5a7e;
	--nl-orange:      #ff6a1a;   /* Hover / zweiter Akzent                  */
	--nl-orange-deep: #4a1d09;
	--nl-text:        #cfd6df;
	--nl-logo-height: 300px;     /* max. Höhe des Header-Banners            */
	--nl-bar:         linear-gradient(90deg, #0a3550 0%, #18202b 55%, #4a1d09 100%);
}

/* ---------- Seitenhintergrund + Header-Band ---------- */
html, body {
	background-color: var(--nl-bg);
	color: var(--nl-text);
}
body {
	background-image: none;                       /* Schwarzverlauf von Black entfernen */
}
#body-wrapper {                                   /* 400px hoher Header-Bereich */
	background:
		linear-gradient(to bottom, var(--nl-bg) 0%, rgba(5, 7, 10, 0) 22%, rgba(5, 7, 10, 0) 55%, var(--nl-bg) 100%),
		var(--nl-bg) url("./images/bg_band.jpg") center center / cover no-repeat;
	border-bottom-color: transparent;
}
#wrap {                                           /* Inhaltsbereich: Panels haben eigene Flächen */
	background-color: transparent;
	border-color: transparent;
}

/* ---------- Header: Banner zentriert ---------- */
#page-header .headerbar {
	background: transparent;
	box-shadow: none;
}
.site-description {
	text-align: center;
}
.site-description .logo,
.site-description a.logo {
	float: none;
	display: table;               /* nur das Bild ist klickbar */
	margin: 0 auto;
	padding: 10px 0 0;
}
.site-description .logo img {
	margin: 0 auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--nl-logo-height);
	filter: drop-shadow(0 0 22px rgba(255, 106, 26, .28));
}
/* Seitenname + Beschreibung stehen schon im Banner (Skip-Link bleibt erhalten) */
.site-description > p.sitename,
.site-description > p:not(.skiplink) {
	display: none;
}
/* Suchfeld oben rechts über dem Banner */
.headerbar .search-header {
	top: 12px;
	margin-top: 0;
	background: rgba(5, 10, 16, .78);
	border-color: var(--nl-line);
	box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

/* ---------- Leisten / Überschriften (Black-Blau -> Nimmerland) ---------- */
.navbar .nav-tabs,
.forabg ul.topiclist li.header,
.forumbg ul.topiclist li.header,
table.table1 thead th,
#navigation #active-subsection a {
	background: var(--nl-bar);
	border-color: var(--nl-line);
}
.navbar .nav-tabs .tab:hover,
.navbar .nav-tabs .tab.dropdown-visible {
	background: var(--nl-cyan-mid);
}
.navbar .nav-tabs .tab.selected,
.navbar.secondary {
	color: var(--nl-cyan);
}
.online-ribbon span {
	background-color: var(--nl-cyan-deep);
}
.dropdown-extended .header,
.jumpbox-cat-link {
	background: var(--nl-cyan-mid);
}
.dropdown .dropdown-contents,
.jumpbox .dropdown li,
.dropdown-select,
.dropdown-select:hover,
.search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus, .search-box .button:hover {
	border-color: var(--nl-line);
}
.forum-description.toggle {
	background-color: rgba(15, 90, 126, .9);
}

/* ---------- Flächen: Panels, Beiträge, Foren-Zeilen ---------- */
.navbar,
.panel, .stat-block,
.post,
.forabg ul.topiclist li.row,
.forumbg ul.topiclist li.row,
.bg1 {
	background-color: var(--nl-surface);
	border-color: var(--nl-bg);
}
.bg2 { background-color: var(--nl-surface-2); }
.bg3 { background-color: var(--nl-surface-3); }
.panel, .stat-block { color: var(--nl-text); }
li.row {
	border-top-color: rgba(25, 195, 255, .10);
	border-bottom-color: var(--nl-bg);
}
li.row:hover,
.forabg ul.topiclist li.row:hover,
.forumbg ul.topiclist li.row:hover {
	background-color: var(--nl-hover);
}
.forabg ul.topiclist li.row:hover,
.forumbg ul.topiclist li.row:hover {
	box-shadow: inset 3px 0 0 var(--nl-cyan);
}

/* ---------- Links & Textfarben ---------- */
a,
.postlink,
.sep,
.pagination li a,
.pagination li.page-jump a:after,
.navbar .nav-tabs .tab.selected,
.navbar.secondary,
.notification_list li.dropdown-notification,
.notification_list li.dropdown-notification:hover,
.phpbb_alert .alert_close:before,
ul.linklist li.responsive-menu a.responsive-menu-link:before,
.icon-acp:after, .icon-bookmark:after, .icon-bump:after, .icon-contact:after,
.icon-delete-cookies:after, .icon-home.breadcrumbs:after {
	color: var(--nl-cyan);
}
a:hover { color: var(--nl-orange); }
.postlink { border-bottom-color: var(--nl-cyan); }
h2 { color: var(--nl-cyan); }
h3, .panel-container .panel > .inner > h3:first-child, .panel-container .stat-block > .inner > h3:first-child,
.content h2, .panel h2, .stat-block h2, .post h3 {
	color: var(--nl-cyan-soft);
}
dl.details dd, #tabs .tab > a, .responsive-tab .responsive-tab-link:before {
	color: var(--nl-cyan-soft);
}
.pagination li.active span {
	background-color: var(--nl-cyan-mid);
	border-color: var(--nl-cyan);
	color: #fff;
}
.inputbox:focus, select:focus {
	border-color: var(--nl-cyan);
	box-shadow: 0 0 8px rgba(25, 195, 255, .35);
}

/* ---------- Buttons ---------- */
.button, .buttons > .button, .buttons > .button.locked-icon,
.button.report-icon, .button.delete-icon,
a.button1, input.button1, input.button2, input.button3, a.button2 {
	background-color: var(--nl-cyan-deep);
	border-color: var(--nl-cyan);
	color: #fff;
}
a.button1, input.button1 {
	background-color: var(--nl-cyan-mid);
	border-color: var(--nl-cyan);
}
.button:hover, .buttons > .button:hover,
a.button1:hover, input.button1:hover, input.button2:hover, input.button3:hover, a.button2:hover {
	background-color: #c24a08;
	border-color: var(--nl-orange);
	color: #fff;
}

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
	:root { --nl-logo-height: 200px; }
	.headerbar .search-header { position: static; margin: 8px auto 0; }
}