/* =============================================================================
 * FILE:      ES_Nearby.css
 * LOCATION:  assets/CSS/ES_Nearby.css (under the ease-see domain root)
 * PART OF:   ease-see (ease-see.com) - public site: the 'nearby' block
 * PURPOSE:   The look of the nearby block on a place to stay's own page
 *            (Render/ES_Nearby.php, agreed 2026-10-26): the distance note, the
 *            map's frame, the lists per type with their icon, and the icons
 *            in the map's legend (es-map-legend-icon, es_map_html()). Its own
 *            file because ES_Core.css is parked for splitting; linked once by
 *            the block itself. Colours inherit from the page so the site's
 *            own palette shows through.
 * CREATED:   2026-10-26
 * UPDATED:   2026-10-26  (evening) the names in the lists are buttons that
 *            open the place on the map (es-nearby-open) - drawn as links; the
 *            pop-up's lines: distance, phone, website, email and the
 *            directions button (es-nearby-pop ...).
 *            (late) the directions are now the site's delivery lozenges
 *            (es-act-dev-towns--deliver, ES_Core.css) - only the gap above
 *            them is set here.
 *            (late night) a type's heading is a toggle for the map
 *            (es-nearby-toggle): underlined while off, bold with a ring round
 *            its icon while on; the hint under the map (es-nearby-hint).
 * UPDATED:   2026-10-27  (on trial) how many beside each heading
 *            (es-nearby-count), and a small arrow showing whether its list is
 *            open; the lists start closed (the hidden attribute).
 *            (later) "Search this area" / "Back to the nearest" sit OVER the
 *            top of the map (es-nearby-area) - the page never moves.
 * =============================================================================
 */
.es-block-nearby .es-nearby-note { margin: 0.25rem 0 1rem; font-size: 0.9rem; opacity: 0.75; max-width: 60ch; }
.es-block-nearby .es-nearby-map { margin: 0 0 1.5rem; }
.es-block-nearby .es-nearby-map .es-map-canvas { min-height: 360px; }

.es-nearby-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem 2rem; }
.es-nearby-type { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 1.05rem; }
.es-nearby-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.es-nearby-list { list-style: none; margin: 0; padding: 0; }
.es-nearby-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.es-nearby-item:last-child { border-bottom: 0; }
.es-nearby-dist { white-space: nowrap; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* the icons in a map's legend (any map whose classes carry an icon) */
.es-map-legend-icon { width: 18px; height: 18px; vertical-align: middle; }

/* 2026-10-26 (evening): a name in a list opens its place on the map */
.es-nearby-open { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left;
                  cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
                  text-decoration-color: rgba(0,0,0,0.3); }
.es-nearby-open:hover, .es-nearby-open:focus-visible { text-decoration-color: currentColor; }

/* the pop-up on the map */
.es-nearby-pop { display: flex; flex-direction: column; gap: 0.2rem; min-width: 180px; }
.es-nearby-pop-dist { opacity: 0.7; font-size: 0.9em; }
.es-nearby-pop-line { overflow-wrap: anywhere; }
.es-nearby-pop .es-nearby-pop-dir { margin-top: 0.4rem; }   /* 2026-10-26 (late): the delivery lozenges' own look - only the gap above */

/* 2026-10-26 (late night): a type's heading switches it on / off on the map */
.es-nearby-toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; padding: 0; margin: 0;
                    font: inherit; color: inherit; cursor: pointer; text-align: left; }
.es-nearby-toggle[aria-pressed="false"] span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
                    text-decoration-color: rgba(0,0,0,0.3); font-weight: normal; }
.es-nearby-toggle[aria-pressed="false"]:hover span { text-decoration-color: currentColor; }
.es-nearby-toggle[aria-pressed="true"] span { font-weight: 700; }
.es-nearby-toggle[aria-pressed="true"] .es-nearby-icon { border-radius: 50%; box-shadow: 0 0 0 2px currentColor; }
.es-block-nearby .es-nearby-hint { margin: -1rem 0 1.5rem; font-size: 0.9rem; opacity: 0.75; }

/* 2026-10-27 (on trial): how many, and whether the list is open */
.es-nearby-count { opacity: 0.6; font-weight: normal; }
.es-nearby-toggle::after { content: ''; width: 0.45em; height: 0.45em; margin-left: 0.15rem; border-right: 2px solid currentColor;
                           border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.6; transition: transform 0.15s; }
.es-nearby-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.es-nearby-list[hidden] { display: none; }

/* 2026-10-27 (later): "Search this area" over the top of the map - nothing moves */
.es-block-nearby .es-map { position: relative; }
.es-nearby-area { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; gap: 0.5rem; pointer-events: none; }
.es-nearby-area .es-btn { pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.25); white-space: nowrap; }
.es-nearby-area .es-btn[hidden] { display: none; }
.es-nearby-area .es-btn[disabled] { opacity: 0.6; cursor: progress; }