/* WordPress / Contact Form 7 adaptations for the All Pest Free theme.
   styles.css is the untouched reference stylesheet; everything WordPress- or
   CF7-specific lives here so the two can be diffed against the source site. */

/* ---------- WordPress admin bar: keep the sticky header below it ---------- */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } }

/* ---------- Contact Form 7 structure mapped onto the quote form ----------
   CF7 wraps every control in <span class="wpcf7-form-control-wrap"> and
   renders radio groups as <span class="wpcf7-radio"><span class="wpcf7-list-item">
   <label><input><span class="wpcf7-list-item-label">…  These rules make that
   structure render exactly like the reference .qchip / .field markup. */
.qform .wpcf7-form-control-wrap { display: block; }
.qchips .wpcf7-form-control-wrap,
.qchips .wpcf7-radio,
.qchips .wpcf7-radio .wpcf7-list-item { display: contents; }

.qchips .wpcf7-list-item label {
  position: relative; cursor: var(--cur-lock), pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; text-align: center; padding: .85rem .4rem; min-height: 82px;
  border: 1px solid var(--line); background: var(--white);
  font-size: .82rem; font-weight: 500; color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
}
.qchips .wpcf7-list-item label::before {
  font-family: "Material Symbols Outlined";
  content: var(--chip-icon, "pest_control");
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 24px; color: var(--green-600); pointer-events: none;
}
.qchips .wpcf7-list-item input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: var(--cur-lock), pointer;
}
.qchips .wpcf7-list-item-label { pointer-events: none; }
.qchips .wpcf7-list-item label:hover { border-color: var(--green-300); background: var(--green-100); }
.qchips .wpcf7-list-item label:has(input:checked) {
  border-color: var(--green-500); background: var(--green-100);
  color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-500);
}
.qchips .wpcf7-list-item label:has(input:focus-visible) {
  outline: 3px solid var(--green-500); outline-offset: 2px;
}

/* Icon per chip. Chips are defined by the form in the CF7 editor; the icons
   here follow that order (pest step, then property step). */
.qchips--pest .wpcf7-list-item:nth-child(1) { --chip-icon: "pest_control"; }
.qchips--pest .wpcf7-list-item:nth-child(2) { --chip-icon: "home_repair_service"; }
.qchips--pest .wpcf7-list-item:nth-child(3) { --chip-icon: "pest_control_rodent"; }
.qchips--pest .wpcf7-list-item:nth-child(4) { --chip-icon: "pest_control"; }
.qchips--pest .wpcf7-list-item:nth-child(5) { --chip-icon: "pest_control"; }
.qchips--pest .wpcf7-list-item:nth-child(6) { --chip-icon: "pest_control"; }
.qchips--pest .wpcf7-list-item:nth-child(7) { --chip-icon: "more_horiz"; }
.qchips--prop .wpcf7-list-item:nth-child(1) { --chip-icon: "home"; }
.qchips--prop .wpcf7-list-item:nth-child(2) { --chip-icon: "business_center"; }

/* Two-up property chips keep the row layout of the reference. */
.qchips--2 .wpcf7-list-item label {
  flex-direction: row; gap: .55rem; min-height: 62px; font-size: .95rem;
}

/* The last pest chip ("Something else") spans the full row, matching the
   reference's .qchip--other. CF7 marks the final option with .last; the
   list-item wrapper is display:contents, so the LABEL is the grid item. */
.qchips--pest .wpcf7-list-item.last label { grid-column: 1 / -1; }

/* Field-level validation + response output, in the site's palette. */
.qform .wpcf7-not-valid-tip {
  display: block; color: #B3261E; font-size: .84rem; font-weight: 500; margin-top: .35rem;
}
.qchips .wpcf7-not-valid-tip { grid-column: 1 / -1; margin-top: 0; }
.wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0; padding: .7rem .9rem; border: 1px solid var(--line);
  font-size: .86rem; color: var(--ink);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--green-500); background: var(--green-100); color: var(--green-700); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #B3261E; color: #B3261E; background: #FBEDEC; }
.wpcf7-spinner { margin: 0 0 0 .5rem; align-self: center; }

/* The optional "which pest" reveal keeps its hidden state. */
.qform__other[hidden] { display: none; }

/* ---------- Small WordPress content resets ---------- */
.prose img { max-width: 100%; height: auto; }
img.alignright { float: right; margin: 0 0 1rem 1.5rem; }
img.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
img.aligncenter { display: block; margin: 0 auto 1rem; }
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px;
  word-wrap: normal !important;
}

/* ---------- Service-area map (Leaflet over OpenStreetMap) ----------
   Replaces the schematic SVG map. The container creates its own stacking
   context so Leaflet's internal z-indexes stay below the sticky header. */
.amap__map {
  width: 100%; aspect-ratio: 1000 / 620; min-height: 340px;
  border: 1px solid var(--line); background: var(--green-100);
  position: relative; z-index: 0; isolation: isolate;
}
.leaflet-container { font-family: var(--font-body); font-size: .82rem; }
.leaflet-container a { color: var(--green-700); }

/* Brand marker (divIcon) */
.amap-pin { background: none; border: none; }
.amap-pin svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(13, 47, 10, .35));
  transition: opacity .15s, transform .15s;
}
.amap-pin:hover svg { transform: translateY(-2px); }
.amap-pin.is-dim { opacity: .25; }

/* Popup, in the site's visual language */
.leaflet-popup-content-wrapper {
  border-radius: 0; border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(13, 47, 10, .18);
}
.leaflet-popup-content { margin: 12px 14px; line-height: 1.45; color: var(--ink); }
.amap-pop__name {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: .98rem; margin-bottom: .1rem;
}
.amap-pop__meta { display: block; font-size: .74rem; color: var(--muted); margin-bottom: .2rem; }
.amap-pop__link {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem;
  color: var(--green-700); font-weight: 600; text-decoration: none;
  font-family: var(--font-display); font-size: .84rem;
}
.amap-pop__link:hover { color: var(--green-600); }
.amap-pop__link .material-symbols-outlined { font-size: 16px; }
.leaflet-popup-tip { border: 1px solid var(--line); }

/* Zoom control squared off to match the design */
.leaflet-touch .leaflet-bar, .leaflet-bar { border-radius: 0; border: 1px solid var(--line); }
.leaflet-bar a { color: var(--ink); }
.leaflet-bar a:hover { background: var(--green-100); }