/**
 * The Kolective — Find a Social Club (WP-1403).
 *
 * Styles the WP Go Maps city filter and store locator, both placed outside
 * the map so they can carry the site's own look: square corners, 2px
 * borders, no shadows, Nunito Sans for form controls.
 *
 * The two controls are separate `.wpgmza-standalone-component` siblings in
 * the page column, with no shared wrapper. They're laid out as the two
 * halves of one continuous bar: the column becomes a wrapping flex row,
 * every other child is forced onto its own line, and the inner border edges
 * are dropped so the seam is invisible. If those blocks are ever wrapped in
 * a Row block, target that container instead and drop the :has() rules.
 */

.wp-block-column:has(> .wpgmza-standalone-component) {
	--kol-brand: #3d2a4f;
	--kol-line: #a0a4ac;
	--kol-label: #53575f;

	display: flex;
	flex-wrap: wrap;
}

/* Everything that isn't one of our two controls keeps its own full line. */
.wp-block-column:has(> .wpgmza-standalone-component) > *:not(.wpgmza-standalone-component) {
	flex: 1 1 100%;
	min-width: 0;
}

.wp-block-column > .wpgmza-standalone-component {
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;

	/* Overrides the inline width:100% the plugin prints on the locator. */
	width: auto !important;
	max-width: none !important;
	margin: 0 0 32px;
	padding: 24px;
	background: #fff;
	border: 2px solid var(--kol-brand);
}

.wp-block-column > .wpgmza-standalone-component:has(.wpgmza-marker-listing-category-filter) {
	flex: 0 0 auto;
	padding-right: 0;
	border-right: 0;
}

/* The 16px gap across the seam comes from one side only, so it matches the
   gaps between the locator's own controls. */
.wp-block-column > .wpgmza-standalone-component:has(.wpgmza-store-locator) {
	flex: 1 1 auto;
	padding-left: 16px;
	border-left: 0;
}

/* The locator no longer draws its own box; the wrapper above does. */
.wpgmza-store-locator {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

/* Label sits above its control. */
.wpgmza-store-locator .wpgmza-address-container,
.wpgmza-store-locator .wpgmza-radius-container,
.wpgmza-marker-listing-category-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpgmza-store-locator .wpgmza-address-container {
	flex: 1 1 220px;
}

.wpgmza-store-locator .wpgmza-radius-container {
	flex: 0 0 120px;
}

/* The plugin centres this label and select as flex items. */
.wpgmza-marker-listing-category-filter {
	align-items: stretch;
	width: 200px;
	min-width: 0;
}

.wpgmza-store-locator label,
.wpgmza-marker-listing-category-filter label {
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--kol-label);
}

.wpgmza-marker-listing-category-filter label {
	width: 100%;
	margin: 0;
	text-align: left;
}

/* components.css sets margin:0 5px on every input and select inside a
   standalone component, which breaks the gap rhythm. */
.wpgmza-store-locator input.addressInput,
.wpgmza-store-locator select.wpgmza-radius,
.wpgmza-marker-listing-category-filter select {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	color: #232528;
	background: #fff;
	border: 2px solid var(--kol-line);
	border-radius: 0;
}

.wpgmza-store-locator input.addressInput::placeholder {
	color: var(--kol-line);
}

/* Replace the native arrow so it can be inset from the field edge. Reuses
   the same chevron asset the Embark cohort facets use (see facet.css). The
   relative path resolves identically from assets/css/ and dist/css/. */
.wpgmza-store-locator select.wpgmza-radius,
.wpgmza-marker-listing-category-filter select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 38px;
	background-color: #fff;
	background-image: url(../../images/drop.svg);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
}

/* Without min-width:0 the select's intrinsic width — longest city name plus
   the chevron padding — overflows the wrapper and eats into the seam gap. */
.wpgmza-marker-listing-category-filter select {
	max-width: 100%;
	align-self: flex-start;
}

/* Replaces the browser outline removed below — keep a visible focus state. */
.wpgmza-store-locator input.addressInput:focus,
.wpgmza-store-locator select.wpgmza-radius:focus,
.wpgmza-marker-listing-category-filter select:focus {
	border-color: var(--kol-brand);
	box-shadow: inset 0 0 0 1px var(--kol-brand);
	outline: none;
}

/*
 * The plugin ships the search control as a bare inline SVG with
 * role="button". Give it a real button box, matched to the field height.
 * The SVG's line/circle set stroke-width but no colour, so they inherit
 * whatever `stroke` resolves to here.
 */
.wpgmza-store-locator svg.wpgmza-search {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: var(--kol-brand);
	border: 2px solid var(--kol-brand);
	stroke: #fff;
	cursor: pointer;
}

.wpgmza-store-locator svg.wpgmza-search:hover,
.wpgmza-store-locator svg.wpgmza-search:focus-visible {
	background: #fff;
	stroke: var(--kol-brand);
	outline: none;
}

/*
 * The error slot is a flex child wide enough to wrap onto its own line, so
 * while empty it contributes a row-gap of dead space. Collapse it, but keep
 * it styled for when the plugin does write a message into it.
 */
.wpgmza-store-locator .wpgmza-error:empty {
	display: none;
}

.wpgmza-store-locator .wpgmza-error {
	flex: 1 1 100%;
	margin: 0;
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	color: #cf2e2e;
}

/* Stack the two halves, keeping them joined vertically. */
@media (max-width: 782px) {
	.wp-block-column > .wpgmza-standalone-component:has(.wpgmza-marker-listing-category-filter),
	.wp-block-column > .wpgmza-standalone-component:has(.wpgmza-store-locator) {
		flex: 1 1 100%;
		padding: 16px;
		border: 2px solid var(--kol-brand);
	}

	.wp-block-column > .wpgmza-standalone-component:has(.wpgmza-marker-listing-category-filter) {
		margin-bottom: 0;
		border-bottom: 0;
	}

	.wpgmza-marker-listing-category-filter {
		width: 100%;
	}

	.wpgmza-store-locator {
		gap: 12px;
	}

	.wpgmza-store-locator .wpgmza-address-container,
	.wpgmza-store-locator .wpgmza-radius-container {
		flex: 1 1 100%;
	}

	.wpgmza-store-locator svg.wpgmza-search {
		width: 100%;
	}
}

/**
 * Kolective city sidebar and club detail (WP-1403).
 *
 * The sidebar reuses the plugin's own panel classes — .wpgmza-inner-stack,
 * .grouping, .wpgmza_marker_list_class, .wpgmza-panel-list-item — so the
 * plugin's layout and spacing apply without being restated here. What
 * follows is only what the plugin has no equivalent for: the list header,
 * the row affordance, and the detail panel below the map.
 */

/* One inset for the whole component. The panel heading, the club titles, the
   right edge of each thumbnail and the detail panel below the map all sit on
   these two lines. Change it here and they move together. */
.dinkum-kolective-stack,
.dinkum-kolective-detail {
	--kol-gutter: 20px;
}

/* Narrower than the plugin's 368px default, to give the map back the width
   the panel was covering. */
.dinkum-kolective-stack,
.dinkum-kolective-stack .grouping {
	width: 320px;
}

.dinkum-kolective-list {
	width: auto;
}

/* An edge against the map. The filter bar above uses a 2px brand border, so
   the panel matches it rather than floating on white. */
.dinkum-kolective-stack .grouping {
	border-left: 2px solid var(--kol-brand, #3d2a4f);
	box-shadow: -8px 0 16px rgba(0, 0, 0, 0.08);
}

/* Sticky so the city name stays visible while the list scrolls. The 20px
   inline padding is the shared gutter, so the heading lines up with the club
   titles underneath it. */
.dinkum-kolective-list-header {
	align-items: baseline;
	background: #fff;
	border-bottom: 2px solid var(--kol-brand, #3d2a4f);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	margin: 0;
	padding: 1rem var(--kol-gutter) 0.75rem;
	position: sticky;
	top: 0;
	z-index: 2;
}

.dinkum-kolective-list-title {
	color: var(--kol-brand, #3d2a4f);
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
}

.dinkum-kolective-back {
	background: none;
	border: 0;
	color: var(--kol-label, #53575f);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	padding: 0;
	text-decoration: underline;
}

.dinkum-kolective-back:hover,
.dinkum-kolective-back:focus-visible {
	color: var(--kol-brand, #3d2a4f);
}

/* The rows are buttons now, which the plugin's own listing never was. */
.dinkum-kolective-item {
	cursor: pointer;
	padding-block: 0.65rem;
	padding-inline: var(--kol-gutter);
}

/* The plugin insets the inner columns by 10px of its own. Zeroing it keeps
   the gutter above as the single source of the alignment. */
.dinkum-kolective-item .panel-list-col {
	padding-inline: 0;
}

.dinkum-kolective-item .wpgmza-title {
	font-weight: 700;
}

.dinkum-kolective-item .wpgmza-address {
	font-size: 0.875rem;
	opacity: 0.75;
}

.dinkum-kolective-item:hover,
.dinkum-kolective-item:focus-visible {
	background-color: rgba(61, 42, 79, 0.06);
}

/* The row whose detail is open below the map. */
.dinkum-kolective-item.is-active {
	background-color: rgba(61, 42, 79, 0.1);
	box-shadow: inset 3px 0 0 var(--kol-brand, #3d2a4f);
}

/* Grey behind the image so the placeholder reads as a filled slot rather
   than a gap. Scoped to our rows rather than set on .wpgmza-gallery-container
   globally, since that class also belongs to the plugin's own listings. */
.dinkum-kolective-item .wpgmza-gallery-container {
	background: #ddd;
	border-radius: 2px;
}

/* Rows all carry an image now, so they share one height. The real
   thumbnails fill the slot; the placeholder is a square logo mark and is
   fitted rather than cropped, so it isn't distorted. */
.dinkum-kolective-item .wpgmza_map_image {
	height: 64px;
	object-fit: cover;
	width: 88px;
}

.dinkum-kolective-item .wpgmza_map_image.is-placeholder {
	object-fit: contain;
	opacity: 0.45;
}

.dinkum-kolective-empty {
	color: var(--kol-label, #53575f);
	margin: 1rem 0 0;
}

/* Detail sits below the map. An info window cannot hold this much
   without fighting Google's own sizing. */
.dinkum-kolective-detail {
	border: 2px solid var(--kol-brand, #3d2a4f);
	margin-top: 1.5rem;
	padding: 1.5rem var(--kol-gutter);
}

.dinkum-kolective-detail[hidden] {
	display: none;
}

.dinkum-kolective-detail-title {
	color: var(--kol-brand, #3d2a4f);
	margin: 0;
}

.dinkum-kolective-detail-city {
	color: var(--kol-label, #53575f);
	margin: 0.25rem 0 0;
}

.dinkum-kolective-detail-description {
	margin: 1rem 0 0;
}

.dinkum-kolective-detail-links {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.dinkum-kolective-detail-link {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dinkum-kolective-detail-label {
	color: var(--kol-label, #53575f);
	flex: 0 0 6rem;
	font-weight: 700;
}

/* The marker info window.
 *
 * Google's own bubble, not the plugin's -- the map runs the Native Google
 * info window style, which has no template to override. Its markup is
 * `.gm-style-iw-c > .gm-style-iw-chr + .gm-style-iw-d`, and the plugin drops
 * our content inside the second of those.
 *
 * Scoped with :has() on the marker ID rather than to `.gm-style-iw-c`
 * outright, because that class belongs to every Google info window on the
 * site and this stylesheet loads on any page carrying a map. Browsers
 * without :has() simply get Google's default bubble.
 *
 * A city popup is two short lines, so the goal is for the box to be the size
 * of those two lines and to look like the panel beside it. */
.gm-style-iw-c:has( [data-prop-id^="city_"] ) {
	border: 2px solid var(--kol-brand, #3d2a4f);
	border-radius: 2px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

	/* Google pads this asymmetrically (12px left, nothing elsewhere) and
	   pads .gm-style-iw-d again underneath. One padding, set below. */
	padding: 0 !important;
}

/* The row Google reserves above the content for a title it never receives.
   48px tall regardless, which on a two-line popup was most of the height. */
.gm-style-iw-c:has( [data-prop-id^="city_"] ) .gm-style-iw-chr {
	height: 0;
	min-height: 0;
}

.gm-style-iw-c:has( [data-prop-id^="city_"] ) .gm-style-iw-ch {
	display: none;
}

/* Collapsing the row above drops the close button out of the corner, so it
   gets lifted out of the flow. Every declaration needs !important: Google
   writes width, height and position: relative as inline styles. */
.gm-style-iw-c:has( [data-prop-id^="city_"] ) .gm-ui-hover-effect {
	height: 30px !important;
	left: auto !important;
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	width: 30px !important;
}

.gm-style-iw-c:has( [data-prop-id^="city_"] ) .gm-ui-hover-effect > span {
	height: 13px !important;
	margin: 8px !important;
	width: 13px !important;
}

/* Scrolling is Google's answer to content taller than the map. Two lines
   never are, and the inline max-height left a scrollbar stub. */
.gm-style-iw-c:has( [data-prop-id^="city_"] ) .gm-style-iw-d {
	max-height: none !important;
	overflow: visible !important;
	padding: 13px 16px 14px;
}

/* Right padding on the title keeps a long city name clear of the close
   button, which now overlaps the first line. */
.wpgmza-infowindow[data-prop-id^="city_"] .wpgmza_infowindow_title {
	color: var(--kol-brand, #3d2a4f);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding-right: 22px;
}

.wpgmza-infowindow[data-prop-id^="city_"] .wpgmza_infowindow_description {
	color: var(--kol-label, #53575f);
	font-size: 0.875rem;
	line-height: 1.4;
	margin: 0.3rem 0 0;
}

/* Mobile: the panel is moved out of the map by kolective-map.js and sits
   underneath it, so it stops covering the thing it describes. The breakpoint
   must stay in step with MOBILE_MAX_WIDTH in that file. */
@media (max-width: 900px) {
	.dinkum-kolective-stack,
	.dinkum-kolective-stack .grouping {
		width: 100%;
	}

	.dinkum-kolective-stack {
		max-height: none;
		position: static;
	}

	/* Capped at the header plus three rows, so a fourth is never half-shown.
	   59px header + 3 x 83px row. */
	.dinkum-kolective-stack .grouping {
		border-left: 0;
		border-top: 2px solid var(--kol-brand, #3d2a4f);
		box-shadow: none;
		height: auto;
		max-height: 308px;
		overflow-y: auto;
		position: relative;
	}

	.dinkum-kolective-list {
		overflow-x: hidden;
	}

	/* Thumbnail beside the text rather than stacked under it — stacked, one
	   club filled half the screen. */
	.dinkum-kolective-item .panel-list-row {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.dinkum-kolective-item .panel-list-col:first-child {
		flex: 1 1 auto;
		min-width: 0;
	}

	.dinkum-kolective-item .panel-list-col:last-child {
		flex: 0 0 auto;
	}

	.dinkum-kolective-item .wpgmza_map_image {
		height: 56px;
		width: 72px;
	}

	.dinkum-kolective-detail-label {
		flex-basis: 100%;
	}
}