/* ==========================================================================
   MRA Real Estate - brand overrides
   Navy #0B163E - Gold #C8922A
   Loaded last, after all theme CSS. Never edit vendored theme files; they are
   re-downloaded by the mirror. Put every brand change here.
   ========================================================================== */

:root {
  --mra-navy: #0B163E;
  --mra-navy-700: #16224f;
  --mra-navy-900: #060d24;
  --mra-gold: #C8922A;
  --mra-gold-600: #b07f21;
  --mra-gold-100: #f6ecd8;

  /* Theme's own token (spaciaz/style.css) */
  --primary: var(--mra-gold);

  /* Elementor global tokens (wp-content/uploads/elementor/css/post-4.css) */
  --e-global-color-primary: var(--mra-gold);
  --e-global-color-primary_hover: var(--mra-gold-600);
  --e-global-color-accent: var(--mra-navy);
  --e-global-color-secondary: var(--mra-navy);
}

/* --------------------------------------------------------------------------
   Accents: gold for buttons, icons, dividers. Never large blocks.
   -------------------------------------------------------------------------- */
.c-primary,
.text-primary,
a:hover,
.elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor-widget-icon-list .elementor-icon-list-icon i {
  color: var(--mra-gold);
}

.bg-primary,
.elementor-widget-divider .elementor-divider-separator {
  background-color: var(--mra-gold);
  border-color: var(--mra-gold);
}

/* --------------------------------------------------------------------------
   Dark surfaces become navy rather than black.
   -------------------------------------------------------------------------- */
.bg-dark,
.bg-black,
footer#colophon,
.site-footer {
  background-color: var(--mra-navy) !important;
}

/* --------------------------------------------------------------------------
   Navy tint over hero and page-header imagery so photography feels unified.
   Uses ::before on the existing overlay element, so no markup changes.
   -------------------------------------------------------------------------- */
.breadcrumb-wrap .breadcrumb-overlay {
  background: linear-gradient(
    180deg,
    rgba(11, 22, 62, 0.78) 0%,
    rgba(11, 22, 62, 0.55) 100%
  ) !important;
}

/* --------------------------------------------------------------------------
   Headings sit on navy, not pure black.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
  color: var(--mra-navy);
}

/* Headings that sit on a dark background must stay light. */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .elementor-heading-title,
footer#colophon h1, footer#colophon h2, footer#colophon h3,
footer#colophon h4, footer#colophon h5, footer#colophon h6,
footer#colophon .elementor-heading-title,
.breadcrumb-wrap .elementor-heading-title,
.breadcrumb-wrap .entry-title,
.breadcrumb-wrap h1, .breadcrumb-wrap h2 {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Buttons: gold fill, navy label. Meets contrast at button text sizes.
   -------------------------------------------------------------------------- */
.btn-primary,
.elementor-button,
.spaciaz-button .btn,
input[type="submit"],
button[type="submit"] {
  background-color: var(--mra-gold);
  border-color: var(--mra-gold);
  color: var(--mra-navy);
}

.btn-primary:hover,
.elementor-button:hover,
.spaciaz-button .btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--mra-navy);
  border-color: var(--mra-navy);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Persistent "Book a Consultation" header button.
   -------------------------------------------------------------------------- */
.mra-consult-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--mra-gold);
  color: var(--mra-navy);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.mra-consult-btn:hover,
.mra-consult-btn:focus {
  background: var(--mra-navy);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Wordmark stands in for a logo file. Drop a real logo at
   assets/images/logo.svg and swap the <span> back to an <img>.
   -------------------------------------------------------------------------- */
.mra-wordmark-logo {
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--mra-navy);
  white-space: nowrap;
}

.mra-wordmark-logo strong { color: var(--mra-gold); font-weight: 700; }

/* Header sits over dark hero imagery on some pages. */
.header-absolute .mra-wordmark-logo,
.breadcrumb-wrap .mra-wordmark-logo { color: #ffffff; }

.site-title.mra-wordmark a { color: var(--mra-navy); font-weight: 600; }

/* Secondary hero CTA, sits beside the primary button. */
.mra-secondary-cta {
  display: inline-flex;
  align-items: center;
  margin-left: 18px;
  padding: 12px 0;
  color: inherit;
  font-weight: 600;
  border-bottom: 2px solid var(--mra-gold);
  line-height: 1;
}

.mra-secondary-cta:hover,
.mra-secondary-cta:focus { color: var(--mra-gold); }

@media (max-width: 575px) {
  .mra-secondary-cta { margin-left: 0; margin-top: 14px; }
}

/* Lead-magnet band. */
.mra-leadmagnet { text-align: center; padding: 8px 0; }
.mra-leadmagnet h2 { margin: 0 0 12px; }
.mra-leadmagnet p { margin: 0 auto 22px; max-width: 620px; }

/* Audience / service blocks authored for the blueprint. */
.mra-stack { list-style: none; margin: 0; padding: 0; }
.mra-stack > li { padding: 16px 0; }
.mra-stack > li strong { color: var(--mra-navy); display: block; margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Floating WhatsApp button. Mobile converts better on WhatsApp than a form.
   -------------------------------------------------------------------------- */
.mra-whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  background: #25D366;
  color: #072b12;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.mra-whatsapp-float:hover,
.mra-whatsapp-float:focus {
  background: #1da851;
  color: #ffffff;
}

.mra-whatsapp-float svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 575px) {
  .mra-whatsapp-float { padding: 14px; }
  .mra-whatsapp-float .mra-whatsapp-label { display: none; }
}

/* --------------------------------------------------------------------------
   Content blocks authored for the blueprint (five checks, area facts).
   -------------------------------------------------------------------------- */
.mra-checks { counter-reset: mra-check; list-style: none; margin: 0; padding: 0; }

.mra-checks > li {
  counter-increment: mra-check;
  position: relative;
  padding: 0 0 22px 58px;
  margin: 0;
}

.mra-checks > li::before {
  content: counter(mra-check);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mra-navy);
  color: var(--mra-gold);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mra-checks > li strong { color: var(--mra-navy); display: block; margin-bottom: 4px; }

.mra-facts { list-style: none; margin: 0; padding: 0; }

.mra-facts > li {
  padding: 14px 0;
  border-bottom: 1px solid var(--e-global-color-border, #E0E0E0);
}

.mra-facts > li:last-child { border-bottom: 0; }
.mra-facts .mra-facts-label { color: var(--mra-navy); font-weight: 600; margin-right: 6px; }

/* A visible marker for figures the client still has to supply. */
.mra-todo {
  background: var(--mra-gold-100);
  border-bottom: 2px dotted var(--mra-gold);
  padding: 0 4px;
  color: var(--mra-navy-900);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Contrast fixes for Navy background surfaces (when --primary is #0B163E)
   -------------------------------------------------------------------------- */
.bg-primary,
.categories-link,
.scrollup,
.pagination ul.page-numbers li .page-numbers.current,
.widget_calendar table caption,
.wp-block-calendar table caption,
.widget_calendar table #today,
.wp-block-calendar table #today {
  color: #ffffff !important;
}

.scrollup:hover,
.scrollup:focus,
.categories-link:hover,
.categories-link:focus,
.button-style:hover,
.elementor-swiper-button:hover,
.elementor-swiper-button:hover i,
#comments .comment-list .reply a.comment-reply-link:hover:before,
#comments .comment-list .reply a.comment-edit-link:hover:before {
  color: #ffffff !important;
}

.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary span, .bg-primary a, .bg-primary li, .bg-primary div {
  color: #ffffff !important;
}
.elementor-invisible {
  visibility: visible !important;
}

@media (max-width: 767px) {
  .elementor-element-dd4cc01 {
    padding-top: 195px !important;
  }
}

.elementor-element-c4843f7 {
  display: none !important;
}

.elementor-element-eb0e988,
.elementor-element-a497f97,
.elementor-element-342bce0 {
  display: none !important;
}