/* ===== Service Areas page: locations section ===== */
/* Builds on the menu page catalog styles (.menu-catalog__*) in main.css */

.service-areas__header {
  flex-direction: column;
  gap: 32px;
}

.service-areas__title::after {
  display: none;
}

.service-areas__title-accent {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--color-cream);
}

.service-areas__quote-btn {
  position: static;
  margin: 0;
}

.service-areas__tabs {
  flex-wrap: wrap;
  row-gap: 20px;
}

.service-areas__tab {
  text-transform: none;
  text-transform: none;
}

.service-areas__content {
  padding: 18px 46px 0;
  transition: opacity 0.2s ease;
}

.service-areas--loading .service-areas__content {
  opacity: 0.55;
  pointer-events: none;
}

.service-areas__list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.service-areas__card {
  font-family: var(--font-family-primary);
  color: var(--color-white);
}

.service-areas__card-title {
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-white);
}

.service-areas__card-text {
  padding-left: 36px;
  font-size: 15px;
  line-height: 1.3;
}

.service-areas__card-text p {
  margin: 0 0 18px;
}

.service-areas__card-text p:last-child {
  margin-bottom: 0;
}

.service-areas__card-text strong,
.service-areas__card-text b,
.service-areas__card-text em,
.service-areas__card-text i {
  font-weight: 800;
  font-style: italic;
}

.service-areas__card-text a {
  color: var(--color-cream);
}

.service-areas__card-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 0 36px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  line-height: 16px;
  color: var(--color-cream);
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.service-areas__card-link i {
  transition: transform 0.3s ease-out;
}

.service-areas__card-link:hover {
  color: var(--color-white);
}

.service-areas__card-link:hover i {
  transform: translateX(4px);
}

.service-areas__pagination {
  margin-top: 70px;
}

.service-areas__container {
  padding: 83px 25px 122px 38px;
  position: relative;
}

.service-areas__mobile-overlay {
  display: none;
}

@media (max-width: 1536px) {
  .service-areas__container {
  }
}

@media (max-width: 1280px) {
  .service-areas__container {
  }

  .service-areas__content {
    padding: 18px 0 0;
  }
}

@media (max-width: 1024px) {
  /* The photo sits centred on the seam between the grey overview panel and the teal catalog:
     it is the last thing in the grey panel, and a negative bottom margin of half its height
     pulls the panel's bottom edge (and so the teal panel's top edge) up to the photo's middle.
     The teal panel then gets the same half height as extra top padding.
     Half the photo height = half its width (panel width, 25px padding on each side) x 303 / 537.
     Percentages in margin/padding are of the parent's width, so no fixed numbers are needed. */
  .service-areas__container {
    padding: 56px 25px 0;
  }

  .service-areas__mobile-overlay {
    display: block;
    position: relative;
    z-index: 1;
    width: calc(100% + 50px);
    max-width: none;
    height: auto;
    aspect-ratio: 537 / 303;
    object-fit: cover;
    border-radius: 40px;
    margin: 40px -25px calc((100% + 50px) * -151.5 / 537);
  }

  .service-areas__container-catalog {
    padding: calc(100% * 151.5 / 537 + 56px) 25px 80px;
  }
}

@media (max-width: 768px) {
  .service-areas__header {
    gap: 0;
  }

  .service-areas__list {
    gap: 50px;
  }

  .service-areas__card-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .service-areas__card-text {
    padding-left: 0;
    font-size: 13px;
  }

  .service-areas__card-link {
    margin: 24px 0 0;
  }
}

/* ===== Single service area page ===== */

.service-area-single__main {
  width: 100%;
  margin: 60px 0 100px;
}

.service-area-single__container {
  max-width: 1214px;
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.service-area-single__body {
  font-family: var(--font-family-primary);
  color: var(--color-black);
  font-size: 15px;
  line-height: 1.4;
}

.service-area-single__body> :first-child {
  margin-top: 0;
}

.service-area-single__body p,
.service-area-single__body li {
  margin: 0 0 18px;
}

.service-area-single__body h2,
.service-area-single__body h3 {
  margin: 40px 0 20px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
}

.service-area-single__body strong,
.service-area-single__body b,
.service-area-single__body em,
.service-area-single__body i {
  font-weight: 800;
  font-style: italic;
  color: var(--color-teal);
}

.service-area-single__body a {
  color: var(--color-teal);
  font-weight: 700;
}

.service-area-single__body img {
  max-width: 100%;
  height: auto;
  border-radius: 40px;
}

.service-area-single__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--color-teal);
  text-decoration: none;
}

.service-area-single__back:hover i {
  transform: translateX(-4px);
}

.service-area-single__back i {
  transition: transform 0.3s ease-out;
}

.service-area-article {
  /* display: flex; */
  align-items: center;
  max-width: 1300px;
  gap: 89px;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  transition: all 0.3s ease-out;
}

.service-area-article__layout>h2 {
  margin-bottom: 24px !important;
}

.service-area-article__layout-content {
  padding-left: 55px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all .3s ease;
}

.service-area-article__layout-content>span {
  font-family: var(--font-family-primary);
  font-size: 16px;
  text-align: left;
  line-height: 1.2;
  color: #2B2B2B;
}

.service-area-article__layout-content>span>strong {
  font-style: italic;
}

.service-areas__img {
  aspect-ratio: 537 / 303;
}

.service-areas__img img {
  max-width: 100%;
  height: 100%;
  border-radius: 40px!important;
}

.service-areas__catalog-btn {
  margin-top: 14px!important;
}

@media (max-width: 1280px) {  
  .service-area-article {
    gap: 40px;
  }

  .service-area-article__layout-content {
    padding-left: 0px;
  }
}

@media (max-width: 1024px) { 
  .service-areas__img {
    background: transparent!important;
    display: none;
  }

  .service-area-article {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .service-areas__img img {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .service-area-single__main {
    margin: 40px 0 60px;
  }

  .service-area-single__container {
    padding: 0 25px;
  }

  .service-area-single__body {
    font-size: 13px;
  }

  .service-area-single__body h2,
  .service-area-single__body h3 {
    font-size: 20px;
  }
}
/* ===== Service area (location) page: template-parts/service-area-content.php =====
   Uses the service page layout (.ai-vending-content__* in main.css); these are the location-only parts. */
.service-area-page__header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-area-page__title {
  text-align: center;
}

.service-area-page__content {
  max-width: 586px;
}

/* Editor text (paragraphs, lists, sub-headings) inside the text-and-photo row */
.service-area-page__text p {
  margin: 0 0 16px;
}

.service-area-page__text ul,
.service-area-page__text ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.service-area-page__text h3,
.service-area-page__text h4 {
  margin: 8px 0 12px;
  font-size: 18px;
  line-height: 22px;
  color: var(--color-black);
}

.service-area-page__text a {
  color: var(--color-teal);
  font-weight: 700;
}

/* "Communities we serve" (towns list) */
.service-area-page__towns.ai-vending-content__column {
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.service-area-page__towns .ai-vending-content__heading {
  margin: 0;
}

.service-area-page__town-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 55px;
  list-style: none;
}

.service-area-page__town {
  padding: 9px 22px;
  border: 1px solid var(--color-teal);
  border-radius: 20px;
  background: var(--color-white);
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* "More service areas in California" */
.service-area-page__more {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-area-page__more-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  color: var(--color-black);
}

.service-area-page__more-accent {
  color: var(--color-teal);
  font-style: italic;
  font-weight: 800;
}

.service-area-page__more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-area-page__more-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-teal);
}

.service-area-page__more-list a:hover i {
  animation: arrowSlideRight 0.3s ease-out forwards;
}

@media (max-width: 1280px) {
  .service-area-page__town-list {
    padding-left: 0;
  }
}

@media (max-width: 1024px) {
  .service-area-page__towns.ai-vending-content__column {
    align-items: flex-start;
    max-width: 586px;
    padding: 0 21px 0 26px;
  }
}

@media (max-width: 768px) {
  .service-area-page__town {
    padding: 8px 16px;
    font-size: 12px;
  }

  .service-area-page__more-title {
    font-size: 20px;
    line-height: 24px;
  }
}

/* Hero: the location's featured photo, cropped to the same wide banner shape as the other pages
   (and still shown on phones/tablets, where the theme swaps desktop banners for a mobile image) */
.service-area-page .service-area-page__banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1184 / 289;
  object-fit: cover;
  border-radius: 40px;
}

.service-area-page__panel.ai-vending-content__container {
  padding-bottom: 110px;
}

@media (max-width: 1024px) {
  .service-area-page .service-area-page__banner-img {
    aspect-ratio: 712 / 350;
  }

  .service-area-page__panel.ai-vending-content__container {
    padding-bottom: 60px;
  }
}

/* Phones: like the service pages, the last photo sits on the teal band below; with a towns list
   (no photo last) the panel keeps some space under the list instead */
@media (max-width: 670px) {
  .service-area-page__panel.ai-vending-content__container {
    padding-bottom: 0;
  }

  .service-area-page__panel--towns.ai-vending-content__container {
    padding-bottom: 48px;
  }
}

/* Small phones: the service pages push their last photo down into the teal band and make room for it
   with 200px of space at the band's top (main.css). Location pages don't overlap their photo, so keep
   the band's normal spacing; otherwise that space stays empty. */
@media (max-width: 400px) {
  .service-area-page .ai-vending-content__container-bottom {
    padding-top: 77px;
  }
}

/* ===== Service Areas page fields (inc/acf-service-areas-page.php) ===== */
/* Overview text typed in the editor (paragraphs) looks like the default text */
.service-area-article__layout-content > p {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: 16px;
  text-align: left;
  line-height: 1.2;
  color: #2B2B2B;
}

.service-area-article__layout-content > p strong {
  font-style: italic;
  font-weight: 700;
  color: var(--color-teal);
}

.service-area-article__layout-content > p a {
  color: var(--color-teal);
  font-weight: 700;
}

/* Overview video: fills the same frame as the picture (the picture shows while it loads) */
.service-areas__img > .service-areas__media {
  width: 100%;
  height: 100%;
}

.service-areas__img > .service-areas__media > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.service-areas__mobile-overlay.service-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}