/* The Feeding Trust - Charity Directory
   Brings Directorist's markup in line with the site's own typography, colour and card language
   (see the Meet the Team page: Montserrat headings, 10px radius, var(--e-global-color-20c1bd8) card background). */

.directorist-w-100,
.directorist-w-100 input,
.directorist-w-100 select,
.directorist-w-100 textarea,
.directorist-w-100 button,
.ftcd-hero,
.ftcd-map-col {
	font-family: 'Montserrat', sans-serif;
	--directorist-color-body: var(--e-global-color-text);
}

/* List view: no thumbnail image, just the text/contact details */
.directorist-archive-list-view .directorist-listing-single__thumb {
	display: none;
}

/* Category tags link to Directorist's own taxonomy archive, which isn't set
   up and isn't needed here - keep the tag as a plain (non-clickable) label. */
.directorist-listing-category a,
.single-at_biz_dir .directorist-listing-category a {
	pointer-events: none;
	cursor: default;
}

/* Native Directorist "Map View" info-card: no author avatar, no star-rating
   row, no "add to favourite" button, no pagination (the map already shows
   everything at once). */
.map-listing-card-single__author,
.map-listing-card-single .directorist-rating-meta,
.map-listing-card-single .directorist-mark-as-favorite__btn,
.directorist-archive-items.directorist-archive-map-view .directorist-pagination {
	display: none !important;
}

/* Map View marker clusters default to Leaflet's stock green/yellow/orange -
   make them brand blue instead so they stand out consistently. */
.marker-cluster-small, .marker-cluster-small div,
.marker-cluster-medium, .marker-cluster-medium div,
.marker-cluster-large, .marker-cluster-large div,
.marker-cluster-shape {
	background-color: var(--e-global-color-primary) !important;
	color: #ffffff !important;
}

.directorist-w-100 h1, .directorist-w-100 h2, .directorist-w-100 h3, .directorist-w-100 h4,
.ftcd-hero__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--e-global-color-text);
}

/* ---------- Layout: results (left) + map (right) ---------- */
.ftcd-directory-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
	gap: 32px;
	/* stretch (the grid default) so the map's whole column is as tall as the
	   results column - position:sticky below needs that extra height to have
	   anywhere to travel. */
	align-items: stretch;
}
.ftcd-results-col { min-width: 0; }

/* The map column is several Elementor wrapper divs deep (container > widget >
   shortcode-output > .ftcd-map-col). Every one of those needs to inherit the
   full stretched height, otherwise it collapses back down to just the map's
   own height and .ftcd-map-sticky has no room to stick within. */
.ftcd-directory-layout > .e-con:has(.ftcd-map-col),
.ftcd-directory-layout .elementor-widget-shortcode:has(.ftcd-map-col),
.ftcd-directory-layout .elementor-widget-shortcode:has(.ftcd-map-col) .elementor-widget-container,
.ftcd-directory-layout .elementor-shortcode:has(.ftcd-map-col),
.ftcd-map-col {
	height: 100%;
}
.ftcd-map-col { min-width: 0; }
.ftcd-map-sticky {
	position: sticky;
	top: 24px;
}
.ftcd-map {
	width: 100%;
	height: 560px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0,0,0,.08);
	background: var(--e-global-color-20c1bd8);
}

/* ---------- Grid cards: tighter spacing, 3-4 per row (Directorist's own
   column classes handle the responsive breakpoints) ---------- */
/* The real flex/wrap row Directorist uses for grid cards is .directorist-row
   (a Bootstrap-style row), with .directorist-col-3/-4/-5 as the individual
   cells - NOT .directorist-archive-items, which just wraps that row plus the
   pagination nav below it. Styling the wrong one previously made the
   pagination sit beside the cards instead of under them. */
.directorist-archive-items.directorist-archive-grid-view .directorist-row {
	row-gap: 20px;
	align-items: stretch;
}
.directorist-archive-items.directorist-archive-grid-view [class*="directorist-col-"] {
	display: flex;
}
.directorist-listing-single {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.directorist-listing-single__content {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.directorist-listing-single__info {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.directorist-listing-single__thumb {
	min-height: 0 !important;
}
/* Square (500x500) thumbnail, spanning the full width of the card */
.directorist-thumnail-card {
	height: auto !important;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	margin: 0;
}
.directorist-listing-single__thumb img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 16px;
}
.directorist-listing-single__info__list {
	margin: 6px 0 4px;
}
/* Keep the CTA pinned to the bottom of every card, whatever its content height */
.ftcd-card-cta {
	margin-top: auto;
	padding-top: 8px;
}
.directorist-archive-contents__top {
	margin-bottom: 20px;
}
.directorist-pagination {
	margin-top: 24px;
}

@media (max-width: 1024px) {
	.ftcd-directory-layout {
		grid-template-columns: 1fr;
	}
	.ftcd-map-sticky { position: static; }
	.ftcd-map { height: 380px; }
}

/* ---------- Search / filter bar ---------- */
.directorist-advanced-filter {
	background: var(--e-global-color-e6a5847);
	border: none;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.directorist-form-control,
.directorist-w-100 select.directorist-form-control {
	border-radius: 10px;
	border-color: #d7e0ea;
}
.directorist-form-control:focus,
.directorist-w-100 select.directorist-form-control:focus,
.directorist-w-100 button:focus-visible,
.directorist-w-100 a:focus-visible,
.ftcd-view-charity-btn:focus-visible {
	outline: 3px solid var(--e-global-color-secondary);
	outline-offset: 2px;
}

/* ---------- Cards ---------- */
.directorist-listing-single {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0,0,0,0.06);
	transition: transform .15s ease, box-shadow .15s ease;
	background: #ffffff;
}
.directorist-listing-single:hover,
.directorist-listing-single:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(14,42,90,0.12);
}
.directorist-listing-single__thumb {
	background: #ffffff;
}
/* Directorist falls back to a generic stock photo when a charity has no gallery
   image uploaded - hide it and let the white thumb background show through
   instead, rather than an irrelevant stock photo. */
.directorist-listing-single__thumb img[src*="assets/images/grid.jpg"] {
	display: none;
}
.directorist-listing-single__info__top__left a,
.directorist-listing-single__header__title a {
	color: var(--e-global-color-text);
	font-weight: 700;
}

/* "View Charity" card CTA */
.ftcd-card-cta { margin-top: 12px; }
.ftcd-view-charity-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 15px;
	color: var(--e-global-color-primary);
	text-decoration: none;
	padding: 8px 0;
}
.ftcd-view-charity-btn:hover {
	color: var(--e-global-color-secondary);
	text-decoration: underline;
}

/* ---------- Map popup (Leaflet) ---------- */
.ftcd-popup {
	font-family: 'Montserrat', sans-serif;
	min-width: 240px;
}
.ftcd-popup__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.ftcd-popup__logo {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	object-fit: contain;
	border-radius: 6px;
	background: var(--e-global-color-e6a5847);
	padding: 4px;
}
.ftcd-popup__header-text {
	min-width: 0;
}
.ftcd-popup__name {
	font-weight: 700;
	color: var(--e-global-color-text);
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
}
.ftcd-popup__location {
	font-size: 12px;
	color: var(--e-global-color-accent);
	margin: 2px 0 0;
}
.ftcd-popup__desc {
	font-size: 13px;
	color: var(--e-global-color-text);
	margin: 0 0 10px;
	line-height: 1.4;
}
.ftcd-popup__btn {
	display: inline-block;
	background: var(--e-global-color-primary);
	color: #ffffff !important;
	border-radius: 10px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.ftcd-popup__btn:hover { background: var(--e-global-color-secondary); color: var(--e-global-color-text) !important; }

.ftcd-marker-cluster {
	background: rgba(0,72,154,0.85);
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	box-shadow: 0 0 0 4px rgba(0,72,154,0.25);
}

/* ---------- Single charity profile ---------- */

/* Hero band - the Elementor hero fragment rendered inside it (template 785,
   see the plugin's PHP) has its own background/padding, so this section only
   needs to break that fragment out to full viewport width, since it's
   injected inside the theme's constrained content column. */
.single-at_biz_dir .directorist-single-listing-header {
	width: 100vw;
	margin-top: 0 !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* The logo is server-rendered in the hero, then moved by JS into the side of
   the Full Description section (see single-map.js). Moving the DOM node
   removes it from the hero automatically; if that script doesn't run for any
   reason, it simply stays visible in the hero as a fallback. */
.ftcd-single-logo img {
	width: 160px;
	height: 160px;
	max-width: 100%;
	object-fit: contain;
	background: #ffffff;
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

/* Full Description, with the logo sitting beside the text */
.ftcd-description-with-logo {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.ftcd-description-with-logo .directorist-listing-details__text {
	flex: 1;
	min-width: 0;
}
.ftcd-single-logo--inline {
	flex-shrink: 0;
	margin: 0;
}
.ftcd-single-logo--inline img {
	width: 120px;
	height: 120px;
}
@media (max-width: 600px) {
	.ftcd-description-with-logo {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}
/* Reusable outline button - matches the header's own "Contact" button exactly.
   Used for "Go Back" on the single charity page and "Contact Us" on the
   Charity Directory page. */
.ftcd-outline-btn {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--e-global-color-primary);
	background: transparent;
	border: 2px solid var(--e-global-color-primary);
	border-radius: 10px;
	padding: 15px 25px;
	text-decoration: none;
}
.ftcd-outline-btn:hover {
	background: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
}
@media (max-width: 767px) {
	.ftcd-outline-btn { font-size: 16px; }
}
.single-at_biz_dir .directorist-w-100 {
	max-width: 900px;
	margin: 0 auto;
}
/* 120px gap under the hero and above the footer, matching every other page.
   .directorist-single-listing-header is itself a <section>, so it - not the
   Full Description card - was the true :first-of-type; that's why only the
   bottom gap was ever taking effect. Anchoring the top gap to the header
   directly (a stable, always-present element) instead of a sibling card. */
.single-at_biz_dir .directorist-single-listing-header {
	margin-bottom: 120px !important;
}
.single-at_biz_dir .directorist-card:last-of-type {
	margin-bottom: 120px;
}
.single-at_biz_dir .directorist-listing-category a {
	display: inline-block;
	background: var(--e-global-color-20c1bd8);
	color: var(--e-global-color-primary);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	margin: 2px 2px;
}
.single-at_biz_dir .directorist-card {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.06);
	padding: 20px 24px;
	margin-bottom: 20px;
}
.single-at_biz_dir .directorist-card__header {
	margin-bottom: 12px;
}
.single-at_biz_dir .directorist-card__header__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--e-global-color-text);
	font-size: 18px;
	margin: 0;
}
.single-at_biz_dir .directorist-card__header-icon {
	color: var(--e-global-color-primary);
}
.single-at_biz_dir .directorist-single-info {
	margin-bottom: 10px;
}
.single-at_biz_dir .directorist-single-info:last-child {
	margin-bottom: 0;
}
.single-at_biz_dir .directorist-single-info__label {
	font-weight: 700;
	color: var(--e-global-color-text);
}
.ftcd-single-map {
	width: 100%;
	height: 280px;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.directorist-listing-single { transition: none; }
}

/* "Virtual / online" badge (listings with no street address) */
.ftcd-virtual-badge {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	padding: 4px 14px;
	margin: 6px 0 4px;
	border-radius: 20px;
	background: var(--e-global-color-2b2b8ce, #f8f6ee);
	border: 1px solid #cfd9ea;
	color: var(--e-global-color-text, #0e2a5a);
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}
.ftcd-single-virtual { text-align: center; margin: 18px 0 0; }