/* ==========================================================================
   Just Name IT theme: the news signup box and its pages (F-0076)
   --------------------------------------------------------------------------
   Site-core's jni/news-signup block, placed only on the Nyheter list
   (templates/home.html, Director F-0074 Q4), and the pages under
   /prenumeration/ (JNI\Site\Subscribers\Pages: bekräfta, inte-jag, avsluta).
   Loaded by the block when it renders (style handle justnameit-subscribe)
   and by the pages; never anywhere else.

   The field is the design system's field component as on Kontakt
   (pages/contact.css): label 16 px, field about 44 px high, the error with
   colour, an icon and text. The button is the primary button of the
   contact form. No script.
   ========================================================================== */

/* ---------- The box on Nyheter ---------- */
.news-signup {
	/* A band: the padding is the shared .section padding (sections.css,
	   64 px, 96 from 64em), theme.md "Bands and surfaces". */
	background: var(--color-primary-soft);
}
.news-signup__inner > * { margin-block: 0; }
.news-signup__title { font-size: var(--fs-large); }
.news-signup__intro { max-width: 60ch; margin-block-start: var(--space-30); }
.news-signup__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-30) var(--space-50);
	margin-block-start: var(--space-50);
}
.news-signup .field {
	display: flex;
	flex: 1 1 18rem;
	flex-direction: column;
	gap: var(--space-10);
	max-width: 28rem;
	margin: 0;
}
.news-signup .field__label {
	font-weight: var(--font-weight-semibold);
	font-size: 1rem;
	color: var(--color-contrast);
}
.news-signup .input {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--space-20) var(--space-30);
	font: inherit;
	font-size: 1rem;
	color: var(--color-contrast);
	background: var(--color-base);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-m);
}
.news-signup .input:hover { border-color: var(--color-primary); }
.news-signup .input:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: 1px;
	border-color: var(--color-primary);
}
.news-signup .input[aria-invalid="true"] { border: 2px solid var(--color-error); }
.news-signup .field__error {
	display: flex;
	gap: var(--space-20);
	align-items: flex-start;
	margin: 0;
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	color: var(--color-error);
}
/* The icon is decoration: "/ ''" keeps it out of the accessible name. */
.news-signup .field__error::before {
	content: "!";
	content: "!" / "";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.1em;
	border-radius: 50%;
	background: var(--color-error);
	color: var(--color-base);
	font-size: 0.85em;
}
.news-signup__actions { margin: 0; }
.news-signup__notice {
	margin-block-start: var(--space-50);
	padding: var(--space-50);
	border: 2px solid var(--color-error);
	border-radius: var(--radius-m);
	background: var(--color-base);
	color: var(--color-contrast);
	font-weight: var(--font-weight-semibold);
}
.news-signup__privacy {
	max-width: 60ch;
	margin-block-start: var(--space-50);
	font-size: var(--fs-small);
	/* Ink, not the muted grey: the box is tinted (contrast 4.5:1). */
	color: var(--color-contrast);
}

/* "Kolla din e-post" after a send. */
.news-signup__status {
	max-width: 60ch;
	margin-block-start: var(--space-30);
	padding: var(--space-50);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-m);
	background: var(--color-base);
}
.news-signup__status:focus { outline: none; }
.news-signup__status > * { margin: 0; }
.news-signup__status > * + * { margin-block-start: var(--space-20); }
.news-signup__status-title { font-weight: var(--font-weight-semibold); }

/* The honeypot: off-screen for everyone. Its label says to leave it empty. */
.news-signup__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- The button (the box and the pages) ---------- */
.news-signup__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-20);
	min-height: 2.75rem;
	padding: var(--space-20) var(--space-50);
	font: inherit;
	font-weight: var(--font-weight-semibold);
	font-size: 1rem;
	line-height: 1.2;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-m);
	background: var(--color-primary);
	color: var(--color-base);
	cursor: pointer;
}
.news-signup__submit::after { content: "→"; content: "→" / ""; display: inline-block; }
.news-signup__submit:hover {
	background: var(--color-primary-strong);
	border-color: var(--color-primary-strong);
}
.news-signup__submit:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

/* ---------- The pages under /prenumeration/ ---------- */
/* The page head comes from news.css (.page-head), as on Nyheter. */
.wp-site-blocks > .site-main.site-main--subscription { padding-block: 0; }
.site-main--subscription > * { margin-block: 0; }
.subscription-page__body > * { margin: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.news-signup .input,
	.news-signup__submit {
		transition: background-color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
	}
}