/*
 * Saved Homes (inc/saved-homes.php, js/saved-homes.js, page-saved-homes.php).
 * A standalone stylesheet, like saratoga-maps.css, so it doesn't need the
 * Prepros build. Colors: brown #4A3F25, orange #B87229, green #4A6965,
 * offwhite #F6F6EB (css/global/_variables.scss).
 */

/* Anything the JS reveals stays hidden until it does, even where a component
   sets its own display */
.save-home[hidden],
.saved-homes-link[hidden],
.saved-homes-item[hidden] {
  display: none !important;
}

/* Heart toggle ======================================== */
.save-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 1.875rem;
  background: white;
  color: #4A3F25;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.15s, transform 0.15s;
}

.save-home__icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.15s;
}

.save-home[aria-pressed="true"] {
  color: #B87229;
}

.save-home[aria-pressed="true"] .save-home__icon {
  fill: currentColor;
}

.save-home:active {
  transform: scale(0.92);
}

.save-home:focus-visible {
  outline: 3px solid #B87229;
  outline-offset: 2px;
}

@media (hover: hover) {
  .save-home:hover {
    color: #B87229;
  }
}

/* On a card photo: heart alone, top-right (the floor plan cards' badge is top-left) */
.content_item__media .save-home,
.home_card__img .save-home {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3; /* above the stretched card link */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Home detail page: heart + "Save", beside the price */
.save-home--label {
  flex-shrink: 0;
  padding: 0 1.125rem 0 0.875rem;
  border: 1px solid #4A3F25;
  font-size: 1rem;
  font-weight: 700;
}

.save-home--label[aria-pressed="true"] {
  border-color: #B87229;
}

.new_home_hero .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9375rem;
}

.new_home_hero .hero_content .content_text .price-row .price {
  margin-bottom: 0;
}

/* Cards: the address link covers the whole card ======================================== */
.search_listing .listing_content .content_item__link,
.available_homes .home_card__link {
  color: inherit;
  text-decoration: none;
}

.search_listing .listing_content .content_item__link::after,
.available_homes .home_card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2; /* the site-wide .cta is position: relative; z-index: 1 */
  border-radius: 1.5625rem;
}

.search_listing .listing_content .content_item__link:focus-visible,
.available_homes .home_card__link:focus-visible {
  outline: none;
}

.search_listing .listing_content .content_item__link:focus-visible::after,
.available_homes .home_card__link:focus-visible::after {
  outline: 3px solid #B87229;
  outline-offset: -3px;
}

.available_homes .home_card {
  position: relative;
}

/* The photo was the card's flex child; its wrapper takes that role and
   stretches it to the card's height as before */
.search_listing .listing_content .content_item__media {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

@media screen and (max-width: 39.99875em) {
  .search_listing .listing_content .content_item__media {
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* Header link ======================================== */
.saved-homes-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: white;
}

.saved-homes-link .save-home__icon {
  width: 1.625rem;
  height: 1.625rem;
  fill: currentColor;
  stroke: currentColor;
}

/* The second selector outranks the nav's text rule
   (#header .menu--main:not(.drilldown) > li > a span: 14px / 22px), which
   otherwise overfills the badge on desktop. Flex centering, not line-height,
   so no inherited text style can push the digit off-center. */
.saved-homes-link__count,
#header .menu--main > li.saved-homes-item > a.saved-homes-link > .saved-homes-link__count {
  position: absolute;
  top: 0;
  right: -0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 0.625rem;
  background: #B87229;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.saved-homes-link:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: 50%;
}

@media (hover: hover) {
  .saved-homes-link:hover {
    color: #A8BA9E;
  }
}

/* Desktop: in the nav, whose links carry 2.375rem x 1.4375rem padding
   (#header .menu--main:not(.drilldown) > li > a) that would squeeze the icon to nothing */
#header .menu--main > li.saved-homes-item {
  align-self: center;
}

/* !important: the sticky header's own nav-link padding rules are more specific still */
#header .menu--main > li.saved-homes-item > a.saved-homes-link {
  display: inline-flex;
  padding: 0 !important;
  margin-right: 0.75rem;
}

.saved-homes-link .save-home__icon {
  flex-shrink: 0;
}

/* 1024-1336px: the nav has no room to spare for the heart, so while it's shown
   the text links give up a little side padding (0.8125rem -> 0.5rem) to keep
   the logo clear. Specificity (1,6,2) beats the sticky header's (1,4,2). */
@media screen and (min-width: 64em) and (max-width: 83.5em) {
  #header .menu--main:has(> .saved-homes-item:not([hidden])):not(.drilldown) > li:not(.saved-homes-item):not(.last) > a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #header .menu--main > li.saved-homes-item > a.saved-homes-link {
    margin-right: 0.25rem;
  }
}

/* Mobile: in the bar, just left of the (absolutely positioned) hamburger */
.saved-homes-link--bar {
  position: absolute;
  right: 3.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Confirmation toast ======================================== */
.saved-homes-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1000;
  max-width: calc(100% - 2rem);
  padding: 0.75rem 1.25rem;
  border-radius: 1.875rem;
  background: #4A3F25;
  color: white;
  font-size: 0.9375rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.5rem);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.saved-homes-toast--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.saved-homes-toast a {
  color: white;
  font-weight: 700;
  text-decoration: underline;
  margin-left: 0.25rem;
}

/* Clear of the New Homes "Show N Homes" bar on phones */
@media screen and (max-width: 63.99875em) {
  .saved-homes-toast {
    bottom: 5.5rem;
  }
}

/* Saved Homes page ======================================== */
.saved_homes .listing_content {
  width: 100%;
}

.saved_homes__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.875rem;
}

/* The page's buttons are .cta, which sets its own display and would override [hidden] */
.saved_homes [hidden] {
  display: none !important;
}

/* Arial like New Homes' title: the site's h1 display face is capitals-only */
.saved_homes .content_title {
  font-family: Arial, sans-serif;
  color: #4A3F25;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: none;
  margin-bottom: 0.5rem;
}

.saved_homes__intro {
  margin-bottom: 0;
}

.saved_homes__actions .cta {
  margin: 0;
}

.saved_homes__missing {
  margin-top: 1rem;
  padding: 1.5rem 1.875rem;
  border: 1px solid rgba(74, 63, 37, 0.25);
  border-radius: 1.5625rem;
}

.saved_homes__missing h2 {
  font-family: Arial, sans-serif;
  color: #4A3F25;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: none;
  margin-bottom: 0.25rem;
}

.saved_homes__missing ul {
  list-style: none;
  margin: 0;
}

.saved_homes__missing li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 0;
  border-top: 1px solid rgba(74, 63, 37, 0.15);
}

.saved_homes__missing li:first-child {
  border-top: 0;
}

.saved_homes__missing li > span:not(.saved_homes__missing-actions) {
  opacity: 0.7;
}

.saved_homes__missing-actions {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
}

.saved_homes__missing-actions a,
.saved_homes__remove {
  color: #B87229;
  font-weight: 700;
  text-decoration: underline;
}

.saved_homes__remove {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: inherit;
}

.saved_homes__empty {
  padding: 2.5rem;
  border-radius: 1.5625rem;
  background: #F6F6EB;
  text-align: center;
}

.saved_homes__empty p {
  margin-bottom: 1.25rem;
}

/* Loading placeholders (New Homes defines its own inline) */
.saved_homes .skeleton {
  width: 100%;
  height: 261px;
  margin-bottom: 2.5rem;
  border-radius: 1.5625rem;
  opacity: 0.5;
  background: linear-gradient(-45deg, #bfbfbf 25%, #a6a6a6 50%, #bfbfbf 75%);
  background-size: 200% 100%;
  animation: saved-homes-shimmer 1.5s infinite;
}

@keyframes saved-homes-shimmer {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}