/* ===========================================================
   Brand palette
   These three colors come from the Aeraki Palms logo and are
   the single source of truth for all accents on the site.
     --brand-olive : primary accent (buttons, links, icons, prices)
     --brand-deep  : hover/active variant of the primary
     --brand-gold  : secondary highlight (chips, badge stars)
   The template ships with --accent-color: #2c7a7b (teal); we
   overwrite the template's own root variables so every selector
   that reads var(--accent-color) automatically picks up the olive.
   --brand-primary is an alias so component rules can target the
   primary color without knowing which logo color is in that role.
   =========================================================== */
:root {
  --brand-olive: #878d36;
  --brand-deep: #8b641d;
  --brand-gold: #ebae37;
  --brand-ink: #1f1f1f;

  --brand-primary: var(--brand-olive);

  --accent-color: var(--brand-primary) !important;
  --nav-hover-color: var(--brand-deep) !important;
  --nav-dropdown-hover-color: var(--brand-deep) !important;
}

/* Shared brand styles */
.sitename {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.header .logo img {
  height: 90px;
  width: auto;
  max-height: 70px;
}

.header .logo h1 {
  font-size: 22px;
  margin: 0 0 0 12px;
  color: var(--brand-ink);
}

.footer .logo img {
  height: 64px;
  width: auto;
}

/* Home page accents */
.hero-badge i { color: var(--brand-primary) !important; }
.badge-set .flag.featured { background: var(--brand-primary); color: #fff; }
.badge-set .flag.premium { background: var(--brand-ink); color: var(--brand-primary); }
.price,
.stack-price,
.mini-price { color: var(--brand-primary) !important; }

/* "Up to X Guests" capacity badge — sits on an olive-green filled background,
   so the text must be white to be legible */
.featured-properties .highlight-card .content .top .price {
  color: #fff !important;
}

/* About page accents */
.achievement-icon i { color: var(--brand-primary); }
.timeline-year {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

/* Villa details accents */
.property-features-list i,
.property-amenities i { color: var(--brand-primary) !important; }
.property-price { color: var(--brand-primary) !important; }

.villa-card-pick {
  border: 1px solid #e6dfd0;
  border-radius: 14px;
  padding: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
  height: 100%;
}

.villa-card-pick:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.villa-card-pick h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 10px 0 6px;
}

.villa-card-pick .meta {
  font-size: 13px;
  color: #6b6b6b;
}

.villa-card-pick a.btn-pick {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  padding: 8px 14px;
  border-radius: 30px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.villa-card-pick a.btn-pick:hover {
  background: var(--brand-deep);
  color: #fff;
  border-color: var(--brand-deep);
}

/* ===========================================================
   Global accent overrides
   The template colors a wide variety of UI affordances with
   --accent-color via color-mix and direct references. These
   blanket rules push the gold/olive/deep palette to the rest
   of the site: buttons, links, icons, badges, focus rings.
   =========================================================== */

/* Primary CTAs in the template */
.btn-getstarted,
.btn-main,
.btn-soft:hover,
.btn-all-services,
.book-now-btn,
.discover-btn,
.stay-card .stay-action a.btn,
.cta-button {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.btn-getstarted:hover,
.btn-main:hover,
.btn-all-services:hover,
.book-now-btn:hover,
.discover-btn:hover,
.cta-button:hover {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
}

/* Outline / soft buttons */
.btn-soft,
.btn-outline,
.stack-link,
.mini-btn {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background: transparent;
}

.btn-soft:hover,
.btn-outline:hover,
.stack-link:hover,
.mini-btn:hover {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
}

/* Mini-cards keep the original solid pill for the small action */
.featured-properties .mini-list .mini-card .mini-body .mini-foot .mini-btn {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

.featured-properties .mini-list .mini-card .mini-body .mini-foot .mini-btn:hover {
  background: var(--brand-deep) !important;
}

/* Generic icon coloring — Bootstrap Icons used inline for bullets,
   stats, contact details, amenities, footer columns and feature lists */
.section-badge i,
.stats-section i,
.hero-stats i,
.service-card i,
.amenity-item i,
.feature-item i,
.feature-icon i,
.about-feature i,
.icon-box i,
.info-item i,
.contact-info i,
.footer-contact i,
.footer .social-links a i,
.scroll-top i,
.hero .swiper-button-prev,
.hero .swiper-button-next,
.stack-loc i,
.mini-loc i,
.mini-specs i,
.stack-specs i,
.quick-specs i,
.loc i,
.section-title h2::after,
.bi.text-accent { color: var(--brand-primary) !important; }

/* Chips and category badges — alternate gold/olive/deep for variety */
.featured-properties .stack-card .stack-media figcaption .chip.exclusive,
.chip.exclusive { background: var(--brand-deep) !important; color: #fff !important; }

.featured-properties .stack-card .stack-media figcaption .chip.hot,
.chip.hot { background: var(--brand-primary) !important; color: #fff !important; }

.featured-properties .stack-card .stack-media figcaption .chip.new,
.chip.new { background: var(--brand-gold) !important; color: #fff !important; }

.featured-properties .mini-list .mini-card .thumb .label.hot { background: var(--brand-primary) !important; }
.featured-properties .mini-list .mini-card .thumb .label.new { background: var(--brand-gold) !important; }
.featured-properties .mini-list .mini-card .thumb .label.featured { background: var(--brand-deep) !important; }

/* Links inside body copy and nav hover */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-deep); }

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus,
.navmenu li:hover > a { color: var(--brand-deep) !important; }

/* Section title underline */
.section-title h2 { position: relative; }
.section-title h2::after {
  background: var(--brand-primary) !important;
}

/* Form focus rings (booking form, contact form) */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(135, 141, 54, .2) !important;
}

/* Scroll-to-top button */
.scroll-top {
  background: var(--brand-primary) !important;
}
.scroll-top:hover {
  background: var(--brand-deep) !important;
}
.scroll-top i {
  color: #fff !important;
  font-size: 24px;
}

/* ===========================================================
   Image fit overrides
   The new photo set is mostly portrait orientation (2000x3000).
   The template's cards assume landscape webp. Force each image
   slot to a fixed aspect ratio with object-fit:cover so portrait
   shots get a centered crop instead of a thin horizontal strip.
   =========================================================== */

/* Generic: ensure any photo in a card-like wrapper fills it */
.hero .image-stack .main-image img,
.hero .image-stack .secondary-image img,
.home-about .main-image-wrapper > img.main-image,
.home-about .secondary-images .small-image img,
.featured-properties .highlight-card .media img,
.featured-properties .mini-card .thumb img,
.featured-properties .stack-card .stack-media img,
.why-us .image-showcase .main-image-wrapper img.main-image,
.call-to-action .cta-visual .main-image > img,
.recent-blog-posts .post-img img,
.about .visual-section .main-image > img,
.about .visual-section .overlay-image img,
.about .team-member .member-image img,
.property-details .main-image-container img.main-property-image,
.property-details .thumbnail-item img,
.villa-card-pick > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Card image wrappers: give each a consistent landscape crop window */
.featured-properties .highlight-card .media,
.featured-properties .mini-card .thumb,
.featured-properties .stack-card .stack-media,
.recent-blog-posts .post-img,
.about .team-member .member-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Hero / large feature slots: a slightly squarer crop reads better */
.hero .image-stack .main-image,
.home-about .main-image-wrapper,
.why-us .image-showcase .main-image-wrapper,
.call-to-action .cta-visual .main-image,
.about .visual-section .main-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero .image-stack .secondary-image,
.home-about .secondary-images .small-image,
.about .visual-section .overlay-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Villa-details: bigger primary photo, square thumbnails */
.property-details .main-image-container {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.property-details .thumbnail-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* "Other stays" small cards on villa-details */
.villa-card-pick > img {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}

/* ===========================================================
   Mini-card (Areca / Bonsai / Cycas) layout fix
   Template selector: .featured-properties .mini-list .mini-card
   uses display:grid; grid-template-columns: 120px 1fr.
   Widen the thumb column for a richer photo and force the body
   text to wrap inside its column instead of overflowing.
   =========================================================== */
.featured-properties .mini-list .mini-card {
  grid-template-columns: 200px minmax(0, 1fr) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.featured-properties .mini-list .mini-card .thumb {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.featured-properties .mini-list .mini-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.featured-properties .mini-list .mini-card .mini-body {
  min-width: 0 !important;
  padding: 14px 16px 14px 0 !important;
  overflow: hidden;
}

.featured-properties .mini-list .mini-card .mini-body h4 {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 6px 0;
  word-break: normal;
  overflow-wrap: anywhere;
  white-space: normal;
}

.featured-properties .mini-list .mini-card .mini-body h4 a {
  display: inline;
  white-space: normal;
}

.featured-properties .mini-list .mini-card .mini-body .mini-loc,
.featured-properties .mini-list .mini-card .mini-body .mini-specs {
  overflow-wrap: anywhere;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .featured-properties .mini-list .mini-card {
    grid-template-columns: 160px minmax(0, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .featured-properties .mini-list .mini-card {
    grid-template-columns: 1fr !important;
  }
  .featured-properties .mini-list .mini-card .thumb {
    aspect-ratio: 16 / 10;
    height: auto !important;
  }
  .featured-properties .mini-list .mini-card .mini-body {
    padding: 14px 16px 16px !important;
  }
}

/* ===========================================================
   Cottage stack-card — side-by-side layout
   The wide variant fills the full row width but splits the card
   into a left photo and a right body so the image no longer takes
   the entire row. Image gets ~45% of the row, content gets ~55%.
   On tablet/mobile the layout collapses to a stacked column.
   =========================================================== */
.featured-properties .stack-card.stack-card--wide {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.featured-properties .stack-card.stack-card--wide .stack-media {
  position: relative;
  display: block;
  flex: 0 0 45% !important;
  width: 45% !important;
  max-width: 45% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  overflow: hidden;
}

.featured-properties .stack-card.stack-card--wide .stack-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.featured-properties .stack-card.stack-card--wide .stack-media figcaption {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  margin: 0;
}

.featured-properties .stack-card.stack-card--wide .stack-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 32px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .featured-properties .stack-card.stack-card--wide {
    flex-direction: column;
  }
  .featured-properties .stack-card.stack-card--wide .stack-media {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }
  .featured-properties .stack-card.stack-card--wide .stack-body {
    padding: 20px !important;
  }
}

/* ===========================================================
   Highlight-card content layout fix
   The .content div is stretched to match the .mini-list height
   (3 stacked cards). Use flex-column so content fills naturally
   and the CTA anchors to the bottom.
   =========================================================== */
.featured-properties .highlight-card .content {
  display: flex;
  flex-direction: column;
}

.featured-properties .highlight-card .content .cta {
  margin-top: auto;
}

/* Villa highlights list — fills the gap between excerpt and CTA */
.highlight-features {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.highlight-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.4;
}

.highlight-features li i {
  color: var(--brand-primary) !important;
  font-size: 15px;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .highlight-features {
    grid-template-columns: 1fr;
  }
}