/**
 * PQ ASP State - Frontend
 *
 * Die Ampel ist vollständig in CSS umgesetzt; es werden keine Bilddateien
 * mehr benötigt. Farben laufen über Custom Properties und lassen sich sowohl
 * in den Plugin-Einstellungen als auch im Theme überschreiben.
 */

:root {
	--pqasp-color-0: #12d14f;
	--pqasp-color-1: #f0b429;
	--pqasp-color-2: #e02424;

	--pqasp-circle-size: 3.75rem;
	--pqasp-border-color: #fff;
	--pqasp-tip-bg: #fff;
	--pqasp-tip-color: #333;
	/*
	 * Bewusst hoch: Der Tooltip klappt nach unten auf und muss über
	 * benachbarten Theme-Elementen liegen. Avada/Fusion verwendet für den
	 * fixierten Header z-index 10011. In den Einstellungen anpassbar.
	 */
	--pqasp-z-index: 100000;
}

/* -------------------------------------------------------------------------
   Badge
   ------------------------------------------------------------------------- */

/*
 * Das Badge sitzt im Textfluss an der Stelle, an der der Shortcode
 * eingesetzt wurde. `relative` dient nur als Bezug für den Tooltip -
 * die Positionierung auf der Seite übernimmt das Theme.
 */
.pqasp-badge {
	--pqasp-color: var(--pqasp-color-0);

	position: relative;
	z-index: var(--pqasp-z-index);
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

.pqasp-badge--level-1 {
	--pqasp-color: var(--pqasp-color-1);
}

.pqasp-badge--level-2 {
	--pqasp-color: var(--pqasp-color-2);
}

.pqasp-badge__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pqasp-circle-size);
	height: var(--pqasp-circle-size);
	padding: 0;
	border: 1px solid var(--pqasp-border-color);
	border-radius: 50%;
	background: transparent;
	color: var(--pqasp-color);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	/* Explizit, falls ein Theme pointer-events auf Containern abschaltet. */
	pointer-events: auto;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pqasp-badge__circle:focus-visible {
	outline: 2px solid var(--pqasp-color);
	outline-offset: 3px;
}

.pqasp-badge__text {
	display: block;
}

/* Hover / Fokus: Kreis füllt sich, Schrift wird weiß. */
.pqasp-badge:hover .pqasp-badge__circle,
.pqasp-badge:focus-within .pqasp-badge__circle {
	border-color: var(--pqasp-color);
	background: var(--pqasp-color);
	color: #fff;
}

/* -------------------------------------------------------------------------
   Tooltip
   ------------------------------------------------------------------------- */

.pqasp-badge__tip {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 50%;
	z-index: 1;
	display: block;
	min-width: 14rem;
	padding: 1rem 1.5rem;
	background: var(--pqasp-tip-bg);
	color: var(--pqasp-tip-color);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-0.25rem);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.pqasp-badge:hover .pqasp-badge__tip,
.pqasp-badge:focus-within .pqasp-badge__tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.pqasp-badge__tip-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 1rem;
	line-height: 1.3;
}

.pqasp-badge__tip-state {
	display: block;
	color: var(--pqasp-color);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Headerbild der Detailseite
   ------------------------------------------------------------------------- */

/*
 * Full-Bleed: Das Bild bricht aus dem zentrierten Inhaltscontainer des Themes
 * aus und läuft über die volle Viewportbreite. Die negativen Ränder
 * verschieben das Element um die halbe Differenz zwischen Container und
 * Viewport nach außen - unabhängig davon, wie breit der Container ist.
 *
 * `100vw` schließt die Breite des Scrollbalkens mit ein, wodurch ein
 * horizontaler Überlauf von wenigen Pixeln entstünde. Deshalb wird auf
 * Seiten mit Headerbild am Wurzelelement `overflow-x: clip` gesetzt.
 * Bewusst `clip` und nicht `hidden`: `hidden` würde einen Scrollcontainer
 * erzeugen und `position: sticky` im Theme unbrauchbar machen.
 */
html:has(body.pqasp-has-full-header) {
	overflow-x: clip;
}
.pqasp-detail-header {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	margin-bottom: 2.5rem;
	height: var(--pqasp-header-height, 320px);
	overflow: hidden;
}

.pqasp-detail-header__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* -------------------------------------------------------------------------
   Überschrift und Einleitung der Detailseite
   ------------------------------------------------------------------------- */

.pqasp-detail-intro__text p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Detailseite
   ------------------------------------------------------------------------- */

.pqasp-detail {
	--pqasp-color: var(--pqasp-color-0);

	margin-top: 2rem;
}

.pqasp-detail--level-1 {
	--pqasp-color: var(--pqasp-color-1);
}

.pqasp-detail--level-2 {
	--pqasp-color: var(--pqasp-color-2);
}

.pqasp-detail__current {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 1.375rem;
}

.pqasp-detail__badge {
	display: inline-block;
	padding: 0.3em 0.7em;
	background: var(--pqasp-color);
	color: #fff;
	font-weight: 700;
}

.pqasp-detail__rule {
	margin: 0 0 1.5rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.pqasp-detail__heading {
	margin: 2.5rem 0 1rem;
	font-size: 1.25rem;
}

.pqasp-detail__empty {
	margin: 0 0 1.5rem;
}

.pqasp-entry {
	--pqasp-color: var(--pqasp-color-0);

	margin: 0 0 1.75rem;
	padding: 0 0 0 1rem;
	border-left: 4px solid var(--pqasp-color);
}

.pqasp-entry--level-1 {
	--pqasp-color: var(--pqasp-color-1);
}

.pqasp-entry--level-2 {
	--pqasp-color: var(--pqasp-color-2);
}

.pqasp-entry__title {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
}

.pqasp-entry__status,
.pqasp-entry__timing {
	margin: 0 0 0.35rem;
}

.pqasp-entry__level {
	color: var(--pqasp-color);
	font-weight: 700;
}

.pqasp-entry__timing {
	font-size: 0.9375rem;
	opacity: 0.85;
}

.pqasp-entry__description {
	margin: 0.5rem 0;
}

.pqasp-entry__description p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Barrierefreiheit
   ------------------------------------------------------------------------- */

.pqasp-badge .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pqasp-badge__circle,
	.pqasp-badge__tip {
		transition: none;
	}
}