/*
 * Basis: Hintergrund, Schrift, Überschriften, Links, Fokus.
 * Nur auf sirupe-site-Seiten geladen. Jeder Selektor beginnt mit .sirupe-site.
 * Inhalte (Startseite, Shop, Inhaltsseiten) folgen in späteren Stufen.
 */

.sirupe-site,
.sirupe-site #page,
.sirupe-site .site-content {
	background: var(--s-bg);
}

.sirupe-site,
.sirupe-site button,
.sirupe-site input,
.sirupe-site select,
.sirupe-site textarea {
	font-family: var(--s-font-body);
}

.sirupe-site {
	color: var(--s-ink);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Überschriften */

.sirupe-site h1,
.sirupe-site h2,
.sirupe-site h3,
.sirupe-site h4,
.sirupe-site h5,
.sirupe-site h6,
.sirupe-site .entry-content :where(h1, h2, h3, h4, h5, h6),
.sirupe-site .entry-title,
.sirupe-site .entry-title a {
	font-family: var(--s-font-head);
	color: var(--s-ink);
	letter-spacing: var(--s-tracking-head);
}

.sirupe-site h1,
.sirupe-site h2,
.sirupe-site .entry-content :where(h1, h2) {
	font-weight: 800;
	line-height: 1;
}

.sirupe-site h3,
.sirupe-site h4,
.sirupe-site h5,
.sirupe-site h6,
.sirupe-site .entry-content :where(h3, h4, h5, h6) {
	font-weight: 700;
	line-height: 1.15;
}

.sirupe-site .entry-content :where(h1) {
	font-size: var(--s-h1);
}

.sirupe-site .entry-content :where(h2) {
	font-size: var(--s-h2);
}

.sirupe-site .entry-content :where(h3) {
	font-size: var(--s-h3);
}

/* Seitentitel (Seiten, Shop): kleiner als die Hero-H1, siehe README Abschnitt 42. */
.sirupe-site header.entry-header .entry-title,
.sirupe-site .woocommerce-products-header__title.page-title {
	font-size: var(--s-page-title);
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.5em;
}

/* Beitragstitel in Listen (Query-Block „Aktuelles“): Kartentitel-Größe, Karten folgen in Stufe 2. */
.sirupe-site .entry-content .wp-block-post-title,
.sirupe-site .entry-content :where(h2).wp-block-post-title {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.15;
}

/* Links im Inhalt (Buttons ausgenommen) */

.sirupe-site .entry-content a:where(:not(.wp-block-button__link):not(.button):not(.wp-element-button):not(.sirupe-btn):not(.sirupe-pill):not(.sirupe-card)) {
	color: var(--s-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.sirupe-site .entry-content a:where(:not(.wp-block-button__link):not(.button):not(.wp-element-button):not(.sirupe-btn):not(.sirupe-pill):not(.sirupe-card)):hover {
	color: var(--s-ink-soft);
}

.sirupe-site .entry-content .wp-block-post-title a {
	text-decoration: none;
}

.sirupe-site .entry-content .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Fokus sichtbar (Tastatur) */

.sirupe-site :focus-visible {
	outline: 2px solid var(--s-accent);
	outline-offset: 3px;
}

.sirupe-site ::selection {
	background: var(--s-ink);
	color: var(--s-bg);
}

/* Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {
	.sirupe-site *,
	.sirupe-site *::before,
	.sirupe-site *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Abstand zwischen sticky Header und Inhalt (vorher übernahm der hohe Header diese Rolle). */
.sirupe-site #content {
	padding-top: clamp(24px, 4vw, 48px);
}

/*
 * Aus legacy-woo.css übernommen (Customizer-Abschnitt „Aktuelles – Beitragsbild
 * vollständig anzeigen“), weil legacy-woo ab Stufe 3 auf sirupe-site-Seiten
 * nicht mehr geladen wird. Gilt für Abfrage-Schleifen wie auf der Seite
 * „Aktuelles“ – nicht für die Beitragskarten der Startseite (.sirupe-news) und
 * von „Über uns“ (.sirupe-ue-news, seit 2.9.0) und „Aktuelles“ (.sirupe-ak-query, seit 2.10.0).
 * !important wie im Original, weil Core-Inline-Styles (aspect-ratio, height) sonst gewinnen.
 */
.sirupe-site .wp-block-query:not(.sirupe-news__query, .sirupe-ue-news__query, .sirupe-ak-query) .wp-block-post-featured-image {
	width: 100%;
	max-width: 700px;
	height: auto !important;
	aspect-ratio: auto !important;
	overflow: visible;
}

.sirupe-site .wp-block-query:not(.sirupe-news__query, .sirupe-ue-news__query, .sirupe-ak-query) .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	border-radius: 10px;
}