/**
 * Locator component styles.
 *
 * Bootstrap variables only, no literal brand colours, so it follows any theme and colour mode.
 */

.com-locator {
	--com-locator-map-height: 400px;
	--com-locator-map-height-sm: 300px;
	--com-locator-sticky-top: 1rem;
	/* The window below the sticky offset, less 1rem, so a stuck map fits; never under 18rem. */
	--com-locator-map-height-lg: max(18rem, calc(100vh - var(--com-locator-sticky-top) - 1rem));
	--com-locator-map-height-max: 44rem;
	--com-locator-content-width: 60rem;
	--com-locator-radius: var(--bs-border-radius, 0.375rem);
}

/* ---------------------------------------------------------------- layout */

/*
 * The listing is a Bootstrap row; column widths come from Options > Map. This only
 * sizes the map and handles states Bootstrap cannot know about.
 */
.com-locator-grid__results {
	min-width: 0;
}

.com-locator-map {
	width: 100%;
	height: var(--com-locator-map-height-sm);
	overflow: hidden;
	/* View on Map scrolls it into view: stop below a fixed header, not under it. */
	scroll-margin-top: var(--com-locator-sticky-top, 1rem);
	border-radius: var(--com-locator-radius);
	background-color: var(--bs-secondary-bg, #e9ecef);
}

@media (min-width: 576px) {
	.com-locator-map {
		height: var(--com-locator-map-height);
	}
}

@media (min-width: 992px) {
	.com-locator-map {
		height: var(--com-locator-map-height-lg, calc(100vh - 2rem));
		max-height: var(--com-locator-map-height-max, 44rem);
	}
}

/* Sticky at every width; it only has room to stick once the columns sit side by side. */
.com-locator-map__sticky {
	position: sticky;
	top: var(--com-locator-sticky-top, 1rem);
}

.com-locator--map-static .com-locator-map__sticky {
	position: static;
}

/* Maps API failed (set by locator.js): results take the full row. */
.com-locator--no-map .com-locator-grid__map {
	display: none;
}

.com-locator--no-map .com-locator-grid__results {
	width: 100%;
}

/* List-only: full-width cards, capped for readability, with a larger media panel. */
.com-locator--list-only .com-locator-grid__results {
	max-width: var(--com-locator-content-width, 60rem);
}

.com-locator--list-only .com-locator-list__items {
	gap: 1rem;
}

/* Side images only: above or below the details, the image spans the card. */
@media (min-width: 768px) {
	.com-locator--list-only .com-locator-card--image-left .com-locator-card__media,
	.com-locator--list-only .com-locator-card--image-right .com-locator-card__media {
		max-width: 18rem;
	}
}

/* Grid list; min() lets a track shrink below 18rem rather than overflow. */
.com-locator-list__items--grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

.com-locator-list__items--grid .com-locator-card__media img {
	min-height: 9rem;
}

/* ----------------------------------------------------------------- cards */

/* Marker clicks scroll the card into view; the Sticky Offset keeps it below a fixed header. */
.com-locator-card {
	overflow: hidden;
	scroll-margin-top: var(--com-locator-sticky-top, 1rem);
}

/* Inset outline, so selecting a card does not shift layout. */
.com-locator-card.is-selected {
	outline: 2px solid var(--bs-primary);
	outline-offset: -2px;
}

.com-locator-card__media img {
	object-fit: cover;
	min-height: 12rem;
}

/* Above or below the details: a wide crop. */
.com-locator-card--image-top .com-locator-card__media img,
.com-locator-card--image-bottom .com-locator-card__media img {
	min-height: 0;
	aspect-ratio: 16 / 9;
}

.com-locator-card__title a:hover,
.com-locator-card__title a:focus-visible {
	color: var(--bs-primary);
}

.com-locator-address {
	font-style: normal;
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

.com-locator-address__locality > span + span::before {
	content: " ";
}

.com-locator-card__notes {
	color: var(--bs-warning-text-emphasis, var(--bs-emphasis-color));
}

/* Custom fields at a position: Joomla's fields-container list, unbulleted, each field's
   own classes applied. On cards the spacing is Card Custom Fields Classes; inside the
   contact list the fields are its own items. */
.fields-container.com-locator-card__position,
.fields-container.com-locator-detail__position {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fields-container.com-locator-detail__position {
	margin-bottom: 0.5rem;
}

.com-locator-card__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-bottom: 0.75rem;
}

/* The mark before each feature; --com-locator-feature-color comes from the option or the template. */
.com-locator-feature::before,
.com-locator-feature__icon {
	margin-right: 0.35rem;
	color: var(--com-locator-feature-color, var(--bs-success, currentColor));
}

.com-locator-feature::before {
	content: "\2713";
}

/* An icon (the feature's own or the default) replaces the checkmark; "none" removes it. */
.com-locator-feature--icon::before,
.com-locator-feature--plain::before {
	content: none;
}

/* ----------------------------------------------------------------- hours */

/* Hours on the card: a panel, capped in width so days and times stay together. */
.com-locator-card__hours {
	max-width: 22rem;
	padding: 0.75rem 1rem;
	border-radius: var(--com-locator-radius);
	background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.com-locator-card__hours-heading {
	margin-bottom: 0.5rem;
}

/* The hours list: two content-sized columns, tabular figures. Group titles are styled by their classes option. */
.com-locator-hours__group + .com-locator-hours__group {
	margin-top: 0.75rem;
}

/* Days and times in two columns; the days' end padding keeps them apart. */
.com-locator-hours__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0;
}

.com-locator-hours__days,
.com-locator-hours__time {
	margin: 0;
	padding: 0.3rem 0;
}

/* Group Dividers option: a line above each group after the first. */
.com-locator-hours--dividers .com-locator-hours__group + .com-locator-hours__group {
	padding-top: 0.75rem;
	border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

.com-locator-hours__days {
	padding-inline-end: 1.5rem;
	font-weight: 400;
}

.com-locator-hours__time {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.com-locator-card__distance {
	white-space: nowrap;
}

.com-locator-icon {
	margin-right: 0.25rem;
}

/* ------------------------------------------------------------ categories */

/* A neutral chip; a category's own class (category options) lets the template style it. */
.com-locator-cat {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: var(--com-locator-radius);
	background-color: var(--bs-secondary-bg, #e9ecef);
	color: var(--bs-emphasis-color, inherit);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------------- search */

.com-locator-search__input {
	min-width: 12rem;
}

.com-locator-alerts:empty {
	display: none;
}

.com-locator-alerts {
	margin-bottom: 1rem;
}

/* ---------------------------------------------------------------- marker */

/*
 * A configured marker (pinElement() in locator.js), anchored at its tip. The icon is
 * centred on the head at (15, 15) of the 30 x 42 box.
 */
.com-locator-pin {
	position: relative;
	width: 30px;
	height: 42px;
}

.com-locator-pin__shape {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.com-locator-pin__shape path {
	stroke-width: 1.5;
}

/*
 * Two classes, to outrank icon fonts loaded later: Font Awesome's duotone sets position: relative.
 * translate, not transform, so its rotate, flip and animation classes still apply.
 */
.com-locator-pin .com-locator-pin__icon,
.com-locator-pin .com-locator-pin__dot {
	position: absolute;
	top: 15px;
	left: 50%;
	translate: -50% -50%;
}

.com-locator-pin__icon {
	font-size: 14px;
	line-height: 1;
}

.com-locator-pin__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

/* ---------------------------------------------------------- marker popup */

/*
 * Not nested under the root: Google renders the info window outside it. Each inline
 * part gets its own line.
 */
.com-locator-popup {
	min-width: 12rem;
	line-height: 1.4;
}

.com-locator-popup__title,
.com-locator-popup__address,
.com-locator-popup__phone,
.com-locator-popup__directions {
	display: block;
}

.com-locator-popup__title {
	margin-bottom: 0.25rem;
}

.com-locator-popup__address {
	margin-bottom: 0.25rem;
}

.com-locator-popup__directions {
	margin-top: 0.25rem;
}

/*
 * Google hides this box's overflow: scroll bars with ::-webkit-scrollbar, which
 * Chrome ignores once scrollbar-color/width is set (e.g. a template's `*` rule).
 */
.gm-style .gm-style-iw-d {
	scrollbar-color: auto;
	scrollbar-width: auto;
}

/* ---------------------------------------------------------------- detail */

.com-locator-detail__image {
	width: 100%;
	max-height: 24rem;
	object-fit: cover;
	border-radius: var(--com-locator-radius);
}

/* Beside the content, at the top of the contact column. */
.com-locator-detail__image--aside {
	max-height: 16rem;
}

.com-locator-detail__contact {
	position: sticky;
	top: var(--com-locator-sticky-top, 1rem);
}

@media (max-width: 767.98px) {
	.com-locator-detail__contact {
		position: static;
	}
}

/* --------------------------------------------------------------- motion */

/* Browser-initiated scrolling; locator.js checks reduced motion for its own. */
@media (prefers-reduced-motion: reduce) {
	.com-locator,
	.com-locator-card {
		scroll-behavior: auto;
	}
}