/*
Theme Name: Seahorse Child
Description: Shared club-site design for the Taoist Cultural Arts Association (child of Twenty Twenty-Five).
Template: twentytwentyfive
Version: 1.9.2
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 (80 = 50%, B3 = 70%, E6 = 90%, FF = solid). */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #003C8F80 !important;  /* 50% since 1.9.2 (was 70%) */
	-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;
}

/* ===== Top-level menu items (since 1.9.2) =====
   The three top headings get the same see-through Seahorse blue as the dropdowns.
   Not in the phone menu, which already has its own almost-solid background. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
	background-color: #003C8F80;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-radius: 6px;
	padding: 0.35rem 0.8rem;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
	background-color: #003C8F;
}

/* ===== Dropdowns show over the page (since 1.9.2) =====
   The headers are Cover blocks, and WordPress clips a Cover block to its own height,
   so on the slim header the lower part of each dropdown was cut off.
   Let the header's Cover show what hangs below it, and lift the whole header above the page. */
header.wp-block-template-part {
	position: relative;
	z-index: 50;
}
header.wp-block-template-part .wp-block-cover {
	overflow: visible;
}

/* ===== 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; }
}