/* ==========================================================
   Location (service-area) pages — Buena Park Auto Glass

   Loaded IN ADDITION to homepage.css, which stays the source of
   truth for the theme tokens (--hp-*), the header, the footer and
   every shared block (.section-head, .service-card, .whyus-card,
   .review-card, .schedule-section, .embed-frame, .location-card).

   Only the rules a location page needs on top of that live here:
   a hero with no image (content + quote form instead), image-less
   service cards, the coverage/neighbourhood blocks and the city
   information accordion.
   ========================================================== */

/* ==========================================================
   Hero — no image, quote form in the second column
   ========================================================== */

/* The homepage hero pairs copy with a photo. Here the right-hand
   column carries the form card instead, which is considerably
   taller — trim the vertical padding so the band doesn't tower. */
#hero.location-hero {
  padding-top: 9.5rem !important;
  padding-bottom: 6.5rem !important;
}

/* The form card is white and sits on the dark hero; give it a little
   breathing room from the divider curve underneath. */
.location-hero-form {
  position: relative;
  z-index: 2;
}

/* Sharing the row with the form leaves the copy column narrower than
   on the homepage, where a 2-up checklist starts to look cramped at
   the laptop breakpoint. */
@media (min-width: 992px) and (max-width: 1199px) {
  #hero.location-hero .hero-checklist {
    grid-template-columns: 1fr;
  }

  #hero.location-hero .hero-checklist li:last-child {
    grid-column: auto;
  }
}

/* ==========================================================
   Intro band — the doc copy that overflows the hero
   ========================================================== */

/* Same light gradient as the homepage's intro band, but the form has
   already been placed in the hero, so this section runs as a single
   centred column rather than a 7/5 split. */
.location-intro-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3.5rem 0 5.5rem;
  background:
    radial-gradient(70% 55% at 95% 0%, rgba(var(--primary-color-rgb), 0.06) 0%, rgba(var(--primary-color-rgb), 0) 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(79, 195, 240, 0.08) 0%, rgba(79, 195, 240, 0) 62%),
    linear-gradient(180deg, #ffffff 0%, var(--hp-light-bg) 100%);
}

.location-intro-section .container {
  position: relative;
  z-index: 1;
}

.location-intro-inner {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

.location-intro-inner p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--hp-slate);
  margin-bottom: 1.2rem;
}

/* Opening paragraph carries the section — set slightly larger and
   airier rather than heavier, matching the homepage intro. */
.location-intro-inner > p:first-of-type {
  font-size: 1.16rem;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--hp-lead);
}

/* Inline links the source doc sets inside prose. Accent-coloured with
   an underline that only firms up on hover, so the sentence still
   reads as body copy rather than a row of links. */
.prose-link {
  color: var(--hp-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--primary-color-rgb), 0.35);
  text-underline-offset: 3px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.prose-link:hover,
.prose-link:focus {
  color: var(--hp-accent-deep);
  text-decoration-color: currentColor;
}

/* The strap is centred here (the homepage one sits in a left column),
   so centre its contents too — but keep the title left-aligned
   against the accent bar that runs down the left edge. */
.location-intro-inner .cta-strap {
  text-align: left;
}

.location-intro-inner .cta-strap .cta-strap-phone {
  justify-content: flex-start;
}

.location-intro-inner .intro-checklist {
  justify-content: center;
}

/* ==========================================================
   Service cards without media
   ========================================================== */

/* Location docs ship no imagery, so the card leads with a gradient
   icon badge in place of .service-card-media. Everything else —
   shell, hover lift, link treatment — is the homepage card. */
.service-card-plain .service-card-body {
  padding: 1.9rem 1.6rem 1.7rem;
}

.service-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 14px;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 12px 26px rgba(var(--primary-color-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.35s ease;
}

.service-card-plain:hover .service-ico {
  transform: translateY(-2px) scale(1.04);
}

/* A thin accent cap on hover, echoing the quote form's gradient bar,
   so the image-less cards still get a moment of colour. */
.service-card-plain {
  position: relative;
}

.service-card-plain::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hp-accent) 0%, var(--hp-accent-deep) 45%, var(--hp-ice) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}

.service-card-plain:hover::before {
  transform: scaleX(1);
}

/* ==========================================================
   Credentials — six items instead of the homepage's eight
   ========================================================== */
.credentials-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ==========================================================
   Areas We Serve — city detail blocks on the dark band
   ========================================================== */

/* Frosted panel for the "Why Windshields … Need Faster Service"
   block: prose on the dark band needs a surface of its own or the
   paragraphs read as a wall of grey text. */
.location-panel {
  max-width: 62rem;
  margin: 0 auto 3rem;
  padding: 2.25rem 2.25rem 1.75rem;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.location-panel h3 {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: #ffffff;
  margin-bottom: 1.1rem;
}

.location-panel h3::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 1.1rem;
  background: linear-gradient(90deg, var(--hp-accent) 0%, var(--hp-ice) 100%);
  box-shadow: 0 0 18px rgba(var(--primary-color-rgb), 0.5);
}

.location-panel p {
  font-size: 0.97rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 1.15rem;
}

.location-panel p:last-child {
  margin-bottom: 0;
}

/* Neighbourhood coverage: same glass surface, but the label reads as
   a small-caps eyebrow like .areas-list-label does. */
.coverage-block {
  max-width: 62rem;
  margin: 0 auto 2.5rem;
  padding: 1.9rem 2.1rem;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.coverage-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.3rem;
}

.coverage-block p {
  font-size: 0.97rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

.coverage-block p strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.1px;
}

/* ==========================================================
   City information accordion
   ========================================================== */

/* The source markup uses UIkit accordion classes, which this template
   does not load. Rebuilt on Bootstrap's collapse (already bundled) so
   it actually opens, with the theme's glass surface. Collapsed by
   default — the embed inside is tall. */
.city-info {
  max-width: 62rem;
  margin: 0 auto;
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.city-info-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.75rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.28s ease, color 0.28s ease;
}

.city-info-title:hover,
.city-info-title:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--hp-accent);
}

.city-info-title i {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--hp-accent);
  transition: transform 0.3s ease;
}

/* Bootstrap adds .collapsed to the trigger while the panel is shut */
.city-info-title.collapsed i {
  transform: rotate(-90deg);
}

.city-info-content {
  padding: 0 1.75rem 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.city-info-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 1rem;
}

.city-info-content p:last-child {
  margin-bottom: 0;
}

.city-info-content p strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #ffffff;
}

/* The data embed declares a 1000px height; cap it and let it scroll
   inside its own frame rather than stretching the page on phones. */
.city-data-embed {
  margin: 1.5rem 0;
  padding: 10px;
  border-radius: var(--hp-radius);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The embed is normally the only thing in the panel, so it carries the
   panel's own bottom padding — drop its trailing margin there. */
.city-data-embed:last-child {
  margin-bottom: 0;
}

.city-data-embed embed,
.city-data-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none;
  border-radius: 10px;
}

/* ==========================================================
   Mobile responsiveness
   ========================================================== */
@media (max-width: 991px) {
  #hero.location-hero {
    padding-top: 9rem !important;
    padding-bottom: 5.5rem !important;
  }

  /* The form leads on tablets down, so the copy needs air beneath it */
  .location-hero-form {
    margin-top: 0.5rem;
  }

  .credentials-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .location-panel,
  .coverage-block {
    padding: 1.75rem 1.5rem;
  }

  .city-data-embed embed,
  .city-data-embed iframe {
    height: 760px;
  }
}

@media (max-width: 767px) {
  #hero.location-hero {
    padding-bottom: 4.5rem !important;
  }

  .location-intro-section {
    padding: 3rem 0 4rem;
  }

  .location-intro-inner {
    text-align: left;
  }

  .location-intro-inner .intro-checklist {
    justify-content: flex-start;
  }

  .credentials-grid-3 {
    grid-template-columns: 1fr;
  }

  .service-card-plain .service-card-body {
    padding: 1.6rem 1.35rem 1.5rem;
  }

  .location-panel,
  .coverage-block {
    padding: 1.5rem 1.25rem;
    border-radius: var(--hp-radius);
  }

  .location-panel h3 {
    font-size: 1.15rem;
  }

  .city-info-title {
    padding: 1.1rem 1.25rem;
    font-size: 0.96rem;
  }

  .city-info-content {
    padding: 0 1.25rem 1.5rem;
  }

  .city-data-embed embed,
  .city-data-embed iframe {
    height: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-ico,
  .service-card-plain::before,
  .city-info-title,
  .city-info-title i {
    transition: none;
  }
}