/* ==========================================================================
   Vistamare - Elementor Dark Navy & Gold Overrides
   Ensures existing Elementor pages inherit luxury dark styling seamlessly
   ========================================================================== */

/* Sections & Wrappers */
.elementor-section,
.elementor-section-wrap,
.elementor-column-wrap,
.elementor-widget-wrap {
  background-color: transparent !important;
}

body .elementor-section:not([data-settings*="background_background"]) {
  background-color: var(--vm-navy-900) !important;
}

/* Headings in Elementor */
.elementor-widget-heading .elementor-heading-title {
  color: var(--vm-text-white) !important;
  font-family: var(--vm-font-serif) !important;
}

/* Paragraphs & Text Editor in Elementor */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  color: var(--vm-text-cream) !important;
  font-family: var(--vm-font-sans) !important;
}

/* Buttons in Elementor */
.elementor-widget-button .elementor-button {
  background: var(--vm-gold-gradient) !important;
  color: #080e1a !important;
  border-radius: 4px !important;
  font-family: var(--vm-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3) !important;
  transition: all 0.35s ease !important;
  border: 1px solid transparent !important;
}

.elementor-widget-button .elementor-button:hover {
  background: var(--vm-gold-gradient-hover) !important;
  color: #050811 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(223, 186, 115, 0.45) !important;
}

/* Icon Box Widget */
.elementor-widget-icon-box .elementor-icon-box-title {
  color: var(--vm-text-white) !important;
  font-family: var(--vm-font-serif) !important;
}

.elementor-widget-icon-box .elementor-icon-box-description {
  color: var(--vm-text-muted) !important;
  font-family: var(--vm-font-sans) !important;
}

.elementor-widget-icon-box .elementor-icon {
  color: var(--vm-gold-400) !important;
  fill: var(--vm-gold-400) !important;
}

/* Hero Section Overlay */
.elementor-element-e9dccb9 > .elementor-background-overlay {
  background: linear-gradient(
    180deg,
    rgba(8, 14, 26, 0.72) 0%,
    rgba(11, 19, 37, 0.85) 60%,
    rgba(8, 14, 26, 0.98) 100%
  ) !important;
  opacity: 0.9 !important;
}

/* Suite Cards / Columns */
.elementor-element-fcf111b,
.elementor-element-187c5fb,
.elementor-element-8994bca {
  border: 1px solid rgba(197, 168, 128, 0.25) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.35s ease !important;
}

.elementor-element-fcf111b:hover,
.elementor-element-187c5fb:hover,
.elementor-element-8994bca:hover {
  border-color: var(--vm-gold-400) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Seamless 2x2 Puzzle Grid Override for Elementor Living the Horizon Gallery */
.elementor-element-f9c50bc .gallery-columns-2,
.elementor-element-415e2e2 .gallery {
  display: grid !important;
  grid-template-columns: 461fr 460fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 2px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(197, 168, 128, 0.3) !important;
  background: rgba(197, 168, 128, 0.25) !important;
  max-width: 520px !important;
}

.elementor-element-f9c50bc .gallery-item,
.elementor-element-415e2e2 .gallery-item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #080e1a !important;
  display: block !important;
}

.elementor-element-f9c50bc .gallery-item img,
.elementor-element-415e2e2 .gallery-item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Blocksy Footer Overrides */
.ct-footer {
  background: var(--vm-navy-950) !important;
  border-top: 1px solid rgba(197, 168, 128, 0.2) !important;
  color: var(--vm-text-muted) !important;
}

.ct-footer h3, .ct-footer h4 {
  color: var(--vm-text-white) !important;
  font-family: var(--vm-font-serif) !important;
}

.ct-footer a {
  color: var(--vm-text-muted) !important;
}

.ct-footer a:hover {
  color: var(--vm-gold-400) !important;
}