/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Text outside atomic widgets (e.g. the V3 nav-menu dropdown) otherwise falls back to the Hello system font stack. */
body {
	font-family: var(--font-base);
	color: var(--text);
}

/* Elementor wraps the Theme Builder header in this element; position: sticky only works on the outermost wrapper. */
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Below 601px WordPress no longer fixes the admin bar; it scrolls away with the page.
   Its admin-bar offset (header top, scroll-padding-top on html) would leave a gap. */
@media (max-width: 600px) {
	html {
		scroll-padding-top: 0;
	}

	body.admin-bar .elementor-location-header {
		top: 0;
	}
}

/* Atomic default styles only support :focus, not :focus-visible.
   "html" outranks the "all: unset" in Elementor's ".elementor .e-*-link-base" (0,2,0). */
html :focus-visible,
html .elementor :focus-visible {
	outline: 2px solid var(--gfl-gruen);
	outline-offset: 2px;
}

/* gfl-gruen on dunkelgruen reaches only 1.7:1, below the 3:1 required for focus indicators. */
html .elementor-location-footer :focus-visible {
	outline-color: var(--weiss);
}

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

/* Link hover: the underline grows from the left. Works on inline links only (no padding below the text).
   "html" outranks the "all: unset" in Elementor's ".elementor .e-paragraph-link-base" (0,2,0). */
html .elementor-nav-menu--main a.elementor-item,
html .elementor-location-footer .e-paragraph-link-base {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
}

html .elementor-nav-menu--main a.elementor-item:hover,
html .elementor-nav-menu--main a.elementor-item:focus-visible,
html .elementor-location-footer .e-paragraph-link-base:hover,
html .elementor-location-footer .e-paragraph-link-base:focus-visible {
	background-size: 100% 1px;
}

/* The reset button has padding, so a background line would sit below the text. The underline fades in instead. */
html #selbstcheck-zuruecksetzen {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

html #selbstcheck-zuruecksetzen:hover,
html #selbstcheck-zuruecksetzen:focus-visible {
	text-decoration-color: currentColor;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	html .elementor-nav-menu--main a.elementor-item,
	html .elementor-location-footer .e-paragraph-link-base {
		transition: background-size 250ms ease-out, color 250ms ease-out;
	}

	html #selbstcheck-zuruecksetzen {
		transition: text-decoration-color 200ms ease-out, text-underline-offset 200ms ease-out;
	}

	#selbstcheck-geeignet p a,
	#selbstcheck-ungeeignet p a {
		transition: color 200ms ease-out, text-underline-offset 200ms ease-out;
	}
}

@media (prefers-reduced-motion: reduce) {
	html .elementor :is(.btn-primary, .btn-secondary) {
		transition-duration: 0s;
	}
}

/* FAQ: atomic styles have no [open] state, so the open item, its toggle colour and the plus/minus swap live here.
   The extra .faq-item outranks Elementor's ".e-accordion-item-icon-base.e-accordion-item-icon-base .e-svg-base" (0,3,0). */
html .faq-item[open] {
	background-color: var(--bg-gruen-02);
	border-color: var(--gfl-gruen);
}

html .faq-item[open] .faq-toggle {
	background-color: var(--gfl-gruen);
}

html .faq-item .faq-toggle .e-svg-base {
	width: 16px;
	height: 16px;
}

html .faq-item[open] .faq-icon-plus {
	display: none;
}

html .faq-item[open] .faq-icon-minus {
	display: block;
}

/* Eligibility self-check: js/eligibility-check.js sets data-state on #selbstcheck (missing, eligible, ineligible).
   The editor shows every block so that their texts stay editable. */
body:not(.elementor-editor-active) #selbstcheck-offen,
body:not(.elementor-editor-active) #selbstcheck-geeignet,
body:not(.elementor-editor-active) #selbstcheck-ungeeignet {
	display: none;
}

#selbstcheck[data-state="missing"] #selbstcheck-offen {
	display: block;
}

#selbstcheck[data-state="eligible"] #selbstcheck-geeignet,
#selbstcheck[data-state="ineligible"] #selbstcheck-ungeeignet {
	display: flex;
}

/* The results receive the focus. Without the margin the sticky header covers their first lines. */
#selbstcheck-geeignet,
#selbstcheck-ungeeignet {
	scroll-margin-top: calc(var(--header-height) + 24px);
}

#selbstcheck[data-state="eligible"] #selbstcheck-formular [type="submit"],
#selbstcheck[data-state="ineligible"] #selbstcheck-formular [type="submit"] {
	display: none;
}

#selbstcheck[data-state="eligible"] #selbstcheck-fortschritt-offen,
#selbstcheck[data-state="ineligible"] #selbstcheck-fortschritt-offen {
	background-color: var(--gfl-gruen);
}

/* The palette has no error colour, so the thicker border marks open questions; padding keeps the row height. */
html .quiz-row.is-missing {
	padding: 15px;
	border-width: 2px;
	border-color: var(--dunkelgruen);
	background-color: var(--bg-gruen-02);
}

/* Elementor's radio base removes the outline on :focus (0,3,0) and greys out the border and the checked dot. */
html .elementor .quiz-radio:focus {
	border-color: var(--gfl-gruen);
}

html .elementor .quiz-radio:focus-visible {
	outline: 2px solid var(--gfl-gruen);
	outline-offset: 2px;
}

html .elementor .quiz-radio::before {
	background-color: var(--gfl-gruen);
}

/* The result texts share the text colour, so links need the underline to stand out. */
#selbstcheck-geeignet p a,
#selbstcheck-ungeeignet p a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#selbstcheck-geeignet p a:hover,
#selbstcheck-ungeeignet p a:hover {
	color: var(--dunkelgruen);
	text-underline-offset: 4px;
}

/* The atomic submit button cannot hold an icon widget. Copy of the arrow in the hero buttons (media library). */
#selbstcheck-formular [type="submit"]::after {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("assets/icon-arrow-right.svg") center / 18px 18px no-repeat;
}