/* ==========================================================================
   Mailchimp signup form - theme skin
   --------------------------------------------------------------------------
   Why this file exists, and why every rule carries !important:

   The [mailchimp_shortcode] output includes an inline
   <link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css">
   in the BODY. Because that widget renders in the footer on every page, that
   stylesheet is the LAST sheet in the document on every page of the site, so
   it wins every specificity tie against anything enqueued in <head>.

   Measured consequence before this file: the submit button computed at 15px
   from Mailchimp's sheet, even though custom.css asks for 24px.

   So: !important is load-bearing here, exactly as in bandsintown.css.
   The alternative is deleting that <link> from the shortcode, which would let
   us drop the !important flags - see the change record.

   Tokens taken from the existing theme CSS, not invented:
     #c4b5a3  input background      (custom.css input#mce-EMAIL)
     #1d1c11  input text            (intended; custom.css has an invalid
                                     9-digit #1d1c11000 which browsers drop)
     #962a29  button background     (custom.css .btn-mailchimp-custom)
     #529214  success green         (custom.css #mce-success-response)
     Bebas Neue 24px  buttons
     Montserrat 14px  inputs
     0 radius, 50px control height, full-bleed width
   ========================================================================== */

/* ---------- shell ---------- */
#mc_embed_shell,
#mc_embed_signup {
	background: transparent !important;
	border: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: both;
	font-family: "Montserrat", sans-serif !important;
}

#mc_embed_signup form {
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	position: static !important;
}

#mc_embed_signup #mc_embed_signup_scroll {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Mailchimp chrome the theme does not want on show ----------
   The home-page form has never had a label or a required-indicator; it uses
   a placeholder instead. These two are stock Mailchimp markup that was
   rendering in the inherited body font (Didot) and breaking the panel. */
#mc_embed_signup .indicates-required,
#mc_embed_signup .asterisk,
#mc_embed_signup span#mce-EMAIL-HELPERTEXT,
#mc_embed_signup .helper_text {
	display: none !important;
}

/* The label is hidden VISUALLY but kept in the accessibility tree, so the
   field still has a programmatic name for screen readers. Do not switch this
   to display:none - that removes it from the tree entirely. */
#mc_embed_signup .mc-field-group > label,
#mc_embed_signup label[for="mce-EMAIL"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- field group ---------- */
#mc_embed_signup .mc-field-group {
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	position: relative !important;
	clear: none !important;
}

/* ---------- the email input ---------- */
#mc_embed_signup .mc-field-group input[type="email"],
#mc_embed_signup .mc-field-group input[type="text"],
#mc_embed_signup input#mce-EMAIL {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	background: #c4b5a3 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: #1d1c11 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-indent: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.3s ease-in-out !important;
}

#mc_embed_signup input#mce-EMAIL::placeholder {
	color: #6f6552 !important;
	opacity: 1 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	letter-spacing: 0.02em !important;
}

#mc_embed_signup input#mce-EMAIL:focus {
	background: #d2c6b7 !important;
	box-shadow: inset 0 0 0 2px #962a29 !important;
}

/* ---------- the submit button ----------
   Covers both markups in use: .btn-mailchimp-custom (theme shortcode, "GO")
   and .button (the raw block on the Crazy Hearts Club page, "Subscribe"). */
#mc_embed_signup input[type="submit"],
#mc_embed_signup .button,
#mc_embed_signup .btn-mailchimp-custom,
#mc_embed_signup input#mc-embedded-subscribe {
	display: block !important;
	box-sizing: border-box !important;
	position: relative !important;
	left: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	background-color: #962a29 !important;
	border: 1px solid #962a29 !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: "Bebas Neue", "Bebas Kai", sans-serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 48px !important;
	letter-spacing: 0.06em !important;
	text-align: center !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out !important;
}

#mc_embed_signup input[type="submit"]:hover,
#mc_embed_signup .button:hover,
#mc_embed_signup .btn-mailchimp-custom:hover,
#mc_embed_signup input#mc-embedded-subscribe:hover {
	background-color: #c4b5a3 !important;
	border-color: #c4b5a3 !important;
	color: #962a29 !important;
}

#mc_embed_signup input[type="submit"]:focus-visible,
#mc_embed_signup input#mc-embedded-subscribe:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
}

/* Mailchimp's own wrappers around the button add stray spacing. */
#mc_embed_signup .optionalParent,
#mc_embed_signup .optionalParent .foot,
#mc_embed_signup div.clear {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	position: static !important;
	float: none !important;
}

/* ---------- responses ---------- */
#mc_embed_signup #mce-responses {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	top: 0 !important;
	position: static !important;
	float: none !important;
}

#mc_embed_signup #mce-responses .response {
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 10px 0 0 !important;
	padding: 10px 12px !important;
	border-radius: 0 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	text-align: center !important;
	letter-spacing: 0 !important;
}

#mc_embed_signup #mce-success-response {
	background: #529214 !important;
	color: #fff !important;
	height: auto !important;
}

#mc_embed_signup #mce-error-response {
	background: #962a29 !important;
	color: #fff !important;
}

#mc_embed_signup #mce-error-response a {
	color: #fff !important;
	text-decoration: underline !important;
}

/* inline field validation bubble */
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 6px 0 0 !important;
	padding: 8px 10px !important;
	background: #962a29 !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-align: center !important;
}

#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
	border: 0 !important;
	box-shadow: inset 0 0 0 2px #962a29 !important;
}

/* ---------- the footer instance sits on a dark bar ---------- */
footer #mc_embed_signup form,
#footer-mc #mc_embed_signup form {
	padding: 0 !important;
}

/* ---------- narrow screens ---------- */
@media (max-width: 767px) {
	#mc_embed_signup .mc-field-group input[type="email"],
	#mc_embed_signup input#mce-EMAIL,
	#mc_embed_signup input[type="submit"],
	#mc_embed_signup .button,
	#mc_embed_signup .btn-mailchimp-custom,
	#mc_embed_signup input#mc-embedded-subscribe {
		height: 46px !important;
	}

	#mc_embed_signup input[type="submit"],
	#mc_embed_signup .button,
	#mc_embed_signup .btn-mailchimp-custom,
	#mc_embed_signup input#mc-embedded-subscribe {
		font-size: 21px !important;
		line-height: 44px !important;
	}
}