/*
Theme Name: Schingale
Theme URI: https://schingale.de
Description: Schlankes Child-Theme von Twenty Twenty-Five. Ersetzt seit 2026-09
             den Divi-Pagebuilder: Inhalte liegen als Gutenberg-Bloecke vor,
             Gestaltung kommt aus theme.json statt aus Inline-Styles.
Author: Frank Schingale
Template: twentytwentyfive
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: schingale
*/

/* Bewusst minimal: alles Gestalterische gehoert nach theme.json.
   Hier stehen nur Dinge, die sich dort nicht ausdruecken lassen. */

/* Der aufklappbare Details-Block bekommt eine ruhige Rahmung,
   damit die Leistungsuebersichten als Einheit lesbar bleiben. */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-block: 0.75rem;
}

.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}

.wp-block-details[open] summary {
	margin-block-end: 0.75rem;
}

/* Icon-Kreise der Leistungskacheln — der Nachbau der blauen Divi-Blurb-Kreise,
   nur als SVG statt als Icon-Font, damit keine Schriftdatei noetig ist.
   Bewusst das Logo-Blau #2EA3F2 (aus der Logodatei ausgelesen) und nicht der
   abgedunkelte Akzent: die Icons sind dekorativ (aria-hidden), tragen also
   keine Textinformation, fuer die ein Kontrast von 4.5:1 noetig waere. */
.sg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-light);
	margin-block-end: 1rem;
}

.sg-icon svg {
	width: 32px;
	height: 32px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Karten heben sich leicht vom Grund ab und reagieren auf den Mauszeiger. */
.sg-card {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sg-card:hover {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 2px 12px rgb(18 115 188 / 12%);
}

/* Links im Fliesstext klar als solche erkennbar halten. */
.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.2em;
}

/* Akzentstreifen ganz oben: rein dekorativ, deshalb ohne Innenabstand,
   damit der Spacer die Hoehe exakt vorgibt. */
.sg-accentbar {
	padding-block: 0;
}

/* Produktlogos (ownCloud, Icinga) sind grosse PNGs. Ohne Deckelung fuellen sie
   die Spalte komplett aus und draengen den eigentlichen Inhalt unter die Falz. */
.sg-productlogo img {
	max-width: 240px;
	height: auto;
	width: 100%;
}

@media (max-width: 781px) {
	/* Auf schmalen Schirmen steht das Logo ueber dem Text — dort mittig und
	   kleiner, damit es den Einstieg nicht dominiert. */
	.sg-productlogo img {
		max-width: 180px;
	}
	.sg-productlogo {
		text-align: center;
	}
}

/* Hauptnavigation: Twenty Twenty-Five setzt die Grundschrift auf Gewicht 300,
   was die Menuepunkte sehr duenn wirken laesst. Hier bewusst kraeftiger —
   das Menue ist das wichtigste Bedienelement der Seite. */
.sg-mainnav a {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.sg-mainnav a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Die Seite, auf der man gerade steht, wird im Menue hervorgehoben. */
.sg-mainnav .current-menu-item > a,
.sg-mainnav .current_page_item > a {
	color: var(--wp--preset--color--accent);
}

/* Untermenue: heller Grund, damit es sich vom Inhalt abhebt. */
.sg-mainnav .wp-block-navigation__submenu-container {
	border-color: var(--wp--preset--color--contrast-2);
	border-radius: 6px;
	padding-block: 0.35rem;
}

/* Fussbereich: Links stehen auf dunklem Grund, brauchen also die helle
   Grundfarbe statt des Akzentblaus — sonst kaum lesbar. */
.sg-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.sg-footer a:hover {
	text-decoration: underline;
}