/* ============================================================================
 * bc-phase13-wind-zoom.css  — Phase 13 (Wind label clustering on iPad/PC)
 * ----------------------------------------------------------------------------
 * Brett's call: "Arrows only at low zoom on iPad/PC. Tap for knots/direction.
 *               Labels return when zoomed in. Mobile unchanged."
 *
 * Why: at the default whole-of-bay zoom on iPad + PC, 12 wind stations crowd
 * Phillip Island and the Heads. The labels stack on top of each other and
 * become unreadable — breaks Rule 3 (Usability) and the "Right info" link of
 * the formula.
 *
 * Logic:
 *   - On iPad / PC (body:not(.v27-mobile)), when the map is zoomed out far
 *     enough that labels overlap (.bc-wind-low-zoom class on body, set by
 *     bc-phase13-wind-zoom.js when zoom < 10), hide the text labels but keep
 *     the arrows fully visible. Tap arrow -> popup still shows kn + direction.
 *   - When user zooms in (zoom >= 10), labels return.
 *   - Mobile (body.v27-mobile) is untouched — they fit one bay at a time.
 *
 * Safety lock: arrows always render. Popup data unchanged. No layout shifts
 *              outside the map area. Desktop pixel-stable above zoom 10.
 * ============================================================================ */

/* iPad + PC, low zoom: hide the kn + name labels, keep the arrow. */
body:not(.v27-mobile).bc-wind-low-zoom .leaflet-marker-icon.wv-icon .wv-label,
body:not(.v27-mobile).bc-wind-low-zoom .leaflet-marker-icon.wv-icon .wv-name {
  display: none !important;
}

/* When labels are hidden, recentre the arrow inside the icon box so the
   marker still pins the correct lat/lng visually. The original iconAnchor
   is [55, 46] for a 110x92 box that holds arrow + label + name. With labels
   gone, the arrow alone (~48x48) was floating high; nudge it to centre. */
body:not(.v27-mobile).bc-wind-low-zoom .leaflet-marker-icon.wv-icon .wind-vector {
  align-items: center;
  justify-content: center;
}
body:not(.v27-mobile).bc-wind-low-zoom .leaflet-marker-icon.wv-icon .wv-arrow-wrap {
  margin-top: 22px; /* compensate for missing label height */
}