/**
 * Butterfields layout polish.
 *
 * Shared rules that keep the Elementor pages consistent. The layout itself
 * (one left edge, equal-width card rows, equal gallery tiles, list-row padding)
 * is stored in each page's Elementor data; this file only holds what the
 * Elementor controls cannot express cleanly:
 *
 *   1. One standard pill button (class `bf-btn`, added to every pill-shaped
 *      link container). Previously the pills were 175px to 450px wide with
 *      20px or 28px text.
 *   2. Small guards for text wrapping on narrow screens.
 *
 * Selectors start at `body .elementor` so they beat Elementor's per-element
 * rules (0,3,0) without relying on source order, and the Hello Elementor
 * reset (see site notes: single-class selectors lose to it).
 */

/* ---------------------------------------------------------------- 1. Buttons */

body .elementor .e-con.bf-btn {
	--width: fit-content;
	width: fit-content;
	max-width: 100%;
	min-width: 200px;
	min-height: 50px;
	padding: 10px 28px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	text-decoration: none;
}

/* Desktop: size to the label and don't shrink below it. `fit-content` alone let
   a pill in a crowded row squeeze narrower than its label, so the text spilled
   out of the border ("SEE ALL TYPES & PRICING"). If a column is genuinely too
   narrow the label wraps inside the pill instead of escaping it. */
@media (min-width: 1025px) {
	body .elementor .e-con.bf-btn,
	body .elementor .e-con.bf-btn-sm,
	body .elementor .e-con.bf-tag {
		--width: max-content;
		width: max-content;
		flex-shrink: 0;
	}
}

body .elementor .e-con.bf-btn .elementor-heading-title,
body .elementor .e-con.bf-btn .elementor-heading-title a {
	font-size: 16px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	white-space: normal; /* wraps only if its column is genuinely too narrow */
}

body .elementor .e-con.bf-btn .elementor-widget-icon {
	flex: 0 0 auto;
	width: auto;
}

body .elementor .e-con.bf-btn .elementor-icon {
	font-size: 22px;
	line-height: 1;
}

body .elementor .e-con.bf-btn .elementor-icon svg,
body .elementor .e-con.bf-btn .elementor-icon img {
	width: 22px;
	height: 22px;
}

/* Hover/focus must be restated: the Hello Elementor reset repaints links on
   hover (see site notes), so keep the text colour that the page set. */
body .elementor .e-con.bf-btn:hover .elementor-heading-title,
body .elementor .e-con.bf-btn:focus .elementor-heading-title {
	color: inherit;
}

/* Tablet and below: pills can share a row with other content, so let labels
   wrap and drop the minimum width rather than spilling out of the pill. */
@media (max-width: 1024px) {
	body .elementor .e-con.bf-btn,
	body .elementor .e-con.bf-btn-sm {
		min-width: 0;
	}

	body .elementor .e-con.bf-btn .elementor-heading-title,
	body .elementor .e-con.bf-btn-sm .elementor-heading-title,
	body .elementor .e-con.bf-tag .elementor-heading-title {
		white-space: normal;
	}
}

@media (max-width: 767px) {
	body .elementor .e-con.bf-btn {
		--width: 100%;
		width: 100%;
		min-width: 0;
		padding: 10px 20px;
	}

	body .elementor .e-con.bf-btn .elementor-heading-title {
		font-size: 15px;
		white-space: normal;
	}
}

/* Small outlined buttons at the foot of the homepage cards (READ GUIDANCE,
   CONTACT US, CALL NOW, LEARN MORE): same size and text, pinned to the bottom. */
body .elementor .e-con.bf-btn-sm {
	--width: fit-content;
	width: fit-content;
	max-width: 100%;
	min-width: 170px;
	min-height: 44px;
	padding: 8px 20px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	margin-top: auto;
}

body .elementor .e-con.bf-btn-sm .elementor-heading-title {
	font-size: 14px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	margin: 0;
	white-space: normal; /* wraps only if its column is genuinely too narrow */
}

/* Cards in an equal-height row: pin the trailing link/button container to the
   bottom so "READ MORE" sits on one line across the row. Containers only, so
   step cards (number, title, text) keep their text together at the top. */
body .elementor .e-con.bf-card > .e-con:last-child {
	margin-top: auto;
}

/* Photo cards (Types of funerals): the trailing container is the whole text block
   (title, description, READ MORE), not just a link. Pushing it to the bottom made
   a one-line title or short description sit lower than its neighbours. Keep the
   text block directly under the photo, let it fill the card, and pin the READ MORE
   link to the bottom of it instead. */
body .elementor .e-con.bf-card > .e-con:last-child:has(> .elementor-widget-heading) {
	margin-top: 0;
	flex: 1 1 auto;
}

body .elementor .e-con.bf-card > .e-con:last-child:has(> .elementor-widget-heading) > .e-con:last-child {
	margin-top: auto;
}

/* Two-line card titles ("Attended Direct Cremation") were set at 26px on a 26px
   line, so the lines touched. */
body .elementor .e-con.bf-card .elementor-widget-heading .elementor-heading-title {
	line-height: 1.3;
}

/* Side by side: reserve two title lines so the descriptions start level even when
   one title in the row wraps. */
@media (min-width: 768px) {
	body .elementor .e-con.bf-card > .e-con:last-child:has(> .elementor-widget-heading) > .elementor-widget-heading .elementor-heading-title {
		min-height: 2.6em;
	}
}

/* Non-link tags (Est. 1874 / Family-run / Memorial masons): same size, fit to content. */
body .elementor .e-con.bf-tag {
	--width: fit-content;
	width: fit-content;
	max-width: 100%;
	min-height: 40px;
	padding: 8px 20px;
	box-sizing: border-box;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

body .elementor .e-con.bf-tag .elementor-heading-title {
	font-size: 14px;
	line-height: 1.25;
	margin: 0;
	white-space: normal; /* wraps only if its column is genuinely too narrow */
}

/* Contact form submit: same type and size as the other buttons (it was falling
   back to a bold serif face). */
body .forminator-ui button.forminator-button-submit {
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.25;
	min-height: 50px;
	padding: 10px 32px;
}

/* Short lead-in quote beside the "Talk to us" box (Meet the team): set it a
   little larger so it fills the space beside the box instead of floating. */
body .elementor .bf-lede p {
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.5;
	margin: 0;
}

/* "Talk to us" box follows the reader down long pages instead of leaving a
   blank column under it. Desktop only; falls back to normal flow if an
   ancestor clips overflow. */
@media (min-width: 1025px) {
	body .elementor .e-con.bf-sidebar {
		position: sticky;
		/* The site header pins at the top as a 72px bar once scrolled (see
		   header.css, `.is-stuck`), so clear it plus a 24px breather. Logged-in
		   users also have WordPress's 32px admin bar above it. */
		top: calc(72px + 24px);
		align-self: flex-start;
	}

	body.admin-bar .elementor .e-con.bf-sidebar {
		top: calc(32px + 72px + 24px);
	}
}

/* Two-column lists of border-top rows ("What we can arrange"): the two columns
   are separate stacks in Elementor, so rows of different height drifted apart.
   Laid out as one grid instead, row N on the left meets row N on the right.
   `display: contents` lifts the column containers out of the way; on mobile the
   original single-column stack is kept. */
@media (min-width: 768px) {
	body .elementor .e-con.bf-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row dense;
		column-gap: 20px;
		row-gap: 0;
		align-items: stretch;
	}

	body .elementor .e-con.bf-list > .e-con {
		display: contents;
	}

	body .elementor .e-con.bf-list > .e-con:nth-child(1) > .e-con {
		grid-column: 1;
	}

	body .elementor .e-con.bf-list > .e-con:nth-child(2) > .e-con {
		grid-column: 2;
	}
}

/* --------------------------------------------------------- 2. Text wrapping */

/* Short link labels in the sidebar ("What to do") should not break mid-label. */
body .elementor .elementor-widget-text-editor a {
	overflow-wrap: normal;
}

/* ----------------------------------------------------------- 3. Plugin pages */

/* Obituaries archive: the plugin caps its content at 1180px (24px gutters),
   so the title, filters and notice cards started ~127px in from every other
   page. Match the site frame (the header's 1500px container with 20px
   gutters). Archive only: a single notice keeps its narrower reading width. */
body .bfo-archive .bfo-inner {
	max-width: 1500px;
	padding-inline: 20px;
}