/* =====================================================================
   Craheim – Anpassungen für WordPress und Elementor
   Das Designsystem (craheim.css) liegt vollständig in Cascade Layers. Elementor bringt globale Regeln ohne Layer
   mit (Links ohne Unterstreichung, Bilder mit height:auto …), die sonst Vorrang hätten. Innerhalb der Craheim-
   Sektionen werden diese Regeln zurückgenommen, damit alles genau wie im statischen Projekt aussieht.
   ===================================================================== */

/* 1. Elementor-Hüllen der Craheim-Sektionen treten im Frontend zurück (Sektionen liegen wie gewohnt direkt in <main>) */
body:not(.craheim-editor) .elementor.elementor-cr,
body:not(.craheim-editor) .elementor .e-con.cr-flow,
body:not(.craheim-editor) .elementor .e-con.cr-flow > .e-con-inner,
body:not(.craheim-editor) .elementor [class*="elementor-widget-cr-"],
body:not(.craheim-editor) .elementor [class*="elementor-widget-cr-"] > .elementor-widget-container {
	display: contents;
}

/* 2. Globale Elementor-Regeln in Craheim-Sektionen zurücknehmen (Werte aus den Layern des Designsystems) */
body .elementor [class*="elementor-widget-cr-"] :is(a, img, figure, hr, embed, iframe, object, video) {
	all: revert-layer;
}

/* 3. Im Elementor-Editor: Sektionen sauber untereinander, ohne Abstände der Container */
body.craheim-editor .elementor .e-con.cr-flow {
	--padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0;
	--gap: 0; --row-gap: 0; --column-gap: 0; --content-width: 100%;
}
body.craheim-editor .elementor [class*="elementor-widget-cr-"] { inline-size: 100%; }

/* 4. Werkzeugleiste für angemeldete Redakteure: Kopfleiste darunter */
body.admin-bar .site-header { margin-block-start: var(--wp-admin--admin-bar--height, 32px); }
body.admin-bar .mobilmenu { margin-block-start: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	/* Ab 600 px scrollt die Werkzeugleiste mit */
	body.admin-bar .site-header { position: absolute; }
}

/* 5. WordPress-Klassen für Bilder und Ausrichtung in Fließtexten (Beiträge, Seiten ohne Elementor) */
@layer components {
	.prose .alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
	.prose .alignright { float: right; margin: 0.3em 0 1em 1.5em; }
	.prose .aligncenter { display: block; margin-inline: auto; }
	.prose img { block-size: auto; max-inline-size: 100%; border-radius: var(--r-m); }
	.prose .wp-caption, .prose figure { margin: 1.5em 0; }
	.prose figcaption, .prose .wp-caption-text { font-size: 0.9rem; color: var(--ink-2); margin-block-start: 0.4em; }
	.screen-reader-text:not(:focus) { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.sticky, .bypostauthor, .gallery-caption { }
	/* Seitenvorlagen ohne Elementor */
	.cr-default-page { padding-block: var(--space-xl) var(--space-2xl); }
	.cr-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-block-start: var(--space-xl); }
	.cr-pagination .page-numbers { display: inline-grid; place-items: center; min-inline-size: 2.6rem; min-block-size: 2.6rem; padding-inline: 0.8rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }
	.cr-pagination .page-numbers.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
}