/*
Theme Name: Seahorse Child
Description: Shared club-site design for the Taoist Cultural Arts Association (child of Twenty Twenty-Five).
Template: twentytwentyfive
Version: 1.8.1
Text Domain: seahorse-child
*/

/* ===== Menus: dropdowns and phone menu (since 1.8) =====
   The header menus use white text, so the dropdown and phone menu need a dark background.
   Colour: Seahorse blue 003C8F. Last two characters = opacity (B3 = 70%, E6 = 90%, FF = solid). */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #003C8FB3 !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: none !important;
	border-radius: 6px;
	padding: 0.4rem 0 !important;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #003C8FF2 !important;  /* phone menu: almost solid, it covers the page */
}
.wp-block-navigation .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open button {
	color: #fff !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1.1rem;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: #003C8F;
	text-decoration: none;
}

/* ===== Mailchimp newsletter form (since 1.8) =====
   Use with the trimmed form HTML whose outer div has class="seahorse-newsletter". */
.seahorse-newsletter {
	max-width: 640px;
	margin: 2rem auto;
	padding: 2rem;
	background: transparent;
	border-top: 3px solid #2D6FC8;
	border-bottom: 3px solid #2D6FC8;
}
.seahorse-newsletter h2 {
	margin-top: 0;
	color: #2D6FC8;  /* set here too, so a site's saved Styles-panel colours cannot turn it black */
}
.seahorse-newsletter form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.seahorse-newsletter h2,
.seahorse-newsletter .mc-intro,
.seahorse-newsletter .mc-wide,
.seahorse-newsletter #mce-responses,
.seahorse-newsletter .button { grid-column: 1 / -1; }
.seahorse-newsletter label {
	display: block;
	font-size: 0.9rem;
	margin-bottom: 0.3rem;
}
.seahorse-newsletter input[type="text"],
.seahorse-newsletter input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	font: inherit;
	background: #fff;
	border: 1px solid #c9c2b4;
	border-radius: 6px;
}
.seahorse-newsletter input:focus {
	outline: 2px solid #2D6FC8;
	border-color: #2D6FC8;
}
.seahorse-newsletter .button {
	justify-self: start;
	padding: 0.75rem 2rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #2D6FC8;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}
.seahorse-newsletter .button:hover { background: #003C8F; }
.seahorse-newsletter #mce-error-response { color: #b3261e; }
.seahorse-newsletter #mce-success-response { color: #2D6FC8; font-weight: 600; }
.seahorse-newsletter input.mce_inline_error { border-color: #b3261e; }
.seahorse-newsletter div.mce_inline_error { color: #b3261e; font-size: 0.85rem; background: none !important; }

@media (max-width: 600px) {
	.seahorse-newsletter form { grid-template-columns: 1fr; }
	.seahorse-newsletter { padding: 1.5rem 1rem; }
}