/* counterstrike.de Dynamic Homepage – Sitewide UX-Layer (CSS)
 * Ausgelagert aus wp_footer-Inline-Style in eine statische Datei, damit der
 * Browser sie EINMAL herunterlädt und über alle Seiten hinweg aus dem Cache
 * bedient (Cache-Control-Header kommen von WP Rocket / Server), statt sie
 * bei jedem einzelnen Seitenaufruf erneut als Teil des HTML zu übertragen.
 * Das reduziert die übertragene HTML-Größe pro Request spürbar (Core Web
 * Vitals: kleineres Transfer-Volumen, weniger Hauptthread-Arbeit für den
 * Browser beim Parsen von Inline-<style>) und senkt die interne
 * Bandbreite/Traffic, weil wiederkehrende Besucher die Datei nur einmal
 * laden müssen. Einbindung über wp_enqueue_style() in der Haupt-Plugin-Datei.
 */

/* --- Einheitlicher Seitenrand (links/rechts) für alle Custom-Templates ---
   Startseite, Guides, Team-Glossar, Team-Steckbriefe & Co. sind jeweils
   eigene Templates/Seiteninhalte mit ihrem eigenen, historisch gewachsenen
   Inline-"padding" -- daher zentral und sitewide 24px Seitenrand auf allen
   ".cs2-content"-Containern. Neue Seiten/Templates sollten .cs2-content für
   ihren Hauptcontainer verwenden, dann greift dieser Rand automatisch. */
.cs2-content {
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.cs2-content { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 380px) {
	.cs2-content { padding-left: 12px !important; padding-right: 12px !important; }
}

/* --- Mobile-Fix für die Team-Glossar-Seiten (Übersicht + Steckbriefe) ---
   Die Team-Karten-Grids (DACH-Teams, Weltspitze, Kader, Fakten-Kacheln) sind
   als feste Inline-Styles mit repeat(2,1fr)/repeat(3,1fr)/repeat(4,1fr)
   angelegt -- ohne eigene Media Queries in den einzelnen page-{team}.php-
   Dateien (~23 Dateien). Statt jede einzeln zu patchen: hier zentral per
   Attribut-Selektor auf jedes Element mit "grid-template-columns" im
   Inline-Style zugreifen und auf Mobile auf eine Spalte reduzieren. Deckt
   automatisch auch künftige neue Team-Seiten ab, die demselben Muster folgen. */
@media (max-width: 640px) {
	.cs2-content [style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
}
@media (min-width: 641px) and (max-width: 900px) {
	.cs2-content [style*="grid-template-columns:repeat(4"],
	.cs2-content [style*="grid-template-columns:repeat(3"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* --- Mehrspaltige Inline-Grids auf Mobil einspaltig ---
   Tag-unabhängig (section, div, article, aside, ...), für alle gängigen
   Spaltenzahlen. */
@media (max-width: 768px) {
	[style*="grid-template-columns:repeat(2,1fr)"],
	[style*="grid-template-columns:repeat(3,1fr)"],
	[style*="grid-template-columns:repeat(4,1fr)"],
	[style*="grid-template-columns:1fr 1fr"],
	[style*="grid-template-columns:1fr 320px"] {
		grid-template-columns: 1fr !important;
	}
	[style*="grid-template-columns:1fr 320px"] > aside {
		margin-top: 2rem;
		width: 100% !important;
	}
	/* Absicherung: falls eine mehrspaltige Box trotzdem extrem schmal
	   gequetscht wird, soll Text normal umbrechen statt Buchstabe-für-
	   Buchstabe vertikal zu kippen ("D u s t 2" statt "Dust2"). */
	.cs2-card, .cs2-content [style*="grid-template-columns"] * {
		overflow-wrap: normal !important;
		word-break: normal !important;
		min-width: 0;
	}
}

/* --- Doppelten Theme-Hero (Titelband) + weiße Content-Box auf allen
   Custom-Design-Seiten entfernen ---
   Alle Seiten, die über das normale WP-Content-Feld gerendert werden (kein
   eigenes page-{slug}.php-Template) und unser Design-System nutzen (erkennbar
   an ".cs2-breadcrumb-wrap" im Content), bringen von Haus aus zusätzlich
   Kadences generisches ".entry-hero"-Titelband (mit eigenem <h1>, das unseren
   eigenen H1 im Content dupliziert) sowie eine geboxte, hell hinterlegte
   ".content-bg"-Karte samt Padding um den gesamten Artikel mit. Das erzeugt
   den "weißen Rahmen" und den Bruch zum sitewiten Dark-UI, weil unsere
   Seiten bereits ihre eigene Breadcrumb/H1/Layout mitbringen. Betrifft u. a.
   Reviews, Historie, Versions-Hub, Versions-Artikel, Patch-Notes. */
.entry-hero:has(+ #primary .cs2-breadcrumb-wrap) {
	display: none !important;
}
#primary:has(.cs2-breadcrumb-wrap) article.entry.content-bg {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
#primary:has(.cs2-breadcrumb-wrap) .entry-content-wrap {
	padding: 0 !important;
}
#primary:has(.cs2-breadcrumb-wrap) .content-area {
	margin-top: 0 !important;
}

/* --- Breadcrumb: einheitliche Gradient-Linie darunter + weniger Abstand
   zum Header --- */
.cs2-breadcrumb-wrap {
	padding-top: 1.5rem !important;
	padding-bottom: 0 !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	margin-bottom: 1.5rem !important;
	box-sizing: border-box;
	position: relative;
}
@media (max-width: 600px) {
	.cs2-breadcrumb-wrap { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 380px) {
	.cs2-breadcrumb-wrap { padding-left: 12px !important; padding-right: 12px !important; }
}
.cs2-breadcrumb-wrap::after {
	content: '';
	display: block;
	height: 4px;
	margin-top: 1.25rem;
	border-radius: 2px;
	background: linear-gradient(90deg,#C44B2A 0%,#E8A030 50%,#4A8FC4 100%);
}
.cs2-breadcrumb-wrap ~ article > header > .cs2-gradient-bar:first-child {
	display: none !important;
}

/* --- Sticky Header (Desktop + Mobil) --- */
#masthead.site-header {
	position: sticky !important;
	top: 0 !important;
	left: 0;
	right: 0;
	z-index: 999 !important;
	width: 100%;
}
#masthead.site-header.csde-scrolled {
	box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}

/* Admin-Bar-Offset (nur eingeloggte Redakteure/Admins, body.admin-bar).
   WP-Standard-Umbruchpunkt für die Admin-Bar-Höhe (32px Desktop, 46px
   Mobil) liegt bei 782px. */
body.admin-bar #masthead.site-header {
	top: 32px !important;
}
@media (max-width: 782px) {
	body.admin-bar #masthead.site-header {
		top: 46px !important;
	}
}

/* --- Burgermenü-Optimierung --- */
.mobile-toggle-open-container .menu-toggle-open {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}
.mobile-toggle-open-container .menu-toggle-open:active {
	transform: scale(0.92);
}
#csde-drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 998;
	opacity: 0;
	transition: opacity 0.2s ease;
}
#csde-drawer-backdrop.csde-visible {
	display: block;
	opacity: 1;
}
body.csde-drawer-open {
	overflow: hidden !important;
}
#mobile-drawer, .fl-page-header-mobile-toggle-content {
	z-index: 999999 !important;
}

/* --- Back-to-Top-Button ---
   Der UNTERE Abstand ("bottom") wird bewusst nicht hier fest hinterlegt,
   sondern per JS live berechnet (sitewide-ux.js), da die Footer-Höhe je
   nach Seite/Menü-Länge variiert. */
#csde-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 500;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #C44B2A 0%, #E8A030 100%);
	box-shadow: 0 4px 16px rgba(196,75,42,0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, bottom 0.15s ease;
}
#csde-back-to-top.csde-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#csde-back-to-top:hover { filter: brightness(1.08); }
#csde-back-to-top svg { width: 32px; height: 32px; fill: #fff; display: block; }
@media (max-width: 480px) {
	#csde-back-to-top { right: 14px; width: 50px; height: 50px; }
	#csde-back-to-top svg { width: 29px; height: 29px; }
}

/* --- Footer-Navigation (Hover) --- */
.csde-footer-nav a:hover {
	opacity: 1 !important;
	color: var(--cs2-orange, #C44B2A) !important;
}