/* single property page - visual layer
   Loaded on every property single, on top of css/property.css, which keeps
   its structure and behaviour. This file carries the palette, the masthead
   proportion and the typographic scale of the page. */

/* ============================================================
   tokens
   ============================================================ */

.single-property {
  --surface: #f7f4ed;
  --card: #fffdf8;
  --tile: #efeadd;
  --line: #ddd7c8;
  --ink: #23201c;
  --muted: #5c554c;
  --accent: #9f1f63;
  --accent-ink: #ffffff;
  --hairline: #ddd7c8;
  --rail-bg: #4e0f30;
  --rail-ink: #ffffff;
  --rail-height: 8.8em;
  --rail-logo: 56px;
  --action: #ddb109;
  --action-ink: #2a2723;
  --block-gap: 5em;
}

/* ============================================================
   flat content surface, header geometry reset
   ============================================================ */

body.single-property #page-container.striped {
  background-image: none;
  background-color: var(--surface);
}

body.single-property #main-header,
body.single-property header.full {
  background-color: var(--rail-bg);
}

body.single-property .main-header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--rail-bg);
  margin-top: 0;
  width: 98%;
  height: var(--rail-height);
  min-height: var(--rail-height);
  padding: 0 1.6em;
}

body.single-property .main-header-container > a {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  line-height: 0;
}

body.single-property .logo {
  float: none;
  margin: 0;
  width: calc(var(--rail-logo) * 2.978);
  height: var(--rail-logo);
  background-size: 100% 100%;
}

body.single-property .menu {
  top: 50%;
  right: 1.6em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: 0;
  font-size: 1.5em;
}

body.single-property .menu li {
  margin-right: 1.6em;
  letter-spacing: 0.08em;
}

body.single-property .menu a {
  color: var(--rail-ink);
}

body.single-property .menu a.active,
body.single-property .menu li.current_page_item a,
body.single-property .menu a:hover {
  border-bottom-width: 2px;
  padding-bottom: 3px;
}

/* base.css already centres it with top/bottom 50% and auto margins, so a
   translate on top of that lifts it half its height above the middle */

body.single-property #nav-trigger {
  left: 1.2em;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background-color: transparent;
}

body.single-property #nav-trigger:before {
  margin-top: 3px;
  font-size: 22px;
}

/* ============================================================
   neutral chrome derived from the tokens
   ============================================================ */

body.single-property .property-gallery-item {
  background: var(--card);
}

body.single-property #content-container .property-description p,
body.single-property .property-feature,
body.single-property .property-map-address {
  color: var(--ink);
}

body.single-property .property-price-extra,
body.single-property .property-price-extra-label {
  color: var(--muted);
}

body.single-property .property-price-extra-value,
body.single-property .property-spec-value {
  color: var(--ink);
}

body.single-property .property-spec-label {
  color: var(--muted);
}

body.single-property .property-location,
body.single-property .property-share-toggle,
body.single-property .property-map {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

body.single-property .property-share-popover {
  border-color: var(--line);
  border-top-color: var(--accent);
}

body.single-property .property-badge-kind {
  border-color: var(--line);
  color: var(--muted);
}

body.single-property .property-map {
  border-color: var(--line);
}

/* ============================================================
   page composition
   ============================================================ */

.single-property .bg-purple {
  display: none;
}

.single-property #content-container {
  padding-top: 2.6em;
}

.single-property .property-gallery {
  margin-bottom: 3.6em;
}

/* header block */

.single-property .property-header {
  margin-bottom: 2.4em;
}

.single-property .property-header-top {
  margin-bottom: 1.4em;
}

.single-property .property-price-box {
  margin-top: 1.8em;
}

/* title and section titles */

.single-property .property-title {
  font-family:
    Miso-Bold, HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 3.8em;
  line-height: 1.25;
  color: var(--ink);
  border-bottom: 0;
  padding-bottom: 0;
}

.single-property .property-section-title {
  font-size: 2.4em;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3em;
  margin-bottom: 0.9em;
}

.single-property .property-price {
  font-size: 4.8em;
  color: var(--ink);
}

.single-property .property-badge-purpose {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.single-property .property-location {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 4px 8px 6px 3px;
  color: var(--muted);
}

.single-property a.property-location:hover,
.single-property a.property-location:focus {
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.single-property .property-location-icon {
  color: var(--accent);
}

/* spec tiles - flat fill, warmed to sit on the paper surface */

.single-property .property-spec {
  background: var(--tile);
  border: 0;
  padding: 1.1em 0.8em;
}

.single-property .property-spec-icon {
  color: var(--muted);
}

/* body copy and amenities - monochrome marks */

.single-property .property-section {
  margin-top: var(--block-gap);
}

.single-property #content-container .property-description p {
  font-size: 2em;
  line-height: 1.65;
  margin-bottom: 1.1em;
}

.single-property .property-feature {
  font-size: 2em;
  line-height: 1.6;
}

.single-property .property-features {
  grid-gap: 10px 32px;
  gap: 10px 32px;
}

.single-property .property-feature:before {
  border-right-color: var(--muted);
  border-bottom-color: var(--muted);
}

.single-property .property-map-address {
  font-size: 2em;
  line-height: 1.6;
  margin-bottom: 1em;
}

/* contact card */

.single-property .property-contact {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: 2em 1.8em;
}

.single-property .property-contact-title {
  font-family:
    Miso-Light, HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.4em;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.single-property .property-contact-text {
  color: var(--muted);
  margin-top: 1em;
}

.single-property .property-form input[type='text'],
.single-property .property-form input[type='email'],
.single-property .property-form input[type='tel'],
.single-property .property-form textarea {
  border-color: var(--line);
}

.single-property .property-form input[type='text']:focus,
.single-property .property-form input[type='email']:focus,
.single-property .property-form input[type='tel']:focus,
.single-property .property-form textarea:focus {
  border-color: var(--accent);
}

.single-property .property-form input[type='submit'] {
  background: var(--action);
  color: var(--action-ink);
  letter-spacing: 0.1em;
}

.single-property .property-form input[type='submit']:hover,
.single-property .property-form input[type='submit']:focus,
.single-property .property-form input[type='submit']:active {
  background: #c99f08;
  color: var(--action-ink);
}

.single-property .property-form .wpcf7-not-valid-tip {
  color: #a3201f;
}

.single-property .property-form .wpcf7-response-output {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line);
}

.single-property .property-form + .property-contact-actions {
  border-top-color: var(--line);
}

.single-property .property-button-phone,
.single-property .property-button-phone:hover,
.single-property .property-button-phone:focus,
.single-property .property-button-phone:active {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.single-property .property-sheet-close {
  background: rgba(13, 13, 12, 0.08);
  color: var(--ink);
}

.single-property .property-sheet-close:hover,
.single-property .property-sheet-close:focus,
.single-property .property-sheet-close:active {
  background: rgba(13, 13, 12, 0.16);
  color: var(--ink);
}

.single-property .property-mobile-bar {
  background: var(--card);
  border-top: 1px solid var(--line);
}

.single-property .property-mobile-action-message,
.single-property .property-mobile-action-message:hover,
.single-property .property-mobile-action-message:focus,
.single-property .property-mobile-action-message:active {
  background: var(--action);
  color: var(--action-ink);
}

.single-property .property-mobile-action-phone,
.single-property .property-mobile-action-phone:hover,
.single-property .property-mobile-action-phone:focus,
.single-property .property-mobile-action-phone:active {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.single-property .property-viewer-close:hover,
.single-property .property-viewer-prev:hover,
.single-property .property-viewer-next:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.single-property .footer-container {
  background-color: var(--rail-bg);
}

/* ============================================================
   responsive
   ============================================================ */

/* gallery geometry: only above the breakpoint where property.css still
   drives the grid with a fixed container ratio. Below 768px the stacked
   grid owns its own row ratios and must not be given one. */

@media only screen and (min-width: 768px) {
  .single-property .property-gallery-grid {
    grid-gap: 12px;
    gap: 12px;
  }
}

@media only screen and (max-width: 767px) {
  .single-property .property-price {
    font-size: 4em;
  }

  .single-property .property-title {
    font-size: 3.4em;
  }
}

/*
 * 730px, not 767: this is where base.css hides the desktop menu items and shows
 * the trigger. Centring the logo any earlier parks it under a menu that is still
 * on screen, and the two overlap.
 */

@media all and (max-width: 730px) {
  body.single-property .main-header-container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 5.2em;
  }

  /*
   * The rail is a flex row, so #nav-mobile becomes a flex item and collapses to
   * zero width, taking the absolutely positioned dropdown with it: the panel
   * ended up inside the bar, on the right, with nothing to draw its background
   * on. Out of the flow it hangs under the rail, aligned with the trigger, the
   * way it does on every other page.
   */

  body.single-property #nav-mobile {
    position: absolute;
    top: 100%;
    left: 12px;
    width: 200px;
  }

  /* the panel reads as an extension of the rail, so it carries the rail's colour */

  body.single-property #nav-mobile ul {
    background-color: var(--rail-bg);
  }
}

@media only screen and (max-width: 568px) {
  .single-property #content-container {
    padding-top: 1.8em;
  }

  .single-property .property-title {
    font-size: 3em;
  }

  .single-property .property-price {
    font-size: 3.4em;
  }

  .single-property #content-container .property-description p,
  .single-property .property-feature,
  .single-property .property-map-address {
    font-size: 1.9em;
  }

  .single-property .property-section-title {
    font-size: 2.2em;
  }
}

/* ============================================================
   motion
   ============================================================ */

body.single-property .property-button,
body.single-property .property-mobile-action,
body.single-property .property-form input[type='submit'],
body.single-property .property-location,
body.single-property .property-share-toggle {
  -webkit-transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.single-property .property-button,
  body.single-property .property-mobile-action,
  body.single-property .property-form input[type='submit'],
  body.single-property .property-location,
  body.single-property .property-share-toggle {
    -webkit-transition: none;
    transition: none;
  }
}