/* =========================================================================
   opa-theme.css — theme / WordPress-specific styles and overrides.

   The concept CSS (styles.css, pages.css) is copied verbatim and must not be
   edited (kept in sync with the concept). Put WordPress-, PropertyHive- and
   plugin-specific styling and any overrides HERE, loaded after pages.css.
   ========================================================================= */

/* ---- Class-name collision: PropertyHive vs the concept grid ----
   PropertyHive prints inline "Search Results CSS" that includes an UNSCOPED
   rule `.properties { background-color:#FFFFFF }` for its own results <ul>.
   The concept homepage grid also uses `.properties`, so that white bleeds in.
   Re-assert a transparent background with higher specificity (0,2,0 > 0,1,0)
   on our sections only — the real PropertyHive results page is untouched. */
.section .properties {
  background-color: transparent;
}

/* ---- PropertyHive "On the market now" cards (front page) ----
   The concept card is a static <article>; live cards are whole-card links,
   so reset link styling and add the price qualifier used by the plugin. */
.properties .property,
.properties .property:hover,
.properties .property:focus {
  color: var(--ink);
  text-decoration: none;
}
.properties .property:focus-visible {
  outline: 2.5px solid var(--terracotta-ink);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.property__qualifier {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--muted);
  font-weight: 500;
  margin-left: 0.35rem;
}

/* ---- Contact Form 7 normalisation ----
   The CF7 form template uses the concept's .contact-form / .field markup, but
   CF7 wraps each control in a <span class="wpcf7-form-control-wrap">. Make that
   span block so the concept's `.field input { width:100% }` fills the row, and
   tidy CF7's validation tips + response output to the brand. */
form.wpcf7-form { margin: 0; }
.contact-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.contact-form .wpcf7-form-control-wrap input,
.contact-form .wpcf7-form-control-wrap select,
.contact-form .wpcf7-form-control-wrap textarea { width: 100%; }
.contact-form .wpcf7-not-valid-tip {
  color: var(--terracotta-ink);
  font-size: var(--step--1);
  font-weight: 500;
  margin-top: 0.35rem;
}
.contact-form input.wpcf7-not-valid,
.contact-form select.wpcf7-not-valid,
.contact-form textarea.wpcf7-not-valid { border-color: var(--terracotta-ink); }
.wpcf7-response-output {
  margin: var(--space-sm) 0 0 !important;
  padding: 0.7rem 0.95rem !important;
  border-radius: 6px;
  font-size: var(--step--1);
  border-width: 1px;
}
.wpcf7 .wpcf7-spinner { margin: 0 0 0 0.5rem; }

/* Footer social icons (added under the brand blurb). */
.footer__brand .socials { margin-top: var(--space-md); }

/* =========================================================================
   Single property page (bespoke — no concept page existed)
   ========================================================================= */
/* Hero sits behind the fixed, transparent header (as the page heroes do), so
   give it real height and keep the "For Sale" badge clear of the menu bar. */
.prop-gallery__main { position: relative; min-height: clamp(26rem, 66vh, 44rem); overflow: hidden; background: var(--cream-lo); }
.prop-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prop-gallery__main .listing__status {
  position: absolute; z-index: 2;
  top: clamp(5.25rem, 6vw + 3.5rem, 7rem);      /* below the fixed header */
  left: clamp(1rem, 4vw, 3rem);                  /* aligned to the header padding */
}

/* Thumbnail strip — each thumb is a button that swaps the hero image. */
.prop-gallery__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; list-style: none; margin: 0; padding: 0; }
.prop-thumb {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--cream-lo);
  position: relative; line-height: 0; -webkit-appearance: none; appearance: none;
}
.prop-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: opacity var(--dur-1) var(--ease-out-quart); }
.prop-thumb:hover img { opacity: 0.85; }
/* active thumbnail: a terracotta inset ring so the current photo is obvious */
.prop-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--terracotta-ink); transition: box-shadow var(--dur-1) var(--ease-out-quart);
}
.prop-thumb.is-active::after { box-shadow: inset 0 0 0 3px var(--terracotta-ink); }
.prop-thumb:focus-visible { outline: 2.5px solid var(--terracotta-ink); outline-offset: -2px; }
@media (max-width: 40rem) {
  /* keep thumbs usable on mobile as a horizontal scroll strip */
  .prop-gallery__thumbs { grid-auto-columns: 30%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .prop-thumb { scroll-snap-align: start; }
}

.prop-head { padding-block: var(--space-xl); }
.prop-back { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: var(--step--1); color: var(--terracotta-ink); margin-bottom: var(--space-md); }
.prop-back .arr { transition: transform var(--dur-1) var(--ease-out-quart); }
.prop-back:hover .arr { transform: translateX(-3px); }
.prop-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) var(--space-lg); }
.prop-head__addr { font-size: var(--step-4); line-height: 1.05; }
.prop-head__addr span { display: block; font-size: var(--step-1); color: var(--muted); font-family: var(--font-body); font-weight: 400; margin-top: 0.4rem; }
.prop-specs { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; list-style: none; padding: 0; margin: var(--space-sm) 0 0; color: var(--muted); font-size: var(--step-0); }
.prop-specs li { position: relative; }
.prop-specs li + li::before { content: "\00b7"; position: absolute; left: -0.65rem; }
.prop-head__price { text-align: right; }
.prop-price { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--terracotta-ink); letter-spacing: -0.02em; }
.prop-price__qual { font-size: var(--step-0); color: var(--muted); margin-top: 0.3rem; }
@media (max-width: 40rem) { .prop-head__price { text-align: left; } }

.prop-h2 { font-size: var(--step-2); margin: 0 0 var(--space-sm); }
.prop-main > .prop-h2 ~ .prop-h2 { margin-top: var(--space-lg); }
.prop-prose { max-width: none; font-size: 1.05rem; }
.prop-prose > :first-child { margin-top: 0; }
.prop-features { margin: 0 0 var(--space-lg); }
@media (min-width: 40rem) { .prop-features { grid-template-columns: 1fr 1fr; gap: 0.65rem 1.5rem; } }
.prop-docs { margin-top: var(--space-md); }

.prop-side { display: grid; gap: var(--space-lg); align-content: start; }
@media (min-width: 56rem) { .prop-side { position: sticky; top: 96px; } }
.prop-summary { background: var(--cream-hi); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-md); }
.prop-summary__price { font-family: var(--font-display); font-size: var(--step-2); color: var(--terracotta-ink); margin-bottom: var(--space-sm); }
.prop-summary__price span { font-family: var(--font-body); font-size: var(--step--1); color: var(--muted); }
.prop-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.prop-facts li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-0); padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.prop-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.prop-facts span { color: var(--muted); }
.prop-facts b { font-weight: 600; text-align: right; }

/* Enquiry card (PropertyHive make-enquiry form, restyled to the navy card) */
.prop-enquiry { background: var(--navy); color: var(--cream); border-radius: 10px; padding: var(--space-md); }
.prop-enquiry .prop-h2 { color: var(--cream); }
.prop-enquiry__lede { color: oklch(0.94 0.018 80 / 0.78); font-size: var(--step-0); margin-bottom: var(--space-sm); }
.prop-enquiry__call { font-size: var(--step--1); color: oklch(0.94 0.018 80 / 0.7); margin-top: var(--space-sm); }
.prop-enquiry__call a { color: var(--terracotta-glow); text-decoration: underline; }
.prop-enquiry form p { margin: 0 0 0.7rem; }
.prop-enquiry label { display: block; font-size: var(--step--1); color: oklch(0.94 0.018 80 / 0.85); margin-bottom: 0.25rem; }
.prop-enquiry input, .prop-enquiry select, .prop-enquiry textarea {
  width: 100%; font: inherit; font-size: var(--step-0); padding: 0.65rem 0.8rem;
  border: 1px solid oklch(0.94 0.018 80 / 0.25); border-radius: 6px;
  background: oklch(0.28 0.024 242); color: var(--cream);
}
.prop-enquiry textarea { min-height: 110px; resize: vertical; }
.prop-enquiry input::placeholder, .prop-enquiry textarea::placeholder { color: oklch(0.94 0.018 80 / 0.5); }
.prop-enquiry input:focus, .prop-enquiry select:focus, .prop-enquiry textarea:focus { outline: 2.5px solid var(--terracotta-glow); outline-offset: 1px; border-color: transparent; }
.prop-enquiry button, .prop-enquiry input[type="submit"] {
  width: 100%; margin-top: 0.3rem; background: var(--terracotta-btn); color: #fff; border: none;
  border-radius: var(--radius-pill); padding: 0.85rem 1.5rem; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out-quart);
}
.prop-enquiry button:hover, .prop-enquiry input[type="submit"]:hover { background: oklch(0.56 0.11 41); }

/* Floor plan / EPC media (PropertyHive attachments, shown in the main column) */
.prop-media { margin: 0 0 var(--space-lg); }
.prop-media__item {
  display: block; border: 1px solid var(--line); border-radius: 10px;
  background: var(--cream-hi); padding: 0.5rem; line-height: 0;
  transition: border-color var(--dur-1) var(--ease-out-quart), box-shadow var(--dur-1) var(--ease-out-quart);
}
.prop-media__item + .prop-media__item { margin-top: var(--space-sm); }
.prop-media__item img { width: 100%; height: auto; border-radius: 6px; }
.prop-media__item:hover,
.prop-media__item:focus-visible { border-color: var(--terracotta-ink); box-shadow: 0 6px 22px oklch(0 0 0 / 0.08); }
.prop-media__item:focus-visible { outline: 2.5px solid var(--terracotta-ink); outline-offset: 3px; }
/* EPC graphs are portrait and don't need full column width */
.prop-media--epc .prop-media__item { max-width: 460px; }

/* Virtual tour (on-page embed, full container width) */
.prop-tour__frame {
  position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--cream-lo);
}
.prop-tour__frame + .prop-tour__frame { margin-top: var(--space-md); }
.prop-tour__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 40rem) { .prop-tour__frame { aspect-ratio: 4 / 3; } }

.prop-map { line-height: 0; }
.prop-map iframe { width: 100%; height: clamp(280px, 40vh, 440px); border: 0; display: block; }