/*
 * Newsletter signup form, and the Coming Soon gate.
 *
 * WHY THIS FILE IS SELF-CONTAINED
 * The Coming Soon gate builds its own standalone HTML document and never calls
 * wp_head(), so brand.css, cinema.css and templates.css do not load there. The
 * module links ONE stylesheet via its template_styles argument, and this is it.
 * So this file must not depend on the theme's custom properties or on any other
 * stylesheet, and it must style its own button.
 *
 * On the site proper it is enqueued after the theme layers, so the variables it
 * defines here are deliberately namespaced --s2g-nw-* rather than reusing the
 * theme's --s2g-* tokens, to avoid leaking into anything nested.
 */

:root {
	--s2g-nw-navy: #050c38;
	--s2g-nw-blue: #2a74ff;
	--s2g-nw-blue-dark: #1e53bf;
	--s2g-nw-violet: #a744ff;
	--s2g-nw-paper: #ffffff;
	--s2g-nw-page: #eef1f7;
	--s2g-nw-ink: #050c38;
	--s2g-nw-muted: #5a6478;
	--s2g-nw-line: #d7dce8;
	--s2g-nw-radius: 10px;
}

/* ------------------------------------------------------------------ *
 * Shared field styling
 * ------------------------------------------------------------------ */

.s2g-news__form {
	margin: 0;
}

.s2g-news__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0 0 16px;
}

.s2g-news__field {
	margin: 0;
	width: 100%;
}

.s2g-news__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: inherit;
	opacity: 0.85;
}

.s2g-news__field input[type="text"],
.s2g-news__field input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font: inherit;
	font-size: 1rem;
	color: var(--s2g-nw-ink);
	background: var(--s2g-nw-paper);
	border: 1px solid var(--s2g-nw-line);
	border-radius: var(--s2g-nw-radius);
	appearance: none;
}

.s2g-news__field input:focus-visible {
	outline: 2px solid var(--s2g-nw-blue);
	outline-offset: 1px;
	border-color: var(--s2g-nw-blue);
}

.s2g-news__consent {
	margin: 0 0 16px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: inherit;
	opacity: 0.9;
}

.s2g-news__consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	cursor: pointer;
}

.s2g-news__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--s2g-nw-blue);
}

.s2g-news__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The button is styled here rather than relying on the theme's button layer,
   because the gate page does not load cinema.css. */
.s2g-news__submit {
	margin: 0 0 14px;
}

.s2g-news__submit .s2g-btn,
.s2g-news__submit button {
	display: inline-block;
	padding: 13px 26px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--s2g-nw-navy);
	background: var(--s2g-nw-paper);
	border: 1px solid var(--s2g-nw-blue);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.s2g-news__submit .s2g-btn:hover,
.s2g-news__submit button:hover,
.s2g-news__submit .s2g-btn:focus-visible,
.s2g-news__submit button:focus-visible {
	background: var(--s2g-nw-blue);
	color: var(--s2g-nw-paper);
}

.s2g-news__note {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: inherit;
	opacity: 0.7;
}

/* Brevo's honeypot. Must stay in the markup, must never be visible, and must
   never be focusable by a person. Off-screen rather than display:none, because
   some bots skip fields that are not rendered. */
.s2g-news__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Context: the site-wide band and the Subscribe page (light surfaces)
 * ------------------------------------------------------------------ */

.s2g-news--band,
.s2g-news--page {
	max-width: 540px;
	color: var(--s2g-nw-ink);
}

.s2g-news--band .s2g-news__heading,
.s2g-news--page .s2g-news__heading {
	margin: 0 0 8px;
	font-size: 1.5rem;
	line-height: 1.2;
	color: inherit;
}

.s2g-news--band .s2g-news__intro,
.s2g-news--page .s2g-news__intro {
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--s2g-nw-muted);
}

/* On the light Subscribe page the button takes the dark pill, not the paper one.
   The band is deliberately NOT in this list: it sits on the dark navy surface,
   so it keeps the paper pill from the base rule, which is what stays visible
   there. */
.s2g-news--page .s2g-news__submit .s2g-btn {
	color: var(--s2g-nw-paper);
	background: var(--s2g-nw-navy);
}

.s2g-news--page .s2g-news__submit .s2g-btn:hover,
.s2g-news--page .s2g-news__submit .s2g-btn:focus-visible {
	color: var(--s2g-nw-paper);
	background: var(--s2g-nw-blue-dark);
}

/* ------------------------------------------------------------------ *
 * Context: the band form layout
 *
 * The field and the Subscribe button share one row on wide screens, with the
 * field taking whatever space is left, and stack on narrow ones. Written as a
 * grid on the form itself because the Brevo form is three siblings (field,
 * consent, submit) in that order, and the consent line has to sit under the
 * row rather than between the two halves of it.
 * ------------------------------------------------------------------ */

.s2g-news--band {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.s2g-news--band .s2g-news__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 12px;
	row-gap: 14px;
}

.s2g-news--band .s2g-news__fields { grid-column: 1; grid-row: 1; margin: 0; }
/* The band's own `p` rule caps every paragraph at 52ch and centres it. That is
   right for the intro and the note, and wrong for the field, which has to fill
   its column so the input is wide. */
.s2g-news--band .s2g-news__fields,
.s2g-news--band .s2g-news__field { max-width: none; }
.s2g-news--band .s2g-news__fields { grid-column: 1; grid-row: 1; margin: 0; }
.s2g-news--band .s2g-news__submit { grid-column: 2; grid-row: 1; margin: 0; }
.s2g-news--band .s2g-news__consent {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	max-width: none;
	text-align: left;
}
.s2g-news--band .s2g-news__note { max-width: none; margin: 14px 0 0; text-align: left; }

@media (max-width: 560px) {
	.s2g-news--band .s2g-news__form { grid-template-columns: minmax(0, 1fr); }
	.s2g-news--band .s2g-news__fields { grid-column: 1; grid-row: 1; }
	.s2g-news--band .s2g-news__submit { grid-column: 1; grid-row: 2; }
	.s2g-news--band .s2g-news__consent { grid-column: 1; grid-row: 3; }
	.s2g-news--band .s2g-news__submit .s2g-btn { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Context: the Coming Soon gate (dark surface)
 *
 * The dark surface has to be supplied HERE. On the site proper it comes from
 * cinema.css, which the gate page never loads - so white-on-navy text rendered
 * as white-on-white and was invisible. `body:has(.s2g-gate)` scopes these rules
 * to the gate page only, so nothing leaks onto the themed pages that also load
 * this file.
 * ------------------------------------------------------------------ */

body:has(.s2g-gate) {
	margin: 0;
	color: var(--s2g-nw-paper);
	background: var(--s2g-nw-navy);
}

/* The module's own footer is a Bluehost advertising block. It has no place on a
   branded page, and the module gives no other way to remove it. */
body:has(.s2g-gate) footer {
	display: none;
}

/* The module's login prompt is kept, because it is the owner's way in, but made
   quiet so it does not compete with the page. */
body:has(.s2g-gate) header {
	padding: 18px 24px 0;
	font-size: 0.8125rem;
	text-align: right;
}

body:has(.s2g-gate) .login-prompt,
body:has(.s2g-gate) .login-prompt a,
body:has(.s2g-gate) .login-prompt span {
	color: rgba(255, 255, 255, 0.5);
}

body:has(.s2g-gate) .login-prompt a {
	text-decoration-color: rgba(255, 255, 255, 0.3);
}

body:has(.s2g-gate) #wrap,
body:has(.s2g-gate) main.content {
	background: transparent;
}

.s2g-gate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 78vh;
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 40px 24px 64px;
	color: var(--s2g-nw-paper);
	text-align: left;
}

.s2g-gate__brand {
	margin: 0 0 28px;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--s2g-nw-paper);
}

.s2g-gate__title {
	margin: 0 0 16px;
	font-size: clamp(2rem, 6vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--s2g-nw-paper);
}

.s2g-gate__intro {
	margin: 0 0 20px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.s2g-gate__status {
	margin: 0 0 28px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--s2g-nw-paper);
}

.s2g-gate .s2g-news {
	max-width: 460px;
}

.s2g-gate__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

.s2g-gate__list li {
	position: relative;
	padding-left: 20px;
}

.s2g-gate__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--s2g-nw-blue);
}

@media (max-width: 520px) {
	.s2g-gate {
		padding: 32px 20px 44px;
	}
}