/*
 * Site footer — newsletter prompt, social row, and legal bar.
 *
 * Split from 40-footer.css to keep both files inside the 250-line budget.
 * 40-footer.css owns the top grid (brand + nav columns); this file owns
 * everything below the first divider rule.
 *
 * Responsive parity with 40-footer.css:
 *   - 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;
}

.isjac-footer__newsletter-copy {
	margin: 0 0 var(--isjac-pad-md);
	font-size: var(--isjac-font-size-small);
	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);
	color: var(--isjac-color-paper);
	font-family: inherit;
	font-size: var(--isjac-font-size-small);
	box-shadow: none;
}

/* 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. */
.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: transparent;
	color: var(--isjac-color-paper);
	font-family: inherit;
	font-weight: var(--isjac-font-weight-medium);
	font-size: var(--isjac-font-size-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	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;
}

/* Hover mirrors `.isjac-footer__cta--ghost` from 40-footer.css: a low-
   opacity paper wash over the dark surface plus the universal 1px lift
   and shadow. Reinforces the button's identity instead of inverting it
   (see 40-footer.css for the full rationale). */
.isjac-footer__newsletter-submit:hover,
.isjac-footer__newsletter-submit:focus-visible {
	background: color-mix(in srgb, var(--isjac-color-paper) 12%, transparent);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-paper);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--isjac-color-ink) 35%, transparent);
}

.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; }
}