/**
 * Villa Antoinette – Gestaltung (Frontend und Editor).
 * Farben, Schriften und Grundtypografie kommen aus theme.json;
 * hier stehen die Block-Stile und die Bereiche, die theme.json nicht abbildet.
 */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Typografie ---------- */

h3.wp-block-heading + p,
h3.wp-block-heading + ul {
	margin-block-start: 0.2rem;
}

.wp-block-list li {
	margin-block-end: 0.4rem;
}

/* Introtext: Steagal mit Laufweite */
.is-style-va-introtext {
	font-family: var(--wp--preset--font-family--steagal);
	line-height: 1.3;
	letter-spacing: 0.1rem;
}

/* Boxtitel: Domaine in Versalien, zentriert (Textboxen, Aktivitäten) */
.wp-block-heading.is-style-va-boxtitel {
	font-family: var(--wp--preset--font-family--domaine);
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.2;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	text-align: center;
	margin-block: 0.5rem 0;
}

/* Überschrift mit Linie (Informationen, Klausur) */
.wp-block-heading.is-style-va-linie {
	font-family: var(--wp--preset--font-family--steagal);
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.15;
	text-transform: uppercase;
	max-width: 40rem;
	padding-block-end: 0.2rem;
	border-bottom: 2px solid var(--wp--preset--color--mint);
	margin-block-start: 2.5rem;
}

.wp-block-heading.is-style-va-linie:first-child {
	margin-block-start: 0;
}

/* ---------- Trenner ---------- */

.wp-block-separator.is-style-va-trenner {
	width: 3.5rem;
	height: 0.45rem;
	border: 0;
	margin-inline: auto !important;
	margin-block: 0.75rem !important;
	background: url("../illu/trenner.svg") center / contain no-repeat;
	opacity: 1;
}

.wp-block-separator.is-style-va-ornament {
	width: 100%;
	max-width: none;
	height: 1.5rem;
	border: 0;
	margin-block: 0 !important;
	background: var(--wp--preset--color--creme) url("../images/leiste.png") left center repeat-x;
	opacity: 1;
}

/* ---------- Textboxen mit Rahmen ---------- */

.is-style-va-rahmen-mint,
.is-style-va-rahmen-rose,
.is-style-va-rahmen-blau {
	--va-rahmen: var(--wp--preset--color--mint);
	outline: 2px solid var(--va-rahmen);
	outline-offset: calc(-0.5rem - 2px);
}

.is-style-va-rahmen-rose {
	--va-rahmen: var(--wp--preset--color--rose);
}

.is-style-va-rahmen-blau {
	--va-rahmen: var(--wp--preset--color--blaugrau);
}

.is-style-va-rahmen-mint > *,
.is-style-va-rahmen-rose > *,
.is-style-va-rahmen-blau > * {
	margin-block: 0.6rem 0;
}

.is-style-va-rahmen-mint > :first-child,
.is-style-va-rahmen-rose > :first-child,
.is-style-va-rahmen-blau > :first-child {
	margin-block-start: 0;
}

.va-icon img {
	display: block;
	margin-inline: auto;
}

/* ---------- Startseitenkopf ---------- */

.va-logo {
	margin-block: 0 !important;
}

.is-style-va-kopf > .wp-block-image.alignfull {
	margin: 0 -1rem !important;
	max-width: none;
	width: calc(100% + 2rem);
}

.is-style-va-kopf > .wp-block-group {
	position: relative;
	z-index: 1;
	margin-block-start: -6.5rem !important;
}

@media (max-width: 40rem) {
	.is-style-va-kopf > .wp-block-image.alignfull img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 35% 50%;
	}

	.is-style-va-kopf > .wp-block-group {
		margin-block-start: -2.5rem !important;
		padding-inline: 1.5rem !important;
	}
}

/* ---------- Abschnitte ---------- */

.va-illustration img {
	display: block;
	max-width: 83%;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.va-illustration img {
		max-width: 70%;
	}

	.wp-block-columns.is-style-va-mobil-umgekehrt {
		flex-direction: column-reverse;
	}

	.wp-block-columns.is-style-va-mobil-umgekehrt > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}
}

@media (min-width: 782px) {
	.is-style-va-trennlinien > .wp-block-column:not(:first-child) > p {
		border-left: 2px solid var(--wp--preset--color--mint);
	}

	.is-style-va-trennlinien > .wp-block-column > p {
		padding-left: 1.5rem;
	}
}

.is-style-va-trennlinien .wp-block-heading.is-style-va-boxtitel {
	margin-block: 1rem 1.25rem;
}

.va-anfahrtsplan img {
	width: 100%;
}

/* ---------- Tabs (Ausstattung) ---------- */

.wp-block-tabs .wp-block-tab-list button {
	font-family: var(--wp--preset--font-family--steagal);
	font-size: 0.85rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	padding: 0.15rem 0;
	text-align: left;
}

.wp-block-tabs .wp-block-tab-list button:hover,
.wp-block-tabs .wp-block-tab-list button[aria-selected="true"] {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-tabs .wp-block-tab-list button[aria-selected="true"]::before {
	display: none;
}

.wp-block-tabs .wp-block-tab-panel {
	animation: va-einblenden 0.4s ease-out;
}

.wp-block-tabs .wp-block-tab-panel .wp-block-list {
	margin: 0;
}

@media (min-width: 54rem) {
	.wp-block-tabs {
		display: grid;
		grid-template-columns: minmax(8rem, 30%) 1fr;
		gap: 1.5rem;
		align-items: start;
	}

	.wp-block-tabs > .wp-block-tab-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
	}

	.wp-block-tabs > * {
		margin: 0 !important;
	}
}

@media (max-width: 53.99rem) {
	.wp-block-tabs > .wp-block-tab-list {
		gap: 0 1rem;
	}

	.wp-block-tabs .wp-block-tab-list button[aria-selected="true"] {
		text-decoration: none;
		box-shadow: inset 0 -2px 0 currentColor;
	}

	.wp-block-tabs .wp-block-tab-panel {
		border: 2px solid rgb(64 61 55 / 0.225);
		padding: 1rem;
		margin-block-start: 0.5rem;
	}
}

@keyframes va-einblenden {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-tabs .wp-block-tab-panel {
		animation: none;
	}
}

/* ---------- Kopfleiste ---------- */

.va-kopfleiste {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.3rem 1rem;
}

.va-kopfleiste > * {
	margin-block: 0 !important;
}

.va-kopfleiste__mitte {
	grid-column: 2;
	gap: 0.9rem;
	flex-wrap: nowrap !important;
}

.va-logo-icon {
	margin: 0 !important;
	flex-shrink: 0;
}

.va-logo-icon img {
	display: block;
}

.va-kopfleiste .wp-block-navigation a {
	letter-spacing: 0.06rem;
}

.va-kopfleiste .wp-block-navigation .wp-block-navigation__submenu-container {
	padding: 0.5rem 0;
	border: 0 !important;
	box-shadow: 0 0.5rem 1.5rem rgb(64 61 55 / 0.15);
	min-width: 13rem !important;
}

.va-kopfleiste .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.35rem 1.1rem;
}

.va-kopfleiste .wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
}

.va-kopfleiste .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.15rem;
}

.va-kopfleiste .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	padding-block: 0.25rem 0.75rem;
}

.va-kopfleiste .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: 0.85rem;
	opacity: 0.8;
}

/* Sprachumschalter */
.va-sprachwahl {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
}

.va-sprachwahl a,
.va-sprachwahl .va-sprachwahl__link {
	font-family: var(--wp--preset--font-family--domaine);
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--dunkelbraun);
}

.va-sprachwahl .is-aktiv {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.va-sprachwahl__kurz {
	display: none;
}

@media (max-width: 64rem) {
	.va-sprachwahl__lang {
		display: none;
	}

	.va-sprachwahl__kurz {
		display: inline;
	}
}

@media (min-width: 600px) and (max-width: 56rem) {
	.va-kopfleiste .wp-block-navigation {
		font-size: 0.72rem;
		--navigation-layout-gap: 0.6rem;
		gap: 0.6rem;
	}

	.va-kopfleiste {
		padding-inline: 0.5rem;
	}
}

/* ---------- Fußbereich ---------- */

.va-fuss .va-fuss__titel {
	font-size: var(--wp--preset--font-size--gross);
	max-width: none;
}

.va-fuss__social {
	justify-content: center;
	gap: 0.75rem;
}

.va-fuss__social figure {
	margin: 0 !important;
}

.va-fuss p,
.va-fuss .va-kontaktdaten {
	font-family: var(--wp--preset--font-family--pitch);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.55;
}

.va-fuss p a {
	font-family: inherit;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.va-fuss .wp-block-separator.is-style-va-trenner {
	margin-block: 1.5rem 2rem !important;
}

.va-fuss .wp-block-template-part {
	margin: 0;
}