/*
Theme Name: Walcott Mutual
Theme URI: https://walcottmutual.com
Author: Walcott Mutual Insurance Association
Author URI: https://walcottmutual.com
Description: A bespoke WordPress block theme (FSE) for Walcott Mutual Insurance Association of Walcott, Iowa — Iowa's oldest county mutual, established 1856. Brand palette drawn from the company logo (Walcott red on warm neutrals), with online bill-pay as the primary feature. Self-building on activation.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: walcottmutual
Tags: block-theme, full-site-editing, insurance, one-column, custom-colors, custom-logo, block-styles, editor-style
*/

/* =========================================================================
   Walcott Mutual — component CSS
   theme.json holds the design tokens; this file styles bespoke lockups
   that blocks can't express alone. All colors reference theme.json presets.
   ========================================================================= */

:root {
	--wm-shadow: 0 12px 34px rgba(45, 28, 28, 0.14);
	--wm-shadow-sm: 0 4px 14px rgba(45, 28, 28, 0.10);
	--wm-ring: rgba(90, 62, 60, 0.14);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* No block-gap between header / main / footer (removes the cream strip
   under the sticky-less header before the hero). */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.wp-site-blocks > main > :first-child { margin-top: 0; }

/* Full-width sections sit flush against each other (no cream block-gap
   strips between colored bands). */
.wp-site-blocks main .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- Skip link ---- */
.skip-link:focus {
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 0.6rem 1rem;
	z-index: 100000;
}

/* ---------- Header + brand lockup ---------- */
.wp-block-template-part.wm-header,
.wm-header {
	position: relative;
	z-index: 20;
}

.wm-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	line-height: 1;
}
.wm-brand:hover { text-decoration: none; }

/* Real company logo (from the existing website) */
.wm-logo img { display: block; height: 52px; width: auto; }
.wm-logo-footer img { height: 48px; }

.wm-monogram {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 9px;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.wm-wordmark {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wm-wordmark .wm-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.28rem;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
}
.wm-wordmark .wm-sub {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--action);
}

/* Header nav links */
.wm-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
}
.wm-header .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wm-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* Pay button in the header */
.wm-pay-btn a,
a.wm-pay-btn,
.wm-pay-btn .wp-block-button__link {
	background: var(--wp--preset--color--action) !important;
	color: #fff !important;
	border-radius: 8px;
	padding: 0.6rem 1.15rem !important;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: var(--wm-shadow-sm);
	transition: background 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}
.wm-pay-btn a:hover,
a.wm-pay-btn:hover,
.wm-pay-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--action-dark) !important;
	transform: translateY(-1px);
}

/* Top utility bar */
.wm-topbar { font-family: var(--wp--preset--font-family--body); }
.wm-topbar, .wm-topbar p { color: #f6e7e6; }
.wm-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.wm-topbar a:hover { color: var(--wp--preset--color--accent-soft); }

/* ---------- Hero ---------- */
.wm-hero {
	position: relative;
	overflow: hidden;
}
.wm-hero .wm-hero-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 42%;
}
.wm-hero .wm-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--hero-overlay);
}
.wm-hero .wm-hero-inner {
	position: relative;
	z-index: 2;
}
.wm-hero :where(h1, h2, h3, h4, p, li),
.wm-hero .wm-eyebrow {
	color: #fff;
}
.wm-hero :where(h1, h2) { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.28); }

.wm-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.78rem;
	color: var(--wp--preset--color--action);
}
.wm-hero .wm-eyebrow { color: var(--wp--preset--color--accent-soft); }

/* Est. badge */
.wm-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.35);
	color: #fff;
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- Section rhythm ---------- */
.wm-section { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* ---------- Responsive card grids ---------- */
.wm-grid { display: grid; gap: 1.5rem; }
.wm-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wm-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 981px) { .wm-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .wm-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.wm-grid-2, .wm-grid-3, .wm-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Coverage cards ---------- */
.wm-card {
	background: var(--wp--preset--color--white);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--wm-shadow-sm);
	border: 1px solid rgba(90, 62, 60, 0.08);
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wm-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wm-shadow);
}
.wm-card .wm-card-media {
	aspect-ratio: 19 / 14;
	background-size: cover;
	background-position: center;
}
.wm-card .wm-card-body {
	padding: 1.4rem 1.5rem 1.7rem;
}
.wm-card .wm-card-body h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1.32rem;
}
.wm-card .wm-card-body p { margin: 0; color: var(--wp--preset--color--muted); }

/* Feature "chip" list */
.wm-feature {
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	padding: 1.5rem 1.6rem;
	border: 1px solid rgba(90, 62, 60, 0.08);
	box-shadow: var(--wm-shadow-sm);
	height: 100%;
}
.wm-feature .wm-icon {
	width: 44px; height: 44px;
	border-radius: 10px;
	display: grid; place-items: center;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.9rem;
}
.wm-feature .wm-icon svg { width: 24px; height: 24px; }

/* ---------- Pay CTA band ---------- */
.wm-payband {
	background: var(--wp--preset--color--accent);
	border-radius: 18px;
	color: #fff;
	overflow: hidden;
}
.wm-payband :where(h2, h3, p) { color: #fff; }
.wm-payband .wm-eyebrow { color: var(--wp--preset--color--accent-soft); }

/* On the red pay band, the button must contrast: white fill, red text */
.wm-payband .wm-pay-lg a,
.wm-payband a.wm-pay-lg {
	background: #ffffff !important;
	color: var(--wp--preset--color--action-dark) !important;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20);
}
.wm-payband .wm-pay-lg a:hover,
.wm-payband a.wm-pay-lg:hover {
	background: #f7f4f1 !important;
	color: var(--wp--preset--color--action-dark) !important;
}

/* Big pay button variant */
.wm-pay-lg a,
a.wm-pay-lg {
	display: inline-block;
	background: var(--wp--preset--color--action);
	color: #fff !important;
	font-weight: 700;
	font-size: 1.08rem;
	padding: 1rem 2rem;
	border-radius: 10px;
	text-decoration: none !important;
	box-shadow: 0 10px 26px rgba(194, 32, 49, 0.38);
	transition: background 0.15s ease, transform 0.15s ease;
}
.wm-pay-lg a:hover,
a.wm-pay-lg:hover {
	background: var(--wp--preset--color--action-dark);
	transform: translateY(-2px);
}

/* Ghost / secondary button (for dark backgrounds) */
.wm-btn-ghost a,
.wm-btn-ghost .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.75) !important;
	box-shadow: none !important;
}
.wm-btn-ghost a:hover,
.wm-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14) !important;
	border-color: #fff !important;
}

/* Outline button on light backgrounds */
.wm-btn-line a,
.wm-btn-line .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
	box-shadow: none !important;
}
.wm-btn-line a:hover,
.wm-btn-line .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}

/* ---------- Photo band ---------- */
.wm-band-photo {
	background-size: cover;
	background-position: center;
	border-radius: 16px;
	min-height: 320px;
}

/* ---------- Agent cards ---------- */
/* Agent cards size to their content (no stretched empty bottoms) */
.wm-agents { align-items: start; }

.wm-agent {
	background: var(--wp--preset--color--white);
	border-radius: 14px;
	padding: 1.6rem 1.6rem 1.7rem;
	border: 1px solid rgba(90, 62, 60, 0.08);
	border-top: 4px solid var(--wp--preset--color--accent);
	box-shadow: var(--wm-shadow-sm);
}
.wm-agent h3 { font-size: 1.25rem; margin: 0 0 0.15rem; }
.wm-agent .wm-agent-town {
	color: var(--wp--preset--color--action);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.9rem;
}
.wm-agent .wm-agent-people { color: var(--wp--preset--color--muted); margin: 0 0 0.9rem; }
.wm-agent a.wm-agent-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: 1.05rem;
}
.wm-agent a.wm-agent-phone:hover { color: var(--wp--preset--color--action); }

/* ---------- Contact info rows ---------- */
.wm-info { list-style: none; margin: 0; padding: 0; }
.wm-info li {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(90, 62, 60, 0.10);
}
.wm-info li:last-child { border-bottom: 0; }
.wm-info .wm-info-ico {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	border-radius: 9px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	display: grid; place-items: center;
}
.wm-info .wm-info-ico svg { width: 20px; height: 20px; }
.wm-info strong { display: block; font-family: var(--wp--preset--font-family--body); }
.wm-info a { color: var(--wp--preset--color--accent); }

/* ---------- Service-area map (SVG) ---------- */
.wm-map { width: 100%; height: auto; }

/* ---------- Footer ---------- */
.wm-footer {
	background: var(--wp--preset--color--primary);
	color: #f3e5e4;
}
.wm-footer :where(h2, h3, h4) { color: #fff; }
.wm-footer a { color: #f3e5e4; text-decoration: none; }
.wm-footer a:hover { color: #ffffff; text-decoration: underline; }
.wm-footer .wm-monogram { background: rgba(255,255,255,0.10); }
.wm-footer .wm-pay-btn { display: inline-block; margin-top: 1rem; }
.wm-footer .wm-wordmark .wm-name { color: #fff; }
.wm-footer hr.wp-block-separator {
	border-color: rgba(255,255,255,0.16);
	opacity: 1;
}
.wm-footer-legal { color: rgba(243,229,228,0.65); font-size: 0.85rem; }

/* Grinnell Mutual reinsurer lockup in the footer */
.wm-reinsured-wrap { margin-top: 1.6rem; }
.wm-reinsured {
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
	margin: 0 0 0.55rem;
	color: rgba(243, 229, 228, 0.7);
}
.wm-grinnell {
	display: inline-block;
	background: #fff;
	padding: 9px 15px;
	border-radius: 8px;
	line-height: 0;
	box-shadow: var(--wm-shadow-sm);
}
.wm-grinnell img { display: block; height: 30px; width: auto; }

/* ---------- Eyebrow default color on light sections ---------- */
.wm-section .wm-eyebrow,
.has-base-background-color .wm-eyebrow,
.has-surface-background-color .wm-eyebrow { color: var(--wp--preset--color--action); }

/* =========================================================================
   Mobile navigation overlay — core nav CSS loads after the theme and wins
   specificity ties, so these need !important (playbook gotcha).
   ========================================================================= */
@media (max-width: 781px) {
	.wm-brand .wm-wordmark .wm-name { font-size: 1.12rem; }
	.wm-monogram { width: 42px; height: 42px; }
	.wm-logo img { height: 38px; }

	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--primary) !important;
		padding: 3.5rem 1.5rem 2.5rem !important;
	}
	body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		text-align: center !important;
		gap: 0.6rem !important;
		width: 100% !important;
	}
	body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100% !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		color: #fff !important;
		font-size: 1.3rem !important;
		font-family: var(--wp--preset--font-family--display) !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wm-pay-btn a {
		background: var(--wp--preset--color--action) !important;
		color: #fff !important;
		margin-top: 0.6rem;
		font-size: 1.05rem !important;
	}
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: currentColor;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		color: #fff !important;
	}
}