/*
Theme Name: Roberts Mutual
Theme URI: https://robertsmutual.com
Author: Ledger Marketing
Author URI: https://ledgermarketing.com
Description: A warm, small-town block theme (FSE) for Roberts County Farm Mutual Insurance Company — member-owned in South Dakota since 1905. Bespoke brand: the company's RCMI royal blue as accent on a deep navy structure, Fraunces + Source Sans 3. Online bill-pay first.
Version: 1.0.5
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roberts-mutual
*/

/* ============================================================
   1. Block-gap strips — kill body-bg strips between sections
   ============================================================ */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks main .alignfull { margin-block: 0; }
.wp-site-blocks main > .alignfull + .alignfull { margin-block: 0; }
main :where(.alignfull) { margin-block: 0; }
/* Kill the block-gap between the stacked groups inside the header/footer parts
   (topline + main bar, footer + footbar) so the logo sits with equal space
   above and below rather than being pushed down by a phantom gap. */
.wm-header > *, .wm-footer > * { margin-block: 0 !important; }

/* ============================================================
   2. Global type niceties
   ============================================================ */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
:where(.wm-eyebrow) {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--wp--preset--color--blue-deep);
	margin: 0 0 0.4rem;
}
.wm-hero .wm-eyebrow,
[class*="has-ink-background"] .wm-eyebrow,
.wm-payband .wm-eyebrow { color: var(--wp--preset--color--blue-soft); }

/* ============================================================
   3. Header bar
   ============================================================ */
.wm-header {
	position: sticky; top: 0; z-index: 100;
	background: #fff;
	border-bottom: 3px solid var(--wp--preset--color--blue);
	box-shadow: 0 2px 10px rgba(29,32,73,.07);
}
.wm-topline {
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
	font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em;
}
.wm-topline a { color: var(--wp--preset--color--blue-soft); text-decoration: none; }
.wm-topline a:hover { color: #fff; }

/* RCMI logo (real brand mark — full colour on the white header, knockout in the footer) */
.wm-logo { display: inline-flex; text-decoration: none; }
.wm-logo img { height: 58px; width: auto; display: block; }
.wm-foot-logo img { height: 66px; width: auto; display: block; }

/* Wordmark fallback (unused once logo image is in place) */
.wm-wordmark { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; gap: 3px; }
.wm-wordmark .wm-wm-main {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 1.72rem; color: #fff; letter-spacing: -0.012em;
}
.wm-wordmark .wm-wm-main em { color: var(--wp--preset--color--blue); font-style: normal; }
.wm-wordmark .wm-wm-sub {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700; font-size: 0.63rem; letter-spacing: 0.34em;
	text-transform: uppercase; color: var(--wp--preset--color--blue-soft);
	padding-left: 2px;
}

/* Primary nav — navy on the white header */
.wm-header .wp-block-navigation { font-family: var(--wp--preset--font-family--sans); font-weight: 600; }
body .wm-header nav.wp-block-navigation a,
body .wm-header .wp-block-navigation__container a { color: var(--wp--preset--color--ink) !important; text-decoration: none; }
body .wm-header nav.wp-block-navigation a:hover { color: var(--wp--preset--color--blue) !important; }
.wm-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--ink); }

/* Header pay button — brand blue so it pops on white; always visible, even on mobile */
.wm-paybtn a {
	background: var(--wp--preset--color--blue) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800; text-decoration: none; border-radius: 7px;
	padding: 0.6rem 1.15rem; display: inline-flex; align-items: center; gap: 0.4rem;
	line-height: 1; white-space: nowrap; letter-spacing: 0.01em;
	box-shadow: 0 2px 6px rgba(46,49,146,.28);
}
.wm-paybtn a:hover { background: var(--wp--preset--color--blue-deep) !important; color: #fff !important; }

/* ============================================================
   4. Hero / covers — force readable text on dark imagery
   ============================================================ */
.wm-hero :where(h1, h2, h3, h4, p, li, .wm-eyebrow) { color: #fff; }
.wm-hero { position: relative; }
.wm-hero .wp-block-cover__inner-container { max-width: 44rem; }
.wm-lede { font-size: 1.2rem; line-height: 1.65; }

/* Buttons sitting on a colored/dark band: white bg, ink/brand text */
.wm-hero .wp-block-button__link,
.wm-payband .wm-pay-lg a,
.wm-oncolor .wp-block-button__link {
	background: #fff !important; color: var(--wp--preset--color--ink) !important;
}
.wm-hero .wp-block-button__link:hover,
.wm-payband .wm-pay-lg a:hover,
.wm-oncolor .wp-block-button__link:hover {
	background: var(--wp--preset--color--blue) !important; color: #fff !important;
}
/* secondary/outline button variant on dark */
.wm-hero .is-style-outline .wp-block-button__link {
	background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.wm-hero .is-style-outline .wp-block-button__link:hover {
	background: rgba(255,255,255,.12) !important; color:#fff !important;
}

/* ============================================================
   5. Pay band (the one focal blue surface)
   ============================================================ */
.wm-payband { background: var(--wp--preset--color--blue); }
.wm-payband :where(h1,h2,h3,p,li) { color: #fff; }
.wm-payband .wm-pay-lg a {
	font-size: 1.12rem; font-weight: 800; padding: 1rem 2rem; border-radius: 8px;
	box-shadow: 0 4px 14px rgba(35,32,26,.28);
}

/* ============================================================
   6. Sections, eyebrows, dividers
   ============================================================ */
.wm-band-ink { background: var(--wp--preset--color--ink); }
.wm-band-ink :where(h1,h2,h3,h4,p,li) { color: #fff; }
.wm-band-sand { background: var(--wp--preset--color--sand); }
.wm-rule { width: 54px; height: 3px; background: var(--wp--preset--color--blue); border: 0; margin: 0.2rem 0 1rem; }
.wm-rule.is-center { margin-inline: auto; }

/* Section heading kicker centered */
.wm-center { text-align: center; }
.wm-center .wm-rule { margin-inline: auto; }

/* ============================================================
   7. Cards / grids — size to content, no stretched empties
   ============================================================ */
.wm-cards { align-items: start; }
.wm-card {
	background: #fff; border: 1px solid var(--wp--preset--color--cream);
	border-radius: 12px; overflow: hidden; height: auto;
	box-shadow: 0 1px 2px rgba(35,32,26,.05);
	transition: box-shadow .18s ease, transform .18s ease;
}
.wm-card:hover { box-shadow: 0 10px 26px rgba(35,32,26,.12); transform: translateY(-3px); }
.wm-card .wp-block-image img { width: 100%; height: 200px; object-fit: cover; display: block; }
.wm-card-body { padding: 1.35rem 1.4rem 1.5rem; }
.wm-card-body h3 { margin: 0 0 0.4rem; font-size: 1.28rem; }
.wm-card-body p { margin: 0; color: var(--wp--preset--color--muted); }
.wm-card-icon {
	width: 44px; height: 44px; border-radius: 9px; margin-bottom: 0.75rem;
	background: var(--wp--preset--color--sand); color: var(--wp--preset--color--blue-deep);
	display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}

/* Feature check list */
.wm-checks { list-style: none; margin: 0; padding: 0; }
.wm-checks li { position: relative; padding-left: 1.9rem; margin-bottom: 0.7rem; }
.wm-checks li::before {
	content: ""; position: absolute; left: 0; top: 0.28em; width: 1.15rem; height: 1.15rem;
	background: var(--wp--preset--color--blue); border-radius: 50%;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/78% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/78% no-repeat;
}

/* Stat row */
.wm-stat .wm-stat-num { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 2.9rem; color: var(--wp--preset--color--blue); line-height: 1; }
.wm-band-ink .wm-stat .wm-stat-num { color: var(--wp--preset--color--blue-soft); }
.wm-stat .wm-stat-label { font-size: 0.95rem; color: var(--wp--preset--color--muted); font-weight: 600; letter-spacing: .02em; }
.wm-band-ink .wm-stat .wm-stat-label { color: var(--wp--preset--color--cream); }

/* ============================================================
   8. Page header band
   ============================================================ */
.wm-pagehead { background: var(--wp--preset--color--ink); }
.wm-pagehead :where(h1,p,.wm-eyebrow) { color: #fff; }
.wm-pagehead .wm-eyebrow { color: var(--wp--preset--color--blue-soft); }
.wm-pagehead p { color: var(--wp--preset--color--cream); }

/* ============================================================
   9. Agent grid + product grid (real CSS grid — NOT wp-block-columns,
      which core forces to flex-wrap:nowrap!important above 782px)
   ============================================================ */
.wm-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; align-items: start; }
.wm-prodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; align-items: start; }
@media (max-width: 600px) { .wm-agents, .wm-prodgrid { grid-template-columns: 1fr; } }
.wm-agent {
	background: #fff; border: 1px solid var(--wp--preset--color--cream); border-radius: 11px;
	padding: 1.15rem 1.25rem 1.25rem; height: auto;
}
.wm-agent h3 { font-size: 1.12rem; margin: 0 0 0.15rem; }
.wm-agent .wm-agent-town { color: var(--wp--preset--color--blue-deep); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.6rem; }
.wm-agent p { margin: 0.15rem 0; font-size: 0.98rem; color: var(--wp--preset--color--muted); }
.wm-agent a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wm-agent a:hover { color: var(--wp--preset--color--blue-deep); text-decoration: underline; }

/* ============================================================
   10. Contact / info blocks
   ============================================================ */
.wm-info { background:#fff; border:1px solid var(--wp--preset--color--cream); border-radius:12px; padding:1.6rem 1.7rem; }
.wm-info h3 { margin-top:0; }

/* ============================================================
   11. Footer
   ============================================================ */
.wm-footer { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); }
.wm-footer :where(h1,h2,h3,h4) { color:#fff; }
.wm-footer a { color: var(--wp--preset--color--cream); text-decoration: none; }
.wm-footer a:hover { color: var(--wp--preset--color--blue-soft); text-decoration: underline; }
.wm-footer .wm-eyebrow { color: var(--wp--preset--color--blue-soft); }
.wm-foot-wordmark .wm-wm-main { font-family: var(--wp--preset--font-family--display); font-weight:800; font-size:1.5rem; color:#fff; }
.wm-foot-wordmark .wm-wm-main em { color: var(--wp--preset--color--blue); font-style:normal; }
.wm-foot-wordmark .wm-wm-sub { font-family: var(--wp--preset--font-family--sans); font-weight:700; font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color: var(--wp--preset--color--blue-soft); }
.wm-reinsurer-chip {
	background:#fff; border-radius:9px; padding:0.75rem 1rem; display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
}
.wm-reinsurer-chip .wm-chip-cap { font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--wp--preset--color--muted); font-weight:700; }
.wm-reinsurer-chip .wm-chip-name { font-family: var(--wp--preset--font-family--display); font-weight:700; color: var(--wp--preset--color--ink); font-size:1.05rem; }
.wm-footbar { background:#1B1813; }
.wm-footbar, .wm-footbar a, .wm-footbar p { color:#9C9284; font-size:0.85rem; }
.wm-footbar a { color: var(--wp--preset--color--blue-soft); text-decoration:none; }
.wm-footbar a:hover { text-decoration:underline; }

/* ============================================================
   12. Split hero layout helper
   ============================================================ */
.wm-splithero { align-items: stretch; }
.wm-splithero .wm-splithero-media img { width:100%; height:100%; min-height:340px; object-fit:cover; }

/* ============================================================
   13. Mobile
   ============================================================ */
@media (max-width: 781px) {
	.wm-logo img { height: 46px; }
	.wm-paybtn a { padding: 0.55rem 0.85rem; font-size: 0.9rem; }
	.wm-card .wp-block-image img { height: 190px; }
	.wm-splithero .wm-splithero-media img { min-height: 240px; }

	/* Mobile nav overlay — beat core specificity with body prefix */
	body .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--ink) !important;
		padding: 5rem 1.5rem 2.5rem !important;
	}
	body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
	}
	body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: center !important;
		border-bottom: 1px solid rgba(255,255,255,0.10);
		width: 100%;
	}
	body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0 !important; width: 100%;
	}
	/* .wm-header scope beats the desktop navy nav rule so open-overlay links stay white */
	body .wm-header .wp-block-navigation__responsive-container.is-menu-open a { color:#fff !important; font-size:1.25rem; padding:0.75rem 0; }
	body .wm-header .wp-block-navigation__responsive-container.is-menu-open .wm-menu-pay a {
		background: var(--wp--preset--color--blue) !important; color:#fff !important;
		border-radius:8px; margin-top:1rem; font-weight:800;
	}
	body .wp-block-navigation__responsive-container-open { color:#fff; }
}