/**
 * Aeon News – information pages (donate, contact, newsletter, advertise).
 *
 * Plain HTML in the page text with these classes, plus the shortcodes in inc/info-pages.php.
 * Examples: docs/info-pages.md. Colours come from the publication's accent; dark mode only
 * changes the variables (dark-mode/assets/css/dark-mode.css).
 */

.aeon-info {
	--aeon-info-accent: var(--aeon-accent, var(--primary-color, #69043b));
	/* Buttons and links: the accent, darkened where it is too light for white text or for text
	   on white (light blue, green or sand accents); dark accents are unchanged. */
	--aeon-info-strong: color-mix(in srgb, var(--aeon-info-accent) 72%, #000);
	--aeon-info-accent-ink: var(--aeon-info-strong);
	--aeon-info-on-accent: #fff;
	--aeon-info-ink: var(--aeon-ink, #1b1b1b);
	--aeon-info-muted: #5f6368;
	--aeon-info-line: #e3e3e3;
	--aeon-info-card: #fafafa;
	--aeon-info-card: color-mix(in srgb, var(--aeon-info-accent) 3%, #fafafa);
	--aeon-info-field: #fff;
	--aeon-info-field-line: #c9c9c9;
	--aeon-info-ui: var(--aeon-interactives-font, "Roboto", Arial, sans-serif);
	color: var(--aeon-info-ink);
}

@supports (color: oklch(from red l c h)) {
	.aeon-info {
		--aeon-info-strong: oklch(from var(--aeon-info-accent) min(l, 0.47) c h);
	}
}

.aeon-info > :first-child {
	margin-top: 0;
}

.aeon-info__lead {
	margin: 0 0 1.4em;
	font-size: 1.12em;
	line-height: 1.55;
}

/* A section with its own heading, separated by a hairline. */
.aeon-info-section {
	margin: 44px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--aeon-info-line);
}

.aeon-info-section > h2 {
	margin: 0 0 10px;
	font-size: 1.45em;
	line-height: 1.2;
}

.aeon-info-section > h3 {
	margin: 30px 0 6px;
	font-size: 1.13em;
	line-height: 1.25;
}

.aeon-info-section > h2 + p {
	margin-top: 0;
}

.aeon-info-section > :last-child {
	margin-bottom: 0;
}

/* Cards in one, two or three columns. */
.aeon-info-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 18px 0 0;
}

@media (min-width: 600px) {
	.aeon-info-grid--2,
	.aeon-info-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.aeon-info-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.aeon-info-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 18px 20px;
	border: 1px solid var(--aeon-info-line);
	border-radius: 10px;
	background: var(--aeon-info-card);
	font-size: 16px;
	line-height: 1.5;
}

.aeon-info .aeon-info-card > * {
	margin: 0;
}

.aeon-info-card > h3 {
	font-family: var(--aeon-info-ui);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.aeon-info .aeon-info-card > .aeon-info-actions {
	margin-top: auto;
	padding-top: 8px;
}

/* A payment method: label, a large value to copy (Swish, bank giro) and an optional QR code. */
.aeon-pay {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: 16px;
	row-gap: 4px;
}

.aeon-pay > * {
	grid-column: 1;
}

.aeon-info .aeon-pay__label {
	font-family: var(--aeon-info-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aeon-info-muted);
}

.aeon-info .aeon-pay__value {
	font-family: var(--aeon-info-ui);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--aeon-info-ink);
	overflow-wrap: anywhere;
}

.aeon-info .aeon-pay__note {
	font-size: 15px;
	color: var(--aeon-info-muted);
}

.aeon-info .aeon-pay__qr {
	grid-column: 2;
	grid-row: 1 / span 5;
	align-self: start;
	width: 136px;
	margin: 0;
}

.aeon-pay__qr img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.aeon-info .aeon-pay__actions {
	margin-top: 6px;
}

@media (max-width: 479px) {
	.aeon-info .aeon-pay__qr {
		width: 96px;
	}
}

/* Copy button ([aeon_copy]). */
.aeon-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid rgba(105, 4, 59, 0.35);
	border: 1px solid color-mix(in srgb, var(--aeon-info-accent-ink) 40%, transparent);
	border-radius: 999px;
	background: transparent;
	font-family: var(--aeon-info-ui);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--aeon-info-accent-ink);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* Dark mode paints every span; the labels inside buttons follow the button. */
.aeon-copy .aeon-copy__text,
.aeon-btcpay .aeon-btcpay__submit > span {
	color: inherit;
}

.aeon-copy:hover,
.aeon-copy:focus-visible {
	border-color: var(--aeon-info-accent);
}

.aeon-copy:focus-visible,
.aeon-info-button:focus-visible,
.aeon-btcpay :is(button, input, select):focus-visible {
	outline: 2px solid var(--aeon-info-accent);
	outline-offset: 2px;
}

.aeon-copy.is-copied {
	border-color: var(--aeon-info-strong);
	background: var(--aeon-info-strong);
	color: var(--aeon-info-on-accent);
}

/* Link styled as a button. */
.aeon-info a.aeon-info-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 6px;
	background: var(--aeon-info-strong);
	font-family: var(--aeon-info-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--aeon-info-on-accent);
	text-decoration: none;
}

.aeon-info a.aeon-info-button:hover {
	background: color-mix(in srgb, var(--aeon-info-strong) 85%, #000);
}

.aeon-info a.aeon-info-button--quiet {
	padding: 10px 17px;
	border: 1px solid var(--aeon-info-field-line);
	background: transparent;
	color: var(--aeon-info-ink);
}

.aeon-info a.aeon-info-button--quiet:hover {
	border-color: var(--aeon-info-accent);
	background: transparent;
	color: var(--aeon-info-accent-ink);
}

/* Embedded third-party forms (Donorbox). */
.aeon-info-embed {
	width: 100%;
	max-width: 440px;
	margin: 18px 0 0;
}

.aeon-info-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border: 0;
}

/* Bitcoin donation ([aeon_btcpay]). */
.aeon-btcpay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	font-family: var(--aeon-info-ui);
}

.aeon-btcpay__amount {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid var(--aeon-info-field-line);
	border-radius: 8px;
	background: var(--aeon-info-field);
	overflow: hidden;
}

.aeon-btcpay__step {
	flex: 0 0 44px;
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: var(--aeon-info-accent-ink);
	cursor: pointer;
}

.aeon-btcpay__step:hover {
	background: color-mix(in srgb, var(--aeon-info-accent) 8%, transparent);
}

.aeon-btcpay .aeon-btcpay__price {
	width: 6.5ch;
	min-width: 0;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-inline: 1px solid var(--aeon-info-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--aeon-info-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

.aeon-btcpay__price::-webkit-outer-spin-button,
.aeon-btcpay__price::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.aeon-btcpay .aeon-btcpay__currency {
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0 28px 0 12px;
	border: 0;
	border-left: 1px solid var(--aeon-info-line);
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1.4 0 6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 7px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--aeon-info-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.aeon-btcpay__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--aeon-info-strong);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--aeon-info-on-accent);
	cursor: pointer;
}

.aeon-btcpay__submit:hover {
	background: color-mix(in srgb, var(--aeon-info-strong) 85%, #000);
}

.aeon-btcpay__symbol {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

/* Contact list: one row per address. */
.aeon-info .aeon-contact-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--aeon-info-line);
}

.aeon-info .aeon-contact-list > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	margin: 0;
	padding: 13px 0;
	border-bottom: 1px solid var(--aeon-info-line);
	line-height: 1.45;
}

@media (min-width: 600px) {
	.aeon-info .aeon-contact-list > li {
		grid-template-columns: 210px minmax(0, 1fr);
		column-gap: 20px;
		align-items: baseline;
	}

	.aeon-contact-list__note {
		grid-column: 2;
	}
}

.aeon-info .aeon-contact-list__label {
	font-family: var(--aeon-info-ui);
	font-size: 14px;
	font-weight: 700;
	color: var(--aeon-info-ink);
}

.aeon-info .aeon-contact-list a {
	font-family: var(--aeon-info-ui);
	font-size: 16px;
	font-weight: 600;
	color: var(--aeon-info-accent-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.aeon-info .aeon-contact-list a:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.aeon-info .aeon-contact-list__note {
	font-size: 15px;
	color: var(--aeon-info-muted);
}

/* People: name and role. */
.aeon-info .aeon-people {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.aeon-info .aeon-people {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.aeon-info .aeon-people > li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--aeon-info-line);
	border-radius: 10px;
	background: var(--aeon-info-card);
	line-height: 1.4;
}

.aeon-info .aeon-people__role {
	font-family: var(--aeon-info-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aeon-info-muted);
}

.aeon-info .aeon-people__name {
	font-family: var(--aeon-info-ui);
	font-size: 18px;
	font-weight: 700;
	color: var(--aeon-info-ink);
}

.aeon-info .aeon-people a {
	font-family: var(--aeon-info-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--aeon-info-accent-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.aeon-info .aeon-people a:hover {
	text-decoration: underline !important;
}

/* Forms in the page: WPForms, Mailchimp for WP and [aeon_mailchimp]. ".aeon-info.aeon-info"
   lifts these rules above WPForms' own stylesheet (div.wpforms-container-full .wpforms-form …). */
.aeon-info.aeon-info :is(.wpforms-container, .mc4wp-form, .aeon-mailchimp) {
	max-width: 560px;
	margin: 18px 0 0;
	font-family: var(--aeon-info-ui);
}

.aeon-info.aeon-info :is(.wpforms-container .wpforms-field-label, .mc4wp-form label, .aeon-mailchimp label) {
	display: block;
	margin: 0 0 6px;
	font-family: var(--aeon-info-ui);
	font-size: 14px;
	font-weight: 600;
	color: var(--aeon-info-ink);
}

.aeon-info.aeon-info :is(.wpforms-container, .mc4wp-form, .aeon-mailchimp) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 13px;
	border: 1px solid var(--aeon-info-field-line);
	border-radius: 6px;
	background: var(--aeon-info-field);
	box-shadow: none;
	font-family: var(--aeon-info-ui);
	font-size: 16px;
	line-height: 1.4;
	color: var(--aeon-info-ink);
}

.aeon-info.aeon-info :is(.wpforms-container, .mc4wp-form, .aeon-mailchimp) textarea {
	min-height: 160px;
	resize: vertical;
}

.aeon-info.aeon-info :is(.wpforms-container, .mc4wp-form, .aeon-mailchimp) :is(input, select, textarea):focus {
	border-color: var(--aeon-info-accent);
	outline: 2px solid color-mix(in srgb, var(--aeon-info-accent) 30%, transparent);
	outline-offset: 0;
}

.aeon-info.aeon-info :is(.wpforms-container button[type="submit"], .mc4wp-form input[type="submit"], .aeon-mailchimp button[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 6px;
	background: var(--aeon-info-strong);
	font-family: var(--aeon-info-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--aeon-info-on-accent);
	cursor: pointer;
}

.aeon-info.aeon-info :is(.wpforms-container button[type="submit"], .mc4wp-form input[type="submit"], .aeon-mailchimp button[type="submit"]):hover {
	background: color-mix(in srgb, var(--aeon-info-strong) 85%, #000);
}

.aeon-info.aeon-info .wpforms-container .wpforms-field {
	padding: 0 0 16px;
}

.aeon-info.aeon-info .wpforms-container .wpforms-field-sublabel,
.aeon-info.aeon-info .wpforms-container .wpforms-field-description {
	font-size: 13px;
	color: var(--aeon-info-muted);
}

.aeon-info.aeon-info .wpforms-container .wpforms-required-label {
	color: var(--aeon-info-accent-ink);
}

.aeon-mailchimp__field {
	margin: 0 0 14px;
}

.aeon-mailchimp__names {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 14px;
}

@media (min-width: 480px) {
	.aeon-mailchimp__names {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.aeon-mailchimp__trap {
	position: absolute;
	left: -5000px;
}

.aeon-info .aeon-mailchimp__submit {
	margin: 4px 0 0;
}

/* Small print under a form or a section. */
.aeon-info .aeon-info-note {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--aeon-info-muted);
}

@media (max-width: 600px) {
	.aeon-info-section {
		margin-top: 36px;
		padding-top: 24px;
	}

	.aeon-info .aeon-pay__value {
		font-size: 23px;
	}
}