/*
Theme Name:   Inklusio.pro
Theme URI:    https://inklusio.pro
Description:  Child-Theme für Inklusio.pro – die Matchmaking-Plattform für den pädagogischen Sektor. Basiert auf JobHive (HivePress) und ergänzt das Design-System, die Ampel-Logik und den Vorlagen-Hub.
Author:       Inklusio.pro
Template:     jobhive
Version:      1.0.0
Text Domain:  inklusio
Tags:         hivepress, jobboard, directory
*/

/* Die eigentlichen Styles liegen in assets/css/inklusio.css
   und werden über functions.php geladen. Diese Datei bleibt
   bewusst schlank, damit die Kaskade nachvollziehbar bleibt. */

/* ------------------------------------------------------------
   Kopfbereich: Bildzeichen neben dem Schriftzug
   ------------------------------------------------------------
   Das Eltern-Theme setzt Name und Claim als Blockelemente
   untereinander. Hier kommt links das Bildzeichen daneben.
   ------------------------------------------------------------ */

.header-logo__link {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
}

.header-logo__link:hover {
	text-decoration: none;
	opacity: 0.9;
}

/* Feste Höhe statt Breite: Das Zeichen soll zur Textzeile passen,
   nicht zum verfügbaren Platz.

   Der Selektor ist absichtlich umständlich. HiveTheme setzt
   .header-logo img { width: 100% } – das ist spezifischer als eine
   blosse Klasse und würde das Bild auf die volle Containerbreite
   ziehen. .header-logo img.header-logo__mark liegt darüber, ohne
   dass !important nötig wird. */
.header-logo img.header-logo__mark {
	height: 46px;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	display: block;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-logo .header-logo__link:hover img.header-logo__mark {
	transform: scale(1.04);
}

.header-logo__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.header-logo__text .header-logo__name,
.header-logo__text .header-logo__description {
	display: block;
}

/* Auf schmalen Bildschirmen zählt jeder Pixel in der Kopfzeile.
   Das Zeichen bleibt, der Claim tritt zurück. */
@media (max-width: 640px) {
	.header-logo__link {
		gap: 0.6rem;
	}

	.header-logo img.header-logo__mark {
		height: 34px;
	}

	.header-logo__text .header-logo__description {
		display: none;
	}
}

/* Das Bildzeichen trägt kein alt-Attribut, weil der Name daneben
   steht. Für die Tastaturbedienung bleibt der Link trotzdem klar
   erkennbar. */
.header-logo__link:focus-visible {
	outline: 3px solid var(--ink-orange-500, #FF6A2B);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ------------------------------------------------------------
   Aktionsknopf im Kopfbereich ("Post a Job")
   ------------------------------------------------------------
   Er trägt das Mintgrün aus dem hervorgehobenen Wort der
   Hauptüberschrift – dieselbe Farbe, also derselbe Signalwert.

   Wichtig dabei die Schriftfarbe: Weiss auf diesem hellen Mint
   erreicht nur 1,79:1 und wäre praktisch unlesbar. Mit Graphit
   sind es 9,64:1. Deshalb dunkle statt heller Schrift – eine
   Umkehrung gegenüber allen anderen Knöpfen der Seite.

   Gegen die dunkle Kopfzeile hebt sich die Fläche mit 9,26:1 ab;
   eine zusätzliche Kante wie beim vorherigen Blau braucht es nicht.
   ------------------------------------------------------------ */

/* Zum !important: JobHive setzt in seiner style.css
     .hp-menu--site-header .hp-menu__item--listing-submit
     { background-color: rgba(255,255,255,.2) !important }
   Der Knopf soll sich damit an jede Kopfzeilenfarbe anpassen. Gegen
   ein !important hilft keine Spezifität – ohne dasselbe Mittel
   bliebe die Fläche halbtransparent weiss, gleich welche Farbe hier
   steht. Deshalb hier ausnahmsweise ebenfalls !important, und zwar
   nur für diese eine Eigenschaft. */
.hp-menu--site-header .hp-menu__item--listing-submit,
.header-navbar__actions .button--secondary,
.header-navbar__actions .hp-menu__item--listing-submit {
	background-color: var(--ink-mint-300, #8ECFB2) !important;
	color: var(--ink-graphite-900, #171B21);
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Auch das Pluszeichen erbt die dunkle Schriftfarbe. */
.header-navbar__actions .hp-menu__item--listing-submit .hp-icon,
.header-navbar .hp-menu__item--listing-submit .hp-icon {
	color: inherit;
}

.hp-menu--site-header .hp-menu__item--listing-submit:hover,
.header-navbar__actions .button--secondary:hover,
.header-navbar__actions .hp-menu__item--listing-submit:hover {
	background-color: var(--ink-mint-400, #66BE9A) !important;
	color: var(--ink-graphite-900, #171B21);
}

/* ------------------------------------------------------------
   Detailseite einer Vorlage: Theme-Kopfbereich abschalten
   ------------------------------------------------------------
   JobHive blendet dort das Beitragsbild als Hintergrund ein. Auf
   diesen Seiten ist das die Vorschauseite der Vorlage – hinter dem
   halbtransparenten Titel entstand daraus ein unleserliches
   Durcheinander. Die Seite beginnt jetzt schlicht auf dem hellen
   Grund, wie der restliche Inhalt.

   Der Filter hivetheme/v1/areas/site_hero leert bereits den Inhalt;
   diese Regel entfernt zusätzlich die Fläche samt Hintergrundbild.
   Bei display:none lädt der Browser das Bild gar nicht erst.
   ------------------------------------------------------------ */

body.inklusio-vorlage .header-hero {
	display: none;
}

body.inklusio-vorlage .site-content,
body.inklusio-vorlage .site-container {
	background-color: var(--ink-bg, #FDFAF5);
}