/* ============================================================
   Heron Lakes — Stores Locator: actions row + interactive map
   Shared by the Stores archive banner and the homepage "Take a Virtual
   Tour" section (template-parts/stores-locator.php). Loaded on both
   the Stores archive and the homepage (functions.php).
   ============================================================ */

/* So an anchor jump into either section lands with its own top padding
   intact instead of tucked under the sitewide fixed header. */
#stores-section,
#virtual-tour-section {
	scroll-margin-top: var(--header-height);
}

/* -------------------------------------------------------
   Locator top row — title + pill buttons

   Mobile-first: title stacked above the buttons, "Browse Shops" (always
   present, always first in the DOM) spans full width, and the two
   optional buttons (Site Plan / Aerial Photo — only rendered once their
   image field is set) sit side by side underneath. Plain flex-wrap here
   let 2 buttons land on one line and the 3rd wrap alone below it at
   certain widths — the grid below is deliberate instead.
   ------------------------------------------------------- */
.stores-locator-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	margin-block-end: var(--space-lg);
}

.stores-locator-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.625rem;
	width: 100%;
}

.stores-locator-actions .cta-button:first-child {
	grid-column: 1 / -1;
}

/* Smaller, tighter type than the header nav's CTA so "View Aerial Photo"
   fits a half-width mobile button without feeling cramped — wraps to 2
   lines rather than overflowing. Side padding (1.25rem) stays the same
   at every width; only the font/line-height tighten up on mobile. */
.stores-locator-actions .cta-button {
	font-size: 0.68rem;
	letter-spacing: 0.03em;
	padding: 10px 1.25rem;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
}

/* Enough room by 667px for all 3 buttons to share one row (still below
   the title — that only changes at 1024px, see below). */
@media (min-width: 667px) {
	.stores-locator-actions {
		display: flex;
		flex-wrap: wrap;
		width: auto;
	}

	.stores-locator-actions .cta-button:first-child {
		grid-column: auto;
	}
}

@media (min-width: 1024px) {
	.stores-locator-top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.stores-locator-actions {
		width: auto;
		/* The 667px rule above sets flex-wrap: wrap for the 3-buttons-below-
		   title layout — still in effect here since media queries stack.
		   At this width the buttons sit beside the title instead, so force
		   one row; without this, 2 buttons landed on one line and the 3rd
		   wrapped alone below it once the row got tight next to the title. */
		flex-wrap: nowrap;
	}

	.stores-locator-actions .cta-button {
		font-size: clamp(0.75rem, 0.9vw, 0.85rem);
		letter-spacing: 0.08em;
		white-space: nowrap;
	}
}

/* -------------------------------------------------------
   Homepage "Take a Virtual Tour" section — same locator block as the
   Stores banner, but on a blue gradient instead of navy/palm texture,
   and with no wave dividers (neither About Us above nor the footer
   below have one on this side).
   ------------------------------------------------------- */
.virtual-tour-section {
	background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue-bright) 100%);
}

/* -------------------------------------------------------
   Map
   ------------------------------------------------------- */
/* Photo-frame wrapper: a plain non-WebGL div, so ITS border-radius is
   guaranteed to render correctly in every browser (including Firefox,
   which won't clip the Mapbox WebGL canvas below to a rounded corner).
   The map itself is left square (see .stores-map) so its corners are
   consistent across browsers — the frame's own radius is what reads as
   "rounded" everywhere. */
.stores-map-frame {
	background: var(--color-white);
	padding: 0.9375rem;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.stores-map {
	width: 100%;
	height: clamp(320px, 45vw, 500px);
}

.stores-map-marker {
	width: 36px;
	height: 36px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

/* Mapbox's default pin (no custom icon) doesn't set its own cursor, so it
   inherits the map canvas's "grab" (drag-to-pan) cursor on hover — force
   pointer since the pin itself isn't draggable.

   All the Mapbox-class overrides below are scoped under #stores-map rather
   than left bare — mapbox-gl.css itself now loads dynamically (see
   stores-map.js), fetched only once the map is about to scroll into view,
   so it lands in <head> AFTER this stylesheet. At equal specificity the
   later stylesheet wins ties, which meant Mapbox's own defaults were
   silently overriding these customizations. The extra #stores-map ancestor
   bumps specificity so ours always wins regardless of load order. */
#stores-map .mapboxgl-marker {
	cursor: pointer;
}

#stores-map .mapboxgl-popup-content {
	padding: 0.9375rem;
	border-radius: var(--radius-lg);
}

/* Mapbox flips the popup's anchor (top/bottom/left/right, plus the four
   diagonal corners) depending on how close the pin sits to the map's edge,
   so its little triangle "tip" always points back at the pin. The default
   tip sits flush at the content box's literal corner (left/right: -1px) —
   fine for a near-square box, but with the rounded corner above, the tip
   ends up floating past the curve instead of meeting a flat edge. Nudge
   just the four diagonal-anchor tips inward by the radius so they land on
   the flat part of the edge, just past the curve. Top/bottom/left/right
   (centered) anchors are unaffected — their tip is already centered clear
   of any corner.
*/
#stores-map .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
#stores-map .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
	left: var(--radius-lg);
}

#stores-map .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
#stores-map .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
	right: var(--radius-lg);
}

/* Default close button sits flush at the content box's outer corner —
   inset it and size it up a bit for an easier, more deliberate target. */
#stores-map .mapboxgl-popup-close-button {
	top: 0.4rem;
	right: 0.4rem;
	width: 22px;
	height: 22px;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--color-navy);
}

#stores-map .mapboxgl-popup-close-button:hover {
	background: none;
}

.stores-map-popup {
	font-family: var(--font-body);
	min-width: 180px;
}

.stores-map-popup-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-navy);
	margin: 0 0 4px;
}

.stores-map-popup-location {
	font-size: 0.8rem;
	color: #666;
	margin: 0 0 10px;
}

.stores-map-popup-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.stores-map-popup-link {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-blue-bright);
	cursor: pointer;
	text-align: left;
}

.stores-map-popup-actions a {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-blue-bright);
	text-decoration: none;
}

.stores-map-popup-link:hover,
.stores-map-popup-actions a:hover {
	text-decoration: underline;
}

/* Mouse clicks shouldn't leave a lingering focus ring on these popup
   links — keep it for keyboard navigation only (:focus-visible). */
.stores-map-popup-link:focus,
.stores-map-popup-actions a:focus {
	outline: none;
}

.stores-map-popup-link:focus-visible,
.stores-map-popup-actions a:focus-visible {
	outline: 2px solid var(--color-blue-bright);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}