/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/* =============================================================================
   LEFT SLIDE-OUT OFF-CANVAS MENU
   Replaces all Material skin OCM CSS (dequeued in functions.php).
   Simple left-side panel with overlay — no content push/scale.
   ============================================================================= */


/* --- Panel: left-anchored, slides in from left ---------------------------- */

html #slide-out-widget-area.slide-out-from-right {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  left: 0 !important;
  width: 320px !important;
  height: 100% !important;
  z-index: 100001 !important;
  -webkit-transform: translateX(-100%) !important;
  transform: translateX(-100%) !important;
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html #slide-out-widget-area.slide-out-from-right.material-open,
html #slide-out-widget-area.slide-out-from-right.open {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}


/* --- Panel inner content: visible immediately, no stagger animation ------- */

html #slide-out-widget-area.slide-out-from-right .inner-wrap {
  opacity: 1 !important;
  width: 100%;
  height: 100%;
}

html #slide-out-widget-area.slide-out-from-right .inner-wrap > .inner {
  display: flex;
  flex-direction: column;
}

html #slide-out-widget-area.slide-out-from-right .inner-wrap > .inner > div,
html #slide-out-widget-area.slide-out-from-right .bottom-meta-wrap {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}


/* --- Overlay background --------------------------------------------------- */

html #slide-out-widget-area-bg.slide-out-from-right {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100000 !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  opacity: 0 !important;
  pointer-events: none;
  -webkit-transition: opacity 0.35s ease !important;
  transition: opacity 0.35s ease !important;
}

html #slide-out-widget-area-bg.slide-out-from-right.material-open {
  opacity: 1 !important;
  pointer-events: auto;
}


/* --- Neutralise Material push / scale on page content --------------------- */

.ocm-effect-wrap,
.ocm-effect-wrap.material-ocm-open {
  -webkit-transform: none !important;
  transform: none !important;
  height: auto !important;
  overflow: visible !important;
  -webkit-transition: none !important;
  transition: none !important;
}

.ocm-effect-wrap .ocm-effect-wrap-inner,
.ocm-effect-wrap.material-ocm-open .ocm-effect-wrap-inner {
  -webkit-transform: none !important;
  transform: none !important;
  padding-top: 0 !important;
  -webkit-transition: none !important;
  transition: none !important;
}

.ocm-effect-wrap-shadow,
.ocm-effect-wrap-shadow.material-ocm-open {
  display: none !important;
}

html body.material-ocm-open #header-outer,
html body.material-ocm-open #header-space,
html body.material-ocm-open #footer-outer,
html body.material-ocm-open .container-wrap,
html body.material-ocm-open #ajax-content-wrap {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}


/* --- Prevent body scroll-jump --------------------------------------------- */

html body.material-ocm-open {
  position: static !important;
  overflow: hidden !important;
  -webkit-transform: none !important;
  transform: none !important;
}

html body.material-ocm-open #ajax-content-wrap {
  position: static !important;
  top: auto !important;
}

.material-ocm-open .container-wrap {
  pointer-events: auto !important;
}


/* =============================================================================
   CUSTOM HEADER: Social icons left · logo center · hamburger right
   No main-menu navigation items are displayed.
   ============================================================================= */

@media only screen and (min-width: 1000px) {

  /* Hide the pull-left nav rendered inside span_9 */
  #header-outer[data-format="centered-logo-between-menu-alt"] #top > .container > .row > .span_9 nav {
    display: none !important;
  }

  /* Hide any pull-right menu items but keep button items (OCM toggle, etc.) */
  #header-outer[data-format="centered-logo-between-menu-alt"] .right-aligned-menu-items nav > ul.buttons > li.menu-item {
    display: none !important;
  }

  /* Turn the nav in right-aligned-menu-items into a full-width flex row */
  #header-outer[data-format="centered-logo-between-menu-alt"] .right-aligned-menu-items nav {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  #header-outer #top>.container>.row .right-aligned-menu-items nav{

    flex-direction: row;
  }

  /* Social-icon list sits on the left */
  #header-outer[data-format="centered-logo-between-menu-alt"] .right-aligned-menu-items nav > ul:not(.buttons) {
    order: -1 !important;
    pointer-events: all !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Buttons list (hamburger) stays on the right */
  #header-outer[data-format="centered-logo-between-menu-alt"] .right-aligned-menu-items nav > ul.buttons {
    pointer-events: all !important;
  }

}


/* --- Close button: keep inside panel top-right ---------------------------- */

html #slide-out-widget-area.slide-out-from-right .slide_out_area_close {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  left: auto !important;
  z-index: 110 !important;
  display: block !important;
}

body > .slide_out_area_close__wrap {
  display: none !important;
}


/* =============================================================================
   FLOOR PLANS SHORTCODE
   ============================================================================= */

.fp-wrapper {
  display: flex;
  padding: 0px;
  gap: 50px;
}

.fp-content {
  flex: 0 0 58%;
  max-width: 58%;
}

.fp-sidebar {
  flex: 1 1 0%;
  min-width: 0;
}

/* --- Sidebar text -------------------------------------------------------- */

.fp-wrapper .fp-sidebar .fp-subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-transform: uppercase;
  margin-bottom: 12px;
  height: auto !important;
  overflow: visible !important;
}

.fp-wrapper .fp-sidebar h2.fp-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 18px;
  padding: 0;
  height: auto !important;
  overflow: visible !important;
  text-transform: none;
  letter-spacing: 0;
}

.fp-wrapper .fp-sidebar .fp-description {
  display: block !important;
  margin: 0 0 30px;
}

/* --- Lot buttons --------------------------------------------------------- */

.fp-lot-list {
  display: flex;
  flex-direction: column;
}

.fp-lot-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid #818C95;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background-color 0.25s ease;
  color:#818C95;
}

body[data-button-style*="slightly_rounded"] button.fp-lot-btn{
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}

.fp-lot-btn:first-child {
  border-top: 1px solid #818C95;
}

.fp-lot-btn:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.fp-lot-btn--active {
  background-color: #fff;
}

.fp-lot-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-left: 2px solid #818C95;
  border-bottom: 2px solid #818C95;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* --- Accordion header (mobile only – hidden on desktop) ------------------ */

.fp-accordion-header {
  display: none;
}

/* --- Panels (left content) ----------------------------------------------- */

.fp-panels {
  position: relative;
}

.fp-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.fp-panel--active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

/* --- Floor-plan images row ----------------------------------------------- */

.fp-floor-images {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

.fp-floor-image {
  flex: 1 1 0%;
  min-width: 0;
  text-align: center;
  display: Flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
}

.fp-floor-image img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0px !important;
  max-width: 260px !important;
}

.fp-wrapper .fp-floor-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 16px;
  text-align: left;
  height: auto !important;
  overflow: visible !important;
}

/* --- Meta row: lot thumbnail + stats ------------------------------------- */

.fp-meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;

}

.fp-lot-thumb {
  flex: 0 0 80px;
}

.fp-lot-thumb img {
  display: block;
  width: 80px;
  height: auto;
  border-radius: 2px;
}

/* --- Stats --------------------------------------------------------------- */

.fp-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 15px 0;
  border-top: 1px solid #818C95;
  border-bottom: 1px solid #818C95;
  flex:1;

}

.fp-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-stat-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.fp-stat-value {
  font-size: 20px;
  font-weight: 600;
}

.fp-stat--area {
  gap: 8px;
  padding-left:15px;
}

.fp-stat--area .fp-stat-value{
    font-weight:500;
}

.fp-stat--area-multi {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.fp-area-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fp-area-lots {
  font-size: 16px;
  font-weight: 600;
  min-width: 40px;
}

.fp-stat-label {
  font-size: 20px;
  font-weight: 500;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .fp-wrapper {
    flex-direction: column-reverse;
    padding: 0px;
    gap: 30px;
  }

  .fp-content {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .fp-title {
    font-size: 28px;
  }

  .fp-floor-images {
    flex-wrap: wrap;
  }

  .fp-floor-image {
    flex: 1;
  }

  .fp-floor-image img{
    max-width: 100% !important;
  }

  /* --- Mobile accordion -------------------------------------------------- */

  /* Hide desktop sidebar lot buttons */
  .fp-lot-list {
    display: none;
  }

  /* Panels stack in normal flow; opacity/visibility reset from desktop tabs */
  .fp-panels {
    position: static;
  }

  .fp-panel {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Show accordion header */
  .fp-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    border: none;
    border-top: 1px solid #818C95;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #818C95;
  }

  body[data-button-style*="slightly_rounded"] button.fp-accordion-header {
    border-radius:0px !important;
    -webkit-border-radius: 0px !important;
  }

  .fp-panel:last-child .fp-accordion-header {
    border-bottom: 1px solid #818C95;
  }

  .fp-panel--accordion-open:last-child .fp-accordion-header {
    border-bottom: none;
  }

  /* Chevron arrow */
  .fp-accordion-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #818C95;
    border-bottom: 2px solid #818C95;
    transform: rotate(-45deg);
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  .fp-panel--accordion-open .fp-accordion-chevron {
    transform: rotate(135deg);
  }

  /* Accordion body: collapsed by default, expands with max-height transition */
  .fp-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .fp-panel--accordion-open .fp-accordion-body {
    max-height: 2000px;
  }

  /* Spacing inside expanded body */
  .fp-panel--accordion-open .fp-accordion-body > .fp-floor-images {
    margin-top: 20px;
  }

  .fp-stats{
    border:none;
    gap: 10px;
    padding-top:10px;
  }

  .fp-stat-value{
    font-size:16px;
  }

  .fp-stat--area{
    width:100%;
    padding-left:0px;
    border-top: 1px solid #818C95;
    padding-top: 10px;
  }

  .fp-stat-label{
    white-space:nowrap;
    font-size:16px;
  }

  .fp-wrapper .fp-floor-label{
    font-size:12px;
  }
}

/* =============================================================================
   LOCATIONS MAP SHORTCODE
   ============================================================================= */

.clm-locations-map-wrap {
  width: 100%;
}

.clm-locations-map {
  width: 100%;
}

.clm-location-list {
  margin-top: 18px;
}

.clm-location-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.clm-location-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.clm-location-item strong {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.clm-location-list-empty {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.clm-map-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f05a28;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.clm-map-infowindow {
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .clm-location-items {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   GALLERY: overlaid arrows + bottom dots
   ============================================================================= */

.wpb_gallery.border-radius-gallery .nectar-flickity {
  padding-bottom: 24px;
}

.wpb_gallery.border-radius-gallery .flickity-page-dots {
  bottom: 0;
}