/*
Theme Name: Seahorse Books
Description: Theme for seahorsebooks.co.uk, a personal site that is not part of the Taoist Cultural Arts Association. Built from Seahorse Child 1.9.2 (child of Twenty Twenty-Five).
Template: twentytwentyfive
Version: 1.0
Text Domain: seahorse-books
*/

/* ===== Rounded buttons =====
   Every button: Button blocks, the search button, the basket and checkout buttons,
   the contact form's Send button and the newsletter Subscribe button.
   The "+" and "-" quantity boxes are deliberately left alone. Colours (blue) come from theme.json. */
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.wpcf7-submit,
.seahorse-newsletter .button,
input[type="submit"],
button[type="submit"] {
	border-radius: 999px !important;
}

/* ===== Justified text =====
   Paragraphs in page and post content are justified on screens wider than 700px,
   with automatic hyphenation so the word spacing stays even. Phones keep left-aligned text. */
@media (min-width: 701px) {
	.wp-block-post-content p {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* ===== 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: black 000000. Last two characters = opacity (66 = 40% black, mostly see-through; F2 = 95%; FF = solid). */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #00000066 !important;  /* 40% black */
	-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: #000000F2 !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: #000000;
	text-decoration: none;
}

/* ===== Top-level menu items (since 1.9.2) =====
   The top headings get the same see-through black 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: #00000066;
	-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: #000000;
}

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