/*
Theme Name: VoteLoomis
Theme URI: https://voteloomis.com
Author: VoteLoomis
Author URI: https://voteloomis.com
Description: Custom block theme for the Keanin Loomis for Mayor campaign. Colours and typography defined in theme.json.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voteloomis
*/

/* Colours, fonts, spacing live in theme.json. Only supplemental styles here. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.page-slug-volunteer .wp-block-post-title {
	display: none;
}

/* Newsletter form (Stay Connected section) */
.vl-newsletter {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.vl-newsletter input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 0;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.95rem;
}

.vl-newsletter input::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 1;
}

.vl-newsletter input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.vl-newsletter__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

@media (max-width: 480px) {
	.vl-newsletter__row {
		grid-template-columns: 1fr;
	}
}

.vl-newsletter__submit {
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.vl-newsletter__submit:hover {
	background: var(--wp--preset--color--secondary);
}

/* Hide submit button if you later replace this with a Mailchimp/embed form */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Header navigation ---------- */

/* Heading-font styling for the header nav links + Donate button.
 * Kept in CSS rather than block attributes to avoid Site Editor
 * "block contains unexpected or invalid content" warnings. */
.wp-block-template-part header .wp-block-navigation .wp-block-navigation-item__content,
.wp-block-template-part header .wp-block-button.vl-donate-btn .wp-block-button__link {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.wp-block-template-part header .wp-block-navigation {
	--wp--style--block-gap: 3rem;
}

/* Trigger the hamburger overlay below this width (default is ~600px). */
@media (max-width: 900px) {
	.wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Hamburger / close icon colour on the navy bar */
.wp-block-navigation .wp-block-navigation__responsive-container-open,
.wp-block-navigation .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--primary);
}

/* Make the open overlay use brand styling */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.5rem;
}

/* ---------- Footer social icons (force white logos on navy band) ---------- */
.wp-block-template-part footer .wp-block-social-links.is-style-logos-only .wp-social-link,
.wp-block-template-part footer .wp-block-social-links.is-style-logos-only .wp-social-link a,
.wp-block-template-part footer .wp-block-social-links.is-style-logos-only .wp-social-link svg {
	color: #ffffff !important;
	fill: #ffffff !important;
	background: transparent !important;
}

/* ---------- Volunteer page ---------- */

.vl-volunteer-cards,
.vl-volunteer-details {
	gap: 1.5rem;
}

.vl-volunteer-card,
.vl-volunteer-note,
.vl-volunteer-form {
	box-shadow: 8px 8px 0 var(--wp--preset--color--primary);
}

.vl-volunteer-card {
	height: 100%;
}

.vl-volunteer-list {
	margin: 1.25rem 0 0;
	padding-left: 1.25rem;
}

.vl-volunteer-list li + li {
	margin-top: 0.65rem;
}

.vl-volunteer-form > * {
	max-width: 100%;
}

.vl-volunteer-form iframe,
.vl-volunteer-form embed,
.vl-volunteer-form object {
	width: 100%;
	max-width: 100%;
	border: 0;
	display: block;
}

@media (max-width: 781px) {
	.vl-volunteer-note,
	.vl-volunteer-form {
		padding: 1.5rem;
	}
}