/* Owldraft Newsletter on the site: the subscribe form and the account page. Little of
   its own, so the theme's fonts, colours and buttons show through. */

/* The email row: a white field with the button inside it. Block options set
   --owldraft-newsletter-radius, --owldraft-newsletter-button-bg and --owldraft-newsletter-button-color; the
   button falls back to the theme's --accent, then black. */
.owldraft-newsletter-row {
	--owldraft-newsletter-pad: .375em;
	display: flex;
	align-items: stretch;
	gap: var(--owldraft-newsletter-pad);
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: var(--owldraft-newsletter-pad);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: var(--owldraft-newsletter-radius, 12px);
	/* Sized by its own width, not the screen's: a sidebar is narrow on any screen. */
	container-type: inline-size;
}
.owldraft-newsletter-row:focus-within { border-color: rgba(0, 0, 0, .4); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }
.owldraft-newsletter-size-small .owldraft-newsletter-row { --owldraft-newsletter-pad: .25em; font-size: .875em; }
/* Themes often fix every field and button at one height (48px is common), which
   would keep the small form as tall as the normal one. Small lets its own
   padding set the height instead; normal and large keep the theme's height. */
.owldraft-newsletter-size-small .owldraft-newsletter-row .owldraft-newsletter-input { height: auto; }
.owldraft-newsletter-size-small .owldraft-newsletter-row .wp-element-button { min-height: 0; }
.owldraft-newsletter-size-large .owldraft-newsletter-row { --owldraft-newsletter-pad: .5em; font-size: 1.125em; }

.owldraft-newsletter-row .owldraft-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: .55em .75em;
	font: inherit;
	line-height: 1.3;
	color: #1e1e1e;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
}
.owldraft-newsletter-row .owldraft-newsletter-input::placeholder { color: #757575; opacity: 1; }
/* Signed in: the form stays, greyed, with the reader's email in it. */
.owldraft-newsletter-row:has(.owldraft-newsletter-input:disabled) { background: #f6f7f7; }
.owldraft-newsletter-row .owldraft-newsletter-input:disabled { color: #757575; -webkit-text-fill-color: #757575; opacity: 1; cursor: default; }

.owldraft-newsletter-row .wp-element-button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	margin: 0;
	padding: .55em 1.1em;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--owldraft-newsletter-button-color, #fff);
	background: var(--owldraft-newsletter-button-bg, var(--accent, #000));
	border: 0;
	border-radius: max(0px, calc(var(--owldraft-newsletter-radius, 12px) - var(--owldraft-newsletter-pad)));
	box-shadow: none;
	cursor: pointer;
}
.owldraft-newsletter-row .wp-element-button:hover,
.owldraft-newsletter-row .wp-element-button:focus-visible { opacity: .88; }
.owldraft-newsletter-row .wp-element-button:disabled { opacity: .6; cursor: default; }
.owldraft-newsletter-icon { flex: none; width: 1.1em; height: 1.1em; }
/* Never stacked: too narrow for the words, the button is just the paper
   plane. The words stay for screen readers. */
@container (max-width: 18em) {
	/* Square: as wide as the row is tall. A theme's fixed button height
	   sets that through aspect-ratio; without one (the small size) the
	   height is the field's own, 2.4em, so min-width matches it. */
	.owldraft-newsletter-row .wp-element-button { padding: 0; aspect-ratio: 1; min-width: 2.4em; }
	.owldraft-newsletter-row .wp-element-button > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
.owldraft-newsletter-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.owldraft-newsletter-subscribe__heading { margin: 0 0 .4em; }
.owldraft-newsletter-subscribe__text { margin: 0 0 .75em; }

/* The reply after a submit, as a notice rather than a loose line: a tinted box
   with an icon, green when it worked, red when it did not. Tints are mixed
   into transparent, so the box reads on a white page and on a dark cover. */
.owldraft-newsletter-subscribe__message {
	--owldraft-newsletter-tone: #1a7f37;
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 0 0 .75em;
	padding: .75em 1em;
	line-height: 1.45;
	/* A wash of the text colour under the tint: barely there on a light page,
	   and on a dark cover (light text) it lifts the box off the photo. */
	background:
		linear-gradient(color-mix(in srgb, var(--owldraft-newsletter-tone) 9%, transparent), color-mix(in srgb, var(--owldraft-newsletter-tone) 9%, transparent)),
		color-mix(in srgb, currentColor 4%, transparent);
	border: 1px solid color-mix(in srgb, var(--owldraft-newsletter-tone) 40%, transparent);
	border-radius: var(--owldraft-newsletter-radius, 12px);
}
.owldraft-newsletter-subscribe__message[hidden] { display: none; }
.owldraft-newsletter-subscribe__message::before {
	content: "";
	flex: 0 0 auto;
	width: 1.2em;
	height: 1.2em;
	margin-top: .125em;
	background: var(--owldraft-newsletter-tone);
	-webkit-mask: var(--owldraft-newsletter-icon) center / contain no-repeat;
	mask: var(--owldraft-newsletter-icon) center / contain no-repeat;
	--owldraft-newsletter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.owldraft-newsletter-subscribe__message.owldraft-newsletter-error { --owldraft-newsletter-tone: #b32d2e; color: inherit; }
.owldraft-newsletter-subscribe__message.owldraft-newsletter-error::before {
	--owldraft-newsletter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}
/* Small print under the form: consent, terms, privacy. */
.owldraft-newsletter-subscribe__note,
.owldraft-newsletter-subscribe__status { margin: .75em 0 0; font-size: .8125em; line-height: 1.5; opacity: .75; }
.owldraft-newsletter-subscribe__note a { color: inherit; text-decoration: underline; }
/* Signed in: the account link, right under the small print. */
.owldraft-newsletter-subscribe__note + .owldraft-newsletter-subscribe__status { margin-top: .25em; }
.owldraft-newsletter-subscribe__status[hidden] { display: none; }
.owldraft-newsletter-error { color: #b32d2e; }

.owldraft-newsletter-account__names { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 0 1em; }
.owldraft-newsletter-account__names p { margin: 0 0 1em; }
.owldraft-newsletter-account__names label { display: block; margin-bottom: .25em; }
.owldraft-newsletter-account__names input { box-sizing: border-box; width: 100%; }
.owldraft-newsletter-account fieldset { margin: 0 0 1em; padding: 0; border: 0; }
.owldraft-newsletter-account legend { margin-bottom: .5em; padding: 0; }
.owldraft-newsletter-account fieldset label { display: block; margin: .25em 0; }
.owldraft-newsletter-link {
	padding: 0;
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
.owldraft-newsletter-account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5em; }
.owldraft-newsletter-signout { color: #b32d2e; }