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

/* ---------- Board Announcements (Erweiterung) ---------- */
#phpbb_announcement,
.phpbb_announcement {
	text-align: center;
	color: #fff;
	border: 1px solid var(--nl-line);
	border-radius: 6px;
	box-shadow: 0 0 14px rgba(25, 195, 255, .15);
}
#phpbb_announcement a,
.phpbb_announcement a {
	color: var(--nl-cyan-soft);
}
#phpbb_announcement a:hover,
.phpbb_announcement a:hover {
	color: var(--nl-orange);
}

/* ---------- Inhaltsbreite begrenzen (große Bildschirme) ---------- */
@media (min-width: 900px) {
	.page-width {
		width: calc(100% - 40px);
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
	}
	.page-width .page-width {
		width: auto;
		max-width: none;
	}
}

/* ---------- Skip-Link ("Zum Inhalt") sicher verstecken ----------
   Black schiebt ihn mit left:-999px aus dem Bild; bei zentriertem Inhalt
   wuerde er sichtbar. Bei Tastaturbedienung (Tab) wird er weiterhin gezeigt. */
.skiplink {
	left: -9999px;
	width: 1px;
	overflow: hidden;
}
.skiplink:focus-within {
	left: 0;
	width: auto;
	overflow: visible;
}

/* ---------- Handy / Tablet: Hintergrundband nicht hinter dem Inhalt ----------
   Das Banner ist hier niedriger als der 400px hohe Hintergrundstreifen,
   der Rest wuerde hinter Navigation und Breadcrumb durchscheinen. */
@media (max-width: 899px) {
	#wrap {
		background-color: var(--nl-bg);
	}
}

/* ---------- Spiele-Icons (ACP: Forum-Bild) ----------
   Das Icon ersetzt den blauen Pfeil von Black. Ungelesene Foren leuchten orange.
   Nur in Browsern mit :has() aktiv; sonst bleibt alles wie bei Black. */
@supports selector(:has(*)) {
	dl.row-item:has(.forum-image) {
		background-image: none;
	}
	.forum-image {
		float: left;
		padding-top: 0;
		margin: 0 12px 0 -45px;
	}
	.forum-image img {
		display: block;
		width: 36px;
		height: 36px;
		filter: drop-shadow(0 0 5px rgba(25, 195, 255, .2));
	}
	dl.row-item.forum_unread .forum-image img,
	dl.row-item.forum_unread_subforum .forum-image img {
		filter: drop-shadow(0 0 7px var(--nl-orange));
	}
}

/* ---------- Browser-Autofill: kein gelber Hintergrund ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #0a0e13 inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	border-color: var(--nl-line) !important;
}
input:autofill {
	background-color: #0a0e13 !important;
	color: #fff !important;
	box-shadow: 0 0 0 1000px #0a0e13 inset !important;
}