/* M4 Knick – Find a Rep
 * override on the page (Elementor > Page settings > Custom CSS) if needed, e.g.
 * :root { --m4fr-sticky-top: 90px; }   when the site header is sticky.
 */
:root {
	--m4fr-accent: #E7131D;
	--m4fr-accent-dark: #B70E16;
	--m4fr-ink: #1A1A1A;
	--m4fr-body: #4A4744;
	--m4fr-muted: #5C5853;
	--m4fr-subtle: #6E6A65;
	--m4fr-icon: #8A857F;
	--m4fr-sand: #F4F2EF;
	--m4fr-line: #E0DCD6;
	--m4fr-line-soft: #E8E5E0;
	--m4fr-line-open: #D9D5CE;
	--m4fr-sticky-top: 0px;      /* height of a sticky site header, if any */
	--m4fr-side-offset: 101px;   /* pushes the right column down to line up with the first state row */
}

.m4fr-sr {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.m4fr-directory a, .m4fr-intl a { color: var(--m4fr-ink); }
.m4fr-directory a:hover, .m4fr-intl a:hover { color: var(--m4fr-accent-dark); }

/* ---- Sticky heading + search ------------------------------------------ */
.m4fr-head {
	position: sticky; top: var(--m4fr-sticky-top); z-index: 2;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px;
	padding: 20px 0; margin-bottom: 16px;
	background: #FFFFFF; border-bottom: 1px solid var(--m4fr-line-soft);
}
.m4fr-head__title {
	margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; color: var(--m4fr-ink);
}
.m4fr-search { position: relative; flex: 1 1 100%; }
.m4fr-search__icon { position: absolute; left: 14px; top: 14px; color: var(--m4fr-muted); pointer-events: none; }
.m4fr-search .m4fr-search__input {
	width: 100%; height: 44px; box-sizing: border-box; margin: 0;
	padding: 0 14px 0 40px; border: 1px solid var(--m4fr-ink); border-radius: 0;
	background: #FFFFFF; color: var(--m4fr-ink); font: inherit; font-size: 15px;
}
.m4fr-search__input:focus { outline: 2px solid var(--m4fr-ink); outline-offset: 1px; }
@media (min-width: 1025px) {
	.m4fr-search { flex: 1 1 240px; max-width: 380px; }
}

/* ---- State rows (accordion) ------------------------------------------- */
.m4fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m4fr-list > .m4fr-state { margin: 0; padding: 0; }
.m4fr-state[hidden] { display: none; }
.m4fr-state__details {
	border: 1px solid var(--m4fr-line); background: #FFFFFF;
	transition: background-color .15s ease, border-color .15s ease;
}
.m4fr-state__details:hover,
.m4fr-state__details[open] { background: var(--m4fr-sand); border-color: var(--m4fr-line-open); }

.m4fr-state__summary {
	display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box;
	padding: 16px 18px; cursor: pointer; list-style: none; color: var(--m4fr-ink);
}
.m4fr-state__summary::-webkit-details-marker { display: none; }
.m4fr-state__summary::marker { content: ""; }
.m4fr-state__summary:focus-visible { outline: 2px solid var(--m4fr-ink); outline-offset: -2px; }
.m4fr-state__code { flex: 0 0 34px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--m4fr-icon); }
.m4fr-state__code.is-direct { color: var(--m4fr-accent); }
.m4fr-state__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m4fr-state__name { font-size: 15px; font-weight: 600; }
.m4fr-state__reps { font-size: 13px; color: var(--m4fr-muted); }
.m4fr-state__chevron { flex: 0 0 auto; transition: transform .15s ease; }
.m4fr-state__details[open] .m4fr-state__chevron { transform: rotate(180deg); }

/* Rep cards inside an open row sit side by side and share a height */
.m4fr-state__panel {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px; align-items: stretch; padding: 0 14px 14px;
}

/* ---- Rep card ---------------------------------------------------------- */
.m4fr-card {
	display: flex; gap: 14px; align-items: flex-start;
	background: #FFFFFF; border: 1px solid var(--m4fr-line); padding: 16px;
}
.m4fr-logo {
	flex: 0 0 auto; width: 64px !important; height: 44px !important; max-width: none;
	box-sizing: border-box; padding: 4px 6px; object-fit: contain;
	border: 1px solid var(--m4fr-line-soft); background: #FFFFFF;
}
.m4fr-logo--initials {
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
	background: var(--m4fr-sand); color: var(--m4fr-ink);
	font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
}
.m4fr-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m4fr-card__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--m4fr-muted); }
.m4fr-card__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--m4fr-ink); }
.m4fr-card__name--lg { font-size: 16px; line-height: 1.3; }
.m4fr-card__counties { margin: 0; font-size: 12px; line-height: 1.5; color: var(--m4fr-muted); }

.m4fr-contact {
	list-style: none; margin: 4px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5;
}
.m4fr-contact li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.m4fr-contact .m4fr-icon { flex: 0 0 auto; margin-top: 3px; color: var(--m4fr-icon); }
.m4fr-contact__addr span { color: var(--m4fr-subtle); }
.m4fr-contact__addr strong { font-weight: 600; color: var(--m4fr-body); }
.m4fr-break { overflow-wrap: anywhere; }

.m4fr-empty {
	margin: 8px 0 0; padding: 24px; background: var(--m4fr-sand);
	font-size: 15px; color: var(--m4fr-body);
}
.m4fr-empty a { font-weight: 600; }

/* ---- International cards ---------------------------------------------- */
.m4fr-intl {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px 16px; align-items: start;
}
.m4fr-intl__card {
	display: flex; flex-direction: column; gap: 18px;
	background: #FFFFFF; border: 1px solid var(--m4fr-line); padding: 24px;
}
.m4fr-intl__head {
	display: flex; align-items: center; gap: 12px;
	padding-bottom: 16px; border-bottom: 1px solid var(--m4fr-line-soft);
}
.m4fr-intl__shape { flex: 0 0 auto; width: 40px !important; height: 32px !important; object-fit: contain; }
.m4fr-intl__country { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--m4fr-ink); }
.m4fr-intl__rep { display: flex; align-items: center; gap: 14px; }
.m4fr-intl__rep .m4fr-card__body { gap: 2px; }
.m4fr-intl .m4fr-contact { margin: 0; }

/* ---- Page layout hooks (CSS classes set on Elementor containers) -------
 *  .m4fr-layout       the row holding the list and the right column
 *  .m4fr-side         the right (1/3) column
 *  .m4fr-callout      "Outside the U.S.?" card   (inside .m4fr-side)
 *  .m4fr-help         "Not sure who covers you?" card (inside .m4fr-side)
 *  .m4fr-main         the left (2/3) column holding the shortcode
 */
@media (min-width: 1025px) {
	.m4fr-side {
		position: sticky;
		top: calc(var(--m4fr-sticky-top) + var(--m4fr-side-offset));
		margin-top: var(--m4fr-side-offset) !important;
		align-self: flex-start;
	}
}
/* Tablet + mobile: callout above the list, help card below it */
@media (max-width: 1024px) {
	.m4fr-side { display: contents !important; }
	.m4fr-callout { order: -1; }
	.m4fr-main { order: 0; }
	.m4fr-help { order: 1; }
}
.m4fr-callout { border-left: 4px solid var(--m4fr-accent); }