/* Nantucket Directory — front-end styles */

.ntdir-search-form .ntdir-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.ntdir-search-input {
	flex: 1 1 240px;
	padding: 10px 14px;
	border: 1px solid #d5d0c7;
	border-radius: 8px;
	font-size: 14px;
}

.ntdir-search-category {
	padding: 10px 12px;
	border: 1px solid #d5d0c7;
	border-radius: 8px;
	font-size: 14px;
	max-width: 220px;
}

.ntdir-search-submit {
	padding: 10px 20px;
	border: none;
	border-radius: 8px;
	background: #163847;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}
.ntdir-search-submit:hover {
	background: #0f2732;
}

/* Header showing the current search term/category, above the map+list
   layout — always shown, even before a search runs. */
.ntdir-results-header h2 {
	font-size: 22px;
	margin: 0 0 20px;
	color: #163847;
}

/* ── Two-column layout: map (left, sticky) + results list (right) ──
   Structure and proportions confirmed against an Elementor export of
   GeoDirectory's own native search page: a 50/50 split with a sticky,
   full-viewport-height map on the left. Collapses to a stacked single
   column below 900px, where the map becomes a fixed, more modest height
   instead of the sticky full-height treatment (a sticky 100vh map next to
   a stacked column doesn't make sense on narrow viewports). The map is
   always shown (by decision) — even with no points, it falls back to a
   default island view rather than disappearing, so this layout never
   needs a "no map" single-column fallback. */
.ntdir-results-layout {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}
.ntdir-results-map-col {
	flex: 0 0 50%;
	max-width: 50%;
	position: sticky;
	top: 20px;
}
.ntdir-results-list-col {
	flex: 1 1 50%;
	min-width: 0; /* prevents long content from forcing the flex item wider than its share */
}

/* Map — hidden automatically by map.js only if Leaflet itself isn't
   available (a real failure state) — otherwise always shown, defaulting
   to a Nantucket-island view when there are no points to plot.
   NOTE: this relies on Leaflet's own CSS (for tiles/controls/markers to
   render correctly) already being loaded by GeoDirectory sitewide, which
   is the case on pages carrying the gd-map-osm body class on this
   install. If the map appears but looks visually broken (tiles not
   tiling, markers oversized) on some page, GeoDirectory's Leaflet CSS
   likely isn't loading there — that would need to be loaded explicitly
   rather than bundling a second copy of Leaflet's CSS from this plugin. */
.ntdir-map {
	width: 100%;
	height: calc(100vh - 40px);
	max-height: 720px;
	border-radius: 14px;
	background: #eef1f0; /* visible placeholder color while Leaflet initializes */
}

.ntdir-results-summary {
	font-size: 13px;
	color: #62737b;
	margin-bottom: 16px;
}

.ntdir-pagination {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 24px 0 32px;
	flex-wrap: wrap;
}
.ntdir-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid #d5d0c7;
	color: #163847;
	text-decoration: none;
	font-size: 13px;
	background: #fff;
}
.ntdir-pagination .page-numbers.current {
	background: #163847;
	border-color: #163847;
	color: #fff;
}
.ntdir-pagination .page-numbers.dots {
	border: none;
	background: transparent;
}
.ntdir-pagination .page-numbers:hover:not(.current):not(.dots) {
	border-color: #163847;
}

.ntdir-results-tier {
	margin-bottom: 28px;
}

/* GeoDirectory cards render inside this wrapper using GD's own markup/CSS;
   spacing plus a light card treatment is applied here so results feel
   consistent even where the native template doesn't already provide its
   own box/border. */
.ntdir-gd-card-wrap {
	margin-bottom: 18px;
	border-radius: 14px;
	overflow: hidden;
}

.ntdir-gd-fallback-card {
	display: flex;
	gap: 14px;
	padding: 16px;
	border: 1px solid #e7e1d8;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	margin-bottom: 12px;
	background: #fff;
}
.ntdir-gd-fallback-card-media img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 10px;
}
.ntdir-gd-fallback-badge {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #a3792b;
	margin-bottom: 4px;
}
.ntdir-gd-fallback-card h3 {
	margin: 0 0 4px;
	font-size: 16px;
}
.ntdir-gd-fallback-card p {
	margin: 0;
	font-size: 13px;
	color: #62737b;
}

.ntdir-simple-listing {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	padding: 10px 4px;
	border-bottom: 1px solid #ece7de;
	font-size: 14px;
}
.ntdir-simple-listing-name {
	font-weight: 600;
	color: #163847;
	min-width: 200px;
}
.ntdir-simple-listing-phone a {
	color: #163847;
	text-decoration: none;
}
.ntdir-simple-listing-address {
	color: #62737b;
}

.ntdir-category-browser {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.ntdir-category-parent {
	font-size: 15px;
	margin: 0 0 8px;
	color: #163847;
}
.ntdir-category-children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ntdir-category-children li {
	margin-bottom: 4px;
}
.ntdir-category-children a {
	color: #62737b;
	text-decoration: none;
	font-size: 13px;
}
.ntdir-category-children a:hover {
	color: #163847;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.ntdir-search-category {
		max-width: none;
		flex: 1 1 100%;
	}
}

/* Stack the map above the list instead of side-by-side below 900px — a
   sticky, viewport-height map doesn't make sense once it's no longer next
   to a taller scrolling column. */
@media (max-width: 900px) {
	.ntdir-results-layout {
		display: block;
	}
	.ntdir-results-map-col {
		position: static;
		max-width: 100%;
		margin-bottom: 20px;
	}
	.ntdir-map {
		height: 320px;
		max-height: none;
	}
}