/**
 * IT-Portal – Grundgerüst
 *
 * Farben, Schriften und Abstände kommen aus theme.json (--wp--preset--*, --wp--custom--*).
 * Hier stehen nur Kurznamen dafür und das Seitengerüst: Kopfleiste, Hauptbereich,
 * Dokument mit Verzeichnis, Fußzeile.
 */

:root {
	--itp-primaer: var(--wp--preset--color--primaer);
	--itp-primaer-hell: var(--wp--preset--color--primaer-hell);
	--itp-akzent: var(--wp--preset--color--akzent);
	--itp-akzent-dunkel: var(--wp--preset--color--akzent-dunkel);
	--itp-akzent-zart: var(--wp--preset--color--akzent-zart);
	--itp-text: var(--wp--preset--color--text);
	--itp-text-leise: var(--wp--preset--color--text-leise);
	--itp-linie: var(--wp--preset--color--linie);
	--itp-hintergrund: var(--wp--preset--color--hintergrund);
	--itp-papier: var(--wp--preset--color--papier);
	--itp-hell: #f5f5f5; /* Text auf dunklen Flächen */

	--itp-radius: var(--wp--custom--radius, 3px);
	--itp-schatten: var(--wp--preset--shadow--ruhe);
	--itp-schatten-hoch: var(--wp--preset--shadow--angehoben);
	--itp-uebergang: 0.2s ease;

	--itp-breite: var(--wp--style--global--content-size, 1280px);
	--itp-rand: var(--wp--style--root--padding-left, 24px);
	--itp-leiste: var(--wp--custom--leiste--hoehe, 48px);
	--itp-oben: calc(var(--wp-admin--admin-bar--height, 0px) + var(--itp-leiste));

	/* Punktlinie: 6-px-Punkte im 12-px-Raster */
	--itp-punkte: radial-gradient(circle closest-side, var(--itp-akzent) 96%, transparent 100%) -3px 0 / 12px 6px repeat-x;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: calc(var(--itp-oben) + 20px);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Die Hauptbereiche der Seite stehen direkt untereinander. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

::selection {
	background: var(--itp-akzent);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--itp-akzent-dunkel);
	outline-offset: 2px;
}

.itp-icon {
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -0.125em;
}

/* Angesprungener Abschnitt leuchtet kurz auf (Verzeichnis, Verweise mit #Sprungmarke) */
.itp-aufleuchten {
	animation: itp-aufleuchten 2.4s ease-out;
}

@keyframes itp-aufleuchten {
	0%,
	40% {
		background: var(--itp-akzent-zart);
		box-shadow: -10px 0 0 var(--itp-akzent-zart), 10px 0 0 var(--itp-akzent-zart);
	}
	100% {
		background: transparent;
		box-shadow: none;
	}
}

/* Punktlinie als eigenes Element (Seitenkopf, Muster) */
.itp-punktlinie {
	display: block;
	width: var(--wp--custom--punktlinie--breite, 120px);
	height: 6px;
	background: var(--itp-punkte);
}

/* --------------------------------------------------------------------------
 * Kopfleiste (sticky): Brotkrumen links, Vorlage und Suche rechts
 * ----------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.itp-leiste {
	background: var(--itp-hintergrund);
	border-bottom: 1px solid #d3d8df;
	transition: box-shadow var(--itp-uebergang);
}

.itp-ist-gescrollt .itp-leiste {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.itp-leiste__innen {
	min-height: var(--itp-leiste);
	gap: 20px;
}

.itp-leiste__rechts {
	gap: 12px;
}

/* Suche in der Leiste: kompakt und zurückhaltend */
.itp-leiste .wp-block-search__inside-wrapper {
	width: 240px;
	padding: 0;
	background: var(--itp-papier);
	border: 1px solid #d3d8df;
	border-radius: var(--itp-radius);
	transition: border-color var(--itp-uebergang), box-shadow var(--itp-uebergang);
}

.itp-leiste .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--itp-primaer-hell);
	box-shadow: 0 0 0 3px rgba(55, 90, 127, 0.12);
}

.itp-leiste .wp-block-search__input {
	height: 30px;
	padding: 0 10px;
	border: 0;
	font-size: 14px;
	background: transparent;
	outline: none;
}

.itp-leiste .wp-block-search__button {
	margin: 0;
	padding: 0 8px;
	background: transparent;
	color: var(--itp-text-leise);
}

.itp-leiste .wp-block-search__button:hover,
.itp-leiste .wp-block-search__button:focus {
	background: transparent;
	color: var(--itp-text);
}

.itp-leiste .wp-block-search__button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Hat der Seitenkopf ein eigenes Suchfeld, entfällt das in der Leiste. */
body:has(.itp-suchfeld) .itp-leiste__suche {
	display: none;
}

/* Vorlagenhinweis: für alle sichtbar, für Administratoren ein Link in den Website-Editor */
.itp-vorlagenhinweis {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--itp-radius);
	background: var(--itp-primaer-hell);
	color: var(--itp-hell);
	font-family: var(--wp--preset--font-family--ubuntu);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity var(--itp-uebergang), background var(--itp-uebergang);
}

.itp-vorlagenhinweis--link:hover,
.itp-vorlagenhinweis--link:focus {
	opacity: 1;
	background: var(--itp-primaer);
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Hauptbereich
 * ----------------------------------------------------------------------- */

/* Seitenkopf und Fläche schließen direkt aneinander an. */
.itp-haupt > * {
	margin-block: 0;
}

/* Fläche unter dem Seitenkopf: grauer Grund, Inhalt mittig */
.itp-flaeche {
	padding-top: 20px;
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Dokument: Papier links, Verzeichnis rechts (falls vorhanden) */
.itp-dokument {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 40px;
	align-items: start;
}

.itp-dokument > * {
	margin-block: 0;
}

.itp-dokument:not(:has(> .wp-block-itp-verzeichnis)) {
	grid-template-columns: minmax(0, 1fr);
}

/* Anwendung (CVE-Monitor, später Serverinventar): Papier über die volle Breite, ohne
   Verzeichnis, etwas weniger Innenabstand – Tabellen brauchen den Platz. */
.is-style-papier.itp-anwendung {
	padding: 30px 40px 40px;
}

/* --------------------------------------------------------------------------
 * Suchfeld (Seitenkopf, 404)
 * ----------------------------------------------------------------------- */

.itp-suchfeld {
	display: flex;
	max-width: 620px;
	background: var(--itp-papier);
	border-radius: var(--itp-radius);
	box-shadow: var(--itp-schatten);
	transition: box-shadow var(--itp-uebergang);
}

.itp-suchfeld:hover,
.itp-suchfeld:focus-within {
	box-shadow: var(--itp-schatten-hoch);
}

.itp-suchfeld input {
	flex: 1;
	min-width: 0;
	height: 38px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--itp-radius) 0 0 var(--itp-radius);
	background: transparent;
	color: var(--itp-text);
	font: inherit;
	font-size: 15px;
	outline: none;
}

.itp-suchfeld input::placeholder {
	color: #8a93a0;
}

.itp-suchfeld button {
	display: grid;
	place-items: center;
	width: 42px;
	padding: 0;
	border: 0;
	border-radius: 0 var(--itp-radius) var(--itp-radius) 0;
	background: transparent;
	color: var(--itp-text);
	font-size: 20px;
	cursor: pointer;
}

.itp-suchfeld button:hover {
	color: var(--itp-akzent-dunkel);
}

/* --------------------------------------------------------------------------
 * Fußzeile und „Nach oben“
 * ----------------------------------------------------------------------- */

.itp-fuss {
	padding-block: 24px 32px;
	border-top: 1px solid #dde1e7;
	color: var(--itp-text-leise);
	font-size: var(--wp--preset--font-size--klein);
}

.itp-fuss p {
	margin: 0;
}

.itp-nach-oben {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--itp-radius);
	background: var(--itp-primaer-hell);
	color: #fff;
	font-size: 20px;
	box-shadow: var(--itp-schatten-hoch);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--itp-uebergang), transform var(--itp-uebergang), visibility var(--itp-uebergang), background var(--itp-uebergang);
}

.itp-weit-gescrollt .itp-nach-oben {
	opacity: 0.85;
	visibility: visible;
	transform: none;
}

.itp-nach-oben:hover,
.itp-nach-oben:focus-visible {
	opacity: 1;
	background: var(--itp-primaer);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Druck: nur der Inhalt */
@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.itp-verzeichnis,
	.itp-fuss,
	.itp-nach-oben,
	.itp-suchfeld {
		display: none !important;
	}
	body {
		background: #fff;
	}
	.itp-dokument {
		display: block;
	}
	.is-style-papier {
		box-shadow: none !important;
		padding: 0 !important;
	}
}