/*
Theme Name: DS Wochenende
Author: Max
Description: Individuelles Block-Theme für die DS-Wochenende-Website. Vollständig im Website-Editor bearbeitbar.
Version: 0.9.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ds-wochenende
*/

/*
 * Gilt im Frontend und im Editor (add_editor_style). Alles, was theme.json
 * kann, steht in theme.json – hier nur, was dort nicht geht.
 */

/* --- Grundlagen ---------------------------------------------------------- */

html {
	scroll-padding-top: calc(var(--wp--custom--header--hoehe) + 1rem);
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--dunkelblau);
	outline-offset: 2px;
}

::selection {
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--textblau);
}

/* Überschriften linksbündig wie der Fließtext (D27); zentriert nur per Block-Attribut (Hero, Aufruf, Zitat). */

/* Skip-Link: erst bei Fokus sichtbar, dann deutlich */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--textblau);
	font-weight: 700;
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--wp--custom--radius--pill);
	z-index: 100000;
}

/* --- Header (sticky, D10) ------------------------------------------------ */

/* Der Template-Part-Wrapper (<header class="wp-block-template-part">) ist das
   semantische header-Element und muss selbst sticky sein – eine sticky Gruppe
   *innerhalb* des gleich hohen Wrappers könnte nicht kleben. */
.wp-block-template-part:has(> .site-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-block-template-part:has(> .site-header) {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-block-template-part:has(> .site-header) {
		top: 46px;
	}
}

/* Admin-Bar ist unter 600 px nicht fixiert – Header dann wieder an den Rand */
@media (max-width: 600px) {
	.admin-bar .wp-block-template-part:has(> .site-header) {
		top: 0;
	}
}

.site-header {
	box-shadow: 0 1px 0 rgb(4 45 98 / 0.08);
}

/* Header/Main/Footer ohne Root-Abstand: Hero-Patterns schließen bündig an (D9) */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Logo: Höhe fest, Breite ergibt sich (Hochformat mit Schnur) */
.site-header .wp-block-site-logo img {
	width: auto !important;
	height: calc(var(--wp--custom--header--hoehe) - 2 * var(--wp--preset--spacing--20));
	max-height: none;
}

.site-header .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

/* Aktueller Menüpunkt fett */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-ancestor > a {
	font-weight: 700;
}

/* „Anmelden“ ist im Desktop-Menü doppelt (Nav-Link + Button): im Menü ausblenden,
   im mobilen Overlay stattdessen den Button ausblenden und den Link als Pille zeigen. */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .site-nav__cta {
	display: none;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .site-nav__cta > a {
	display: inline-block;
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--textblau);
	font-weight: 700;
	padding: 0.6rem 1.25rem;
	border-radius: var(--wp--custom--radius--pill);
	margin-top: 0.5rem;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: var(--wp--preset--font-size--gross);
}

/* Overlay linksbündig statt rechts (Desktop-Ausrichtung nicht übernehmen) */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--textblau);
}

@media (max-width: 781px) {
	/* Spezifität > body .is-layout-flex */
	.site-header .site-header__cta {
		display: none;
	}

	.site-header .wp-block-site-logo img {
		height: 3.5rem;
	}
}

/* --- Footer -------------------------------------------------------------- */

/* Footer = „Seid dabei!“ (D86): blaue Aufruf-Sektion mit Wellenkante, Ballon und Konfetti
   (Klassen dsw-sektion + aufruf aus bausteine.css), darunter die Leiste mit Impressum,
   Datenschutz, Kontakt und Instagram. Die Welle überlappt 3.5rem in den Inhalt – die
   letzte Sektion bekommt die Überlappung als Luft dazu (siehe „Inhalt“). */
.site-footer.dsw-sektion.aufruf {
	padding-bottom: var(--wp--preset--spacing--40);
}

/* Text schmaler als contentSize (52rem), damit der Ballon links Platz hat */
.site-footer.dsw-sektion.aufruf > .wp-block-heading,
.site-footer.dsw-sektion.aufruf > p {
	max-width: 40rem;
}

/* Ballon sitzt auf Höhe des Aufrufs, nicht mittig über der ganzen Sektion samt Leiste;
   unter 1000px kleiner, unter 900px weg (sonst läuft er in den Text). */
.site-footer.dsw-sektion.aufruf::before {
	top: calc(50% - 2.5rem);
}

@media (max-width: 999px) {
	.site-footer.dsw-sektion.aufruf::before {
		width: 6rem;
	}
}

@media (max-width: 899px) {
	.site-footer.dsw-sektion.aufruf::before {
		display: none;
	}
}

.site-footer__leiste a {
	color: var(--wp--preset--color--weiss);
	text-decoration-color: rgb(255 255 255 / 0.4);
}

.site-footer__leiste a:hover {
	color: var(--wp--preset--color--hellgelb);
	text-decoration-color: currentColor;
}

.site-footer__leiste {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgb(255 255 255 / 0.25);
	color: var(--wp--preset--color--hellblau);
}

.site-footer__leiste > p {
	margin: 0;
}

.site-footer__leiste .wp-block-social-links {
	margin: 0;
}

.site-footer .wp-block-social-link:hover {
	transform: scale(1.15);
}

@media (max-width: 599px) {
	.site-footer__leiste {
		flex-direction: column;
		text-align: center;
	}
}

/* --- Inhalt ---------------------------------------------------------------- */

/* Seiten ohne Hero-Pattern (D9): erstes/letztes nicht vollbreites Element bekommt Luft zu Header/Footer.
   Vollbreite Sektionen (E2) schließen bündig an – main hat kein Padding. */
.wp-block-post-content > :first-child:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-content > :last-child:not(.alignfull) {
	margin-bottom: calc(var(--wp--preset--spacing--60) + 3.5rem);
}

/* Der Footer (Welle, D86) überlappt 3.5rem – die letzte Sektion bekommt sie als Luft dazu. */
.wp-block-post-content > .dsw-sektion:last-child {
	padding-bottom: calc(var(--wp--preset--spacing--50) + 3.5rem);
}

@media (max-width: 781px) {
	.wp-block-post-content > .dsw-sektion:last-child {
		padding-bottom: calc(var(--wp--preset--spacing--40) + 3.5rem);
	}
}

/* Tabellen mobil: kein Wortumbruch in Zellen, stattdessen kleiner + horizontal scrollbar (Core: overflow-x) */
@media (max-width: 599px) {
	.wp-block-table table,
	.wp-block-table table.has-fixed-layout {
		table-layout: auto;
		font-size: var(--wp--preset--font-size--klein);
	}

	.wp-block-table td,
	.wp-block-table th,
	.wp-block-table .has-fixed-layout td,
	.wp-block-table .has-fixed-layout th {
		word-break: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}
}

/* --- Editor-Feinheiten --------------------------------------------------- */

.editor-styles-wrapper .site-header {
	position: relative !important;
	top: auto !important;
}