/*
Theme Name: Jonak
Theme URI: https://www.jonak.org
Description: Kind-Theme von Ollie für jonak.org. Dunkel mit Orange wie das Alt-Theme joniV2.
Author: Christian Jonak-Möchel
Template: ollie
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: jonak
*/

/* Immer dunkel wie das Alt-Theme joniV2, unabhängig von der Systemeinstellung.
   Das Logo ist weiß mit orangem Einschaltknopf und braucht den dunklen Grund. */
:root {
	color-scheme: dark;
}

/* Porträt rund, mit Ring in der Akzentfarbe. */
.jonak-portrait img {
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--wp--preset--color--base), 0 0 0 6px var(--wp--preset--color--primary);
}

/* Projektkarten */
.jonak-karten {
	gap: 1.25rem;
	margin-block: 1.5rem 2rem;
}

.jonak-karte {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border-light);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	background: var(--wp--preset--color--tertiary);
}

.jonak-karte h3 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.jonak-karte h3 a {
	text-decoration: none;
}

.jonak-karte p {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
}

main h2 {
	margin-top: 2.75rem;
}

/* Fuß: Verweise in Textfarbe, erst beim Überfahren orange. */
.jonak-fuss a {
	color: inherit;
	text-decoration: none;
}

.jonak-fuss a:hover {
	color: var(--wp--preset--color--primary);
}

.jonak-fuss p {
	margin: 0;
}

@media (max-width: 781px) {
	.jonak-held {
		text-align: center;
	}

	.jonak-held .jonak-portrait {
		margin-inline: auto;
	}
}

/* Einleitung unter dem Namen: etwas größer als Fließtext, aber nicht laut. */
.jonak-lead {
	font-size: 1.2rem;
	color: var(--wp--preset--color--secondary);
}

/* Titel bleiben weiß bzw. schwarz, ob verlinkt oder nicht. */
.jonak-karte h3 a {
	color: inherit;
}

.jonak-karte h3 a:hover {
	color: var(--wp--preset--color--primary);
}

/* Icons (Lucide, ISC-Lizenz, siehe assets/icons/LICENSE). Als Maske gesetzt,
   damit sie die Akzentfarbe annehmen; im Editor reicht die Klasse am Block,
   z. B. "jonak-icon-server". */
[class*="jonak-icon-"]::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 0.9rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--jonak-icon) center / contain no-repeat;
	mask: var(--jonak-icon) center / contain no-repeat;
}

.jonak-icon-network { --jonak-icon: url(assets/icons/network.svg); }
.jonak-icon-server { --jonak-icon: url(assets/icons/server.svg); }
.jonak-icon-cloud { --jonak-icon: url(assets/icons/cloud.svg); }
.jonak-icon-shield-check { --jonak-icon: url(assets/icons/shield-check.svg); }
.jonak-icon-zap { --jonak-icon: url(assets/icons/zap.svg); }
.jonak-icon-sun { --jonak-icon: url(assets/icons/sun.svg); }
.jonak-icon-code-xml { --jonak-icon: url(assets/icons/code-xml.svg); }
.jonak-icon-users { --jonak-icon: url(assets/icons/users.svg); }
.jonak-icon-eye { --jonak-icon: url(assets/icons/eye.svg); }
.jonak-icon-leaf { --jonak-icon: url(assets/icons/leaf.svg); }
.jonak-icon-globe { --jonak-icon: url(assets/icons/globe.svg); }
.jonak-icon-sprout { --jonak-icon: url(assets/icons/sprout.svg); }
.jonak-icon-camera { --jonak-icon: url(assets/icons/camera.svg); }
.jonak-icon-cpu { --jonak-icon: url(assets/icons/cpu.svg); }
.jonak-icon-handshake { --jonak-icon: url(assets/icons/handshake.svg); }
.jonak-icon-gamepad-2 { --jonak-icon: url(assets/icons/gamepad-2.svg); }
.jonak-icon-house-wifi { --jonak-icon: url(assets/icons/house-wifi.svg); }
.jonak-icon-square-terminal { --jonak-icon: url(assets/icons/square-terminal.svg); }

/* Icon-Reihen: nur Symbol und Stichwort, ohne Fließtext. */
.jonak-symbole {
	gap: 1rem;
	margin-block: 1.5rem 1rem;
}

.jonak-symbol {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 1rem;
	text-align: center;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 6px;
	background: var(--wp--preset--color--tertiary);
}

.jonak-symbol p {
	margin: 0;
	font-family: var(--wp--preset--font-family--expanded);
	font-weight: 600;
	color: var(--wp--preset--color--main-accent);
}

/* In den Projektkarten sitzt das Icon zentriert über Titel und Text, wie in
   den Icon-Reihen. */
.jonak-karte {
	text-align: center;
}

.jonak-karte[class*="jonak-icon-"]::before {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1rem;
	/* Gleich hoch wie die Logos der Nachbarkarten, das Icon selbst bleibt zierlich. */
	-webkit-mask-size: 2.5rem;
	mask-size: 2.5rem;
}

/* Logos der Organisationen in den Karten: echte Bilder mit Alternativtext,
   gleich hoch wie das Icon der Open-Source-Karte. Quellen:
   stromfreunde-ci/dist/logos/stockerau, zukunft-stockerau-wp (Theme-Logo). */
.jonak-karten-logo {
	/* Der Bildblock bringt selbst Abstand mit; zusammen ergibt das 1rem wie beim Icon. */
	margin: 0 0 0.5rem;
}

.jonak-karten-logo img {
	display: block;
	height: 3.5rem;
	width: auto;
	margin-inline: auto;
}

/* Ohne Titel darunter darf das Logo dessen Platz mit einnehmen. */
.jonak-karten-logo--gross img {
	height: 6.5rem;
}

/* Favicon im Fließtext vor einem Verweis, z. B. TeraIT. */
.jonak-favicon {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.35em;
	vertical-align: -0.18em;
	border-radius: 50%;
}

/* Linkzeile der eigenen Repositories unter dem Kartentext. */
.jonak-karte .jonak-repos {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--secondary);
}

.jonak-karte .jonak-repos a {
	white-space: nowrap;
	text-decoration: none;
}

.jonak-karte .jonak-repos a:hover {
	text-decoration: underline;
}

/* Ganze Projektkarte klickbar: Der Hauptverweis (Titel bzw. bei der Karte ohne
   Titel das Logo) spannt per ::after über die Karte. Verweise im Text liegen
   darüber und bleiben einzeln klickbar. */
.jonak-karte {
	position: relative;
	transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

/* Der Bildblock positioniert sich selbst; sonst endete die Fläche am Logo. */
.jonak-karte .jonak-karten-logo {
	position: static;
}

.jonak-karte h3 a::after,
.jonak-karte .jonak-karten-logo--gross a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.jonak-karte p a {
	position: relative;
	z-index: 1;
}

.jonak-karte:hover,
.jonak-karte:focus-within {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary-accent);
	transform: translateY(-3px);
}

.jonak-karte:hover h3 a {
	color: var(--wp--preset--color--primary);
}

.jonak-karte :is(h3, .jonak-karten-logo) a:focus-visible {
	outline: none;
}

.jonak-karte:has(:is(h3, .jonak-karten-logo) a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.jonak-karte {
		transition: none;
	}

	.jonak-karte:hover,
	.jonak-karte:focus-within {
		transform: none;
	}
}

/* Pixelcat-Logo im Fuß: klein, auf Höhe der Textzeile. */
.jonak-pixelcat img {
	display: inline-block;
	height: 2.6em;
	width: auto;
	margin-left: 0.3em;
	vertical-align: middle;
}

.jonak-fuss .jonak-pixelcat:hover {
	text-decoration: none;
}