/*
Theme Name: Municipal Mutual
Theme URI: https://ledgermarketing.com/
Author: Ledger Marketing
Author URI: https://ledgermarketing.com/
Description: Custom block theme for Municipal Mutual Insurance Company of West Virginia. Warm, trustworthy, small-town — built around the company's crimson-and-charcoal arch brand. Since 1910.
Version: 1.0.5
Requires at least: 6.4
Tested up to: 6.9
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: municipalmutual
*/

/* ===== Block-gap strips: kill body-background slivers between sections ===== */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks main .alignfull { margin-block: 0; }
/* and INSIDE header/footer parts (topline + logo bar stacked groups) */
.mmi-header > *, .mmi-footer > * { margin-block: 0 !important; }

body { margin: 0; }

/* ===== Header ===== */
.mmi-topbar { font-size: 0.85rem; }
.mmi-topbar a { color: #F2EDE4 !important; text-decoration: none; }
.mmi-topbar a:hover { color: #fff !important; text-decoration: underline; }

.mmi-logo { display: block; line-height: 0; }
.mmi-logo img { max-height: 84px; width: auto; display: block; }

/* Desktop header nav links: ink on white header */
body .mmi-header nav.wp-block-navigation a {
	color: #2A2724 !important;
	text-decoration: none;
}
body .mmi-header nav.wp-block-navigation a:hover { color: #911923 !important; }
body .mmi-header nav.wp-block-navigation .current-menu-item > a { color: #911923 !important; }

/* Open mobile overlay: must out-specify the desktop rule above */
body .mmi-header .wp-block-navigation__responsive-container.is-menu-open {
	background: #2A2724 !important;
	padding: 96px 24px 24px !important;
}
body .mmi-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: #fff !important;
	font-size: 1.35rem;
	padding: 0.55em 0;
}
body .mmi-header .wp-block-navigation__responsive-container.is-menu-open a:hover { color: #E8B7BC !important; }
body .mmi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: center; }
/* each item is a flex column inheriting flex-end from items-justified-right */
body .mmi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: center;
}
body .mmi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
}
body .mmi-header .wp-block-navigation__responsive-container-close { color: #fff; }

/* Header pay button: crimson on the white bar (white text) */
.mmi-paybtn a {
	background: #911923 !important;
	color: #fff !important;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.mmi-paybtn a:hover { background: #6E121B !important; color: #fff !important; }

/* ===== Hero / dark bands: force ALL heading levels + text white ===== */
.mmi-hero :where(h1, h2, h3, h4, p, li) { color: #fff; }
.mmi-pageband :where(h1, h2, h3, h4, p) { color: #fff; }
.mmi-darkband :where(h1, h2, h3, h4, p, li) { color: #fff; }

/* eyebrow kicker */
.mmi-eyebrow {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 0.82rem !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #911923;
}
.mmi-hero .mmi-eyebrow, .mmi-pageband .mmi-eyebrow, .mmi-darkband .mmi-eyebrow { color: #E8B7BC; }

/* ===== Pay band: white button with crimson text (crimson-on-crimson is invisible) ===== */
.mmi-payband .mmi-pay-lg a {
	background: #fff !important;
	color: #911923 !important;
	font-size: 1.15rem;
	font-weight: 700;
	padding: 0.9em 2.2em;
	border-radius: 8px;
}
.mmi-payband .mmi-pay-lg a:hover { background: #F8F4EC !important; color: #6E121B !important; }
.mmi-payband :where(h2, h3, p) { color: #fff; }

/* ===== Card grids: real CSS grid, never wp-block-columns for many items ===== */
.mmi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.mmi-grid-wide {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 28px;
}
.mmi-card {
	background: #fff;
	border: 1px solid #E3DACB;
	border-radius: 10px;
	padding: 30px 28px;
	box-shadow: 0 1px 3px rgba(42, 39, 36, 0.06);
}
.mmi-card h3 { margin-top: 0; }
.mmi-card-rule {
	width: 44px; height: 4px; border-radius: 2px;
	background: #911923; margin: 0 0 14px;
}

/* equal-height cards inside wp:columns (no height:100% — overflow trap) */
.wp-block-column:has(> .mmi-card:only-child) { display: flex; }
.wp-block-column > .mmi-card:only-child { flex: 1 1 auto; height: auto; }

/* ===== Staff table ===== */
.mmi-staff table { border-collapse: collapse; width: 100%; }
.mmi-staff th {
	text-align: left; background: #2A2724; color: #fff;
	padding: 12px 16px; font-weight: 600; font-size: 0.92rem;
}
.mmi-staff td { padding: 11px 14px; border-bottom: 1px solid #E3DACB; font-size: 0.95rem; }
.mmi-staff tr:nth-child(even) td { background: #F8F4EC; }
.mmi-staff td a { color: #911923; text-decoration: none; }
.mmi-staff td a:hover { text-decoration: underline; }
.mmi-staff th, .mmi-staff td { white-space: nowrap; }
.mmi-staff { overflow-x: auto; }
.mmi-staff table { min-width: 560px; }

/* ===== Footer ===== */
.mmi-footer { font-size: 0.92rem; }
.mmi-footer a { color: #E8E2D6 !important; text-decoration: none; }
.mmi-footer a:hover { color: #fff !important; text-decoration: underline; }
.mmi-footer .mmi-footer-heading {
	color: #fff; font-family: "Playfair Display", Georgia, serif;
	font-size: 1.08rem; font-weight: 700; letter-spacing: 0.02em;
}
.mmi-footer-logo img { max-width: 300px; height: auto; }
.mmi-chip {
	background: #fff; border-radius: 8px; padding: 10px 14px;
	display: inline-block;
}
.mmi-chip img { display: block; max-height: 56px; width: auto; }
.mmi-chip-caption { font-size: 0.78rem; color: #B9B2A8 !important; letter-spacing: 0.06em; text-transform: uppercase; }
.mmi-credit { color: #B9B2A8 !important; font-size: 0.85rem; }
.mmi-credit a { color: #E8E2D6 !important; }

/* ===== Misc ===== */
.mmi-check li { margin-bottom: 0.5em; }
.mmi-hours td { padding: 6px 14px 6px 0; }
img { max-width: 100%; height: auto; }

/* Header responsive: shrink logo, keep pay button visible OUTSIDE hamburger */
@media (max-width: 781px) {
	.mmi-logo img { max-height: 58px; }
	.mmi-topbar .mmi-topbar-address { display: none; }
	.mmi-paybtn a { padding: 0.5em 0.9em !important; font-size: 0.88rem; }
}
@media (max-width: 480px) {
	.mmi-logo img { max-height: 48px; }
}