/* Park27 — interior page shared styles (non-Home pages) */

/* =========================================================
   DEFAULT PAGE TEMPLATE (page.php) + 404 — body shells
   ========================================================= */

.page-default,
.page-404 { background: var(--bg); }

.page-default-body,
.page-404-body {
  background: var(--bg);
  padding: clamp(60px, 6vw, 100px) 0;
  color: var(--green);
}

.page-default-body .entry-content,
.page-404-body .entry-content {
  font-family: var(--sans);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--green);
  /* max-width: 820px; */
  margin: 0 auto;
}

.page-default-body .entry-content h2,
.page-default-body .entry-content h3,
.page-default-body .entry-content h4 {
  color: var(--green);
  font-family: var(--sans);
  font-weight: 400;
}

.page-default-body .entry-content a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-default-body .entry-content a:hover { color: var(--brand-dark); }

/* The content-link color rules above (specificity 0,2,1) outweigh the button's
   own .btn-layout.hollow-dark rules (0,2,0), so the hollow-dark button hovered
   inside page content lands dark-red text (--brand-dark) on its dark-red hover
   background (--brand) — unreadable. Re-assert the button's intended cream
   hover text with enough specificity to win. Base state is left untouched. */
.page-default-body .entry-content a.btn-layout.hollow-dark:hover { color: var(--bg); }

/* 404 — message + back-to-home button, centered */
.page-404-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 640px;
}

.page-404-inner h2 {
  font-family: var(--sans);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--green);
  margin: 0;
}

.page-404-inner p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--green);
  margin: 0;
}

.page-404-inner .btn-layout { margin-top: 8px; }

/* Sticky sections (.banner-sell, .contact-form) live inside .sticky-stack on
   the Home page. On flat templates without a stacking wrapper they stick to
   the viewport and overlap downstream sections — reset to normal flow. */
.page-default .banner-sell,
.page-default .banner-buy,
.page-default .contact-form,
.page-404 .banner-sell,
.page-404 .banner-buy,
.page-404 .contact-form {
  position: static;
  top: auto;
}

/* Neighborhoods tree (main gets .page-default--sell-focus from page.php):
   repaint the otherwise-blue sell banner to the maroon/cream scheme with a green
   hover (matches /idx/featured). Scoped to the class, so no other generic page
   (incl. Richmond-Area-Info) is affected. */
.page-default--sell-focus .banner-sell {
  --banner-bg: var(--brand);
  --banner-fg: var(--bg);
  --banner-accent: var(--green);
  --banner-accent-fg: var(--bg);
}

/* base.css forces `a.btn-layout.hollow-green { color: var(--green) !important }`,
   which turns the button label green on the maroon banner — override it to cream
   (the banner foreground) with matching !important + higher specificity. */
.page-default--sell-focus .banner-sell a.btn-layout.hollow-green {
  color: var(--banner-fg) !important;
}

/* Sticky-reveal parallax, same as the property pages: the .page-default reset
   above pins the banner static, so re-enable sticky here and give the opaque
   contact-form + testimonials a stacking order so they scroll up over the
   pinned banner. Reset to static on mobile (matches the theme's other stacks). */
.page-default--sell-focus .banner-sell {
  position: sticky;
  top: var(--header-h);
}
.page-default--sell-focus .contact-form {
  position: relative;
  z-index: 1;
}
.page-default--sell-focus .testimonials {
  position: relative;
  z-index: 2;
}
@media (max-width: 991px) {
  .page-default--sell-focus .banner-sell {
    position: static;
    top: auto;
  }
}

/* Generic sticky-stack wrapper: makes the contained sticky sections behave
   as a card-stack reveal (each pins until the next paints over it). Used by
   For Buyers, For Sellers, and Home Sale Calculator at the bottom of the
   page. Non-sticky siblings inside get z-index:2 so they paint above the
   sticky one beneath. */
.sticky-stack--reveal {
  position: relative;
  background: var(--bg-blue);
}

.sticky-stack--reveal > section:not(.banner-buy):not(.banner-sell):not(.banner-contact):not(.contact-form):not(.media-content):not(.about) {
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .sticky-stack--reveal {
    background: transparent;
  }
  .sticky-stack--reveal .banner-buy,
  .sticky-stack--reveal .banner-sell,
  .sticky-stack--reveal .banner-contact,
  .sticky-stack--reveal .contact-form,
  .sticky-stack--reveal .media-content,
  .sticky-stack--reveal .about {
    position: static;
    top: auto;
  }
}



/* =========================================================
   CONTACT PAGE — exclusive-hero override + cream contact form
   ========================================================= */

.page-contact { background: var(--bg); }

/* ---------- About sticky stack — bounds the about's sticky parallax ---------- */
.page-contact .sticky-stack--about {
  position: relative;
}

/* About — blue bg + maroon-tinted bottom pattern-band */
.page-contact .about {
  background: var(--bg-blue);
}

.page-contact .about > .park27-pattern-band {
  --pattern-color: var(--green-dark);
}

/* Testimonials scrolls over the sticky about during the parallax */
.page-contact .testimonials {
  position: relative;
  z-index: 2;
}

/* ---------- Form section: override shared bg-blue to cream ---------- */
.page-contact .contact-form {
  background: var(--bg);
  position: static; /* no sticky pinning on this page */
}

.page-contact .contact-form-inner { gap: 50px; }

.page-contact .contact-form h2,
.page-contact .contact-form-header { display: none; }

/* ---------- Rich header row: address | brand | direct contact ---------- */
.contact-page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 60px;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  font-weight: 400;
  color: var(--ink);
}

.contact-page-address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
  color: var(--green);
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 400;
  line-height: normal;
}

.contact-page-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.contact-page-brand .park27-wordmark {
  color: var(--green);
  font-size: clamp(2rem, 3vw, 2.625rem);
  width: clamp(180px, 14vw, 158px);
}

.contact-page-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-page-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}

.contact-page-social a:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Mask-based recolor — SVGs ship with cream fill (for the maroon news-detail
   hero); on the cream contact bg we repaint them via background-color. */
.contact-page-social__icon {
  display: block;
  width: 24px;
  height: 24px;
  background: var(--green);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.contact-page-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.contact-page-info li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.contact-page-info a {
  text-decoration: none;
  transition: color 0.2s;
  color: var(--green);
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 400;
  line-height: normal;
}

.contact-page-info a:hover { color: var(--brand); }

.contact-page-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--green);
  border-radius: 0;
  flex: 0 0 auto;
}

.contact-page-info .cnm-icon {
  width: 13px;
  height: 16px;
  background-color: var(--green);
}

.contact-page-divider {
  color: var(--green);
}

/* ---------- Continue Your Process ---------- */
.contact-page-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 20px;
}

.contact-page-continue__label {
  color: var(--green);
  font-family: var(--sans);
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  line-height: normal;
}

.contact-page-continue__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
  color: var(--green);
  font-family: var(--sans);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.contact-page-continue__link .cnm-icon {
  width: 14px;
  height: 14px;
  background-color: var(--green);
  transition: transform 0.2s;
}

.contact-page-continue__link:hover { color: var(--brand-dark); }
.contact-page-continue__link:hover .cnm-icon { transform: translateX(3px); background-color: var(--brand-dark); }

/* Contact responsive */
@media (max-width: 1199px) {
  .contact-page-header {
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
  }
}

@media (max-width: 991px) {
  .contact-page-header {
    grid-template-columns: 1fr;
    gap: 35px;
    text-align: center;
  }

  .contact-page-address,
  .contact-page-info {
    align-items: center;
  }

  .contact-page-info { gap: 10px; }

  .contact-page-continue {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 575px) {
  .contact-page-social a { width: 26px; height: 26px; }
  .contact-page-social .cnm-icon { width: 12px; height: 12px; }
  .contact-page-continue { align-items: center; text-align: center; }
}