/* WordPress + Contact Form 7 adjustments. Loaded after styles.css.
   Maps CF7's own markup onto the reference form design so nothing looks
   "pluginy". Keep this file for CF7/WP-specific rules only. */

/* CF7 wraps every control in a span; make it transparent to layout. */
.field .wpcf7-form-control-wrap,
.check-group--chips .wpcf7-form-control-wrap { display: block; }

/* ---- Services checkboxes as pill chips (ports .check-pill) ---- */
.check-group--chips .wpcf7-checkbox { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .check-group--chips .wpcf7-checkbox { grid-template-columns: repeat(2, 1fr); } }
.check-group--chips .wpcf7-list-item { margin: 0; display: block; }
.check-group--chips .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.check-group--chips .wpcf7-list-item label:hover { border-color: var(--accent); }
.check-group--chips .wpcf7-list-item input[type="checkbox"] {
  accent-color: var(--brand-red);
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
}
.check-group--chips .wpcf7-list-item label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(143, 4, 12, 0.35);
}
.check-group--chips .wpcf7-list-item-label { font-weight: 500; }

/* Light context inside the quote form panel (white pills, red accents). */
.quote-form-panel .check-group--chips .wpcf7-list-item label { background: var(--white); border-color: var(--line); color: var(--text); }
.quote-form-panel .check-group--chips .wpcf7-list-item label:hover { border-color: var(--brand-red); }
.quote-form-panel .check-group--chips .wpcf7-list-item label:has(input:checked) { border-color: var(--brand-red); background: rgba(222, 8, 17, 0.06); }

/* ---- Validation + response styling ---- */
.wpcf7-not-valid-tip { color: var(--red); font-size: 13px; margin-top: 6px; display: block; }
.wpcf7 .wpcf7-form-control.wpcf7-not-valid { border-color: var(--red); }
.wpcf7-response-output { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin: 16px 0 0; font-size: 14px; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--red); }
.wpcf7 form.sent .wpcf7-response-output { border-color: #2e7d32; }
.wpcf7-spinner { margin: 0 0 0 10px; }
/* CF7 submit inherits .btn via class:btn; ensure input reset doesn't fight it. */
.wpcf7 input.wpcf7-submit.btn { -webkit-appearance: none; appearance: none; }

/* ---- "Back" button (step 2) ----
   The markup uses .btn--ghost-dark (white text + white border), which is
   designed for dark backgrounds — on the white quote form it was invisible.
   Make it readable on the light surface, in both the page form and the modal. */
.quote-form-panel .btn--ghost-dark,
.qmodal .btn--ghost-dark {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.quote-form-panel .btn--ghost-dark:hover,
.quote-form-panel .btn--ghost-dark:focus-visible,
.qmodal .btn--ghost-dark:hover,
.qmodal .btn--ghost-dark:focus-visible {
  background: var(--ink);
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* ============================================================
   Follow-up fixes (review round 2)
   ============================================================ */

/* --- Services checkboxes: full-width pills (1:1 with reference) ---
   The wrapper carries `.check-group` (a 2-col grid in styles.css) AND holds
   CF7's own `.wpcf7-checkbox` grid, so the control was trapped in one 383px
   grid cell and every pill halved to ~187px, wrapping the labels. Let the CF7
   checkbox grid be the ONLY grid so pills span the full field width. */
.check-group.check-group--chips { display: block; }
.check-group--chips .wpcf7-form-control-wrap,
.check-group--chips .wpcf7-checkbox { width: 100%; }


/* --- Suburb coverage map (Leaflet) on Area pages ---
   Sits between the suburb search and the suburb list. Styled to match the
   Contact page .map-embed (bordered, rounded, muted surface). */
.suburb-map-wrap {
  margin: 2px 0 34px;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
}
.suburb-map { width: 100%; height: clamp(320px, 44vw, 460px); }
.suburb-map .leaflet-container { font: inherit; background: #e9e5e2; }
/* Muted, Positron-like basemap from free OSM tiles; pins stay red (SVG). */
.suburb-map .leaflet-tile { filter: grayscale(1) brightness(1.05) contrast(0.92); }
.suburb-map .leaflet-popup-content { margin: 10px 14px; font-size: 14px; line-height: 1.4; }
.suburb-map .leaflet-popup-content strong { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em; }
.suburb-map .leaflet-control-attribution { font-size: 10px; }
.suburb-map .leaflet-bar a { color: var(--ink); }

/* --- Free-quote hero/offer cards: keep the arrow clear of the headline ---
   "Get your Free Quote" at 38px renders ~300-312px in this display font and
   fills the 360px card almost exactly, so the arrow glyph crowds the final "e"
   of "Quote". The kerned width is unstable, so opening space via padding alone
   isn't reliable. Cap the headline a touch at desktop so there is always a
   clean gap between the headline and the arrow. */
@media (min-width: 1024px) {
  .phero__cta-text strong,
  .obanner__cta-text strong,
  .special__cta-text strong { font-size: clamp(30px, 2.15vw, 33px); }
}

/* ============================================================
   Suburb landing pages (template-suburb.php)
   ============================================================ */

/* Second line of the suburb H1 ("ultra low prices"), preserving the original
   heading text as one <h1> while reading as a subtitle. */
.phero__suffix {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.5em;
  letter-spacing: 0.01em;
  opacity: 0.72;
  margin-top: 0.15em;
}

/* Body + sticky aside layout. */
.suburb-layout { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 960px) {
  .suburb-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
}

.suburb-body { max-width: none; }
.suburb-body > * + * { margin-top: 1.05em; }
.suburb-body h2 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 1.6em; }
.suburb-body h2:first-child { margin-top: 0; }
.suburb-body h3 { font-size: clamp(18px, 1.5vw, 21px); margin-top: 1.4em; }
.suburb-body ul { margin-left: 0; padding-left: 1.15em; list-style: disc; }
.suburb-body li { margin-top: 0.4em; }

.suburb-aside { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 960px) { .suburb-aside { position: sticky; top: 24px; } }
.suburb-aside .quote-panel { margin: 0; }

.suburb-map-wrap--single { margin: 0; }
.suburb-map--single { height: 240px; }

.suburb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
}
.suburb-back:hover { text-decoration: underline; }
.suburb-back svg { width: 18px; height: 18px; }

/* Suburb aside quote CTA — the service-page CTA panel switches to a 3-column
   grid at >=860px, which collapses inside the 340px sidebar (button overlapping
   the text). Reset it here to a clean vertical stack with a full-width button
   at the bottom. */
.suburb-aside .quote-panel.quote-panel--cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 26px 24px 28px;
  margin: 0;
  aspect-ratio: auto;
  min-height: 0;
}
.suburb-aside .quote-panel--cta .quote-panel__icon { grid-area: auto; align-self: flex-start; margin: 0 0 12px; }
.suburb-aside .quote-panel--cta .quote-panel__title { grid-area: auto; align-self: auto; font-size: clamp(24px, 3.2vw, 28px); }
.suburb-aside .quote-panel--cta .quote-panel__sub { grid-area: auto; align-self: auto; margin: 8px 0 20px; max-width: none; }
.suburb-aside .quote-panel--cta .btn { grid-area: auto; justify-self: auto; align-self: auto; width: 100%; justify-content: center; }

/* ============================================================
   Area map: clustered pins (5 Star-style), branded red
   ============================================================ */

/* Individual suburb pin (divIcon dot). */
.leaflet-marker-icon.cctv-pin {
  background: var(--brand-red, #DE0811);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* Numbered cluster bubble. */
.leaflet-marker-icon.cctv-cluster { background: transparent; border: none; }
.cctv-cluster > div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-red, #DE0811);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(222, 8, 17, 0.22), 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: var(--font-display, inherit);
  font-weight: 700;
}
.cctv-cluster span { line-height: 1; font-size: 14px; }

/* Suburb-name tooltip shown on hover. */
.suburb-map .leaflet-tooltip {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink, #040403);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  padding: 5px 9px;
}
.suburb-map .leaflet-interactive { cursor: pointer; }

/* Keep the map beneath the sticky header. Leaflet gives its panes/controls a
   high internal z-index (up to 1000); making the wrapper its own stacking
   context confines those so they can't paint over the header (z-index 60). */
.suburb-map-wrap { position: relative; z-index: 0; }

/* ============================================================
   Suburb list — the whole tile is the link (full click target),
   tighter spacing, and a clear hover state.
   ============================================================ */
.suburb-grid { gap: 8px; }
.suburb-grid li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: inherit; }
.suburb-grid li a {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
.suburb-grid li a:hover,
.suburb-grid li a:focus-visible {
  border-color: var(--brand-red);
  background: rgba(222, 8, 17, 0.06);
  color: var(--brand-red);
  outline: none;
}