/*
 * Mailchimp signup form — the `mailchimp/mailchimp` block.
 *
 * The plugin's own frontend.css is dequeued in functions.php, so this file is
 * the single source of truth for the form's look. Everything the plugin's
 * stylesheet did that is still needed (field layout, interest-group lists, the
 * datepicker year fix) is restated here in the site's own type and color.
 *
 * The submit button is styled with the theme's other buttons, in buttons.css,
 * where it shares the outline treatment and mirrors theme.json's button type.
 *
 * The form renders as different markup in the two places it appears: real form
 * controls on the front end, editable RichText elements in the editor. Rules
 * here therefore key off the plugin's `mc_*` classes, which both versions carry,
 * rather than on tag names.
 */

/* ── Headings ────────────────────────────────────────── */

.mc_custom_border_hdr,
.mc_subheader {
	line-height: 1.25;
	margin-bottom: 18px;
}

/* The plugin marks the sub-header up as an h3, but it reads as introductory
   body copy — size it to match the surrounding content rather than a heading. */
.mc_subheader h3 {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	line-height: 28px;
	font-weight: 500;
	color: #515151;
}

/* ── Labels ──────────────────────────────────────────── */

/* Rules from here down are scoped to the form wrapper so they outrank two
   stylesheets present only in the editor canvas: the plugin's editor.css, which
   restates its own field sizing, and wp-admin's forms.css, whose input[type]
   selectors would otherwise beat a bare class. */
.mc_signup_form .mc_var_label,
.mc_signup_form .mc_interest_label,
.mc_signup_form .mc_address_label,
.mc_signup_form .mc_header_address,
.mc_signup_form .mc_email_format,
.mc_signup_form .mc_interests_header,
.mc_signup_form .mc-indicates-required {
	display: block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: #000000;
	margin-bottom: 10px;
}

.mc_signup_form .mc_address_label,
.mc_signup_form .mc_header_address,
.mc_signup_form .mc_email_format,
.mc_signup_form .mc_interests_header {
	margin-top: 20px;
}

/* The required marker sits inside its label, so it needs its own gap and enough
   weight to read against the uppercase label around it. */
.mc_signup_form .mc_required {
	margin-left: 5px;
	font-size: 14px;
	line-height: 1;
	color: var(--wp--preset--color--accent-red);
	vertical-align: middle;
}

.mc_signup_form .mc-indicates-required {
	margin-top: 28px;
	margin-bottom: 0;
}

/* ── Fields ──────────────────────────────────────────── */

.mc_signup_form .mc_merge_var {
	margin: 0 0 20px;
	padding: 0;
}

.mc_signup_form .mc_input,
.mc_signup_form .mc_select,
.mc_signup_form .mc_address_label ~ select {
	box-sizing: border-box;
	width: 100%;
	max-width: 370px;
	padding: 10px 20px;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #000000;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 0;
	transition: all 300ms ease;
}

.mc_signup_form .mc_input:hover,
.mc_signup_form .mc_input:focus,
.mc_signup_form .mc_select:hover,
.mc_signup_form .mc_select:focus,
.mc_signup_form .mc_address_label ~ select:hover,
.mc_signup_form .mc_address_label ~ select:focus {
	background-color: rgba(0, 0, 0, 0.05);
	border-color: #000000;
}

.mc_signup_form .mc_input.mc_phone {
	width: auto;
}

/* ── Interest groups ─────────────────────────────────── */

/* `mc_interest` is on the group wrapper AND on every checkbox inside it, so this
   must stay qualified. Unqualified it also matches the inputs and stretches each
   checkbox to the full width of the form, which pushes its label onto the next
   line. Only the wrapper should be full width. */
div.mc_interest {
	width: 100%;
}

/* The checkbox/label pairs are emitted flat, separated by <br>, with no wrapper
   per row — so the row rhythm has to come from the label's own box. Sized for a
   comfortable target without stretching the list out. */
.mc_signup_form input.mc_interest,
.mc_signup_form .mc_radio {
	width: 16px;
	height: 16px;
	margin: 0 8px 0 0;
	vertical-align: middle;
}

/* Checkbox/radio labels sit beside their control, not above it. */
.mc_signup_form label.mc_interest_label,
.mc_signup_form label.mc_radio_label {
	display: inline-block;
	padding: 3px 0;
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 0;
	text-transform: none;
	vertical-align: middle;
	cursor: pointer;
}

.mc_list,
.mc_list li {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	background: none;
}

/* ── Email-format options ────────────────────────────── */

.mc_email_options {
	margin-top: 10px;
}

.mc_email_type {
	padding-left: 4px;
}

/* ── Submit row ──────────────────────────────────────── */

.mc_signup_form .mc_signup_submit {
	margin-top: 20px;
	text-align: left;
}

/* ── Messages ────────────────────────────────────────── */

.mc_error_msg,
.mc_error_msg a {
	color: var(--wp--preset--color--accent-red);
	margin-bottom: 1em;
}

.mc_success_msg {
	color: #1f7a3d;
	margin-bottom: 1em;
}

/* ── Unsubscribe link ────────────────────────────────── */

.mc_unsub_link {
	margin-top: 20px;
}

.mc_unsub_link a {
	font-size: 12px;
}

/* ── Date fields ─────────────────────────────────────── */

/* The year select is only meaningful once a date field opens the picker. */
#ui-datepicker-div .ui-datepicker-year {
	display: none;
}

#ui-datepicker-div.show .ui-datepicker-year {
	display: inline;
	padding-left: 3px;
}