/*
Theme Name:   SHG Autismus
Theme URI:    https://www.autismus-shg-ingolstadt.de
Description:  Child-Theme der Selbsthilfegruppe Autismus Ingolstadt auf Basis von Twenty Twenty-Five. Farben, Schrift und Abstände stehen in theme.json, das Layout (Seitenleiste links) hier.
Author:       Paul
Template:     twentytwentyfive
Version:      0.3.3
Requires at least: 6.7
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  shg-autismus
*/

/* ==========================================================================
   Variablen
   ========================================================================== */
:root {
	--shg-umbruch: 59.6875em;                         /* Hinweis - in Media Queries direkt eingetragen */
	--shg-seitenleiste-breite: minmax(280px, 29.4118%);
	--shg-abstand-seite: 4%;                          /* Abstand der Inhaltsspalte links und rechts */
	--shg-karte-innen: 2.5rem 3.5rem 4rem;            /* Innenabstand der weißen Inhaltskarte (Desktop) */
	--shg-karte-innen-mobil: 1.25rem 0.625rem 2rem;   /* Innenabstand der weißen Inhaltskarte (mobil), seitlich halbiert */
	--shg-rand-mobil: 0.625rem;                       /* seitlicher Rand auf dem Handy (Seitenleiste, Fußzeile) */
	--shg-link-groesse-leiste: 19px;                  /* Schriftgröße der Links in der Seitenleiste */
	--shg-adminleiste: var(--wp-admin--admin-bar--height, 0px);
	--shg-titel-farbe: #666666;                       /* Seitentitel unter dem Logo, dünn und grau wie im Original */
	--shg-zitat-farbe: #707070;                       /* Balken und Schrift von Zitaten (> in Markdown), wie Twenty Fifteen */
}

/* ==========================================================================
   Allgemein
   ========================================================================== */
mark,
.bsearch_highlight {
	background-color: var(--wp--preset--color--markierung);
	color: var(--wp--preset--color--contrast);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

/* Abstände zwischen den Hauptbereichen kommen aus diesem CSS */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ==========================================================================
   Seitenleiste
   ========================================================================== */
.shg-seitenleiste {
	padding: 1.5rem var(--shg-rand-mobil);
}

.shg-logo {
	display: block;
}

.shg-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.shg-seitentitel.shg-seitentitel {
	margin: 1rem 0 0;
	color: var(--shg-titel-farbe);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.shg-seitentitel a {
	color: var(--shg-titel-farbe);
	text-decoration: none;
}

.shg-seitentitel a:hover,
.shg-seitentitel a:focus {
	text-decoration: underline;
}

/* Knopf MENÜ - nur mobil sichtbar */
.shg-menue-knopf {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.1em;
	cursor: pointer;
}

.shg-menue-knopf[aria-expanded="true"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Ohne JavaScript bleibt das Menü immer offen, mit JavaScript ist es mobil zugeklappt */
.shg-js .shg-menue-panel:not(.ist-offen) {
	display: none;
}

.shg-menue-panel {
	margin-top: 1.5rem;
}

/* Hauptmenü */
.shg-hauptmenue {
	gap: 0.6rem;
}

.shg-hauptmenue a,
.shg-hauptmenue .wp-block-navigation-item__content.wp-block-navigation-item__content,
.shg-widget-liste a {
	color: var(--wp--preset--color--accent-1);
	font-size: var(--shg-link-groesse-leiste);
	text-decoration: none;
}

.shg-hauptmenue a:hover,
.shg-hauptmenue a:focus,
.shg-hauptmenue .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.shg-hauptmenue .wp-block-navigation-item__content.wp-block-navigation-item__content:focus,
.shg-widget-liste a:hover,
.shg-widget-liste a:focus {
	color: var(--wp--preset--color--accent-2);
	text-decoration: underline;
}

.shg-hauptmenue .current-menu-item > a {
	font-weight: 700;
}

/* Keine Untermenüs - nur die Hauptpunkte werden angezeigt (bewusst so gewollt) */
.shg-hauptmenue .wp-block-navigation__submenu-container,
.shg-hauptmenue .wp-block-navigation__submenu-icon,
.shg-hauptmenue .wp-block-page-list .wp-block-navigation__submenu-container {
	display: none !important;
}

/* ==========================================================================
   Inhaltsverzeichnis (wird von functions.php erzeugt)
   ========================================================================== */
.shg-toc {
	margin: 0 0 2.5rem;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--hinweis);
	border-left: 4px solid var(--wp--preset--color--accent-2);
}

.shg-toc summary {
	color: var(--wp--preset--color--accent-2);
	font-weight: 700;
	cursor: pointer;
}

.shg-toc ul {
	margin: 0.75rem 0 0;
	padding-left: 1.5rem;
}

.shg-toc li {
	margin: 0.35rem 0;
}

.shg-toc .shg-toc-ebene-3 {
	margin-left: 1.25rem;
	list-style-type: circle;
	font-size: var(--wp--preset--font-size--small);
}

/* Sprungziele nicht unter dem Fensterrand verstecken */
.shg-inhalt :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--shg-adminleiste) + 1rem);
}

/* Altes, leeres Inhaltsverzeichnis von Githuber MD ausblenden */
.post-toc-block {
	display: none;
}

/* Widgets */
.shg-widget-titel {
	margin: 2.5rem 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.shg-widget-liste {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.shg-widget-liste li {
	margin: 0 0 0.6rem;
	line-height: 1.35;
}

.shg-suche {
	margin-top: 2.5rem;
}

.shg-suche .wp-block-search__label {
	color: var(--wp--preset--color--accent-2);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.shg-suche .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
}

.shg-suche .wp-block-search__button {
	border-radius: 3px;
}

/* ==========================================================================
   Header-Bild
   ========================================================================== */
.shg-header-bild {
	margin: 0;
}

.shg-header-bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 825 / 278;
	object-fit: cover;
}

/* ==========================================================================
   Inhaltskarte (alles zwischen Kopf und Fuß, auch die Terminseiten)
   ========================================================================== */
.wp-site-blocks > :not(header):not(footer) {
	background: var(--wp--preset--color--base);
	padding: var(--shg-karte-innen-mobil);
}

.shg-inhalt .wp-block-post-title {
	margin-top: 0;
}

.shg-datum,
.shg-meta {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

.shg-meta {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.shg-liste .wp-block-post {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.shg-liste .wp-block-post .shg-meta {
	margin-top: 0.75rem;
	padding-top: 0;
	border-top: 0;
	gap: 1rem;
}

.shg-liste .wp-block-post-excerpt__more-link {
	font-weight: 700;
}

/* ==========================================================================
   Zitate (> in Markdown und Zitat-Block), Optik wie im alten Twenty Fifteen
   ========================================================================== */
.wp-site-blocks blockquote,
.wp-site-blocks .wp-block-quote {
	margin: 0 0 1.6em;
	padding: 0 0 0 1rem;
	border: 0;
	border-left: 4px solid var(--shg-zitat-farbe);
	background: none;
	color: var(--shg-zitat-farbe);
	font-size: var(--wp--preset--font-size--medium);
	font-style: italic;
	line-height: 1.6;
}

.wp-site-blocks blockquote p {
	margin: 0 0 0.8em;
}

.wp-site-blocks blockquote > :last-child {
	margin-bottom: 0;
}

.wp-site-blocks blockquote a {
	color: var(--wp--preset--color--accent-1);
	font-style: normal;
}

.wp-site-blocks blockquote cite {
	display: block;
	margin-top: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

/* ==========================================================================
   Termine (The Events Calendar) und Anmeldung (Registrations for TEC)
   ========================================================================== */

/* Formular nie breiter als der Inhalt */
.rtec,
.rtec * {
	box-sizing: border-box;
}

.rtec,
.rtec-form-wrapper,
.rtec-form,
.rtec input,
.rtec select,
.rtec textarea {
	max-width: 100%;
}

/* Auf dem Handy keinen zweiten Rand innerhalb der weißen Karte */
@media (max-width: 59.6875em) {
	.tribe-events-pg-template,
	#tribe-events-pg-template,
	.tribe-common .tribe-common-l-container,
	.tribe-events .tribe-events-l-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0;
		margin-right: 0;
		max-width: none;
	}

	.rtec {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.shg-fusszeile {
	margin-top: 2rem;
	padding: 1.5rem var(--shg-rand-mobil);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

.shg-fusszeile p {
	margin: 0;
}

.shg-fusszeile .shg-bildnachweis {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--accent-4);
	font-size: 15px;
}

/* ==========================================================================
   Cookie-Hinweis
   ========================================================================== */
.shg-cookie {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 99990;
	box-sizing: border-box;
	max-width: 300px;
	padding: 1.25rem;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	border-radius: 5px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.shg-cookie[hidden] {
	display: none;
}

.shg-cookie p {
	margin: 0;
}

.shg-cookie a {
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.shg-cookie button {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 0.7rem 0.5rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-2);
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.05em;
	cursor: pointer;
}

@media (max-width: 37.5em) {
	.shg-cookie {
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		border-radius: 0;
	}
}

/* ==========================================================================
   Desktop - Seitenleiste links, Inhalt rechts
   ========================================================================== */
@media (min-width: 59.6875em) {

	.wp-site-blocks {
		display: grid;
		grid-template-columns: var(--shg-seitenleiste-breite) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		max-width: 1400px;
		margin-inline: auto;
	}

	/* Der Kopf-Bereich gibt Seitenleiste und Header-Bild direkt ans Raster weiter */
	.wp-site-blocks > header.wp-block-template-part {
		display: contents;
	}

	.shg-seitenleiste {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
		position: sticky;
		top: var(--shg-adminleiste);
		max-height: calc(100vh - var(--shg-adminleiste));
		overflow-y: auto;
		padding: 3rem 2rem 3rem 2.5rem;
	}

	.shg-menue-knopf {
		display: none;
	}

	.shg-js .shg-menue-panel:not(.ist-offen) {
		display: block;
	}

	.shg-header-bild {
		grid-column: 2;
		grid-row: 1;
		margin: 3rem var(--shg-abstand-seite) 0;
	}

	.wp-site-blocks > :not(header):not(footer) {
		grid-column: 2;
		grid-row: 2;
		margin-inline: var(--shg-abstand-seite);
		padding: var(--shg-karte-innen);
	}

	.wp-site-blocks > footer.wp-block-template-part {
		grid-column: 2;
		grid-row: 3;
		margin: 0 var(--shg-abstand-seite) 3rem;
	}

	.shg-fusszeile {
		padding: 1.5rem 3.5rem;
	}
}