/* ------------------- VARIABLES ------------------- */
:root {
  --lfre-highlight-color: #57b5e0;
  --lfre-secondary-color: #636b70;
  --lfre-highlight-hover-color: #47a5d0;
  --lfre-border-color: #d1d2d3;
  --lfre-bg-light-color: #f2f3f4;
  --lfre-corner-radius: 8px;
  --lfre-feature-bg-color: black;
  --lfre-body-color: white; /* I use this for the BG colour */
  --bs-body-color: #636b70; /* BS uses this for the text colour */
  --bs-body-bg: white;
  --bs-secondary-color: #b1b2b3;
  --bs-heading-color: black;
  --bs-border-color: #d1d2d3;
  --bs-link-color: var(--lfre-highlight-color);
  --bs-link-hover-color: var(--lfre-highlight-hover-color);
  --bs-primary-rgb: 87, 181, 224;
}

/* ------------ DARK MODE  ----------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-color: #b3bbc0; /* text colour */
    --bs-body-bg: #202326; /* BG colour */
    --bs-heading-color: white;
    --lfre-bg-light-color: black;
    --bs-border-color: #303336;
    --lfre-feature-bg-color: black;
  }
  .lfre-company-logo-image {
    mix-blend-mode: normal !important;
  }
  .form-control {
    background-color: black;
  }
  .form-select {
    background-color: black;
  }
  .grid-cell {
    background: black;
  }
  .nav-underline .nav-link.active,
  .nav-underline .show > .nav-link {
    --bs-nav-underline-link-active-color: white;
  }
  #searchLocation::placeholder,
  #searchKeyword::placeholder {
    color: white !important;
  }

  #typeahead-result {
    background-color: black !important;
    color: white !important;
  }
}

/* ------------------- TABLES ------------------- */
.table > :not(caption) > * > * {
  --bs-table-color: var(--bs-body-color);
}

/* ------------------- HR ------------------- */
hr {
  color: var(--bs-border-color);
  opacity: 1;
}

/* ------------------- LINKS ------------------- */
a {
  color: var(--lfre-highlight-color);
  text-decoration: none;
}

/* ------------------- BUTTONS ------------------- */

.btn-primary {
  --bs-btn-color: var(--lfre-body-color);
  --bs-btn-bg: var(--lfre-highlight-color);
  --bs-btn-border-color: var(--lfre-highlight-color);
  --bs-btn-hover-color: var(--lfre-body-color);
  --bs-btn-hover-bg: var(--lfre-highlight-hover-color);
  --bs-btn-hover-border-color: var(--lfre-highlight-hover-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--lfre-body-color);
  --bs-btn-active-bg: var(--lfre-highlight-hover-color);
  --bs-btn-active-border-color: var(--lfre-highlight-hover-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--lfre-body-color);
  --bs-btn-disabled-bg: var(--lfre-highlight-color);
  --bs-btn-disabled-border-color: var(--lfre-highlight-color);
}

.btn-outline-primary {
  --bs-btn-color: var(--lfre-highlight-color);
  --bs-btn-border-color: var(--lfre-highlight-color);
  --bs-btn-hover-color: var(--lfre-body-color);
  --bs-btn-hover-bg: var(--lfre-highlight-color);
  --bs-btn-hover-border-color: var(--lfre-highlight-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--lfre-body-color);
  --bs-btn-active-bg: var(--lfre-highlight-color);
  --bs-btn-active-border-color: var(--lfre-highlight-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--lfre-highlight-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--lfre-highlight-color);
  --bs-gradient: none;
}

.btn-link {
  text-decoration: none;
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--lfre-body-color);
  --bs-nav-pills-link-active-bg: var(--lfre-highlight-color);
}

.nav-link {
  color: var(--lfre-highlight-color);
}

.nav {
  --bs-nav-link-hover-color: var(--lfre-highlight-color);
}

.btn-outline-secondary {
  border-color: var(--bs-border-color);
}

.btn.btn-lg {
  font-size: 1rem;
  padding: 0.75rem 1rem;
}

/* ------------------- TYPOGRAPHY ------------------- */

h1 {
  letter-spacing: -0.015em;
}

.lfra-text-mono {
  width: 1rem;
  text-align: center;
  margin-right: 0.5rem;
}

/* ------------------- FORMS ------------------ */

.form-label,
.form-select,
.form-control,
.form-check-label {
  color: var(--bs-heading-color);
}

.lfre-prefix-icon {
  position: absolute;
  top: 0.45em;
  left: 0.8em;
}

.lfre-prefix-icon + input.form-control {
  padding-left: 2.25em;
}

input::placeholder {
  opacity: 0.5 !important;
}

.form-check-input:checked {
  background-color: var(--lfre-highlight-color);
  border-color: var(--lfre-highlight-color);
}

#searchLocation::placeholder,
#searchKeyword::placeholder {
  color: black;
}

.form-control-lg {
  font-size: 1rem;
  padding: 0.75rem 1rem;
}

/* ------------------- LANDING PAGE ------------------- */

.lfre-hero {
  padding-block: 5vw;
  background-image: url(https://d565dvcn8o0br.cloudfront.net/e1ad4274-29e7-424a-86db-30fbe53cb451/assets/background.jpg); /* placeholder image */
  background-size: cover;
}

.lfre-hero-h1 {
  color: white;
  font-weight: bold;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.lfre-search-container {
  background: var(--bs-body-bg);
  border-radius: var(--lfre-corner-radius);
}

@media (min-width: 576px) {
  #searchLocation {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
  }
  #searchKeyword {
    border-radius: 0;
    border-right-width: 0;
  }
  #searchFilters {
    border-radius: 0;
    border-right-width: 0;
  }
  #searchButton {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.lfre-intro-card {
  background: var(--lfre-bg-light-color);
  border-radius: var(--lfre-corner-radius);
}

/* ------------------- LISTINGS ------------------- */

.lfre-search-results {
}

/* ----- Grid for cards ----- */
.grid-wrapper {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  margin-bottom: 1rem;
}

.grid-cell {
  text-align: left;
  overflow: hidden;
  border-radius: var(--lfre-corner-radius);
  border: 1px solid var(--bs-border-color);
  text-decoration: none;
}

.grid-cell-image {
  display: block;
  opacity: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 4px;
}

.grid-cell-image img {
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.grid-cell-text {
  padding: 0.75rem;
  line-height: 1.25;
  color: var(--bs-body-color);
}

.grid-cell-title {
  display: block;
  font-weight: bold;
  font-size: 1.1rem;
  margin: 0;
}

.grid-cell-desc {
  display: block;
  font-size: 1em;
  font-weight: normal;
}

.grid-cell-logo {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: bottom;
}

/* ------------------- LISTING DETAIL ------------------- */

/* ------------------ GALLERY CAROUSEL ------------------ */

#lfreCarousel .carousel-item iframe {
  width: 100%;
  display: block;
}

#lfreCarousel .carousel-item img, #lfreCarousel .carousel-item iframe {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

@media (min-width: 768px) {
#lfreCarousel .carousel-item img, #lfreCarousel .carousel-item iframe {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1200px) {
#lfreCarousel .carousel-item img, #lfreCarousel .carousel-item iframe {
    aspect-ratio: 18 / 9;
  }
}

@media (min-width: 1400px) {
#lfreCarousel .carousel-item img, #lfreCarousel .carousel-item iframe {
    aspect-ratio: 22 / 9;
  }
}

@media (min-width: 1600px) {
#lfreCarousel .carousel-item img, #lfreCarousel .carousel-item iframe {
    aspect-ratio: 28 / 9;
  }
}

#lfreCarousel .carousel-control-next, #lfreCarousel .carousel-control-prev {
    opacity: 1;
}

#lfreCarousel .carousel-control-next:focus, #lfreCarousel .carousel-control-next:hover, #lfreCarousel .carousel-control-prev:focus, #lfreCarousel .carousel-control-prev:hover {
    opacity: 1;
}

#lfreCarousel .carousel-control-next-icon, #lfreCarousel .carousel-control-prev-icon {
    filter: drop-shadow(0px 0px 2px black);
}

.lfre-feature {
  background: var(--lfre-feature-bg-color);
}

@media (min-width: 575px) {
  .lfre-feature-image {
    max-height: 60vh;
    display: block;
    margin: auto;
  }
}

.lfre-listing-detail {
  padding-bottom: calc(3rem + env(safe-area-inset-bottom));
}

.lfre-map {
  aspect-ratio: 16 / 9;
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: var(--lfre-corner-radius);
  background: var(--lfre-bg-light-color);
}

.lfre-contact-card {
  border-radius: var(--lfre-corner-radius);
  background: var(--lfre-bg-light-color);
}

.lfre-company-logo-image {
  width: 100%;
  height: auto;
  max-width: 6rem;
  mix-blend-mode: multiply;
}

/* ------------------- FOOTER ------------------- */

.lfre-footer {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(7px);
  border-top: 1px solid var(--bs-border-color);
}

.lfre-footer-nav {
  display: block;
  height: 100%;
  color: black;
  opacity: 0.4;
  text-decoration: none;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}

.lfre-footer-nav.nav-active {
  opacity: 1;
  color: var(--lfre-highlight-color);
}

.lfre-footer-icon {
  font-size: 22px;
  margin: 8px auto 0 auto;
  display: block!important;
}

.lfre-footer-nav-label {
  font-size: 11px;
}

/* -------------------------------------------------------- */
/* ------------------- DASHBOARD STYLES ------------------- */
/* -------------------------------------------------------- */

.lfre-dashboard-header {
  height: 5rem;
}

/* --- Custom Column --- */

.lfre-col-55 {
  flex: 0 0 auto;
  width: 45%;
}

.lfre-col-11 {
  flex: 0 0 auto;
  width: 10%;
}

.lfre-bg-light {
  background: var(--lfre-bg-light-color) !important;
}

/* ------------------- LISTINGS ------------------- */

.lfre-site-thumb {
  height: 3rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

#videoThumbnail {
  aspect-ratio: 16 / 9;
}

/* ------------------- OFF-CANVAS ------------------- */

@media (min-width: 576px) {
  .offcanvas-sm .offcanvas-header,
  .offcanvas-sm .offcanvas-body {
    display: none !important; /* Vislity fix */
  }
}

/* ------------------- TYPEAHEAD ------------------- */

.typeahead-result-item:hover, 
  .typeahead-result-item:focus-visible {
    background: var(--lfre-highlight-color) !important;
    color: var(--lfre-body-color) !important;
    outline: none !important;
  }



  #typeahead-result {
    background: white;
    color: black;
}