/*
Theme Name: Anita Pitsch
Theme URI: https://anitapitsch.at
Description: Child-Theme auf Basis von Twenty Twenty-Five. Design und Farben liegen zentral in der theme.json, damit Inhalte gepflegt werden koennen, ohne dass sich am Design etwas verschiebt.
Author: Possnigg Consulting
Author URI: https://possnigg-consulting.at
Template: twentytwentyfive
Version: 1.7.0
Requires at least: 6.7
Tested up to: 6.8
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: anitapitsch
*/

/* Ergaenzungen, die sich nicht in der theme.json abbilden lassen. */

/* Sichtbarer Fokusrahmen fuer Tastaturbedienung. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--koralle);
	outline-offset: 3px;
}

/* Ueberschriften sollen nicht mit einem einzelnen Wort in der letzten Zeile enden. */
h1, h2, h3, h4 {
	text-wrap: balance;
}

/* Der letzte Menuepunkt ("Kennenlerngespraech") wird als Schaltflaeche gezeigt.
   Im aufgeklappten Menue am Handy bleibt er ein normaler Eintrag. */
@media (min-width: 600px) {
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:last-child > a {
		background: var(--wp--preset--color--zwetschke);
		color: var(--wp--preset--color--papier);
		padding: 0.7rem 1.2rem;
		border-radius: 3px;
		transition: background 160ms ease;
	}
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:last-child > a:hover {
		background: var(--wp--preset--color--zwetschke-tief);
		color: var(--wp--preset--color--papier);
	}
}

/* ---------- Kontaktformular ---------- */
.ap-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: 100%;
}
.ap-feld {
	display: grid;
	gap: 0.45rem;
	margin: 0;
}
.ap-feld label {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.01em;
}
.ap-feld input[type="text"],
.ap-feld input[type="email"],
.ap-feld textarea,
.ap-feld select {
	/* Ohne border-box zaehlen Innenabstand und Rahmen zur Breite dazu.
	   Die Felder ragten dadurch rechts ueber den Kasten hinaus. */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font: inherit;
	font-size: var(--wp--preset--font-size--normal);
	padding: 0.75rem 0.9rem;
	border: 1px solid #D6C8D1;
	border-radius: 4px;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--tinte);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ap-feld textarea { resize: vertical; min-height: 9.5rem; line-height: 1.6; }
.ap-feld select { appearance: none; background-image: none; }
.ap-feld input:hover,
.ap-feld textarea:hover,
.ap-feld select:hover { border-color: #BFA9B9; }
.ap-feld input:focus,
.ap-feld textarea:focus,
.ap-feld select:focus {
	border-color: var(--wp--preset--color--zwetschke);
	box-shadow: 0 0 0 3px rgba(107, 45, 91, 0.12);
	outline: none;
}
.ap-feld input:focus-visible,
.ap-feld textarea:focus-visible,
.ap-feld select:focus-visible {
	outline: 3px solid var(--wp--preset--color--koralle);
	outline-offset: 2px;
}

/* Zustimmung: Kaestchen links, Text daneben */
.ap-feld--haken {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.7rem;
	margin-top: 0.2rem;
}
.ap-feld--haken label {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.55;
	color: var(--wp--preset--color--tinte-weich);
}
.ap-feld--haken input {
	box-sizing: border-box;
	margin: 0.25rem 0 0;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--wp--preset--color--zwetschke);
}

.ap-hinweis {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--tinte-weich);
	margin: 0;
}

.ap-form button {
	justify-self: start;
	padding: 0.85rem 1.8rem;
	font-size: var(--wp--preset--font-size--klein);
	cursor: pointer;
}

/* Der Honigtopf muss fuer Bots im Markup stehen, fuer Menschen aber
   unerreichbar sein. display:none erkennen manche Bots, deshalb ausgelagert. */
.ap-honigtopf {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.ap-meldung {
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--klein);
}
.ap-meldung:focus-visible { outline: 3px solid var(--wp--preset--color--koralle); outline-offset: 3px; }
.ap-meldung p { margin: 0; }
.ap-meldung ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.ap-meldung li { margin-bottom: 0.3rem; }
.ap-meldung--gut {
	background: var(--wp--preset--color--papier-2);
	border-left: 4px solid var(--wp--preset--color--zwetschke);
}
.ap-meldung--fehler {
	background: #FDECEA;
	border-left: 4px solid var(--wp--preset--color--koralle);
	color: #5A1F1C;
}

/* ---------- Kopfbereich am Handy ---------- */
/* Der Untertitel neben dem Namen macht die linke Gruppe so breit, dass das
   Menuesymbol in die naechste Zeile rutscht. Auf schmalen Bildschirmen
   traegt der Name allein, der Untertitel steht ohnehin im Fussbereich. */
@media (max-width: 781px) {
	.site-head-inner .wp-block-site-tagline,
	header .wp-block-site-tagline {
		display: none;
	}
	header .wp-block-group.alignwide {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
	}
	header .wp-block-site-title {
		white-space: nowrap;
	}
}

/* ---------- Aufgeklapptes Menü am Handy ---------- */
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--30);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--papier-3);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	display: block;
	width: 100%;
	padding-block: 0.95rem;
	font-size: var(--wp--preset--font-size--gross);
	text-decoration: none;
}
/* Der letzte Eintrag ist die Handlungsaufforderung und wird zur Schaltflaeche,
   wie am grossen Bildschirm auch. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	border-top: 0;
	margin-top: var(--wp--preset--spacing--40);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child > a {
	background: var(--wp--preset--color--zwetschke);
	color: var(--wp--preset--color--papier);
	border-radius: 3px;
	text-align: center;
	padding-block: 0.9rem;
	font-size: var(--wp--preset--font-size--normal);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
}

/* ---------- Kopfbereich der Seiten ---------- */
/* Das Bild fuellt die Spalte aus. Ohne diese Regel zeigt WordPress eine Datei
   in ihrer natuerlichen Groesse - das Portraet auf "Ueber mich" ist nur 336 px
   breit, die Spalte aber 459 px. Rechts blieben 123 px leer und der ganze
   Kopfbereich sass sichtbar schief in der Seite. */
.ap-kopf .wp-block-image img {
	width: 100%;
}

/* ---------- Fußbereich ---------- */
/* Zwischen dem Inhalt und dem Fussbereich lag der Blockabstand von 22 px in
   der Seitenfarbe. Endet eine Seite mit einem dunklen Band, war das ein
   heller Streifen quer ueber die Seite. WordPress setzt den Abstand mit
   :where(.wp-site-blocks) > * und damit ohne Gewicht, eine einfache Regel
   genuegt. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Die Verlinkungsfarbe aus der theme.json ist fuer helle Flaechen gedacht.
   Auf dem dunklen Fussbereich waere sie mit 2,15:1 praktisch unlesbar. */
.ap-fuss a {
	color: var(--wp--preset--color--papier);
	text-decoration-color: rgba(247, 243, 245, 0.45);
	text-underline-offset: 3px;
}
.ap-fuss a:hover,
.ap-fuss a:focus-visible {
	color: var(--wp--preset--color--koralle);
	text-decoration-color: currentColor;
}

/* Die Seitenliste und die Kontaktangaben sind Navigationslisten,
   keine Aufzaehlungen. Punkte und Einzug entfallen. */
.ap-fuss ul,
.ap-fuss .wp-block-page-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.ap-fuss li { margin-bottom: 0.4rem; }