/*
 * Footer-newsletter styles — brand-templated for engagement isjac.
 *
 * Source: vendor/zysys/wp-runtime/assets/css/footer-newsletter.css.template
 * Built:  wp-content/zysys-generated/isjac/css/footer-newsletter.css
 *
 * The template substitutes isjac at composer install. To change
 * a rule, edit this template and re-run `composer install` (or
 * `composer update`) in the consumer repo.
 *
 * Naming convention: <brand>-<class> per ADR-002.
 */

/*
 * Site footer — newsletter prompt, social row, and legal bar.
 *
 * Split from footer.css.template to keep both files inside the 250-line budget.
 * footer.css.template owns the top grid (brand + nav columns); this file owns
 * everything below the first divider rule.
 *
 * Responsive parity with footer.css.template:
 *   - Desktop ≥1024px: newsletter (1.5fr) + socials (1fr) on one row.
 *   - Tablet/Mobile: stack to one column; socials left-align.
 */

/* ---------- Newsletter + socials row ---------- */
.isjac-footer__connect {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--isjac-gap-spacious);
	align-items: center;
	padding: var(--isjac-pad-xl) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--isjac-color-brand-wash) 15%, transparent);
}

/* The newsletter block is one cohesive unit: heading, copy, and form share
   the same left edge so the eye reads them as a single prompt-and-action
   group. Kadence's default `h2` styles centre headings inside post content,
   which would otherwise float the title above a left-aligned form. */
.isjac-footer__newsletter {
	text-align: left;
}

.isjac-footer__newsletter-title {
	margin: 0 0 var(--isjac-pad-xs);
	font-size: var(--isjac-font-size-lg);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-paper);
	text-align: left;
}

/* Kadence paragraph rules inside .site-footer can outrank bare class
   selectors. Chaining .site-footer restores the dark-surface colour
   without resorting to !important (same pattern as the input field). */
.site-footer .isjac-footer__newsletter-copy {
	margin: 0 0 var(--isjac-pad-md);
	font-size: var(--isjac-font-size-small);
	color: var(--isjac-color-paper);
	opacity: 0.85;
	max-width: 48ch;
	text-align: left;
}

/* Newsletter form: real email input + submit button.
   Brand guide §04 inputs: 44px min-height, 6px radius, 14px x-pad.
   Button mirrors the secondary CTA spec on the dark surface. */
.isjac-footer__newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isjac-pad-xs);
	max-width: 28rem;
}

/* Specificity note: Kadence's `input[type="email"]` (0,0,1,1) outranks a
   bare `.isjac-footer__newsletter-input` (0,0,1,0), which previously left
   the field rendering as a white Kadence text box with our paper-coloured
   placeholder invisible against it. Chaining `.site-footer` (0,0,2,0)
   restores the dark-surface treatment without !important. */
.site-footer .isjac-footer__newsletter-input {
	flex: 1 1 14rem;
	min-height: var(--isjac-input-min-height);
	padding: 0 var(--isjac-input-padding-x);
	border-radius: var(--isjac-radius-sm);
	border: 1px solid color-mix(in srgb, var(--isjac-color-brand-wash) 35%, transparent);
	background: color-mix(in srgb, var(--isjac-color-paper) 10%, transparent);
	/* WebKit applies `-webkit-text-fill-color` to <input> and it wins
	 * over `color` in some contexts (system theme, autofill). Set both
	 * to paper so typed characters are visible on the dark footer
	 * surface. `caret-color` is set explicitly because UAs sometimes
	 * derive it from `-webkit-text-fill-color` not `color`. */
	color: var(--isjac-color-paper);
	-webkit-text-fill-color: var(--isjac-color-paper);
	caret-color: var(--isjac-color-paper);
	font-family: var(--isjac-font-body);
	font-size: var(--isjac-font-size-body);
	box-shadow: none;
}

/* Chrome autofill paints its own yellow background and dark text via
 * `-webkit-autofill`. The yellow ignores `background` rules entirely;
 * the only way out is a deferred transition + an inset box-shadow that
 * over-paints the autofill bg with our token. Text fill color must also
 * be re-asserted on the autofill pseudo so the typed-then-autofilled
 * state still reads paper. */
.site-footer .isjac-footer__newsletter-input:-webkit-autofill,
.site-footer .isjac-footer__newsletter-input:-webkit-autofill:hover,
.site-footer .isjac-footer__newsletter-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--isjac-color-paper);
	caret-color: var(--isjac-color-paper);
	-webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--isjac-color-ink) 100%, transparent) inset;
	transition: background-color 99999s 0s, color 99999s 0s;
}

/* Placeholder contrast: paper-on-ink at full opacity hits ~16:1; a small
   alpha drop preserves the placeholder/value distinction without crossing
   the WCAG AA threshold (4.5:1). Both selectors are kept so browsers that
   only honour one (older WebKit ::input-placeholder) still pick it up. */
.site-footer .isjac-footer__newsletter-input::placeholder {
	color: color-mix(in srgb, var(--isjac-color-paper) 80%, transparent);
	opacity: 1; /* Firefox applies a default 0.54 placeholder opacity. */
}

.site-footer .isjac-footer__newsletter-input:focus-visible {
	outline: 2px solid var(--isjac-color-paper);
	outline-offset: 2px;
	border-color: var(--isjac-color-paper);
}

/* Subscribe is a secondary action sitting next to the form input. Donate,
   the other footer CTA at this scroll depth, also renders as a ghost
   button. Matching them keeps the visual hierarchy honest: "Become a
   member" is the headline filled CTA; Donate and Subscribe read as equal
   supporting actions instead of one looking heavier than the other. */
/* Subscribe = on-dark-primary per brand-guide §11. Paper-knockout on the
 * ink footer surface: paper fill, brand-deep label. Matches the hero and
 * bottom-CTA on-dark primary treatment so primary CTAs read consistently
 * across every dark surface. */
.isjac-footer__newsletter-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--isjac-button-min-height);
	padding: 0 var(--isjac-pad-lg);
	border-radius: var(--isjac-radius-md);
	border: 1.5px solid var(--isjac-color-paper);
	background: var(--isjac-color-paper);
	color: var(--isjac-color-brand-deep);
	font-family: var(--isjac-font-family);
	font-weight: var(--isjac-font-weight-medium);
	font-size: var(--isjac-button-font-size);
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out,
		border-color 150ms ease-out, transform 150ms ease-out,
		box-shadow 150ms ease-out;
}

.isjac-footer__newsletter-submit:hover,
.isjac-footer__newsletter-submit:focus-visible {
	background: var(--isjac-color-brand-wash);
	color: var(--isjac-color-brand-deep);
	border-color: var(--isjac-color-brand-wash);
}

.isjac-footer__newsletter-submit:active {
	transform: translateY(1px);
}

.isjac-footer__newsletter-submit:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--isjac-color-ink) 25%, transparent);
}

.isjac-footer__newsletter-submit:focus { outline: none; }
.isjac-footer__newsletter-submit:focus-visible {
	outline: 2px solid var(--isjac-color-paper);
	outline-offset: 2px;
}

.isjac-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isjac-pad-md);
	justify-content: flex-end;
}

.isjac-footer__socials a {
	font-weight: var(--isjac-font-weight-medium);
}

/* ---------- Legal bar ---------- */
.isjac-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--isjac-pad-md);
	padding-top: var(--isjac-pad-lg);
	font-size: var(--isjac-font-size-micro);
	opacity: 0.8;
}

.isjac-footer__legal-copy { margin: 0; }

.isjac-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isjac-pad-lg);
}

.isjac-footer__legal a { font-weight: var(--isjac-font-weight-medium); }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.isjac-footer__connect { grid-template-columns: 1fr; }
	.isjac-footer__socials { justify-content: flex-start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
	.isjac-footer__legal { flex-direction: column; align-items: flex-start; }
}