/* Lake Martin Client Map — front end. Inherits the theme's fonts on purpose. */

.lmcm {
  /* Pulled from the site's Avada palette: Default Text, Active Link, Callout Box BG, Dark Blue. */
  --lmcm-ink: #00032A;
  --lmcm-muted: #7A7C8D;
  --lmcm-paper: #FFFFFF;
  --lmcm-line: #E3E5EC;
  --lmcm-dark: #233645;
  --lmcm-pin: 11px;
  position: relative;
  width: 100%;
  font: inherit;
  color: var(--lmcm-ink);
}

.lmcm__canvas {
  width: 100%;
  height: min(var(--lmcm-h, 640px), 78vh);
  min-height: 320px;
  border-radius: 4px;
  overflow: hidden;
  background: #DCE8EE; /* lake-water tone while tiles load */
}

.lmcm__error {
  margin: 0;
  padding: 2rem;
  color: var(--lmcm-muted);
}

/* ---------- Pins ---------- */

.lmcm[data-size="far"]  { --lmcm-pin: 24px; }
.lmcm[data-size="mid"]  { --lmcm-pin: 32px; }
.lmcm[data-size="near"] { --lmcm-pin: 42px; }

.lmcm-pin {
  cursor: pointer;
  line-height: 0;
}

.lmcm-pin svg {
  display: block;
  height: var(--lmcm-pin);
  width: auto;
  overflow: visible;
  transform-origin: 50% 100%;
  transition: height 0.18s ease, transform 0.12s ease;
  animation: lmcm-sprout 0.45s cubic-bezier(0.25, 1.5, 0.45, 1) both;
  filter: drop-shadow(0 1px 2px rgba(0, 3, 42, 0.35));
}

.lmcm-pin__body {
  fill: var(--lmcm-pin-color, var(--lmcm-current, #0389F7));
  transition: fill 0.15s ease;
  stroke: #fff;
  stroke-width: 2.5;
}

.lmcm-pin:hover svg,
.lmcm-pin:focus-visible svg {
  transform: scale(1.12);
}

@keyframes lmcm-sprout {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lmcm-pin svg { animation: none; transition: none; }
}

/* Home base: bigger pin, dark so it reads as "us", with the logo in the head. */
.lmcm-pin--hq {
  position: relative;
  --lmcm-hq: calc(var(--lmcm-pin) * 1.45);
}

.lmcm-pin--hq svg { height: var(--lmcm-hq); display: block; }

.lmcm-pin--hq .lmcm-pin__body {
  fill: var(--lmcm-dark, #233645);
  stroke-width: 3;
}

.lmcm-pin--hq.has-logo svg circle,
.lmcm-pin--hq.has-logo svg path:not(.lmcm-pin__body) { display: none; }

.lmcm-pin__logo {
  position: absolute;
  left: 50%;
  top: calc(var(--lmcm-hq) * 0.368); /* centre of the pin head */
  width: calc(var(--lmcm-hq) * 0.54);
  height: calc(var(--lmcm-hq) * 0.54);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.lmcm-pin__logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
}

/* Search result marker: a hollow ring so it never reads as a client. */
.lmcm-searched {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--lmcm-dark);
  background: rgba(255, 255, 255, 0.55);
  transform: translateY(50%);
  box-shadow: 0 0 0 2px #fff;
}

/* ---------- Panel ---------- */

.lmcm-panel-host {
  margin: 12px;
  max-width: calc(100% - 24px);
}

.lmcm-panel {
  width: 264px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 16px 18px 14px;
  background: var(--lmcm-paper);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lmcm-ink);
  text-align: left;
}

.lmcm-panel p { margin: 0; }

.lmcm-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lmcm-panel__stat {
  font-size: 52px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--lmcm-current, #0389F7);
  font-variant-numeric: tabular-nums;
}

.lmcm-panel__logo {
  width: auto;
  height: 38px;
  max-width: 45%;
  object-fit: contain;
  display: block;
}

.lmcm .lmcm-panel__headline {
  margin-top: 6px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--lmcm-ink);
}

.lmcm-panel__count {
  color: var(--lmcm-current, #0389F7);
  font-variant-numeric: tabular-nums;
}

.lmcm-services {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lmcm-line);
}

.lmcm .lmcm-services__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lmcm-muted);
  margin-bottom: 6px;
}

.lmcm-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px; /* fits the six service categories without a scrollbar */
  overflow-y: auto;
}

.lmcm-services__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lmcm-service {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 6px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--lmcm-muted);
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.lmcm-service:hover { background: #F3F6FA; }

.lmcm-service.is-on {
  color: var(--lmcm-ink);
  background: #EDF4FB;
}

.lmcm-service__swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 3px;
}

.lmcm-service__name { flex: 1; }

.lmcm-service__n {
  font-variant-numeric: tabular-nums;
  color: var(--lmcm-muted);
}

.lmcm-services__clear {
  font: inherit;
  font-size: 12px;
  margin-top: 6px;
  padding: 0;
  color: var(--lmcm-muted);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.lmcm .lmcm-panel__hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--lmcm-muted);
}

.lmcm-search {
  display: flex;
  gap: 6px;
  margin: 12px 0 0;
}

.lmcm-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  color: var(--lmcm-ink);
  background: #fff;
  border: 1px solid var(--lmcm-line);
  border-radius: 2px;
  box-sizing: border-box;
}

.lmcm-search input:focus {
  outline: 2px solid var(--lmcm-current, #0389F7);
  outline-offset: 1px;
}

.lmcm-search button,
.lmcm-reset {
  height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase; /* matches the site's Avada buttons */
  color: #fff;
  background: var(--lmcm-current, #0389F7);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.lmcm-search button:hover { background: #1799FF; } /* site hover blue */
.lmcm-reset:hover { color: var(--lmcm-current, #0389F7); }

.lmcm-search button:focus-visible,
.lmcm-reset:focus-visible {
  outline: 2px solid var(--lmcm-dark);
  outline-offset: 2px;
}

.lmcm .lmcm-search__msg {
  margin-top: 6px;
  font-size: 13px;
  color: #8A2D1C;
}

.lmcm-search__msg:empty { display: none; }

.lmcm-reset {
  margin: 0 10px 10px 0;
  color: var(--lmcm-ink);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lmcm.is-zoomed .lmcm-reset {
  opacity: 1;
  pointer-events: auto;
}

.lmcm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Info window ---------- */

.lmcm-info { font: inherit; font-size: 14px; line-height: 1.4; color: #00032A; }
.lmcm-info p { margin: 0; }
.lmcm-info__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lmcm-info__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.lmcm-info__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lmcm .lmcm-info__name {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.lmcm .lmcm-info__prefix {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lmcm-current, #0389F7);
}

.lmcm-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}

.lmcm-info__tags li {
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px 5px 7px;
  color: var(--lmcm-ink, #00032A);
  background: #F2F5F9;
  border-left: 3px solid var(--lmcm-tag-color, #0389F7);
  border-radius: 3px;
}
.lmcm-info__since { color: var(--lmcm-muted, #7A7C8D); font-size: 14px; }

/* ---------- Phones ---------- */

/* Narrow layouts: panel moves below the map (set by map.js). */
.lmcm.is-stacked .lmcm__canvas {
  height: min(var(--lmcm-h, 640px), 62vh);
  border-radius: 4px 4px 0 0;
}

.lmcm.is-stacked .lmcm-panel-host {
  margin: 0;
  max-width: none;
}

.lmcm.is-stacked .lmcm-panel {
  width: 100%;
  border-radius: 0 0 4px 4px;
  box-shadow: none;
  border: 1px solid var(--lmcm-line);
  border-top: 0;
}

.lmcm.is-stacked .lmcm-search input,
.lmcm.is-stacked .lmcm-search button { height: 42px; font-size: 16px; } /* 16px stops iOS zooming on focus */


/* ------------------------------------------------------------------
   Overrides
   Everything above is plain CSS with no !important, so you can restyle
   any of it from the theme's Custom CSS. Prefix with .lmcm to win on
   specificity. The pieces, in order of appearance:

   .lmcm                   outer wrapper (holds the colour variables)
   .lmcm__canvas           the map itself
   .lmcm-panel             white card on the map
   .lmcm-panel__stat       the big count
   .lmcm-panel__logo       logo beside the count
   .lmcm-panel__headline   wording under the count
   .lmcm-services__title   "View by services"
   .lmcm-service           one service row (.is-on when chosen)
   .lmcm-service__swatch   its colour square
   .lmcm-panel__hint       "Zoom in to find your neighbors."
   .lmcm-search            the search box and button
   .lmcm-pin               a client pin (.lmcm-pin--hq for home base)
   .lmcm-pin__body         the pin shape, for fill and stroke
   .lmcm-info__avatar      circle with the client's initial
   .lmcm-info__name        name in the popup
   .lmcm-info__since       "Client since 2023"
   .lmcm-info__prefix      "Complete Landscaping Services:"
   .lmcm-info__tags li     one service pill

   Colours come from variables set on .lmcm, so this restyles everything
   at once:

   .lmcm {
     --lmcm-current: #0389F7;   pin and accent colour
     --lmcm-ink:     #00032A;   headings
     --lmcm-muted:   #7A7C8D;   secondary text
     --lmcm-line:    #E3E5EC;   hairlines
     --lmcm-dark:    #233645;   home-base pin
   }
------------------------------------------------------------------ */