/* ==========================================================================
   G.O INVESTMENTS — BRAND REFRESH
   Palette: Olive / Gold / Black / White
   Fonts:   Fraunces (display) + Inter (body)
   ========================================================================== */

:root {
  /* --- Brand palette --- */
  --goinv-olive-dark:   #232B17;   /* near-black olive, header/footer base   */
  --goinv-olive:        #4C5A33;   /* primary olive                          */
  --goinv-olive-mid:    #6E7C4E;   /* lighter olive for hovers/tags          */
  --goinv-olive-tint:   #EEF0E4;   /* pale olive section background         */
  --goinv-gold:         #C6A15B;   /* primary gold accent                    */
  --goinv-gold-dark:    #A17F3E;   /* gold hover/pressed                     */
  --goinv-black:        #16160F;
  --goinv-white:        #FFFFFF;
  --goinv-cream:        #FBFAF6;   /* warm off-white page background        */
  --goinv-ink:          #24261C;   /* body text, warm near-black            */
  --goinv-gray:         #6C6C5F;   /* muted / secondary text                */
  --goinv-border:       #E3E0D4;

  /* --- Type --- */
  --goinv-font-display: 'Fraunces', Georgia, serif;
  --goinv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --goinv-radius: 4px;
  --goinv-radius-lg: 10px;
  --goinv-shadow: 0 6px 24px rgba(22, 22, 15, 0.08);
  --goinv-shadow-hover: 0 14px 34px rgba(22, 22, 15, 0.16);
}

/* ==========================================================================
   1. GLOBAL RESET / TYPOGRAPHY
   ========================================================================== */

body {
  background: var(--goinv-cream);
  color: var(--goinv-ink);
  font-family: var(--goinv-font-body);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--goinv-font-display);
  color: var(--goinv-olive-dark);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .elementor-heading-title.h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2, .elementor-heading-title.h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
h3, .elementor-heading-title.h3 { font-size: 1.35rem; }

a { color: var(--goinv-olive); }
a:hover { color: var(--goinv-gold-dark); }

::selection {
  background: var(--goinv-gold);
  color: var(--goinv-black);
}

/* Keyboard focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--goinv-gold-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   2. SIGNATURE DIVIDER — surveyor's mark
   Use as a section break: a thin gold line with a small rotated diamond,
   nodding to land-survey marks / property boundary pins.
   Add a <div class="goinv-divider"></div> between Elementor sections if desired.
   ========================================================================== */

.goinv-divider {
  position: relative;
  height: 1px;
  background: var(--goinv-border);
  margin: 3rem auto;
  max-width: 1200px;
}
.goinv-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  background: var(--goinv-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.elementor-button,
button,
.es-btn,
input[type="submit"],
a.button {
  font-family: var(--goinv-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--goinv-olive-dark);
  color: var(--goinv-white) !important;
  border: 1px solid var(--goinv-olive-dark);
  border-radius: var(--goinv-radius);
  padding: 0.85em 1.8em;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.elementor-button:hover,
button:hover,
.es-btn:hover,
input[type="submit"]:hover,
a.button:hover {
  background: var(--goinv-gold);
  border-color: var(--goinv-gold);
  color: var(--goinv-black) !important;
  transform: translateY(-1px);
}

/* Secondary / outline variant — add class "goinv-btn-outline" in Elementor */
.goinv-btn-outline,
.elementor-button.goinv-btn-outline {
  background: transparent;
  color: var(--goinv-olive-dark) !important;
  border: 1px solid var(--goinv-olive-dark);
}
.goinv-btn-outline:hover {
  background: var(--goinv-olive-dark);
  color: var(--goinv-white) !important;
}

/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */

header, .site-header, #masthead {
  background: var(--goinv-white);
  border-bottom: 1px solid var(--goinv-border);
  transition: box-shadow 0.2s ease;
}

header.goinv-scrolled, .site-header.goinv-scrolled, #masthead.goinv-scrolled {
  box-shadow: 0 2px 14px rgba(22, 22, 15, 0.08);
}

.site-header .main-navigation a,
header nav a,
#masthead nav a {
  font-family: var(--goinv-font-body);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--goinv-olive-dark);
}

.site-header .main-navigation a:hover,
header nav a:hover {
  color: var(--goinv-gold-dark);
}

/* Active/current nav item gets a gold underline */
.current-menu-item > a,
.current_page_item > a {
  position: relative;
  color: var(--goinv-olive-dark) !important;
}
.current-menu-item > a::after,
.current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--goinv-gold);
}

/* ==========================================================================
   5. HERO + SEARCH WIDGET (Estatik search)
   ========================================================================== */

.estatik-search-widget,
.es-widget-search-container,
.elementor-widget-estatik_search {
  background: var(--goinv-white);
  border: 1px solid var(--goinv-border);
  border-top: 3px solid var(--goinv-gold);
  border-radius: var(--goinv-radius-lg);
  box-shadow: var(--goinv-shadow);
  padding: 1.5rem;
}

.estatik-search-widget select,
.estatik-search-widget input[type="text"],
.estatik-search-widget input[type="search"],
.es-widget-search-container select,
.es-widget-search-container input {
  font-family: var(--goinv-font-body);
  border: 1px solid var(--goinv-border);
  border-radius: var(--goinv-radius);
  background: var(--goinv-cream);
  color: var(--goinv-ink);
}

.estatik-search-widget select:focus,
.estatik-search-widget input:focus {
  border-color: var(--goinv-gold);
}

/* ==========================================================================
   6. PROPERTY LISTING CARDS
   Targets Estatik's common markup plus a generic fallback for any card
   whose link points to a /property/ URL, so styling still applies even if
   exact class names differ slightly between plugin versions.
   ========================================================================== */

.estatik-property-listing-item,
.es-listing-item,
.estatik-property-item,
article.property {
  background: var(--goinv-white);
  border: 1px solid var(--goinv-border);
  border-radius: var(--goinv-radius-lg);
  overflow: hidden;
  box-shadow: var(--goinv-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.estatik-property-listing-item:hover,
.es-listing-item:hover,
.estatik-property-item:hover,
article.property:hover {
  box-shadow: var(--goinv-shadow-hover);
  transform: translateY(-3px);
}

/* Price */
.estatik-property-listing-item .price,
.es-listing-item .price,
.estatik-price {
  font-family: var(--goinv-font-display);
  font-weight: 600;
  color: var(--goinv-olive-dark);
  font-size: 1.15rem;
}

/* Status/category badges (Featured, Just listed, For sale, For rent) */
.es-label,
.estatik-label,
.property-label,
[class*="es_label"] {
  font-family: var(--goinv-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--goinv-olive-dark);
  color: var(--goinv-white);
  border-radius: 2px;
  padding: 0.3em 0.7em;
}

/* "Featured" specifically gets the gold treatment */
.es-label.featured,
[class*="featured"] {
  background: var(--goinv-gold);
  color: var(--goinv-black);
}

/* Bed / bath / m² meta row */
.estatik-property-listing-item .property-meta,
.es-listing-item .meta,
.estatik-meta {
  color: var(--goinv-gray);
  font-size: 0.88rem;
}

/* Location tag */
.estatik-property-listing-item .location,
.es-listing-item .location {
  color: var(--goinv-olive);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Save / heart icon accent */
.es-save-listing, .estatik-save, [class*="save-listing"] {
  color: var(--goinv-gray);
}
.es-save-listing:hover, .estatik-save:hover {
  color: var(--goinv-gold-dark);
}

/* ==========================================================================
   7. FILTER PANEL (price / bedrooms / bathrooms / amenities)
   ========================================================================== */

.estatik-filters,
.es-filters,
.elementor-widget-estatik_filter {
  background: var(--goinv-olive-tint);
  border-radius: var(--goinv-radius-lg);
  padding: 1.25rem 1.5rem;
}

.estatik-filters label,
.es-filters label {
  font-weight: 600;
  color: var(--goinv-olive-dark);
  font-size: 0.85rem;
}

/* Amenity/feature checkbox pills */
.estatik-filters .amenity-item,
.es-filters .feature-item {
  border: 1px solid var(--goinv-border);
  border-radius: 20px;
  background: var(--goinv-white);
}
.estatik-filters .amenity-item.active,
.es-filters .feature-item.active {
  background: var(--goinv-olive);
  color: var(--goinv-white);
  border-color: var(--goinv-olive);
}

/* ==========================================================================
   8. INQUIRY / REQUEST FORM
   ========================================================================== */

.estatik-request-form,
.es-request-info-form,
.elementor-widget-form form {
  background: var(--goinv-white);
  border: 1px solid var(--goinv-border);
  border-radius: var(--goinv-radius-lg);
  padding: 2rem;
}

.estatik-request-form input,
.estatik-request-form select,
.estatik-request-form textarea,
.elementor-widget-form input,
.elementor-widget-form select,
.elementor-widget-form textarea {
  border: 1px solid var(--goinv-border);
  border-radius: var(--goinv-radius);
  background: var(--goinv-cream);
  padding: 0.75em 1em;
}

.estatik-request-form input:focus,
.estatik-request-form textarea:focus,
.elementor-widget-form input:focus,
.elementor-widget-form textarea:focus {
  border-color: var(--goinv-gold);
  background: var(--goinv-white);
}

/* ==========================================================================
   9. TESTIMONIALS
   ========================================================================== */

.elementor-testimonial,
.testimonial-item {
  background: var(--goinv-olive-dark);
  color: var(--goinv-white);
  border-radius: var(--goinv-radius-lg);
  padding: 2rem;
}

.elementor-testimonial .elementor-testimonial__content,
.testimonial-item .content {
  font-family: var(--goinv-font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--goinv-white);
}

.elementor-testimonial .elementor-testimonial__name,
.testimonial-item .name {
  color: var(--goinv-gold);
  font-weight: 700;
}

/* Star ratings, if used */
.elementor-star-rating i,
.star-rating i {
  color: var(--goinv-gold);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

footer, #colophon, .site-footer {
  background: var(--goinv-olive-dark);
  color: var(--goinv-cream);
}

footer h2, footer h3, footer h4,
#colophon h2, #colophon h3, #colophon h4,
.site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--goinv-gold);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

footer a, #colophon a, .site-footer a {
  color: var(--goinv-cream);
}
footer a:hover, #colophon a:hover, .site-footer a:hover {
  color: var(--goinv-gold);
}

footer .copyright, #colophon .copyright {
  color: rgba(251, 250, 246, 0.55);
  font-size: 0.82rem;
  border-top: 1px solid rgba(251, 250, 246, 0.12);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   11. WHATSAPP / FLOATING CHAT WIDGET
   ========================================================================== */

/* Recolor the floating launcher bubble to gold so it still reads as an
   action button but matches brand instead of default WhatsApp green. Scoped
   broadly since third-party chat plugins vary in markup. */
[class*="whatsapp"] .chat-bubble,
[id*="whatsapp"] .chat-bubble,
[class*="whatsapp-widget"] {
  --wa-accent: var(--goinv-gold);
}

/* ==========================================================================
   12. SECTION SPACING / UTILITIES
   ========================================================================== */

.elementor-section {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.goinv-olive-bg { background: var(--goinv-olive-tint) !important; }
.goinv-dark-bg  { background: var(--goinv-olive-dark) !important; color: var(--goinv-white) !important; }

/* ==========================================================================
   13. RESPONSIVE TWEAKS
   ========================================================================== */

@media (max-width: 767px) {
  .estatik-search-widget,
  .es-widget-search-container {
    padding: 1rem;
  }
  .elementor-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}