/*
Theme Name: StarkWP Hello Child
Theme URI: https://julianstark.de
Template: hello-elementor
Author: Julian Stark
Author URI: https://julianstark.de
Description: Child Theme für Hello Elementor. Ersetzt reset.css und theme.css des Parent Themes durch ein eigenes, spezifitätsarmes Reset (Basis: sanitize.css + die guten Teile aus Hello). Design-Tokens kommen aus den Elementor-Variablen, das Layout aus dem Theme Builder, die theme.json bedient den Gutenberg-Editor.
Version: 2.0.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starkwp-hello-child
Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =============================================================================
   CLAUDE CODE CHAT
   Claude Code -> StarkWP Child-Theme CSS Reset

   PRINZIP

   1. Alles steht in :where() → Spezifität 0.
      Jede Elementor-Klasse, jedes v4-Atomic-Element und jede theme.json-Regel
      überschreibt diese Basis ohne !important. Bewusste Ausnahmen mit echter
      Spezifität: Fokus-Ring (Abschnitt 7), Fließtext-Links (Abschnitt 3) und
      die WordPress-Core-Klassen (Abschnitt 8).

   2. Keine festen Farben oder Maße in den Regeln.
      Alles läuft über die Tokens in Abschnitt 0, die auf die
      Elementor-Variablen zeigen.

   3. Merke: CSS kennt nur den Slash-Stern-Kommentar. Doppelte Slashes sind
      KEIN Kommentar — sie verschlucken die komplette nachfolgende Regel.

   INHALT
   0. Design-Tokens (Zuordnung zu den Elementor-Variablen)
   1. Grundlagen (box-sizing, Dokument, Body)
   2. Typografie-Rhythmus
   3. Links
   4. Medien & Embeds
   5. Formulare & Buttons
   6. Tabellen
   7. Interaktion & Accessibility
   8. WordPress-Core-Klassen
   9. Fließtext-Abstände (klassischer Content)
  10. Sticky Footer
  11. Kommentare
  12. Elementor-Tweaks
  13. Utility-Klassen

   HERKUNFT
   Abschnitte 12 und 13 sowie einzelne Regeln in 1, 2, 3 und 9 kamen aus dem
   Custom CSS der Elementor-Website-Einstellungen und liegen jetzt hier.
   Bei denen ist die Spezifität bewusst so gelassen wie im Original — sie
   funktionierten dort gegen konkrete Elementor-Regeln, und Absenken auf
   :where() würde genau das kaputt machen. Die Stellen sind markiert.
   ============================================================================= */


/* 0. Design-Tokens
   ==========================================================================

   Elementor v4 gibt jede Variable aus Site Settings → Variables als
   :root { --<label>: … } aus. Die Labels unten sind die echten Namen aus
   diesem Design-System. Dahinter steht jeweils ein neutraler Notnagel —
   er greift nur, wenn eine Variable fehlt oder das Theme auf einer anderen
   Installation läuft, und ist deshalb bewusst markenneutral gehalten.

   Getauft wird auf --sw-*, damit die Regeln weiter unten nie direkt an
   Elementor hängen. Für ein anderes Projekt hängst du nur diesen Block um.

   Fußnote: Elementor v3 Global Colors liegen NICHT auf :root, sondern auf
   der Body-Klasse .elementor-kit-<ID>. Dafür gibt es die Brücke darunter.
   ========================================================================== */

:root {
	/* Farben */
	--sw-color-text:          var(--color-text-body,  #444444);
	--sw-color-primary:       var(--color-primary,    #2563eb);
	/* Auswahlfarbe folgt dem Akzent, bleibt aber immer hell genug fuer Text */
	--sw-color-selection:     color-mix(in srgb, var(--color-primary, #0064d2) 18%, #ffffff);
	--sw-color-border:        var(--color-border-1,   #dddddd);
	--sw-color-border-strong: var(--color-border-2,   #a3a3a3);

	/* Maße */
	--sw-radius:     var(--radius-s, 8px);
	--sw-space-flow: var(--space-5,  1.5rem);
}

/* Brücke für Legacy-Widgets: Elementors v3-Globals auf die v4-Variablen
   zeigen lassen, damit alte Widgets dieselben Farben treffen.
   Übernommen aus dem Kit-CSS, dort war es auf .elementor-kit-6 fest
   verdrahtet — [class*="…"] macht es kit-unabhängig und hat mit (0,1,0)
   genug Spezifität, weil diese Datei nach der Kit-CSS lädt. */
[class*="elementor-kit-"] {
	--e-global-color-primary:   var(--color-primary);
	--e-global-color-secondary: var(--color-secondary);
	--e-global-color-text:      var(--color-text-body);
	--e-global-color-accent:    var(--color-accent);
}


/* 1. Grundlagen
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:where(html) {
	/* Verhindert, dass iOS im Querformat die Schrift automatisch hochskaliert */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	tab-size: 4;
	/* Fallback, bis die theme.json-Typografie greift */
	line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
	:where(html:focus-within) {
		scroll-behavior: smooth;
	}
}

:where(body) {
	/* Der Klassiker: UA-Default von 8px abräumen */
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Aus dem Kit-CSS. Greift nur als Fallback: die Kit-Typografie liegt auf
	   .elementor-kit-<ID> und schlägt body. */
	font-family: var(--font-family-body, system-ui, sans-serif);
	font-weight: var(--font-weight-text, 400);
}

/* Anker-Sprünge dürfen nicht unter dem Sticky-Header landen. Aus dem
   Kit-CSS, dort über zwei identische Media Queries und eine
   Zwischenvariable gelöst — hier zu einer Regel zusammengezogen.
   Der Fallback bei --wp-admin--admin-bar--height ist neu und wichtig:
   ohne ihn wird das calc() fuer ausgeloggte Besucher ungueltig, weil WordPress
   die Variable nur mit sichtbarer Admin-Bar definiert. */
:where(html) {
	scroll-padding-block-start: calc(
		var(--header-height, 0px) + var(--wp-admin--admin-bar--height, 0px)
	);
}


/* 2. Typografie-Rhythmus
   Alle Block-Margins auf 0. Abstände macht der Elementor-Container (gap)
   bzw. Abschnitt 9 für klassischen Content.
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre, hr) {
	margin-block: 0;
}

/* Aus dem Kit-CSS, Spezifität bewusst wie im Original (0,0,1):
   auf :where() abgesenkt wuerde die Kit-Typografie gewinnen. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
	font-weight: var(--font-weight-heading, 600);
	text-wrap: balance;
}

:where(h1) {
	/* Chrome/Safari verkleinern h1 in section/article — hier vereinheitlicht */
	font-size: 2em;
}

/*
 * Elementor setzt die Schriftgröße auf dem Widget-Wrapper, nicht auf der
 * Überschrift selbst. Ohne diese Regel multipliziert der em-Wert der
 * Überschrift den Wrapper-Wert: eine h1 in einem Wrapper mit 55px landet
 * bei 110px, eine h2 bei 1.5 × Wrapper. Betrifft die Regel darüber
 * genauso wie die Browser-Defaults von h2 bis h6.
 */
:where(.elementor-heading-title) {
	font-size: inherit;
}

p, li, blockquote, dd, figcaption {
	text-wrap: pretty;
}

/* Listen in Navigationen sind Layout, keine Aufzählung */
:where(nav) :where(ol, ul) {
	list-style: none;
	padding-inline-start: 0;
}

:where(ul[role="list"], ol[role="list"]) {
	list-style: none;
	padding-inline-start: 0;
}

:where(hr) {
	block-size: 0;
	color: inherit;
	border: 0;
	border-block-start: 1px solid;
	opacity: 0.25;
}

b, strong {
	font-weight: 700;
}

:where(small) {
	font-size: 80%;
}

:where(sub, sup) {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

:where(sub) { bottom: -0.25em; }
:where(sup) { top: -0.5em; }

:where(abbr[title]) {
	text-decoration: underline dotted;
	cursor: help;
}

:where(code, kbd, samp, pre) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1em;
}

:where(pre) {
	white-space: pre-wrap;
	overflow-x: auto;
}


/* 3. Links
   ========================================================================== */

:where(a) {
	color: inherit;
	text-decoration: none;
}

/*
 * Fließtext-Links müssen ohne Farbe erkennbar sein. Aus dem Kit-CSS
 * übernommen, Spezifität bewusst wie im Original — die .elementor-Variante
 * existiert, um Elementors eigenes text-decoration: none zu schlagen.
 * Die Link-FARBE bleibt bewusst beim Elementor-Kit (link_normal_color),
 * damit es dafür nur eine Quelle gibt.
 */
p a,
.elementor p a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-skip-ink: auto;
}


/* 4. Medien & Embeds
   ========================================================================== */

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	max-inline-size: 100%;
	/* Entfernt den Baseline-Spalt unter Bildern, ohne display:block zu erzwingen
	   (display:block würde Inline-Bilder im Fließtext umbrechen) */
	vertical-align: middle;
}

:where(img, video) {
	block-size: auto;
}

:where(iframe, embed, object) {
	border: 0;
}

:where(svg:not([fill])) {
	fill: currentColor;
}


/* 5. Formulare & Buttons
   ========================================================================== */

:where(input, button, select, textarea, optgroup) {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	margin: 0;
}

:where(button, [type="button"], [type="reset"], [type="submit"], select, summary, label[for]) {
	cursor: pointer;
}

:where(button, [type="button"], [type="reset"], [type="submit"]):disabled,
:where([aria-disabled="true" i]) {
	cursor: not-allowed;
}

:where(textarea) {
	resize: vertical;
	overflow: auto;
}

:where(fieldset) {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

:where(legend) {
	padding: 0;
}

:where(progress) {
	vertical-align: baseline;
}

:where([type="search"]) {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/*
 * Neutrale Basis für Textfelder außerhalb von Elementor
 * (Kommentarformular, Suche, Plugin-Formulare).
 * Elementor-Form-Widgets bringen eigene Styles mit und überschreiben das.
 */
:where(
	input:not(
		[type="checkbox"], [type="radio"], [type="range"], [type="color"],
		[type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]
	),
	select,
	textarea
) {
	inline-size: 100%;
	padding: 0.5em 0.75em;
	background-color: #fff;
	border: 1px solid var(--sw-color-border-strong);
	border-radius: var(--sw-radius);
}

:where(input, select, textarea)::placeholder {
	color: currentColor;
	opacity: 0.55;
}


/* 6. Tabellen
   ========================================================================== */

:where(table) {
	inline-size: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	text-indent: 0;
	border-color: currentColor;
}

:where(th, td) {
	padding: 0.75em 1em;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid var(--sw-color-border);
}

:where(th) {
	font-weight: 700;
}

/*
 * Gutenberg umschließt Tabellen mit <figure class="wp-block-table">.
 * Eine breite Tabelle scrollt dort in sich, statt auf schmalen Viewports
 * die ganze Seite horizontal zu verschieben.
 */
:where(.wp-block-table) {
	overflow-x: auto;
}


/* 7. Interaktion & Accessibility
   ========================================================================== */

/*
 * Bewusst OHNE :where() — ein sichtbarer Fokus darf nicht versehentlich
 * von einer Elementor-Regel weggeräumt werden.
 */
:focus-visible {
	outline: 2px solid var(--sw-color-primary, currentColor);
	outline-offset: 2px;
}

::selection {
	background-color: var(--sw-color-selection);
	color: inherit;
}

:where([hidden]:not([hidden="until-found"])) {
	display: none !important;
}

:where([aria-busy="true" i]) {
	cursor: progress;
}

:where(dialog) {
	background-color: #fff;
	border: 0;
	color: inherit;
	padding: 0;
}

:where(details > summary:first-of-type) {
	display: list-item;
}

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


/* 8. WordPress-Core-Klassen
   Nur das, was ohne Hellos theme.css sonst wirklich kaputt wäre: der
   Skip-Link (sonst steht er sichtbar in der Seite) und die Ausrichtungen
   für klassischen Content. Bewusst mit normaler Spezifität, das sind
   Utilities. Captions, Galerien und .post-password-form sind absichtlich
   nicht drin — bei Bedarf gezielt nachrüsten.

   Ebenfalls raus: .alignwide und .alignfull. Beide brechen per
   margin-inline: calc(50% - 50vw) aus ihrem Container aus. Innerhalb eines
   Elementor-Containers ist das keine Breitendarstellung, sondern ein
   horizontaler Overflow. Ohne die Regeln rendert ein full-aligned Block
   schlicht in Inhaltsbreite — unspektakulär, aber nicht kaputt.
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100000;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: 0.75rem 1.5rem;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	background-color: #fff;
	color: var(--sw-color-text);
	text-decoration: none;
}

.alignleft {
	float: left;
	margin-inline-end: 1.5rem;
	margin-block-end: 1rem;
}

.alignright {
	float: right;
	margin-inline-start: 1.5rem;
	margin-block-end: 1rem;
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
}



/* 9. Fließtext-Abstände
   ==========================================================================

   Abschnitt 2 setzt alle Block-Margins auf 0 — richtig für Elementor, wo
   Container ihre Abstände über gap regeln, und passend zu Elementors
   eigenem .e-paragraph-base { margin: 0 }.

   Absätze brauchen sie trotzdem zurück, überall dort wo mehrere in einem
   Container stehen: im v3-Text-Editor-Widget, in Kommentaren, in
   klassischem Post-Content. Regel aus dem Kit-CSS übernommen und
   aufgeräumt — :last-child:last-of-type war redundant, weil ein letztes
   Kind seines Typs zwangsläufig auch last-of-type ist.

   Spezifität (0,2,1), bewusst über dem Original-Niveau von Elementors
   paragraph_spacing (.elementor-kit-<ID> p, also (0,1,1)) — so entscheidet
   nicht die Ladereihenfolge.
   ========================================================================== */

p:not(.elementor-heading-title, .e-paragraph-base):not(:last-child) {
	margin-block-end: 1em;
}

/* Die übrigen Fließtext-Elemente nur im klassischen Content. Bewusst
   ebenfalls als margin-block-end, damit sich nichts mit der Absatzregel
   oben aufaddiert — in Elementors Flex-Containern kollabieren Margins
   nicht. */
:where(.entry-content, .page-content, .wp-block-post-content, .elementor-widget-theme-post-content)
	:where(ul, ol, blockquote, pre, figure, table):not(:last-child) {
	margin-block-end: var(--sw-space-flow);
}

:where(.entry-content, .page-content, .wp-block-post-content, .elementor-widget-theme-post-content)
	:where(h2, h3, h4, h5, h6):not(:first-child) {
	margin-block-start: var(--sw-space-flow);
}

:where(.entry-content, .page-content, .wp-block-post-content) :where(ul, ol) {
	padding-inline-start: 1.5em;
}


/* 10. Sticky Footer
    Body als Flex-Spalte; der Footer schiebt sich per margin-block-start: auto
    nach unten, sobald der Inhalt kürzer als der Viewport ist. Bewusst am
    Footer angesetzt statt per flex-grow am Inhalt: welches Element in der
    Mitte steht, hängt davon ab, ob ein Theme-Builder-Template greift
    (.elementor-location-single) oder Hellos <main class="site-main">.

    Voraussetzung: Der Footer muss existieren. Ohne greifende Anzeige-
    bedingung im Theme Builder gibt es kein .elementor-location-footer —
    dann passiert hier schlicht nichts (nichts bricht, es klebt nur nicht).
    ========================================================================== */

:where(body) {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	/* svh = kleinster Viewport → kein Sprung, wenn die mobile Browserleiste
	   ein- oder ausfährt, und nie ein Scrollbalken durch Rundungsfehler */
	min-block-size: 100svh;
}

body > :where(.elementor-location-footer, .site-footer, footer) {
	margin-block-start: auto;
}

/* Die Admin-Bar schiebt <html> um ihre Höhe nach unten (margin-top !important).
   Ohne Korrektur scrollt jede Seite im eingeloggten Zustand um genau diesen
   Betrag. */
body.admin-bar {
	min-block-size: calc(100svh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		min-block-size: calc(100svh - 46px);
	}
}


/* 11. Kommentare
   Das Markup kommt aus Hellos comments.php (<section id="comments">) — egal
   ob Hellos single.php es rendert oder das Post-Comments-Widget, beide gehen
   über comments_template(). Hellos theme.css hatte dafür eigene Styles, die
   mit ihr weggefallen sind.

   Bewusst kein Nachbau von Hellos Design, nur die drei Dinge, ohne die es
   nach Fehler aussieht:
     - wp_list_comments() gibt <li> in <ol> aus. Unser Reset entlistet nur
       nav-Listen und [role="list"], also greift sonst der Browser-Default
       und die Kommentare erscheinen nummeriert.
     - Abschnitt 2 räumt alle p-Margins ab, und die Flow-Regel aus
       Abschnitt 9 deckt Kommentare nicht ab. Ohne die Regel unten kleben
       mehrere Absätze und die Formularfelder aneinander.
     - Etwas Struktur: Trennlinie, Einrückung für Antworten, Avatar-Zeile.
   ========================================================================== */

:where(#comments) :where(.comment-list, .children) {
	list-style: none;
	padding-inline-start: 0;
}

:where(#comments) :where(.children) {
	padding-inline-start: clamp(1rem, 4vw, 2.5rem);
}

:where(#comments) :where(.comment-body) {
	padding-block: 1.5rem;
	border-block-start: 1px solid var(--sw-color-border);
}

:where(#comments) :where(.comment-author) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

:where(#comments) :where(.avatar) {
	border-radius: 50%;
}

:where(#comments) :where(.comment-metadata, .reply) {
	font-size: 0.875em;
}

:where(#comments) :where(.title-comments, .comment-reply-title) {
	margin-block-end: 1rem;
}

:where(#comments) :where(.comment-respond) {
	margin-block-start: 2rem;
}


/* 12. Elementor-Tweaks
   Aus dem Custom CSS der Website-Einstellungen. Spezifität wie im Original.
   ========================================================================== */

/* Button- und Icon-Widgets erzeugen sonst eine Lücke unter dem Inline-Element */
.elementor-widget:is(.elementor-widget-button, .elementor-widget-icon) {
	line-height: 0;
}


/* 13. Utility-Klassen
   Aus dem Custom CSS der Website-Einstellungen. Werden in Elementor als
   CSS-Klassen auf Elemente gesetzt, deshalb normale Spezifität und die
   !important dort, wo sie eine Anzeige-Entscheidung erzwingen sollen.
   ========================================================================== */

.px-0 {
	padding-inline: 0;
}

.no-ul a,
a.no-ul {
	text-decoration: none !important;
}

.line-clamp-2 p,
p.line-clamp-2,
.line-clamp-3 p,
p.line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.line-clamp-2 p,
p.line-clamp-2 {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.line-clamp-3 p,
p.line-clamp-3 {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.hide-on-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.hide-on-desktop {
		display: none !important;
	}
}