/* Directory layout. Colours and type come from theme.json tokens. */

.bi-listing__labels,
.bi-card__labels {
	color: var(--wp--preset--color--muted, #55656a);
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

.bi-listing__details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.5rem;
}

.bi-listing__details dt {
	font-weight: 600;
}

.bi-listing__details dd {
	margin: 0;
}

@media (max-width: 480px) {
	.bi-listing__details {
		grid-template-columns: 1fr;
		gap: 0.125rem;
	}

	.bi-listing__details dd {
		margin-bottom: 0.75rem;
	}
}

.bi-claim {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--line, #d5dcd6);
	border-radius: 6px;
	margin: 2rem 0 0;
	padding: 1.25rem 1.5rem;
}

.bi-claim p:last-child {
	margin-bottom: 0;
}

/* Filters */
.bi-directory__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-end;
	margin: 0 0 1rem;
}

.bi-directory__filters p {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	flex: 1 1 11rem;
}

.bi-directory__filters label {
	font-size: 0.875rem;
	font-weight: 600;
}

.bi-directory__filters input,
.bi-directory__filters select {
	font: inherit;
	padding: 0.5rem 0.625rem;
	border: 1.5px solid #8fa4a8;
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #fff);
	color: inherit;
	min-height: 2.75rem;
}

.bi-directory__filters .bi-directory__submit {
	flex: 0 0 auto;
}

.bi-directory__count {
	color: var(--wp--preset--color--muted, #55656a);
	font-size: 0.9375rem;
}

/* Cards */
.bi-directory__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1rem;
}

.bi-card {
	border: 1px solid var(--wp--preset--color--line, #d5dcd6);
	border-radius: 6px;
	padding: 1rem 1.125rem;
	background: var(--wp--preset--color--surface, #fff);
}

.bi-card__title {
	font-size: 1.375rem;
	margin: 0 0 0.25rem;
}

.bi-card__title a {
	color: var(--wp--preset--color--contrast, #1c2a2e);
	text-decoration: none;
}

.bi-card__title a:hover,
.bi-card__title a:focus {
	text-decoration: underline;
}

.bi-card__labels {
	margin-bottom: 0.5rem;
}

.bi-card p {
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
}

.bi-directory__pages {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	margin: 2rem 0 0;
}

/* Map */
.bi-map {
	width: 100%;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--line, #d5dcd6);
	z-index: 0;
}

.bi-map__credit,
.bi-map__error {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted, #55656a);
	margin: 0.375rem 0 0;
}

.bi-map__swatch {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	margin-right: 0.375rem;
	vertical-align: -1px;
	border: 1px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.bi-map .leaflet-popup-content {
	font-size: 0.9375rem;
	line-height: 1.4;
}

.bi-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Home page search strip */
.bi-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
}

.bi-search__label {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;
	font-size: 1.375rem;
	margin-right: 0.5rem;
}

.bi-search input,
.bi-search select {
	font: inherit;
	min-height: 3.125rem;
	padding: 0 0.875rem;
	border: 1.5px solid #8fa4a8;
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #fff);
	color: inherit;
}

.bi-search__q {
	flex: 1 1 17rem;
	min-width: 0;
}

.bi-search__where {
	flex: 0 1 12rem;
}

.bi-search button {
	min-height: 3.125rem;
	padding: 0 1.625rem;
}

/* Peninsula map (home page) */
.bi-pmap {
	position: relative;
	overflow: hidden;
}

.bi-pmap__frame {
	position: relative;
	background: var(--wp--preset--color--water, #cfe4ec);
	max-width: 1280px;
	margin: 0 auto;
	aspect-ratio: 1200 / 620;
	overflow: hidden;
}

.bi-pmap__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.bi-pmap__land {
	fill: var(--bi-mainland, #e3e7d8);
	stroke: #bcc6b4;
	stroke-width: 1;
	fill-rule: evenodd;
}

.bi-pmap__shore {
	fill: none;
	stroke: #9cc4d4;
	stroke-width: 8;
	stroke-linejoin: round;
	opacity: 0.55;
}

.bi-pmap__isle {
	fill: var(--wp--preset--color--land, #f7f3e3);
	stroke: #5c8fa6;
	stroke-width: 1.6;
	stroke-linejoin: round;
	fill-rule: evenodd;
}

.bi-pmap__road {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bi-pmap__road--minor-edge {
	stroke: #c9c1ae;
	stroke-width: 3;
}

.bi-pmap__road--minor {
	stroke: #fff;
	stroke-width: 1.6;
}

.bi-pmap__road--major-edge {
	stroke: #b9ac94;
	stroke-width: 4.4;
}

.bi-pmap__road--major {
	stroke: #fffaf0;
	stroke-width: 2.6;
}

/* Road numbers, styled like UK road signs: green for primary routes, white for the rest. */
.bi-pmap__road-label {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 1px 5px;
	border: 1px solid #9aa39a;
	border-radius: 3px;
	background: #fff;
	color: var(--wp--preset--color--contrast, #1c2a2e);
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: clamp(0.625rem, 0.9vw, 0.75rem);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
}

.bi-pmap__road-label--primary {
	background: #2f6a4f;
	border-color: #2f6a4f;
	color: #ffd23f;
}

.bi-pmap__intro {
	position: relative;
	padding: 2rem 20px 1.25rem;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}

.bi-pmap__heading {
	margin: 0;
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	line-height: 0.95;
}

.bi-pmap__lede {
	margin: 0.875rem 0 0;
	font-size: clamp(0.9375rem, 1.35vw, 1.125rem);
	line-height: 1.5;
	color: #33444a;
	max-width: 22em;
}

.bi-pmap__label {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: var(--wp--preset--font-family--heading, inherit);
	white-space: nowrap;
	pointer-events: none;
}

.bi-pmap__label--water {
	font-style: italic;
	font-weight: 500;
	font-size: clamp(0.8125rem, 1.45vw, 1.125rem);
	color: #245c76;
	letter-spacing: 0.06em;
}

.bi-pmap__label--land {
	font-weight: 500;
	font-size: clamp(0.75rem, 1.25vw, 1rem);
	color: #5b6a62;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bi-pmap__pin {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 7px;
	transform: translate(-8px, -50%);
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #1c2a2e);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;
	font-size: clamp(0.875rem, 1.65vw, 1.25rem);
	line-height: 1;
	white-space: nowrap;
	padding: 4px 0;
}

.bi-pmap__pin--left {
	flex-direction: row-reverse;
	transform: translate(calc(-100% + 8px), -50%);
}

.bi-pmap__pin:hover,
.bi-pmap__pin:focus {
	color: var(--wp--preset--color--accent, #9a4127);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bi-pmap__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #9a4127);
	box-shadow: 0 0 0 3px #fff;
	flex: 0 0 auto;
}

.bi-pmap__pin:hover .bi-pmap__dot,
.bi-pmap__pin:focus .bi-pmap__dot {
	background: var(--wp--preset--color--contrast, #1c2a2e);
}

.bi-pmap__list {
	display: none;
}

.bi-pmap__credit {
	position: absolute;
	right: 8px;
	bottom: 4px;
	margin: 0;
	font-size: 0.75rem;
	color: #45585e;
}

.bi-pmap__credit a {
	color: inherit;
}

/* Beyond the map's own 1280px the drawing carries on (the land path runs past the frame), so
   very wide screens show real coastline to their edges. */
@media (min-width: 1281px) {
	.bi-pmap__frame,
	.bi-pmap__svg {
		overflow: visible;
	}
}

/* Wide screens: the heading sits on the map, over Easter Ross. */
@media (min-width: 900px) {
	.bi-pmap {
		background: var(--wp--preset--color--water, #cfe4ec);
	}

	.bi-pmap__intro {
		position: absolute;
		left: 50%;
		top: 0;
		width: 100%;
		transform: translateX(-50%);
		padding: 0;
		z-index: 1;
		pointer-events: none;
	}

	.bi-pmap__intro > * {
		pointer-events: auto;
		position: relative;
		left: 3.3%;
		width: 26%;
	}

	.bi-pmap__heading {
		margin-top: min(4.5vw, 58px);
	}
}

/* Phones: dots on the map, names in a list underneath. */
@media (max-width: 639px) {
	.bi-pmap__road-label {
		display: none;
	}

	.bi-pmap__name,
	.bi-pmap__label--land {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.bi-pmap__label--water {
		font-size: 0.6875rem;
	}

	.bi-pmap__pin,
	.bi-pmap__pin--left {
		transform: translate(-50%, -50%);
		padding: 0;
	}

	.bi-pmap__dot {
		width: 10px;
		height: 10px;
		box-shadow: 0 0 0 2px #fff;
	}

	.bi-pmap__credit {
		position: static;
		padding: 0.25rem 20px 0.75rem;
		text-align: right;
	}

	.bi-pmap__list {
		display: block;
		padding: 0.75rem 20px 0;
	}

	.bi-pmap__list ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.bi-pmap__list a {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
		padding: 0 0.875rem;
		border-radius: 999px;
		background: var(--wp--preset--color--surface, #fff);
		border: 1px solid var(--wp--preset--color--line, #d5dcd6);
		color: var(--wp--preset--color--contrast, #1c2a2e);
		text-decoration: none;
		font-weight: 500;
	}
}

/* Map key (home page) */
.bi-key {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
	gap: 0.75rem;
}

.bi-key__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1.125rem;
	height: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--line, #d5dcd6);
	border-radius: 6px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #1c2a2e);
}

.bi-key__item:hover,
.bi-key__item:focus {
	border-color: var(--wp--preset--color--accent, #9a4127);
	color: var(--wp--preset--color--contrast, #1c2a2e);
}

.bi-key__item:hover .bi-key__name,
.bi-key__item:focus .bi-key__name {
	text-decoration: underline;
}

.bi-key__mark {
	flex: 0 0 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bi-key-colour);
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--bi-key-colour);
}

.bi-key__mark--business {
	--bi-key-colour: var(--wp--preset--color--primary, #1d5e86);
}

.bi-key__mark--organisation {
	--bi-key-colour: var(--wp--preset--color--accent, #9a4127);
}

.bi-key__mark--place {
	--bi-key-colour: var(--bi-map-place, #3d7350);
}

.bi-key__mark--walk {
	flex-basis: 26px;
	border-radius: 0;
	box-shadow: none;
	background: none;
	border-top: 3px dashed var(--bi-map-walk, #5b4a8b);
	height: 0;
	transform: rotate(-20deg);
}

.bi-key__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bi-key__name {
	font-weight: 600;
	font-size: 1.125rem;
}

.bi-key__note {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted, #55656a);
}

/* Walk cards (home page) */
.bi-walks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
	gap: 1rem;
}

.bi-walk-card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.25rem;
	height: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--line, #d5dcd6);
	border-radius: 6px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #1c2a2e);
}

.bi-walk-card:hover,
.bi-walk-card:focus {
	border-color: var(--bi-map-walk, #5b4a8b);
	color: var(--wp--preset--color--contrast, #1c2a2e);
}

.bi-walk-card:hover .bi-walk-card__title,
.bi-walk-card:focus .bi-walk-card__title {
	text-decoration: underline;
}

.bi-walk-card__route {
	width: 100%;
	height: 54px;
}

.bi-walk-card__route path {
	fill: none;
	stroke: var(--bi-map-walk, #5b4a8b);
	stroke-width: 3;
	stroke-dasharray: 7 5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.bi-walk-card__route circle {
	fill: var(--bi-map-walk, #5b4a8b);
}

.bi-walk-card__title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.1;
}

.bi-walk-card__meta {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted, #55656a);
}