/**
 * The helper-area landing page ([helfer_landing] on /helfi/ and
 * /en/volunteer/) - a REGULAR theme page, so this borrows the theme's
 * own form vocabulary (contact-form.css) rather than the standalone
 * portal's: bold labels over full-width bordered inputs, the theme
 * .btn, and the contact-form notice recipe for status messages.
 *
 * Every colour is a token (design-system rule). Two theme-reset traps
 * this file exists to survive: `input:invalid{border:none}` in
 * main.css strips the border off any empty required field (the class
 * selectors below out-rank it), and `ul,ol{list-style:none}` eats the
 * step numbers (explicit decimal below).
 */

.ef-landing {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--ef-space-6) 0;
	/* The theme's text colour is the deep indigo token, not the reset's
	   body{color:#000} - headings, steps and labels inherit from here
	   (user review 2026-09-11: "still black text"). */
	color: var(--ef-color-text);
}

.ef-landing [hidden] {
	display: none !important;
}

.ef-landing__tagline {
	/* NO font-size on purpose: it inherits the page's own text size -
	   at --ef-text-sub (and even --ef-text-body, 18px vs the page's
	   16px) the intro read like a second heading (user review
	   2026-09-11). */
	line-height: 1.55;
	color: var(--ef-color-secondary);
	margin: 0 0 var(--ef-space-4);
}

.ef-landing__features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--ef-space-3);
	margin: 0 0 var(--ef-space-6);
}

.ef-landing__feature {
	/* The contact-form notice surface - the theme's "friendly box". */
	background: color-mix(in srgb, var(--ef-color-primary) 20%, var(--ef-color-surface));
	border-radius: var(--ef-radius);
	padding: var(--ef-space-3);
}

.ef-landing__feature-title {
	margin: 0 0 var(--ef-space-1);
}

.ef-landing__feature-text {
	color: var(--ef-color-secondary);
	font-size: var(--ef-text-meta);
	line-height: 1.5;
	margin: 0;
}

.ef-landing__steps {
	list-style: decimal;
	margin: 0 0 var(--ef-space-4);
	padding-left: var(--ef-space-4);
	line-height: 1.5;
}

.ef-landing__step {
	margin-bottom: var(--ef-space-2);
}

/* --- the import form: the contact form's field shape ------------------- */

/* The theme's reading column (.content p/h/ol { max-width: var(--ef-column) })
   covers text elements only - the form and its status/note must sit in
   the same measure or they hug the container's left edge beside centred
   text (seen at 1280px). */
.ef-landing [data-landing-form],
.ef-landing__status,
.ef-landing__note {
	max-width: var(--ef-column);
	margin-left: auto;
	margin-right: auto;
}

.ef-landing__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--ef-space-3);
}

.ef-landing__field label {
	font-weight: 700;
}

.ef-landing__field input[type="url"] {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--ef-color-secondary);
	background: var(--ef-color-surface);
	border: 2px solid var(--ef-color-line);
	border-radius: var(--ef-radius);
}

/* main.css's reset says input:invalid{border:none} - and an empty
   required field IS :invalid, so without this the share-link box reads
   as bare text (user report 2026-09-11). */
.ef-landing__field input[type="url"]:invalid {
	border: 2px solid var(--ef-color-line);
}

.ef-landing__field input[type="url"]:focus {
	outline: none;
	border-color: var(--ef-color-primary);
	box-shadow: 0 0 0 3px var(--ef-color-primary);
}

/* On the live site get_dynamic_css() paints .btn and every placeholder
   with the configured text colour; main.css's fallbacks are black. The
   same hue from the static token, scoped here, keeps the page conform
   even where the dynamic sheet is absent (the review replica) or the
   options unset. */
.ef-landing .btn {
	color: var(--ef-color-text);
}

.ef-landing__field input[type="url"]::placeholder {
	color: color-mix(in srgb, var(--ef-color-text) 55%, transparent);
	opacity: 1;
}

.ef-landing__status {
	margin: var(--ef-space-3) auto 0;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--ef-color-secondary);
	background: color-mix(in srgb, var(--ef-color-primary) 20%, var(--ef-color-surface));
	border-radius: var(--ef-radius);
}

.ef-landing__note {
	color: var(--ef-color-secondary);
	font-size: 13px;
	line-height: 1.5;
	margin-top: var(--ef-space-3);
}

.ef-landing__note a {
	text-decoration: underline;
}