/* =====================================================
   Service Area City Pages — Shared QA Fixes
   ===================================================== */

/* ---- FIX 1: Reduce excessive vertical section spacing ---- */

/* Remove large min-heights from small sections */
.page-section.section-height--small:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
  min-height: auto !important;
}

/* Reduce padding on small sections */
.page-section.section-height--small > .content-wrapper {
  padding-top: 1.8vmax !important;
  padding-bottom: 1.8vmax !important;
}
.page-section.section-height--small.section-match-padding-top > .content-wrapper {
  padding-top: 0.9vmax !important;
}
.page-section.section-height--small.section-match-padding-bottom > .content-wrapper {
  padding-bottom: 0.9vmax !important;
}

/* Reduce padding on custom-height sections (services, city areas, etc.) */
.page-section.section-height--custom > .content-wrapper {
  padding-top: 2vmax !important;
  padding-bottom: 2vmax !important;
}

/* Keep medium sections (hero) but reduce non-hero medium sections */
.page-section.section-height--medium:not(:first-of-type):not(.has-section-divider) {
  min-height: auto !important;
}
.page-section.section-height--medium:not(:first-of-type):not(.has-section-divider) > .content-wrapper {
  padding-top: 3vmax !important;
  padding-bottom: 3vmax !important;
}

/* Tighten heading gaps inside HTML blocks */
.sqs-html-content h2,
.sqs-html-content h3,
.sqs-html-content h4 {
  margin-top: 0 !important;
  margin-bottom: 0.4em !important;
}
.sqs-html-content p + h2,
.sqs-html-content p + h3,
.sqs-html-content p + h4 {
  margin-top: 0.6em !important;
}

/* Reduce gap between sections content blocks */
.fluid-engine > .fe-block:first-child {
  margin-top: 0 !important;
}

/* FAQ / accordion spacing */
.sqs-accordion-summary {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}
.sqs-accordion-content {
  padding-top: 0.25rem !important;
}
[data-controller="AccordionBlockController"] .accordion-item,
.accordion-block .accordion-item {
  margin-bottom: 0 !important;
}

/* Tighten gap after "Serving X & Neighbouring Areas" heading block */
.fe-block + .fe-block {
  margin-top: 0 !important;
}


/* ---- FIX 2: City neighbour list as pills ---- */

ul.gsp-city-pill-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 0 0 !important;
}

ul.gsp-city-pill-list li {
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  list-style: none !important;
  list-style-type: none !important;
}

ul.gsp-city-pill-list li::marker,
ul.gsp-city-pill-list li::before {
  content: none !important;
  display: none !important;
}

ul.gsp-city-pill-list li p {
  margin: 0 !important;
  display: inline !important;
}

/* Hide the trailing "and surrounding areas." paragraph */
ul.gsp-city-pill-list li p + p {
  display: none !important;
}

ul.gsp-city-pill-list li a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 24px !important;
  background: rgba(245, 197, 24, 0.10) !important;
  border: 1.5px solid rgba(245, 197, 24, 0.35) !important;
  border-radius: 999px !important;
  color: #F5C518 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s !important;
  white-space: nowrap !important;
}

ul.gsp-city-pill-list li a:hover {
  background: rgba(245, 197, 24, 0.22) !important;
  border-color: rgba(245, 197, 24, 0.75) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ---- FIX 3: Neighbouring areas section spacing ---- */

/* Collapse empty grid rows in the fluid engine that contains the pill list
   (the Squarespace map block sits between the heading and pills and creates
   a large gap on mobile because its grid rows have a 24px minimum height) */
.fluid-engine:has(.gsp-city-pill-list) {
  grid-template-rows: repeat(60, auto) !important;
}

@media (min-width: 768px) {
  .fluid-engine:has(.gsp-city-pill-list) {
    grid-template-rows: repeat(35, auto) !important;
  }
}

/* Hide the non-rendering Squarespace map block
   (its JS runtime isn't available so it shows as empty space) */
.fluid-engine:has(.gsp-city-pill-list) .fe-block:has(.sqs-block-map) {
  display: none !important;
}

/* ---- FIX 4: Service link styles ---- */

/* Style added service links consistently with existing ones */
.sqs-html-content ul a[href="/services"],
.sqs-html-content ul a[href="/asphalt-garage-ramps"],
.sqs-html-content ul a[href="/dethatching"] {
  text-decoration: underline;
  text-underline-offset: 2px;
}