/**
 * Newral Properties - Overrides (do not edit main.css)
 * Brand primary: #1F225C
 * Load this AFTER assets/css/main.css
 */

@charset "UTF-8";

/* =========================================================
   1) Brand Variables (global)
   ========================================================= */
:root{
  --newral-primary: #1F225C;        /* Navy */
  --newral-primary-2: #2B2F7A;      /* Hover / alt */
  --newral-soft: rgba(31, 34, 92, 0.10);
  --newral-soft-2: rgba(31, 34, 92, 0.16);

  /* Override template variables (THESE drive the whole theme) */
  --accent-color: var(--newral-primary);
  --nav-hover-color: var(--newral-primary);

  /* Optional: tighten heading tone to match navy branding */
  --heading-color: #101227;
}

/* Optional: keep the “light background” feeling but with navy tint */
.light-background{
  --background-color: #F5F6FF;
  --surface-color: #ffffff;
}

/* Optional: if you use .accent-background sections, align them to navy */
.accent-background{
  --background-color: var(--newral-primary);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #ffffff;
  --surface-color: rgba(255,255,255,0.12);
  --contrast-color: #ffffff;
}

/* =========================================================
   2) Global clickable elements (links/buttons)
   ========================================================= */
a:hover{
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.btn,
button,
input[type="submit"],
input[type="button"]{
  border-radius: 10px;
}

/* Ensure primary buttons everywhere look consistent */
.btn-primary,
.btn.btn-primary,
.header .btn-getstarted,
.hero .search-form .btn-search,
.call-to-action .cta-actions .btn.btn-primary,
.featured-services .btn-all-services,
.featured-agents .profile-link{
  background: var(--newral-primary) !important;
  border-color: var(--newral-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.header .btn-getstarted:hover,
.hero .search-form .btn-search:hover,
.call-to-action .cta-actions .btn.btn-primary:hover,
.featured-services .btn-all-services:hover,
.featured-agents .profile-link:hover{
  background: var(--newral-primary-2) !important;
  border-color: var(--newral-primary-2) !important;
}

/* Outline buttons */
.btn-outline-primary,
.btn.btn-outline-primary{
  color: var(--newral-primary) !important;
  border-color: var(--newral-primary) !important;
}
.btn-outline-primary:hover,
.btn.btn-outline-primary:hover{
  background: var(--newral-primary) !important;
  color: #fff !important;
}

/* =========================================================
   3) Header / Nav polish (safe overrides)
   ========================================================= */
.header .header-container{
  border: 1px solid rgba(31, 34, 92, 0.08);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus{
  color: var(--newral-primary) !important;
}

/* Mobile toggle color */
.mobile-nav-toggle{
  color: var(--newral-primary) !important;
}

/* Dropdown hover */
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul li:hover > a{
  color: var(--newral-primary) !important;
}

/* =========================================================
   4) Forms focus ring (consistent navy)
   ========================================================= */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.form-control:focus,
.form-select:focus{
  border-color: var(--newral-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(31, 34, 92, 0.18) !important;
}

/* =========================================================
   5) Hero / badges / chips (make sure they use navy)
   ========================================================= */
.hero .hero-badge{
  background: var(--newral-primary) !important;
}

.section-title h2::after{
  background: var(--newral-primary) !important;
}

/* All “accent” icon bubbles use navy tint */
.footer .footer-contact .contact-item .contact-icon,
.home-about .content-wrapper .cta-wrapper .contact-quick i,
.featured-services .service-card .service-header .service-icon,
.call-to-action .cta-visual .floating-stats .stat-card .stat-icon{
  background-color: rgba(31, 34, 92, 0.10) !important;
}

/* =========================================================
   6) Properties + cards (keep existing layout, align colors)
   ========================================================= */
.properties .property-card .property-content .property-price,
.property-details .property-overview .price-tag,
.featured-properties .highlight-card .content .top .price{
  color: var(--newral-primary) !important;
}

.properties .pagination .page-item.active .page-link{
  background-color: var(--newral-primary) !important;
  border-color: var(--newral-primary) !important;
}

/* Any “for sale” badge should be navy */
.properties .property-card .property-image .property-badges .badge.for-sale{
  background-color: var(--newral-primary) !important;
}

/* =========================================================
   7) Footer bottom bar (navy)
   ========================================================= */
.footer .footer-bottom{
  background-color: var(--newral-primary) !important;
}

/* =========================================================
   8) Scroll-top button (navy)
   ========================================================= */
.scroll-top{
  background-color: rgba(31, 34, 92, 0.90) !important;
}
.scroll-top:hover{
  background-color: rgba(31, 34, 92, 1) !important;
}

/* =========================================================
   9) HEADER LOGO SIZE (RESTORE BIGGER LOGO)
   - Works for BOTH:
     <img class="logo-img"> and plain <img>
   - Does NOT change the image file or styling, only size.
   ========================================================= */
.header .logo img,
.header .logo .logo-img{
  height: 54px !important;
  max-height: 54px !important;
  width: auto !important;
}

@media (max-width: 992px){
  .header .logo img,
  .header .logo .logo-img{
    height: 48px !important;
    max-height: 48px !important;
  }
}