/**
 * Funeral Grants Directory
 *
 * Built to match funeralexperts.com: pill buttons, rounded cards with an amber
 * hairline, alternating white and grey rows, orange for interface and links,
 * green reserved for the primary action.
 *
 * Font family is never set. The theme's typeface carries through.
 *
 * The audience is often distressed, often on a phone, often older. That drives
 * the large tap targets, high contrast, generous line-height, no hover-only
 * controls, and no motion.
 */

.fg-finder,
.fg-single {
	/* Sampled from the live site. A theme.json preset overrides them if set. */
	--fg-orange: var(--wp--preset--color--primary, #fc9401);
	--fg-orange-ink: #000;
	--fg-green: var(--wp--preset--color--secondary, #0a7c03);
	--fg-ink: var(--wp--preset--color--foreground, #000);
	--fg-muted: #55605a;
	--fg-hairline: #ffa500;
	--fg-grey: #f1f1f1;
	--fg-grey-line: #d8d8d8;

	--fg-radius-card: 18px;
	--fg-radius-pill: 999px;

	color: var(--fg-ink);
}

.fg-finder *:focus-visible,
.fg-single *:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* ---------- search and filters ---------- */

.fg-controls {
	margin: 0 0 2rem;
	padding: 1.5rem 1.6rem;
	background: var(--fg-grey);
	border-radius: var(--fg-radius-card);
}

.fg-search {
	margin: 0 0 1.5rem;
}

.fg-search-label,
.fg-filter-group legend {
	display: block;
	margin: 0 0 0.6rem;
	padding: 0;
	font-weight: 700;
	font-size: 1rem;
}

.fg-search input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.95em 1.4em;
	font: inherit;
	font-size: 1.05em;
	color: inherit;
	background: #fff;
	border: 1px solid var(--fg-grey-line);
	border-radius: var(--fg-radius-pill);
	-webkit-appearance: none;
	appearance: none;
}

.fg-search input[type="search"]:focus {
	border-color: var(--fg-orange);
}

.fg-filter-group {
	margin: 0 0 1.35rem;
	padding: 0;
	border: 0;
}

.fg-filter-group:last-of-type {
	margin-bottom: 0;
}

/* The real checkbox stays in the accessibility tree, visually hidden. */
.fg-pill-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.fg-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.fg-pill {
	display: inline-block;
	padding: 0.55em 1.15em;
	font-size: 0.95em;
	line-height: 1.35;
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--fg-grey-line);
	border-radius: var(--fg-radius-pill);
}

.fg-pill-input:checked + .fg-pill {
	color: var(--fg-orange-ink);
	font-weight: 600;
	background: var(--fg-orange);
	border-color: var(--fg-orange);
}

.fg-pill-input:focus-visible + .fg-pill {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.fg-status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fg-grey-line);
	font-size: 0.98em;
}

.fg-status [data-fg-count] {
	font-weight: 700;
}

.fg-clear {
	padding: 0;
	font: inherit;
	color: var(--fg-ink);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

/* ---------- results ---------- */

.fg-results {
	margin: 0;
	padding: 0;
}

.fg-card {
	margin: 0 0 1.1rem;
	padding: 1.5rem 1.6rem;
	background: #fff;
	border: 1px solid var(--fg-hairline);
	border-radius: var(--fg-radius-card);
}

/* Alternating fill, as on the funeral director results. */
.fg-card:nth-child(even) {
	background: var(--fg-grey);
	border-color: var(--fg-grey-line);
}

.fg-card[hidden] {
	display: none;
}

.fg-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.35rem 1.5rem;
}

.fg-card-title {
	margin: 0;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
}

.fg-card-title a {
	color: inherit;
	text-decoration: none;
}

.fg-card-title a:hover,
.fg-card-title a:focus {
	text-decoration: underline;
}

/* "From £3,246" — the figure people scan for, set apart like the price on the
   funeral director cards. */
.fg-amount {
	margin: 0;
	flex: 0 1 auto;
	max-width: 15rem;
	text-align: right;
	line-height: 1.35;
}

.fg-amount-label {
	display: block;
	font-size: 0.78em;
	font-weight: 700;
	color: var(--fg-muted);
}

.fg-amount-value {
	font-size: 0.98em;
	font-weight: 700;
}

.fg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0;
	margin: 0.6rem 0 0;
	padding: 0;
	font-size: 0.95em;
}

.fg-meta > * {
	position: relative;
	padding-left: 1.5rem;
}

.fg-meta > *::before {
	content: "\2022";
	position: absolute;
	left: 0.6rem;
	color: var(--fg-muted);
}

.fg-meta > *:first-child {
	padding-left: 0;
}

.fg-meta > *:first-child::before {
	content: none;
}

.fg-meta-provider {
	font-weight: 700;
}

.fg-means {
	display: inline-block;
	padding: 0.15em 0.7em;
	font-size: 0.85em;
	font-weight: 600;
	background: #fff3dd;
	border: 1px solid var(--fg-hairline);
	border-radius: var(--fg-radius-pill);
}

.fg-card:nth-child(even) .fg-means {
	background: #fff;
}

.fg-summary {
	margin: 0.8rem 0 0;
	max-width: 68ch;
	line-height: 1.6;
}

.fg-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin: 1.1rem 0 0;
}

.fg-card-link {
	display: inline-block;
	padding: 0.6em 1.4em;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--fg-orange-ink);
	text-decoration: none;
	background: var(--fg-orange);
	border: 1px solid var(--fg-orange);
	border-radius: var(--fg-radius-pill);
}

.fg-card-link:hover,
.fg-card-link:focus {
	color: var(--fg-orange-ink);
	background: #e88600;
	border-color: #e88600;
}

.fg-checked {
	font-size: 0.9em;
	color: var(--fg-muted);
}

.fg-noresults,
.fg-empty {
	padding: 1.5rem 1.6rem;
	background: #fff;
	border: 1px solid var(--fg-hairline);
	border-radius: var(--fg-radius-card);
}

.fg-note {
	/* Full width, so it sits square under the cards rather than stopping
	   short and looking stranded on the left. */
	width: 100%;
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	font-size: 0.95em;
	line-height: 1.6;
	color: var(--fg-muted);
	border-top: 1px solid var(--fg-grey-line);
}

.fg-noresults a,
.fg-note a,
.fg-single a:not(.fg-button):not(.fg-card-link) {
	color: var(--fg-orange);
	font-weight: 600;
}

/* ---------- single grant ---------- */

.fg-facts {
	margin: 2rem 0;
	padding: 0.4rem 1.4rem;
	background: var(--fg-grey);
	border-radius: var(--fg-radius-card);
}

.fg-facts > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--fg-grey-line);
}

.fg-facts > div:last-child {
	border-bottom: 0;
}

.fg-facts dt {
	flex: 0 0 9rem;
	font-weight: 700;
}

.fg-facts dd {
	margin: 0;
}

.fg-list {
	max-width: 68ch;
	line-height: 1.65;
}

.fg-list li {
	margin-bottom: 0.55rem;
}

.fg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0;
}

/* Green is the primary action on the live site, so it stays that here. */
.fg-button {
	display: inline-block;
	padding: 0.9em 1.9em;
	font: inherit;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var(--fg-green);
	border: 1px solid var(--fg-green);
	border-radius: var(--fg-radius-pill);
	cursor: pointer;
}

.fg-button:hover,
.fg-button:focus {
	color: #fff;
	background: #086302;
	border-color: #086302;
}

.fg-provider-phone {
	color: var(--fg-muted);
}

.fg-checked-note {
	margin: 2rem 0 0;
	font-size: 0.95em;
	color: var(--fg-muted);
}

/* ---------- enquiry form ---------- */

.fg-enquiry {
	margin: 2.5rem 0 0;
	padding: 1.9rem;
	background: var(--fg-grey);
	border-radius: var(--fg-radius-card);
}

.fg-enquiry h2 {
	margin-top: 0;
}

.fg-row {
	margin: 0 0 1.2rem;
}

.fg-row label {
	display: block;
	margin: 0 0 0.4rem;
	font-weight: 700;
}

.fg-row input,
.fg-row textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8em 1.3em;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--fg-grey-line);
	border-radius: var(--fg-radius-pill);
}

.fg-row textarea {
	border-radius: 18px;
	resize: vertical;
}

.fg-row input:focus,
.fg-row textarea:focus {
	border-color: var(--fg-orange);
}

.fg-row-check {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.fg-row-check input {
	width: 1.4rem;
	height: 1.4rem;
	flex: 0 0 auto;
	margin-top: 0.15rem;
	border-radius: 4px;
}

.fg-row-check label {
	font-weight: 400;
	line-height: 1.5;
}

.fg-hint {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9em;
	color: var(--fg-muted);
}

.fg-hp {
	position: absolute;
	left: -9999px;
}

.fg-form-status {
	margin: 1rem 0 0;
	font-weight: 700;
}

.fg-form-status.is-error {
	color: #a1231f;
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
	.fg-controls,
	.fg-card,
	.fg-enquiry {
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	.fg-card-head {
		flex-direction: column;
	}

	.fg-amount {
		text-align: left;
	}

	.fg-amount-label {
		display: inline;
	}

	.fg-facts dt {
		flex: 0 0 100%;
	}

	.fg-card-foot,
	.fg-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.fg-card-link,
	.fg-button {
		text-align: center;
	}
}

/* Without JavaScript the whole directory is already visible, unfiltered, which
   is the correct fallback. */
.no-js .fg-controls {
	display: none;
}

/* ---------- promise, advanced panel, local help, submission ---------- */

.fg-promise {
	/* Outline only, no fill. It introduces the page rather than warning about
	   anything, so it should not sit heavier than the cards below it. */
	margin: 0 0 1.75rem;
	padding: 1.35rem 1.6rem;
	line-height: 1.6;
	background: transparent;
	border: 1px solid var(--fg-hairline);
	border-radius: var(--fg-radius-card);
}

.fg-advanced {
	margin: 1.35rem 0 0;
}

.fg-advanced > summary {
	display: inline-block;
	padding: 0.55em 1.15em;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--fg-grey-line);
	border-radius: var(--fg-radius-pill);
}

.fg-advanced > summary::-webkit-details-marker {
	display: none;
}

.fg-advanced > summary::after {
	content: " +";
	font-weight: 700;
}

.fg-advanced[open] > summary::after {
	content: " –";
}

.fg-advanced > summary:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.fg-advanced-inner {
	padding-top: 1.35rem;
}

.fg-local {
	margin: 2.5rem 0 0;
	padding: 1.75rem 1.9rem;
	background: var(--fg-grey);
	border-radius: var(--fg-radius-card);
}

.fg-local h3 {
	margin: 0 0 0.6rem;
	font-size: 1.25em;
	font-weight: 700;
}

.fg-local p {
	margin: 0 0 1rem;
	max-width: 68ch;
}

.fg-local-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.fg-local-hours {
	color: var(--fg-muted);
	font-size: 0.95em;
}

/* provider submission */

.fg-rules {
	padding: 1.75rem 1.9rem;
	margin: 0 0 2rem;
	background: #fff;
	border: 1px solid var(--fg-hairline);
	border-radius: var(--fg-radius-card);
}

.fg-rules h2 {
	margin-top: 0;
}

.fg-submit-form {
	padding: 1.9rem;
	background: var(--fg-grey);
	border-radius: var(--fg-radius-card);
}

.fg-submit-form h2:first-child {
	margin-top: 0;
}

.fg-hint-block {
	display: block;
	max-width: 68ch;
	margin-bottom: 1.5rem;
}

.fg-advanced-note {
	max-width: 62ch;
	margin: 0 0 1.35rem;
	color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   Theme overrides.
   Some themes style every list and heading inside page content,
   which beats the plain class selectors above. These are scoped
   tightly to the directory so nothing else on the site is touched.
   --------------------------------------------------------------- */

.fg-finder .fg-results,
.fg-finder .fg-meta {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.fg-finder .fg-card .fg-card-title {
	margin: 0 !important;
	font-size: 1.35em !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--fg-ink) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.fg-finder .fg-card .fg-card-title a {
	color: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	text-decoration: none;
	background: none;
}

.fg-finder .fg-card .fg-card-title a:hover,
.fg-finder .fg-card .fg-card-title a:focus {
	text-decoration: underline;
}

.fg-finder .fg-card .fg-summary,
.fg-finder .fg-card .fg-meta {
	color: var(--fg-ink);
}

/* Keep the amount from crowding the title on narrower content areas. */
.fg-finder .fg-card .fg-amount {
	max-width: 13rem;
}

.fg-single .fg-list {
	padding-left: 1.3rem;
}

/* A nested area reads as a sub-option of the nation above it. */
.fg-pill-child {
	font-size: 0.9em;
	border-style: dashed;
}

.fg-pill-input:checked + .fg-pill-child {
	border-style: solid;
}

/* Some themes draw the marker with a pseudo-element rather than list-style,
   which the reset above cannot reach. */
.fg-finder .fg-results > .fg-card::before,
.fg-finder .fg-results > .fg-card::after {
	content: none !important;
	display: none !important;
}

/* ---------- single grant page ---------- */

/* Themes size h2 for a page title, which is too loud for a section heading
   inside a record, and usually leaves no room underneath. */
.fg-single .fg-h2 {
	max-width: 68ch;
	margin: 2.25rem 0 0.75rem !important;
	font-size: 1.4em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--fg-ink) !important;
}

.fg-single .fg-h2:first-of-type {
	margin-top: 2rem !important;
}

.fg-single .fg-prose {
	max-width: 68ch;
	margin: 0 0 1rem;
	line-height: 1.65;
}

.fg-single ul.fg-list,
.fg-single ol.fg-list {
	max-width: 68ch;
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.fg-single ul.fg-list > li,
.fg-single ol.fg-list > li {
	margin-bottom: 0.55rem;
	padding-left: 0.3rem;
	line-height: 1.65;
}

.fg-single ul.fg-list {
	list-style: disc outside;
}

.fg-single ol.fg-list {
	list-style: decimal outside;
}

.fg-single ul.fg-list > li::marker,
.fg-single ol.fg-list > li::marker {
	color: var(--fg-orange);
	font-weight: 700;
}

/* ---------- back to results ---------- */

.fg-back-wrap {
	margin: 0 0 1.5rem;
}

.fg-back-foot {
	margin: 2.25rem 0 0;
}

.fg-back {
	display: inline-block;
	position: relative;
	padding: 0.6em 1.4em 0.6em 2.1em;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--fg-ink) !important;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--fg-grey-line);
	border-radius: var(--fg-radius-pill);
}

/* Chevron drawn rather than typed, so it never gets read out as a character. */
.fg-back::before {
	content: "";
	position: absolute;
	left: 1.15em;
	top: 50%;
	width: 0.45em;
	height: 0.45em;
	border-left: 2px solid var(--fg-orange);
	border-bottom: 2px solid var(--fg-orange);
	transform: translateY(-50%) rotate(45deg);
}

.fg-back:hover,
.fg-back:focus {
	background: var(--fg-grey);
	border-color: var(--fg-orange);
}

/* ---------------------------------------------------------------
   Typeface.

   Labels, legends, summary elements, form controls and headings
   are all styled directly by most themes, so element-level rules
   here lose on specificity and the widget ends up in two fonts.

   A blanket rule is the reliable answer. Nothing in the directory
   uses an icon font or a deliberately different face, so there is
   nothing for this to break.
   --------------------------------------------------------------- */

.fg-finder,
.fg-single {
	/* The site's typeface. Overridden from Grants > Settings if it ever
	   changes. Inheriting is not reliable here: the theme applies Poppins to
	   headings and paragraphs but leaves body as a browser default, so
	   anything inheriting picks up the default instead. */
	--fg-font: Poppins, sans-serif;
}

.fg-finder,
.fg-single,
.fg-finder *,
.fg-single * {
	font-family: var( --fg-font ) !important;
}

.fg-finder input::placeholder,
.fg-single input::placeholder,
.fg-single textarea::placeholder {
	font-style: normal;
	opacity: 1;
	color: #6b756f;
}

/* The enquiry heading needs room beneath it, which themes rarely give
   to a heading that is the first child of a box. */
.fg-single .fg-enquiry h2 {
	margin: 0 0 0.6rem !important;
	font-size: 1.4em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.fg-single .fg-enquiry > p {
	margin: 0 0 1.5rem;
	max-width: 68ch;
}

/* ---------------------------------------------------------------
   Hiding.
   The browser's own [hidden] rule is easily overridden by a theme
   that sets display on list items, which would leave the filters
   apparently doing nothing. This cannot be outranked.
   --------------------------------------------------------------- */

.fg-finder .fg-is-hidden,
.fg-finder [hidden] {
	display: none !important;
}