/*
Theme Name: Keep Mayfield Working
Theme URI: https://www.keepmayfieldworking.com
Author: WrightPath Solutions
Description: Mobile-first block theme for keepmayfieldworking.com. Clean, warm, civic. Wildcat green and charcoal, system fonts, minimal CSS, WCAG AA targets.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keepmayfieldworking
Tags: block-theme, one-column, accessibility-ready, custom-colors
*/

/* Colours, type scale and spacing all come from theme.json, which also generates
   the has-*-color / has-*-font-size utility classes the page markup uses.
   What follows is only what theme.json cannot express. */

/* --- Accessibility: visible focus everywhere --- */
:where(a, button, input, textarea, select, summary, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--green-dark);
	outline-offset: 2px;
	border-radius: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-deep);
	padding: 0.75rem 1.25rem;
	font-weight: 700;
	text-decoration: underline;
}
.skip-link:focus { left: 0; }

/* --- Front page: main runs edge to edge, each section band constrains its own
       children. This is what lets the hero go full bleed and the tinted bands
       span the viewport. --- */
.kmw-main,
.kmw-main > .wp-block-post-content {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.kmw-main .wp-block-post-content > * {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.kmw-main .wp-block-post-content > .wp-block-group {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.kmw-main .wp-block-post-content > .wp-block-group > * {
	max-width: 44rem;
	margin-left: auto !important;
	margin-right: auto !important;
}
.kmw-main .wp-block-post-content > .wp-block-group > .alignwide { max-width: 72rem; }
.kmw-main .wp-block-cover { margin-top: 0; margin-bottom: 0; }
.kmw-main .wp-block-cover__inner-container {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}
html, body { overflow-x: hidden; }

/* --- Header --- */
.kmw-header { border-bottom: 4px solid var(--wp--preset--color--green); }
.wp-block-site-title a {
	color: var(--wp--preset--color--green-deep);
	text-decoration: none;
	font-weight: 800;
}
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--green-deep);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 3px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.6rem 0;
	font-size: var(--wp--preset--font-size--x-large);
}

/* --- Hero ---
   A flat 60% dim buried the photograph entirely. 35% showed it beautifully but
   white text over the bright sky measured 2.9:1, under the bar. 55% is the
   balance: the pond and office park still read, and white on the worst-case sky
   region measures 3.36:1, clearing the 3.0 AA threshold for large text. Both the
   headline and the subhead are large-text sizes. --- */
.kmw-hero { min-height: 62vh; }
@media (max-width: 600px) { .kmw-hero { min-height: 56vh; } }
.kmw-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: rgba(0, 90, 34, 0.55) !important;
}
.kmw-hero h1 {
	text-wrap: balance;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}
.kmw-hero .kmw-hero__sub { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); }
.kmw-hero .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-deep);
}
.kmw-hero .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-deep);
}

/* --- Officials: 2 up on desktop, 1 up on a phone --- */
.kmw-officials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	gap: 1rem;
	align-items: start;
}
.kmw-officials > * { margin: 0 !important; max-width: none !important; }
/* The first card is the lead contact, so give it the full row. */
.kmw-officials > *:first-child {
	grid-column: 1 / -1;
	background: var(--wp--preset--color--green-tint);
	border-left-width: 8px;
}
.kmw-official {
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 5px solid var(--wp--preset--color--green);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
}
.kmw-official p { margin: 0; }
.kmw-official__name {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}
.kmw-official__role {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
}
/* 48px minimum tap target. Most visitors arrive from SMS links on a phone. */
.kmw-official__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.75rem;
}
.kmw-official__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 48px;
	padding: 0.6rem 1rem;
	border-radius: 6px;
	background: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-deep);
	font-weight: 600;
	text-decoration: none;
	word-break: break-word;
}
.kmw-official__links a:hover {
	background: var(--wp--preset--color--green-dark);
	color: var(--wp--preset--color--white);
}

/* --- Photo grid: 3 up desktop, 2 up tablet, 1 up phone --- */
.kmw-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1rem;
}
.kmw-photo-grid > * { margin: 0 !important; max-width: none !important; }
.kmw-photo-grid img {
	border-radius: 8px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* --- Meeting block --- */
.kmw-meeting {
	border: 2px solid var(--wp--preset--color--green);
	border-radius: 10px;
}

/* --- Petitioner list --- */
.kmw-people { list-style: none; padding-left: 0; margin: 0; }
.kmw-people li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.kmw-people li:last-child { border-bottom: 0; }

/* --- TK placeholder markers, for drafting. Delete the notes before launch. --- */
.kmw-tk {
	background: #FFF4CE;
	border-left: 5px solid #C79A00;
	padding: 1rem 1.25rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Footer ---
   These links were inheriting the sitewide green on a green background, about
   1.4:1. White on the footer green is 8.45:1. Every state is pinned so a visited
   link cannot drift back to a browser default. --- */
.kmw-footer { border-top: 4px solid var(--wp--preset--color--green); }
.kmw-footer a,
.kmw-footer a:link,
.kmw-footer a:visited,
.kmw-footer a:hover,
.kmw-footer a:focus,
.kmw-footer a:active {
	color: var(--wp--preset--color--white) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kmw-footer a:hover,
.kmw-footer a:focus { text-decoration-thickness: 2px; }
.kmw-footer a:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- Forms --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	font-size: 1rem; /* 16px stops iOS zooming the page on focus */
	font-family: inherit;
	color: var(--wp--preset--color--charcoal);
	background: var(--wp--preset--color--white);
}
textarea { min-height: 8rem; }
label { display: block; font-weight: 600; margin-bottom: 0.35rem; }

/* --- Bit Form ---
   Use the real checkbox, which is accessible and reliable, and hide the plugin's
   decorative box. Bit Form also renders a stray <svg> as the first child of the
   option list, which injects about 150px of dead space; that is hidden too. --- */
.bf-form input[type="checkbox"].bf-ci {
	position: static !important;
	width: 1.35rem !important;
	height: 1.35rem !important;
	opacity: 1 !important;
	margin: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--green-dark);
}
.bf-form .bf-bx,
.bf-form .bf-box { display: none !important; }
.bf-form .bf-cc > svg { display: none !important; }
.bf-form .bf-cc {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	height: auto !important;
	gap: 0.1rem;
}
.bf-form .bf-cw {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
}
.bf-form .bf-cl {
	font-weight: 400;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.bf-form .bf-fld-wrp,
.bf-form .bf-inp-wrp { height: auto !important; }
.bf-form .bf-btn,
.bf-form .bf-button,
.bf-form button[type="submit"] {
	background: var(--wp--preset--color--green-dark) !important;
	border-color: var(--wp--preset--color--green-dark) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	padding: 0.9rem 1.6rem !important;
	font-size: var(--wp--preset--font-size--large) !important;
	min-height: 48px;
}
.bf-form .bf-btn:hover,
.bf-form button[type="submit"]:hover {
	background: var(--wp--preset--color--green-deep) !important;
	border-color: var(--wp--preset--color--green-deep) !important;
}
.bf-form .bf-lbl-wrp label,
.bf-form .bf-label-wrapper label { font-weight: 600; }
.bf-form input[type="text"],
.bf-form input[type="email"],
.bf-form input[type="tel"] {
	min-height: 48px;
	font-size: 1rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
}
.bf-form input:focus-visible,
.bf-form .bf-cl:focus-within {
	outline: 3px solid var(--wp--preset--color--green-dark);
	outline-offset: 2px;
}

/* --- Print: the contact list stays usable on paper --- */
@media print {
	.kmw-hero,
	.wp-block-navigation { display: none; }
	.kmw-official__links a { background: none; color: #000; }
}