/**
 * PWS Places for Budapest77 - frontend map module styling.
 *
 * Loaded on demand by the [pws_places_map] shortcode (registered as
 * `pws-pfbp-map` in PWS_PFBP_Shortcodes::register_assets, enqueued
 * inside render_map). Per-instance map heights stay inline in the
 * shortcode output - those need PHP-rendered values and can't be
 * extracted to a static file.
 *
 * @package PWS_Places_for_Budapest77
 * @since   0.7.0
 */

/* ----------------------------------------------------------------
 * Map wrapper + filter UI
 * ---------------------------------------------------------------- */

.pws-pfbp-map-wrap {
	margin: 1.8em 0;
}

.map-nomargin .pws-pfbp-map-wrap {
	margin: 0;
}

/* ----------------------------------------------------------------
 * Fill mode (v1.4.0, Decision 23)
 *
 * The wrap becomes a full-height flex column: the filter bar takes
 * its natural height, the map element grows to fill whatever is
 * left. This is the robust answer to "map fills the rest of the
 * screen" when the filter bar's height varies between viewports
 * (one row on desktop, several wrapped rows on a phone).
 *
 * The wrap height is computed in JS as
 *   window.innerHeight - wrap.getBoundingClientRect().top
 * (both measured against the same layout-viewport top, so there is
 * no dvh-vs-rect mismatch and nothing above the wrap is double
 * counted). The result is written as a pixel value to the
 * --pws-pfbp-fill-height custom property. The fallback below
 * (a dvh estimate) only applies before the script runs, so the map
 * is roughly right on first paint and never collapses to zero.
 *
 * Enabled per-map: the shortcode adds the --fill modifier class only
 * when the saved map is in 'special' (fill) height-mode, and in that
 * mode the shortcode does NOT emit a per-instance height on the map
 * element (so there's no inline-ID rule to fight). Normal fixed-height
 * maps and the single-marker mini map are unaffected.
 * ---------------------------------------------------------------- */

.pws-pfbp-map-wrap--fill {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: var(--pws-pfbp-fill-height, calc(100dvh - var(--pws-pfbp-fill-top, 77px)));
}

.pws-pfbp-map-wrap--fill .pws-pfbp-map-filters {
	flex: 0 0 auto;
}

.pws-pfbp-map-wrap--fill .pws-pfbp-map {
	flex: 1 1 auto;
	min-height: 0; /* let the flex child shrink below its content/basis */
}

.pws-pfbp-map-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 0em;
	font-size: 0.9em;
}

.pws-pfbp-filter-group {
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 0.6em 0.75em 0.5em;
	border-radius: 4px;
	margin: 0;
	background: #ffffff;
}

.pws-pfbp-filter-group legend {
	padding: 0 0.4em;
	font-weight: 600 !important;
	font-size: 0.9em !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.55);
}

.pws-pfbp-filter-group label {
	display: inline-block;
	margin: 0 0.75em 0.15em 0;
	cursor: pointer;
}

.pws-pfbp-filter-group input[type="checkbox"] {
	margin-right: 0.25em;
	position: relative;
	top: 2px;
}

/* ----------------------------------------------------------------
 * Narrow-viewport filter layout (v1.3.1)
 *
 * On phones the two filter fieldsets (Cimke/Kategoria + Statusz)
 * crowd each other when they try to share a row. Below 600px each
 * group takes the full row width so the checkbox labels have room
 * to breathe and stop colliding. The #map-navi buttons (Fooldal /
 * Helyek) are NOT part of this plugin - the theme's custom.css owns
 * their responsive placement - so nothing here touches them.
 * ---------------------------------------------------------------- */

@media (max-width: 600px) {
	.pws-pfbp-map-filters {
		gap: 0.6em;
	}

	.pws-pfbp-filter-group {
		flex: 1 1 100%;
	}
		.pws-pfbp-filter-group.pws-pfbp-filter-terms {
		margin-bottom: 0px !important;
	}
}

/* ----------------------------------------------------------------
 * Popup card
 *
 * Composed (top -> bottom):
 *   - optional image (linked to permalink)
 *   - title (linked to permalink)
 *   - optional short description (post excerpt)
 *   - meta line: tags + (optional) status
 *   - optional "Olvasd el ->" link
 *
 * Visibility of image / description / status / read-more is
 * configured per saved map (Decision 12).
 * ---------------------------------------------------------------- */
 
.pws-pfbp-popup-card {
	font-size: 14px;
	line-height: 1.4;
	min-width: 200px;
}

.leaflet-popup-content {
	margin: 20px 20px 13px !important;
}
.pws-pfbp-popup-card img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 0.5em;
	border-radius: 2px;
}

.pws-pfbp-popup-title {
	margin: 0 0 0.25em;
	font-size: 1.05em;
	line-height: 1.25;
	letter-spacing: .036em;
}

.pws-pfbp-popup-title a {
	text-decoration: none;
}

.pws-pfbp-popup-desc {
	margin: 0.25em 0 0.5em;
	font-size: 0.95em;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.75);
}

.pws-pfbp-popup-meta {
	font-size: 0.85em;
	color: rgba(0, 0, 0, 0.6);
}

.pws-pfbp-popup-link {
	display: inline-block;
	margin-top: 0.5em;
	font-size: 0.95em;
	font-weight: 600;
	text-decoration: none;
}

/* Status visual depth - opacity gradient on the popup card.
   The marker icon's opacity is handled separately in JS. */
.pws-pfbp-popup-card.is-eltunt {
	opacity: 0.85;
}

.pws-pfbp-popup-card.is-atalakult {
	opacity: 0.92;
}

/* ----------------------------------------------------------------
 * Single-marker map variant (v0.8.0)
 *
 * Used by [pws_places_map_single] (rendered into the post body) and
 * the Budapest77 helyek single mini-térkép widget (rendered into the
 * sidebar). Both share the .pws-pfbp-map-single class so a single
 * custom.css rule can target both, or each can be targeted by its
 * specific ID (pws-pfbp-map-single-content / -sidebar).
 *
 * The default height below is a fallback - Géza is expected to
 * override it in custom.css for desktop/mobile breakpoints to fit
 * the editorial layout. Without this fallback the map element would
 * collapse to zero height (Leaflet needs an explicit height on its
 * container).
 * ---------------------------------------------------------------- */

.pws-pfbp-map-single {
	height: 300px;
}

/* ----------------------------------------------------------------
 * Mobile popup sizing (v0.8.2)
 *
 * On narrow viewports Leaflet sizes the popup to the natural width
 * of its content, which can produce a ~320px bubble that dominates
 * the map area on a phone. Cap the popup bubble to a fraction of the
 * viewport so it stays comfortably inside the map, and tighten the
 * inner margins so the narrower bubble doesn't starve the text of
 * horizontal room.
 *
 * Targets all Leaflet popups rendered by the plugin (multi-marker
 * and single-marker share the same .leaflet-popup chrome).
 * ---------------------------------------------------------------- */

@media (max-width: 480px) {
	.leaflet-popup-content-wrapper {
		max-width: 75vw;
	}

	.leaflet-popup-content {
		margin: 14px 14px 10px !important;
	}

	/* Hide the popup featured image on phones - in the narrow bubble it
	   pushes the title and description down; the text is the priority. */
	.pws-pfbp-popup-card img {
		display: none;
	}
}